From 4ca01e5a027e44a3712c4c2b05bb98b2e5232875 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 1 Nov 2023 00:21:30 +0300
Subject: [PATCH] Header buttons style fixes

---
 src/components/Nav/Header/Header.module.scss | 27 +++++++++++-
 src/components/Nav/Header/Header.tsx         |  5 +++
 src/components/Nav/HeaderAuth.tsx            | 43 ++++++++++++--------
 3 files changed, 55 insertions(+), 20 deletions(-)

diff --git a/src/components/Nav/Header/Header.module.scss b/src/components/Nav/Header/Header.module.scss
index 37a11d66..7f34ffc7 100644
--- a/src/components/Nav/Header/Header.module.scss
+++ b/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);
+    }
   }
 }
 
diff --git a/src/components/Nav/Header/Header.tsx b/src/components/Nav/Header/Header.tsx
index 7dbe5026..22179cee 100644
--- a/src/components/Nav/Header/Header.tsx
+++ b/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')}>
diff --git a/src/components/Nav/HeaderAuth.tsx b/src/components/Nav/HeaderAuth.tsx
index fe7eb0a6..1ca47d3b 100644
--- a/src/components/Nav/HeaderAuth.tsx
+++ b/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>
 
-            <div class={styles.userControlItem}>
-              <a href="#">
-                <Icon name="search" class={styles.icon} />
-                <Icon name="search" class={clsx(styles.icon, styles.iconHover)} />
-              </a>
-            </div>
+            <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,15 +196,17 @@ export const HeaderAuth = (props: Props) => {
                 </div>
               }
             >
-              <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
-                <a href="/inbox">
-                  {/*FIXME: replace with route*/}
-                  <div classList={{ entered: page().path === '/inbox' }}>
-                    <Icon name="inbox-white" class={styles.icon} />
-                    <Icon name="inbox-white-hover" class={clsx(styles.icon, styles.iconHover)} />
-                  </div>
-                </a>
-              </div>
+              <Show when={!isSaveButtonVisible()}>
+                <div class={clsx(styles.userControlItem, styles.userControlItemInbox)}>
+                  <a href="/inbox">
+                    {/*FIXME: replace with route*/}
+                    <div classList={{ entered: page().path === '/inbox' }}>
+                      <Icon name="inbox-white" class={styles.icon} />
+                      <Icon name="inbox-white-hover" class={clsx(styles.icon, styles.iconHover)} />
+                    </div>
+                  </a>
+                </div>
+              </Show>
               <ProfilePopup
                 onVisibilityChange={(isVisible) => {
                   props.setIsProfilePopupVisible(isVisible)