change(ui) - header menu

frontend/app/components/Alerts/Notifications/Notifications.tsx

@@ -22,24 +22,30 @@ function Notifications(props: Props) {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      notificationStore.fetchNotificationsCount()
+      notificationStore.fetchNotificationsCount();
     }, AUTOREFRESH_INTERVAL);
 
     return () => clearInterval(interval);
   }, []);
 
   return useObserver(() => (
-      <Popup content={ `Alerts` } >
-        <div className={ stl.button } onClick={ () => showModal(<AlertTriggersModal />, { right: true }) }>
-          <div className={ stl.counter } data-hidden={ count === 0 }>
-            { count }
-          </div>
-          <Icon name="bell-fill" size="18" />
+    <Popup content={`Alerts`}>
+      <div
+        className={stl.button}
+        onClick={() => showModal(<AlertTriggersModal />, { right: true })}
+      >
+        <div className={stl.counter} data-hidden={count === 0}>
+          {count}
         </div>
-      </Popup>
+        <Icon name="bell" size="18" color="gray-dark" />
+      </div>
+    </Popup>
   ));
 }
 
-export default connect((state: any) => ({
-  notifications: state.getIn(['notifications', 'list']),
-}), { fetchList, setLastRead, setViewed, clearAll })(Notifications);
+export default connect(
+  (state: any) => ({
+    notifications: state.getIn(['notifications', 'list']),
+  }),
+  { fetchList, setLastRead, setViewed, clearAll }
+)(Notifications);

frontend/app/components/Alerts/Notifications/notifications.module.css

@@ -9,16 +9,16 @@
   display: flex;
   align-items: center;
   padding: 0 15px;  
-  height: 50px;
+  height: 49px;
   transition: all 0.3s;
 
   &:hover {
-    background-color: $gray-lightest;
+    background-color: $active-blue;
     transition: all 0.2s;
   }
 
   &[data-active=true] {
-    background-color: $gray-lightest;
+    background-color: $active-blue;
   }
 }
 

frontend/app/components/Header/Header.js

@@ -2,15 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { NavLink, withRouter } from 'react-router-dom';
 import cn from 'classnames';
-import {
-  sessions,
-  metrics,
-  assist,
-  client,
-  dashboard,
-  alerts,
-  CLIENT_DEFAULT_TAB,
-} from 'App/routes';
+import { client, CLIENT_DEFAULT_TAB } from 'App/routes';
 import { logout } from 'Duck/user';
 import { Icon, Popup } from 'UI';
 import styles from './header.module.css';
