Fixed header icons (#451)

* Fixed header icons

* Code style fixes

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 {

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 {
+      @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;

src/components/Nav/HeaderAuth.tsx

@@ -107,11 +107,17 @@ 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 +221,17 @@ 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 +244,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>

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 {