From f0b2ef0ef9c226527bc43297abf1150fee5241aa Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 3 May 2024 00:02:48 +0300
Subject: [PATCH 1/2] Fixed header icons

---
 .../AuthorBadge/AuthorBadge.module.scss       |  6 ++--
 .../Author/AuthorBadge/AuthorBadge.tsx        |  2 +-
 src/components/Nav/Header/Header.module.scss  | 30 +++++++++++++------
 src/components/Nav/HeaderAuth.tsx             | 14 ++++-----
 .../_shared/Button/Button.module.scss         |  2 +-
 5 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.module.scss b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
index ebd5d145..d3310486 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.module.scss
+++ b/src/components/Author/AuthorBadge/AuthorBadge.module.scss
@@ -60,11 +60,13 @@
   .bio {
     @include font-size(1.2rem);
 
+    color: var(--black-400);
     display: flex;
     flex-direction: row;
-    gap: 1rem;
-    color: var(--black-400);
     font-weight: 500;
+    gap: 1rem;
+    max-width: 100%;
+    word-break: break-word;
   }
 
   .actions {
diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index bc7c3bbd..69b96ebd 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -111,7 +111,7 @@ export const AuthorBadge = (props: Props) => {
               }
             >
               <Match when={props.author.bio}>
-                <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
+                <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio}/>
               </Match>
             </Switch>
             <Show when={props.author?.stat}>
diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 33ab5b6e..c1c6e9e9 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/src/components/Nav/Header/Header.module.scss
@@ -523,6 +523,7 @@
   height: 2.8rem;
   justify-content: center;
   margin: 0 0.4rem;
+  order: 2;
   position: relative;
   transition: margin-left 0.3s;
   width: 2.8rem;
@@ -533,7 +534,7 @@
     width: 3.2rem;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include media-breakpoint-down(xl) {
     margin-left: 0.4rem !important;
   }
 
@@ -584,6 +585,10 @@
 
 .userControlItemSearch {
   margin: 0 1rem 0 2.2rem;
+
+  @include media-breakpoint-down(xl) {
+    order: 1;
+  }
 }
 
 .userControlItemUserpic {
@@ -596,13 +601,6 @@
   }
 }
 
-.userControlItemInbox,
-.userControlItemSearch {
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-}
-
 .userControlItemVerbose {
   align-items: stretch;
   display: flex;
@@ -682,7 +680,9 @@
     }
 
     &:hover {
-      background-color: var(--link-hover-background);
+      @include media-breakpoint-up(xl) {
+        background-color: var(--link-hover-background);
+      }
 
       &,
       .textLabel {
@@ -708,6 +708,18 @@
   }
 }
 
+.userControlItemCreate {
+  .icon {
+    height: 2.8rem;
+    width: 2.8rem;
+
+    @include media-breakpoint-up(md) {
+      height: 3.2rem;
+      width: 3.2rem;
+    }
+  }
+}
+
 .subnavigation {
   background: #000;
   color: #fff;
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index 7f439b94..a19d41fa 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -107,11 +107,11 @@ export const HeaderAuth = (props: Props) => {
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
             <Show when={isCreatePostButtonVisible() && isAuthenticated()}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, styles.userControlItemCreate)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
-                  <Icon name="pencil" class={styles.icon} />
-                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
+                  <Icon name="pencil-outline" class={styles.icon} />
+                  <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
             </Show>
@@ -215,11 +215,11 @@ export const HeaderAuth = (props: Props) => {
             </Show>
 
             <Show when={isCreatePostButtonVisible() && !isAuthenticated()}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose)}>
+              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, styles.userControlItemCreate)}>
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
-                  <Icon name="pencil" class={styles.icon} />
-                  <Icon name="pencil" class={clsx(styles.icon, styles.iconHover)} />
+                  <Icon name="pencil-outline" class={styles.icon} />
+                  <Icon name="pencil-outline-hover" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
             </Show>
@@ -232,7 +232,7 @@ export const HeaderAuth = (props: Props) => {
                     <a href="?m=auth&mode=login">
                       <span class={styles.textLabel}>{t('Enter')}</span>
                       <Icon name="key" class={styles.icon} />
-                      {/*<Icon name="user-default" class={clsx(styles.icon, styles.iconHover)} />*/}
+                      <Icon name="key" class={clsx(styles.icon, styles.iconHover)} />
                     </a>
                   </div>
                 </Show>
diff --git a/src/components/_shared/Button/Button.module.scss b/src/components/_shared/Button/Button.module.scss
index cbca6357..5ab6be16 100644
--- a/src/components/_shared/Button/Button.module.scss
+++ b/src/components/_shared/Button/Button.module.scss
@@ -141,7 +141,7 @@
     float: none;
     padding-bottom: 0.6rem;
     padding-top: 0.6rem;
-    width: 10em;
+    width: 9em;
 
     .icon {
       img {

From 3bb0044f6ee0aad81ba2c99008fdacee111601d8 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Fri, 3 May 2024 00:06:03 +0300
Subject: [PATCH 2/2] Code style fixes

---
 .../Author/AuthorBadge/AuthorBadge.tsx           |  2 +-
 src/components/Nav/HeaderAuth.tsx                | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/Author/AuthorBadge/AuthorBadge.tsx b/src/components/Author/AuthorBadge/AuthorBadge.tsx
index 69b96ebd..bc7c3bbd 100644
--- a/src/components/Author/AuthorBadge/AuthorBadge.tsx
+++ b/src/components/Author/AuthorBadge/AuthorBadge.tsx
@@ -111,7 +111,7 @@ export const AuthorBadge = (props: Props) => {
               }
             >
               <Match when={props.author.bio}>
-                <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio}/>
+                <div class={clsx('text-truncate', styles.bio)} innerHTML={props.author.bio} />
               </Match>
             </Switch>
             <Show when={props.author?.stat}>
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index a19d41fa..0a9cbd36 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/src/components/Nav/HeaderAuth.tsx
@@ -107,7 +107,13 @@ export const HeaderAuth = (props: Props) => {
         <div class={clsx('col-auto col-lg-7', styles.usernav)}>
           <div class={styles.userControl}>
             <Show when={isCreatePostButtonVisible() && isAuthenticated()}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, styles.userControlItemCreate)}>
+              <div
+                class={clsx(
+                  styles.userControlItem,
+                  styles.userControlItemVerbose,
+                  styles.userControlItemCreate,
+                )}
+              >
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
                   <Icon name="pencil-outline" class={styles.icon} />
@@ -215,7 +221,13 @@ export const HeaderAuth = (props: Props) => {
             </Show>
 
             <Show when={isCreatePostButtonVisible() && !isAuthenticated()}>
-              <div class={clsx(styles.userControlItem, styles.userControlItemVerbose, styles.userControlItemCreate)}>
+              <div
+                class={clsx(
+                  styles.userControlItem,
+                  styles.userControlItemVerbose,
+                  styles.userControlItemCreate,
+                )}
+              >
                 <a href={getPagePath(router, 'create')}>
                   <span class={styles.textLabel}>{t('Create post')}</span>
                   <Icon name="pencil-outline" class={styles.icon} />