@@ -32,13 +24,7 @@ import PreferencesView from './PreferencesView';
 const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
 
 const Header = (props) => {
-  const {
-    sites,
-    account,
-    siteId,
-    boardingCompletion = 100,
-    showAlerts = false,
-  } = props;
+  const { sites, account, siteId, boardingCompletion = 100, showAlerts = false } = props;
 
   const name = account.get('name');
   const [hideDiscover, setHideDiscover] = useState(false);
@@ -47,10 +33,6 @@ const Header = (props) => {
   let activeSite = null;
   const isPreferences = window.location.pathname.includes('/client/');
 
-  const onAccountClick = () => {
-    props.history.push(CLIENT_PATH);
-  };
-
   useEffect(() => {
     if (!account.id || initialDataFetched) return;
 
@@ -85,15 +67,17 @@ const Header = (props) => {
         )}
 
         <Notifications />
-        <Popup content={`Preferences`} disabled>
-          <div className="group relative">
-            <NavLink to={CLIENT_PATH} className={styles.headerIcon}>
-              <Icon name="gear-fill" size="20" />
-            </NavLink>
+        <div className={cn(styles.userDetails, 'group cursor-pointer')}>
+          <Popup content={`Preferences`} disabled>
+            <div className="flex items-center">
+              <NavLink to={CLIENT_PATH}>
+                <Icon name="gear" size="20" color="gray-dark" />
+              </NavLink>
 
-            <SettingsMenu className="invisible group-hover:visible" account={account} />
-          </div>
-        </Popup>
+              <SettingsMenu className="invisible group-hover:visible" account={account} />
+            </div>
+          </Popup>
+        </div>
 
         <div className={cn(styles.userDetails, 'group cursor-pointer')}>
           <div className="flex items-center">

frontend/app/components/Header/SettingsMenu/SettingsMenu.tsx

@@ -30,8 +30,8 @@ function SettingsMenu(props: RouteComponentProps<Props>) {
   };
   return (
     <div
-      style={{ width: '150px' }}
-      className={cn(className, 'absolute right-0 top-0 bg-white border mt-14')}
+      style={{ width: '150px', marginTop: '50px' }}
+      className={cn(className, 'absolute right-0 top-0 bg-white border p-2')}
     >
       {isAdmin && (
         <>
@@ -56,7 +56,7 @@ export default withRouter(SettingsMenu);
 function MenuItem({ onClick, label, icon }: any) {
   return (
     <div
-      className="border-t p-3 cursor-pointer flex items-center hover:bg-active-blue"
+      className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border"
       onClick={onClick}
     >
       <Icon name={icon} size="16" />

frontend/app/components/Header/UserMenu/UserMenu.tsx

@@ -26,22 +26,33 @@ function UserMenu(props: RouteComponentProps<Props>) {
       style={{ width: '250px' }}
       className={cn(className, 'absolute right-0 top-0 bg-white border mt-14')}
     >
-      <div className="flex items-center p-3">
+      <div className="flex items-start p-3 border-b border-dashed">
         <div className="w-10 h-10 bg-tealx rounded-full flex items-center justify-center mr-2 color-white shrink-0">
           {getInitials(account.name)}
         </div>
         <div className="overflow-hidden">
           <div className="color-teal font-medium leading-none">{account.name}</div>
-          <div className="overflow-hidden whitespace-nowrap color-gray-medium text-ellipsis">{account.superAdmin ? 'Super Admin' : (account.admin ? 'Admin' : 'Member') } - {account.email}</div>
+          <div className="overflow-hidden whitespace-nowrap color-gray-medium text-ellipsis">
+            {account.email}
+          </div>
+          <div className="rounded-full bg-gray-light flex items-center px-2 color-gray-medium text-sm w-fit text-center">{account.superAdmin ? 'Super Admin' : account.admin ? 'Admin' : 'Member'}</div>
         </div>
       </div>
-      <div className="border-t flex items-center hover:bg-active-blue p-3" onClick={onAccountClick}>
-        <Icon name="user-circle" size="16" />
-        <button className="ml-2">{'Account'}</button>
-      </div>
-      <div className="border-t flex items-center hover:bg-active-blue p-3" onClick={onLogoutClick}>
-        <Icon name="door-closed" size="16" />
-        <button className="ml-2">{'Logout'}</button>
+      <div className="p-2">
+        <div
+          className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border"
+          onClick={onAccountClick}
+        >
+          <Icon name="user-circle" size="16" />
+          <button className="ml-2">{'Account'}</button>
+        </div>
+        <div
+          className="rounded border border-transparent p-2 cursor-pointer flex items-center hover:bg-active-blue hover:!border-active-blue-border"
+          onClick={onLogoutClick}
+        >
+          <Icon name="door-closed" size="16" />
+          <button className="ml-2">{'Logout'}</button>
+        </div>
       </div>
     </div>
   );

frontend/app/components/Header/header.module.css

@@ -74,11 +74,11 @@ $height: 50px;
   align-items: center;
   justify-content: center;
   position: relative;
-  padding: 0 10px;
+  padding: 0 14px;
   transition: all 0.2s;
 
   &:hover {
-    background-color: $gray-lightest;
+    background-color: $active-blue;
     transition: all 0.2s;
     & ul {
       display: block;
@@ -127,8 +127,8 @@ $height: 50px;
   cursor: pointer;
   display: flex;
   align-items: center;
-  padding: 0 15px;  
-  height: 50px;
+  padding: 0 6px;  
+  height: 49px;
   transition: all 0.3s;
 
   &:hover {

frontend/app/styles/colors-autogen.css

@@ -35,6 +35,7 @@
 .fill-light-blue-bg { fill: $light-blue-bg }
 .fill-white { fill: $white }
 .fill-borderColor { fill: $borderColor }
+.fill-transparent { fill: $transparent }
 .fill-figmaColors { fill: $figmaColors }
 
 /* color */
@@ -72,6 +73,7 @@
 .color-light-blue-bg { color: $light-blue-bg }
 .color-white { color: $white }
 .color-borderColor { color: $borderColor }
+.color-transparent { color: $transparent }
 .color-figmaColors { color: $figmaColors }
 
 /* hover color */
@@ -109,6 +111,7 @@
 .hover-light-blue-bg:hover { color: $light-blue-bg }
 .hover-white:hover { color: $white }
 .hover-borderColor:hover { color: $borderColor }
+.hover-transparent:hover { color: $transparent }
 .hover-figmaColors:hover { color: $figmaColors }
 
 .border-main { border-color: $main }
@@ -145,4 +148,5 @@
 .border-light-blue-bg { border-color: $light-blue-bg }
 .border-white { border-color: $white }
 .border-borderColor { border-color: $borderColor }
+.border-transparent { border-color: $transparent }
 .border-figmaColors { border-color: $figmaColors }

frontend/app/svg/icons/gear.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
+  <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z"/>
+  <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z"/>
+</svg>

frontend/app/theme/colors.js

@@ -44,6 +44,7 @@ module.exports = {
     'primary': '#3490dc',
     'transparent': 'transparent',
   },
+  transparent: 'transparent',
 
   // actual theme colors - use this for new components
   figmaColors: {