From 0675c7e5026dd90011ef2e54495e26ebe71c504a Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Mon, 16 Aug 2021 23:26:32 +0500
Subject: [PATCH] GH-965 - Updating global nav right sidebar buttons (#983)

* GH-965 - Updating global nav right sidebar buttons

* Updating test
---
 .../__snapshots__/globalHeader.test.tsx.snap  |  4 +-
 .../globalHeaderSettingsMenu.test.tsx.snap    |  6 +--
 .../components/globalHeader/globalHeader.scss | 37 ++++++++++++++++---
 .../components/globalHeader/globalHeader.tsx  |  2 +-
 .../globalHeaderSettingsMenu.scss             | 21 -----------
 .../globalHeader/globalHeaderSettingsMenu.tsx |  2 +-
 webapp/src/widgets/icons/settings.scss        |  4 --
 7 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap b/webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap
index 225eaa1e6..bd32bf02f 100644
--- a/webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap
+++ b/webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/sidebar/GlobalHeader header menu should match snapshot 1`] =
       class="spacer"
     />
     <a
-      class="help-button"
+      class="GlobalHeaderComponent__button help-button"
       href="https://www.focalboard.com/guide/user?utm_source=webapp"
       rel="noreferrer"
       target="_blank"
@@ -25,7 +25,7 @@ exports[`components/sidebar/GlobalHeader header menu should match snapshot 1`] =
         class="MenuWrapper"
       >
         <div
-          class="menu-entry"
+          class="GlobalHeaderComponent__button menu-entry"
         >
           <i
             class="CompassIcon icon-settings-outline SettingsIcon"
diff --git a/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap b/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap
index 897e04b5d..9de77a584 100644
--- a/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap
+++ b/webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
       class="MenuWrapper"
     >
       <div
-        class="menu-entry"
+        class="GlobalHeaderComponent__button menu-entry"
       >
         <i
           class="CompassIcon icon-settings-outline SettingsIcon"
@@ -369,7 +369,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu closed should
       class="MenuWrapper"
     >
       <div
-        class="menu-entry"
+        class="GlobalHeaderComponent__button menu-entry"
       >
         <i
           class="CompassIcon icon-settings-outline SettingsIcon"
@@ -389,7 +389,7 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
       class="MenuWrapper"
     >
       <div
-        class="menu-entry"
+        class="GlobalHeaderComponent__button menu-entry"
       >
         <i
           class="CompassIcon icon-settings-outline SettingsIcon"
diff --git a/webapp/src/components/globalHeader/globalHeader.scss b/webapp/src/components/globalHeader/globalHeader.scss
index f3445befb..6f546a8c2 100644
--- a/webapp/src/components/globalHeader/globalHeader.scss
+++ b/webapp/src/components/globalHeader/globalHeader.scss
@@ -1,18 +1,43 @@
 .GlobalHeaderComponent {
     display: flex;
     flex-direction: row;
-    margin-right: 20px;
     width: 100%;
+    margin-right: -8px;
+
     .spacer {
         flex-grow: 1;
     }
-    .help-button {
+
+    .GlobalHeaderComponent__button {
+        width: 28px;
+        height: 28px;
         display: flex;
         align-items: center;
-        padding: 0 17px;
-    }
-    .HelpIcon {
+        justify-content: center;
+        border-radius: 4px;
         color: rgba(var(--sidebar-text-rgb), 0.64);
-        font-size: 20px;
+        margin-left: 8px;
+
+        i {
+            font-size: 18px;
+            width: 18px;
+            height: 18px;
+            display: flex;
+
+            &:before {
+                margin: 0;
+            }
+        }
+
+        &:hover {
+            background-color: rgba(var(--sidebar-text-rgb), 0.08);
+            color: rgba(var(--sidebar-text-rgb), 0.72);
+        }
+
+        &:active {
+            background-color: rgba(var(--sidebar-text-rgb), 0.16);
+            color: rgba(var(--sidebar-text-rgb), 1);
+        }
     }
+
 }
diff --git a/webapp/src/components/globalHeader/globalHeader.tsx b/webapp/src/components/globalHeader/globalHeader.tsx
index 2489959c3..d0556f0a9 100644
--- a/webapp/src/components/globalHeader/globalHeader.tsx
+++ b/webapp/src/components/globalHeader/globalHeader.tsx
@@ -28,7 +28,7 @@ const HeaderItems = () => {
                     href='https://www.focalboard.com/guide/user?utm_source=webapp'
                     target='_blank'
                     rel='noreferrer'
-                    className='help-button'
+                    className='GlobalHeaderComponent__button help-button'
                 >
                     <HelpIcon/>
                 </a>
diff --git a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss
index 39eb17af2..e69de29bb 100644
--- a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss
+++ b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.scss
@@ -1,21 +0,0 @@
-.focalboard-body .GlobalHeaderSettingsMenu {
-    .menu-entry {
-        display: flex;
-        flex-direction: row;
-        padding: 0 16px 0 8px;
-        height: 36px;
-        align-items: center;
-        padding-left: 20px;
-        color: rgba(var(--sidebar-text-rgb), 0.64);
-        font-weight: 400;
-
-        &:hover {
-            background-color: rgba(var(--sidebar-text-rgb), 0.08);
-            display: flex;
-        }
-    }
-    .SettingsIcon {
-        color: rgba(var(--sidebar-text-rgb), 0.64);
-        font-size: 20px;
-    }
-}
diff --git a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.tsx b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.tsx
index 67510244e..48af64c21 100644
--- a/webapp/src/components/globalHeader/globalHeaderSettingsMenu.tsx
+++ b/webapp/src/components/globalHeader/globalHeaderSettingsMenu.tsx
@@ -85,7 +85,7 @@ const GlobalHeaderSettingsMenu = React.memo(() => {
     return (
         <div className='GlobalHeaderSettingsMenu'>
             <MenuWrapper>
-                <div className='menu-entry'>
+                <div className='GlobalHeaderComponent__button menu-entry'>
                     <SettingsIcon/>
                 </div>
                 <Menu position='left'>
diff --git a/webapp/src/widgets/icons/settings.scss b/webapp/src/widgets/icons/settings.scss
index 4759dd489..e69de29bb 100644
--- a/webapp/src/widgets/icons/settings.scss
+++ b/webapp/src/widgets/icons/settings.scss
@@ -1,4 +0,0 @@
-.focalboard-body .SettingsIcon {
-    color: rgba(var(--body-color), 0.5);
-    font-size: 16px;
-}