change(ui) - header menu

frontend/app/components/Header/DefaultMenuView/DefaultMenuView.tsx

@@ -36,7 +36,6 @@ function DefaultMenuView(props: Props) {
         </div>
       </NavLink>
       <SiteDropdown />
-      {/* <div className={ styles.divider } /> */}
 
       <NavLink
         to={withSiteId(SESSIONS_PATH, siteId)}

frontend/app/components/Header/Header.js

@@ -9,22 +9,18 @@ import {
   client,
   dashboard,
   alerts,
-  withSiteId,
   CLIENT_DEFAULT_TAB,
 } from 'App/routes';
 import { logout } from 'Duck/user';
 import { Icon, Popup } from 'UI';
-import SiteDropdown from './SiteDropdown';
 import styles from './header.module.css';
 import OnboardingExplore from './OnboardingExplore/OnboardingExplore';
-import Announcements from '../Announcements';
 import Notifications from '../Alerts/Notifications';
 import { init as initSite } from 'Duck/site';
 import { getInitials } from 'App/utils';
 
 import ErrorGenPanel from 'App/dev/components';
 import Alerts from '../Alerts/Alerts';
-import AnimatedSVG, { ICONS } from '../shared/AnimatedSVG/AnimatedSVG';
 import { fetchListActive as fetchMetadata } from 'Duck/customField';
 import { useStore } from 'App/mstore';
 import { useObserver } from 'mobx-react-lite';
@@ -33,19 +29,12 @@ import SettingsMenu from './SettingsMenu';
 import DefaultMenuView from './DefaultMenuView';
 import PreferencesView from './PreferencesView';
 
-const DASHBOARD_PATH = dashboard();
-const ALERTS_PATH = alerts();
-const METRICS_PATH = metrics();
-const SESSIONS_PATH = sessions();
-const ASSIST_PATH = assist();
 const CLIENT_PATH = client(CLIENT_DEFAULT_TAB);
 
 const Header = (props) => {
   const {
     sites,
-    location,
     account,
-    onLogoutClick,
     siteId,
     boardingCompletion = 100,
     showAlerts = false,

frontend/app/components/Header/SiteDropdown.js

@@ -68,13 +68,14 @@ export default class SiteDropdown extends React.PureComponent {
 
         return (
             <div className={styles.wrapper}>
-                <div className={cn(styles.currentSite, 'ml-2')}>{showCurrent && activeSite ? activeSite.host : 'All Projects'}</div>
+                <div className={cn(styles.currentSite)}>{showCurrent && activeSite ? activeSite.host : 'All Projects'}</div>
                 <Icon className={styles.drodownIcon} color="gray-light" name="chevron-down" size="16" />
                 <div className={styles.menu}>
                     <ul data-can-disable={disabled}>
                         {isAdmin && (
                             <NewProjectButton onClick={this.newSite} isAdmin={isAdmin} />
                         )}
+                        <div className="border-b border-dashed mb-1" />
                         {sites.map((site) => (
                             <li key={site.id} onClick={() => this.switchSite(site.id)}>
                                 <Icon name="folder2" size="16" />

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

@@ -2,15 +2,17 @@
   display: flex;
   align-items: center;
   /* border-left: solid thin $gray-light !important; */
-  padding: 10px 10px;
+  padding: 10px;
   min-width: 180px;
   justify-content: flex-start;
   position: relative;
   user-select: none;
   border: solid thin transparent;
-  height: 100%;
+  height: 32px;
+  border: solid thin $gray-light;
   border-radius: 3px;
   margin: 10px;
+  cursor: pointer;
 
   &:hover {
     background-color: $active-blue;
@@ -44,7 +46,7 @@
   & .menu {
     display: none;
     position: absolute;
-    top: 48px;
+    top: 32px;
     left: -1px;
     background-color: white;
     min-width: 200px;
@@ -57,6 +59,7 @@
     margin: 0;
     max-height: 300px;
     overflow-y: auto;
+    padding: 10px;
 
     &::-webkit-scrollbar {
       width: 2px;
@@ -64,15 +67,19 @@
 
     & li {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       cursor: pointer;
       list-style-type: none;
-      border-bottom: 1px solid $gray-light;
-      border-top: none;
-      padding: 10px 15px;
+      border: solid thin transparent;
+      /* border-top: none; */
+      padding: 10px;
       transition: all 0.2s;
+      line-height: 16px;
+      border-radius: 3px;
+
       &:hover {
-        background-color: $gray-lightest;
+        background-color: $active-blue;
+        border-color: $active-blue-border;
         transition: all 0.2s;
         color: $teal;
         svg {