GH-965 - Updating global nav right sidebar buttons (#983)

* GH-965 - Updating global nav right sidebar buttons * Updating test
mattermost-community · Aug 16, 2021 · 0438b88 · 0438b88
1 parent a8cf6f8
commit 0438b88
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 38 deletions.
diff --git 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
@@ -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"
@@ -339,7 +339,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"
@@ -359,7 +359,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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,4 +0,0 @@
-.focalboard-body .SettingsIcon {
-    color: rgba(var(--body-color), 0.5);
-    font-size: 16px;
-}