change(ui) - header menu

frontend/app/components/Header/SiteDropdown.js

@@ -17,74 +17,76 @@ import NewProjectButton from './NewProjectButton';
 @withStore
 @withRouter
 @connect(
-    (state) => ({
-        sites: state.getIn(['site', 'list']),
-        siteId: state.getIn(['site', 'siteId']),
-        account: state.getIn(['user', 'account']),
-    }),
-    {
-        setSiteId,
-        pushNewSite,
-        init,
-        clearSearch,
-        clearSearchLive,
-        fetchIntegrationVariables,
-    }
+  (state) => ({
+    sites: state.getIn(['site', 'list']),
+    siteId: state.getIn(['site', 'siteId']),
+    account: state.getIn(['user', 'account']),
+  }),
+  {
+    setSiteId,
+    pushNewSite,
+    init,
+    clearSearch,
+    clearSearchLive,
+    fetchIntegrationVariables,
+  }
 )
 export default class SiteDropdown extends React.PureComponent {
-    state = { showProductModal: false };
+  state = { showProductModal: false };
 
-    closeModal = (e, newSite) => {
-        this.setState({ showProductModal: false });
-    };
+  closeModal = (e, newSite) => {
+    this.setState({ showProductModal: false });
+  };
 
-    newSite = () => {
-        this.props.init({});
-        this.setState({ showProductModal: true });
-    };
+  newSite = () => {
+    this.props.init({});
+    this.setState({ showProductModal: true });
+  };
 
-    switchSite = (siteId) => {
-        const { mstore, location } = this.props;
+  switchSite = (siteId) => {
+    const { mstore, location } = this.props;
 
-        this.props.setSiteId(siteId);
-        this.props.fetchIntegrationVariables();
-        this.props.clearSearch(location.pathname.includes('/sessions'));
-        this.props.clearSearchLive();
+    this.props.setSiteId(siteId);
+    this.props.fetchIntegrationVariables();
+    this.props.clearSearch(location.pathname.includes('/sessions'));
+    this.props.clearSearchLive();
 
-        mstore.initClient();
+    mstore.initClient();
+  };
+
+  render() {
+    const {
+      sites,
+      siteId,
+      account,
+      location: { pathname },
+    } = this.props;
+    const isAdmin = account.admin || account.superAdmin;
+    const activeSite = sites.find((s) => s.id == siteId);
+    const disabled = !siteChangeAvaliable(pathname);
+    const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
+
+    return (
+      <div style={{ width: '180px'}}>
+        <div className={styles.wrapper}>
+          <div className={cn(styles.currentSite)}>
+            {showCurrent && activeSite ? activeSite.host : 'All Projects'}
+          </div>
+          <Icon className={styles.dropdownIcon} color="gray-dark" 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" />
+                  <span className="ml-3">{site.host}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </div>
+    );
   }
-
-    render() {
-        const {
-            sites,
-            siteId,
-            account,
-            location: { pathname },
-        } = this.props;
-        const isAdmin = account.admin || account.superAdmin;
-        const activeSite = sites.find((s) => s.id == siteId);
-        const disabled = !siteChangeAvaliable(pathname);
-        const showCurrent = hasSiteId(pathname) || siteChangeAvaliable(pathname);
-
-        return (
-            <div className={styles.wrapper}>
-                <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" />
-                                <span className="ml-3">{site.host}</span>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            </div>
-        );
-    }
 }

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

@@ -30,12 +30,14 @@ function UserMenu(props: RouteComponentProps<Props>) {
         <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="overflow-hidden leading-8">
           <div className="color-teal font-medium leading-none">{account.name}</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 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="p-2">

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

@@ -3,21 +3,20 @@
   align-items: center;
   /* border-left: solid thin $gray-light !important; */
   padding: 10px;
-  min-width: 180px;
+  width: fit-content;
   justify-content: flex-start;
   position: relative;
   user-select: none;
-  border: solid thin transparent;
-  height: 32px;
-  border: solid thin $gray-light;
+  height: 50px;
+  /* border: solid thin $gray-light; */
   border-radius: 3px;
-  margin: 10px;
+  margin: 0 10px;
   cursor: pointer;
 
   &:hover {
     background-color: $active-blue;
     /* border: solid thin $active-blue-border; */
-    & .drodownIcon {
+    & .dropdownIcon {
       transform: rotate(180deg);
       transition: all 0.2s;
     }
@@ -26,10 +25,10 @@
     }
   }
 
-  & .drodownIcon {
+  & .dropdownIcon {
     transition: all 0.4s;
     margin: 0;
-    margin-left: auto;
+    margin-left: 8px;
   }
 
   & [data-can-disable=true] {
@@ -46,13 +45,13 @@
   & .menu {
     display: none;
     position: absolute;
-    top: 32px;
+    top: 50px;
     left: -1px;
     background-color: white;
     min-width: 200px;
     z-index: 2;
     border-radius: 3px;
-    border: 1px solid $gray-light;
+    border: 1px solid rgb(238, 238, 238);
   }
 
   & ul {
@@ -76,6 +75,7 @@
       transition: all 0.2s;
       line-height: 16px;
       border-radius: 3px;
+      text-transform: capitalize;
 
       &:hover {
         background-color: $active-blue;
@@ -105,6 +105,8 @@
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
+  font-weight: 500;
+  text-transform: capitalize;
 }
 
 .statusGreenIcon {