feat: nav updates

packages/client/components/DashNavList/DashNavList.tsx

@@ -1,17 +1,14 @@
 import styled from '@emotion/styled'
+import {ManageAccounts} from '@mui/icons-material'
 import graphql from 'babel-plugin-relay/macro'
 import React from 'react'
 import {useFragment} from 'react-relay'
-import {PALETTE} from '~/styles/paletteV3'
 import {DashNavList_organization$key} from '../../__generated__/DashNavList_organization.graphql'
-import {TierEnum} from '../../__generated__/InvoiceHeader_invoice.graphql'
-import useBreakpoint from '../../hooks/useBreakpoint'
-import {Breakpoint} from '../../types/constEnums'
-import {upperFirst} from '../../utils/upperFirst'
-import LeftDashNavItem from '../Dashboard/LeftDashNavItem'
-import BaseTag from '../Tag/BaseTag'
+import {TierEnum} from '../../__generated__/OrganizationSubscription.graphql'
+import {Tooltip} from '../../ui/Tooltip/Tooltip'
+import {TooltipContent} from '../../ui/Tooltip/TooltipContent'
+import {TooltipTrigger} from '../../ui/Tooltip/TooltipTrigger'
 import DashNavListTeams from './DashNavListTeams'
-import DashNavMenu from './DashNavMenu'
 
 const EmptyTeams = styled('div')({
   fontSize: 16,
@@ -20,22 +17,13 @@ const EmptyTeams = styled('div')({
   textAlign: 'center'
 })
 
-const StyledLeftDashNavItem = styled(LeftDashNavItem)<{isViewerOnTeam: boolean}>(
-  ({isViewerOnTeam}) => ({
-    color: isViewerOnTeam ? PALETTE.SLATE_700 : PALETTE.SLATE_600,
-    borderRadius: 44,
-    paddingLeft: 15
-  })
-)
-
-const Tag = styled(BaseTag)<{tier: TierEnum | null}>(({tier}) => ({
-  backgroundColor:
-    tier === 'enterprise' ? PALETTE.SKY_500 : tier === 'team' ? PALETTE.GOLD_300 : PALETTE.JADE_400,
-  color: tier === 'team' ? PALETTE.GRAPE_700 : PALETTE.WHITE
-}))
+const StyledIcon = styled(ManageAccounts)({
+  height: 18,
+  width: 18
+})
 
 interface Props {
-  organizationsRef: DashNavList_organization$key | null
+  organizationsRef: DashNavList_organization$key
   onClick?: () => void
 }
 
@@ -45,7 +33,6 @@ const DashNavList = (props: Props) => {
     graphql`
       fragment DashNavList_organization on Organization @relay(plural: true) {
         ...DashNavListTeams_organization
-        ...DashNavMenu_organization
         id
         name
         tier
@@ -56,44 +43,42 @@ const DashNavList = (props: Props) => {
     `,
     organizationsRef
   )
-  const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT)
-  const teams = organizations?.flatMap((org) => org.viewerTeams)
+
+  const TierEnumValues: TierEnum[] = ['enterprise', 'team', 'starter']
+
+  const sortedOrgs = organizations.toSorted((a, b) => {
+    const aTier = TierEnumValues.indexOf(a.tier)
+    const bTier = TierEnumValues.indexOf(b.tier)
+    return aTier < bTier ? -1 : aTier > bTier ? 1 : a.name.localeCompare(b.name)
+  })
+
+  const teams = organizations.flatMap((org) => org.viewerTeams)
 
   if (teams?.length === 0) {
-    return <EmptyTeams>It appears you are not a member of any team!</EmptyTeams>
+    return <EmptyTeams>{'It appears you are not a member of any team!'}</EmptyTeams>
   }
 
   return (
-    <div className='w-full p-2 lg:pt-4'>
-      {organizations?.map((org) => (
-        <div key={org.id} className='mb-3 w-full rounded-lg border border-solid border-slate-400'>
-          <div
-            className={
-              org.viewerTeams.length > 0 ? `border-b border-solid border-slate-300 p-2` : 'p-2'
-            }
-          >
-            <div className='flex flex-wrap items-center pb-1'>
-              <div className='flex min-w-0 flex-1 flex-wrap items-center justify-between'>
-                <span className='pl-2 text-base font-semibold leading-6 text-slate-700'>
-                  {org.name}
-                </span>
-                <div className='flex w-auto justify-end px-0 text-right'>
-                  <Tag tier={org.tier}>{upperFirst(org.tier)}</Tag>
-                </div>
-              </div>
-            </div>
-            {isDesktop ? (
-              <DashNavMenu organizationRef={org} />
-            ) : (
-              <StyledLeftDashNavItem
-                className={'bg-transparent'}
-                icon={'manageAccounts'}
-                isViewerOnTeam
-                onClick={onClick}
-                href={`/me/organizations/${org.id}/billing`}
-                label={'Settings & Members'}
-              />
-            )}
+    <div className='w-full p-3 pt-4 pb-0'>
+      {sortedOrgs.map((org) => (
+        <div key={org.id} className='w-full pb-4'>
+          <div className='mb-1 flex min-w-0 flex-1 flex-wrap items-center justify-between'>
+            <span className='flex-1 pl-3 text-base font-semibold leading-6 text-slate-700'>
+              {org.name}
+            </span>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <a
+                  className='flex h-8 w-8 items-center justify-center rounded-full hover:bg-slate-300'
+                  href={`/me/organizations/${org.id}/billing`}
+                >
+                  <StyledIcon />
+                </a>
+              </TooltipTrigger>
+              <TooltipContent side='bottom' align='center' sideOffset={4}>
+                {'Settings & Members'}
+              </TooltipContent>
+            </Tooltip>
           </div>
           <DashNavListTeams onClick={onClick} organizationRef={org} />
         </div>

packages/client/components/DashNavList/DashNavListTeams.tsx

@@ -12,7 +12,7 @@ const StyledLeftDashNavItem = styled(LeftDashNavItem)<{isPublicTeams?: boolean}>
   ({isPublicTeams}) => ({
     color: isPublicTeams ? PALETTE.SLATE_600 : PALETTE.SLATE_700,
     borderRadius: 44,
-    paddingLeft: 15
+    paddingLeft: 16
   })
 )
 
@@ -61,7 +61,7 @@ const DashNavListTeams = (props: Props) => {
 
   if (!viewerTeams.length) return null
   return (
-    <div className='p-2'>
+    <div>
       {viewerTeams.map((team) => {
         return (
           <StyledLeftDashNavItem
@@ -75,7 +75,7 @@ const DashNavListTeams = (props: Props) => {
       })}
       {publicTeamsCount > 0 && (
         <StyledLeftDashNavItem
-          className='bg-white pl-11 lg:bg-slate-200'
+          className='bg-white pl-[46px] lg:bg-slate-200'
           onClick={handleClick}
           isPublicTeams
           label={`View ${publicTeamsCount} ${plural(publicTeamsCount, 'Public Team', 'Public Teams')}`}

packages/client/components/Dashboard/DashSidebar.tsx

@@ -4,7 +4,6 @@ import React from 'react'
 import {useFragment} from 'react-relay'
 import {useRouteMatch} from 'react-router'
 import {DashSidebar_viewer$key} from '../../__generated__/DashSidebar_viewer.graphql'
-import {PALETTE} from '../../styles/paletteV3'
 import {NavSidebar} from '../../types/constEnums'
 import {
   AUTHENTICATION_PAGE,
@@ -40,7 +39,7 @@ const NavMain = styled('div')({
 
 const NavItem = styled(LeftDashNavItem)({
   borderRadius: 44,
-  paddingLeft: 15
+  paddingLeft: 16
 })
 
 const NavList = styled(DashNavList)({
@@ -56,14 +55,6 @@ const Wrapper = styled('div')({
   flexDirection: 'column'
 })
 
-const OrgName = styled('div')({
-  color: PALETTE.SLATE_600,
-  fontWeight: 600,
-  fontSize: 12,
-  lineHeight: '16px',
-  padding: '8px 16px'
-})
-
 interface Props {
   isOpen: boolean
   viewerRef: DashSidebar_viewer$key | null
@@ -107,7 +98,11 @@ const DashSidebar = (props: Props) => {
                   label={'Organizations'}
                   exact
                 />
-                <OrgName>{name}</OrgName>
+                <div className='mb-1 mt-4 flex min-h-[32px] items-center'>
+                  <span className='flex-1 pl-3 text-base font-semibold leading-6 text-slate-700'>
+                    {name}
+                  </span>
+                </div>
                 <NavItem
                   icon={'creditScore'}
                   href={`/me/organizations/${orgId}/${BILLING_PAGE}`}
@@ -146,7 +141,7 @@ const DashSidebar = (props: Props) => {
       <SideBarStartMeetingButton isOpen={isOpen} />
       <Nav isOpen={isOpen}>
         <Contents>
-          <div className='border-x border-solid border-[transparent] px-4'>
+          <div className='px-3'>
             <NavItem icon={'forum'} href={'/meetings'} label={'Meetings'} />
             <NavItem icon={'timeline'} href={'/me'} label={'History'} exact />
             <NavItem icon={'playlist_add_check'} href={'/me/tasks'} label={'Tasks'} />

packages/client/components/Dashboard/LeftDashNavItem.tsx

@@ -26,21 +26,21 @@ const NavItem = styled(PlainButton)<{isActive: boolean}>(({isActive}) => ({
   alignItems: 'center',
   backgroundColor: isActive ? PALETTE.SLATE_300 : undefined,
   borderRadius: 4,
-  color: isActive ? PALETTE.SLATE_900 : PALETTE.SLATE_800,
+  color: PALETTE.SLATE_900,
   display: 'flex',
   fontSize: NavSidebar.FONT_SIZE,
-  fontWeight: 600,
+  fontWeight: isActive ? 600 : 400,
   lineHeight: NavSidebar.LINE_HEIGHT,
   marginBottom: 2,
   marginTop: 2,
   paddingBottom: 5,
-  paddingRight: 8,
+  paddingRight: 12,
   paddingTop: 5,
   textDecoration: 'none',
   transition: `background-color 100ms ease-in`,
   userSelect: 'none',
   width: '100%',
-  ':hover': {
+  ':hover, :focus, :active': {
     backgroundColor: PALETTE.SLATE_300
   }
 }))
@@ -50,7 +50,7 @@ const StyledIcon = styled('div')<{isActive: boolean}>(({isActive}) => ({
   height: 18,
   width: 18,
   color: isActive ? PALETTE.SLATE_700 : PALETTE.SLATE_600,
-  marginRight: 11
+  marginRight: 12
 }))
 
 const Label = styled('div')({