Header buttons style fixes

src/components/Nav/Header/Header.module.scss

@@ -482,6 +482,28 @@
       width: 100%;
     }
   }
+
+  .editorControl {
+    border-radius: 1.2em;
+
+    &:hover {
+      background: var(--background-color-invert);
+    }
+  }
+
+  .settingsControl {
+    border-radius: 100%;
+    padding: 0.8rem !important;
+    min-width: 4rem !important;
+
+    &:hover {
+      background: var(--background-color-invert);
+
+      img {
+        filter: invert(1);
+      }
+    }
+  }
 }
 
 .userControlItem {
@@ -620,13 +642,14 @@
     }
 
     .textLabel {
-      background-color: var(--link-hover-background);
       color: var(--link-hover-color);
     }
   }
 
   a:hover {
-    // background-color: var(--link-hover-background) !important;
+    .textLabel {
+      background-color: var(--link-hover-background);
+    }
   }
 }
 

src/components/Nav/Header/Header.tsx

@@ -24,6 +24,7 @@ import { apiClient } from '../../../utils/apiClient'
 import { RANDOM_TOPICS_COUNT } from '../../Views/Home'
 import { Link } from './Link'
 import { Subscribe } from '../../_shared/Subscribe'
+import { SearchModal } from '../SearchModal/SearchModal'
 
 type Props = {
   title?: string
@@ -183,6 +184,10 @@ export const Header = (props: Props) => {
         <ConfirmModal />
       </Modal>
 
+      <Modal variant="wide" name="search">
+        <SearchModal />
+      </Modal>
+
       <div class={clsx(styles.mainHeaderInner, 'wide-container')}>
         <nav class={clsx('row', styles.headerInner, { ['fixed']: fixed() })}>
           <div class={clsx(styles.burgerContainer, 'col-auto')}>

src/components/Nav/HeaderAuth.tsx

@@ -86,8 +86,9 @@ export const HeaderAuth = (props: Props) => {
         fallback={
           <Button
             value={<span class={styles.textLabel}>{buttonProps.value}</span>}
-            variant={'outline'}
+            variant={'light'}
             onClick={buttonProps.action}
+            class={styles.editorControl}
           />
         }
       >
@@ -95,9 +96,10 @@ export const HeaderAuth = (props: Props) => {
           {(ref) => (
             <Button
               ref={ref}
-              variant={'outline'}
+              variant={'light'}
               onClick={buttonProps.action}
               value={<Icon name={buttonProps.icon} class={styles.icon} />}
+              class={styles.editorControl}
             />
           )}
         </Popover>
@@ -120,12 +122,14 @@ export const HeaderAuth = (props: Props) => {
               </div>
             </Show>
 
+            <Show when={!isSaveButtonVisible()}>
               <div class={styles.userControlItem}>
                 <a href="#">
                   <Icon name="search" class={styles.icon} />
                   <Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
                 </a>
               </div>
+            </Show>
 
             <Show when={isNotificationsVisible()}>
               <div class={styles.userControlItem} onClick={handleBellIconClick}>
@@ -172,8 +176,9 @@ export const HeaderAuth = (props: Props) => {
                     <Button
                       ref={ref}
                       value={<Icon name="burger" />}
-                      variant={'outline'}
+                      variant={'light'}
                       onClick={handleBurgerButtonClick}
+                      class={styles.settingsControl}
                     />
                   )}
                 </Popover>
@@ -191,6 +196,7 @@ export const HeaderAuth = (props: Props) => {
                 </div>
               }
             >
+              <Show when={!isSaveButtonVisible()}>
                 <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
                   <a href="/inbox">
                     {/*FIXME: replace with route*/}
@@ -200,6 +206,7 @@ export const HeaderAuth = (props: Props) => {
                     </div>
                   </a>
                 </div>
+              </Show>
               <ProfilePopup
                 onVisibilityChange={(isVisible) => {
                   props.setIsProfilePopupVisible(isVisible)