chore: update based on design team's feedback

Orfium · Nov 21, 2023 · 05445fc · 05445fc
1 parent c35291d
commit 05445fc
Show file tree

Hide file tree

Showing 11 changed files with 487 additions and 135 deletions.
diff --git a/src/ui/Navigation/components/ClientSelector/index.ts b/src/ui/Navigation/components/ClientSelector/index.ts
diff --git a/src/ui/Navigation/components/Drawer/Drawer.styles.ts b/src/ui/Navigation/components/Drawer/Drawer.styles.ts
@@ -8,7 +8,7 @@ export const DrawerContainer = styled.div<{
   isDesktop: boolean;
 }>`
   ${transition(0.2, 'width')};
-  width: ${({ expanded }) => (expanded ? rem('308px') : 0)};
+  width: ${({ expanded }) => (expanded ? rem(252) : 0)};
   background-color: ${({ theme }) => theme.palette.white};
   position: ${({ isDesktop }) => (isDesktop ? 'relative' : 'absolute')};
   left: ${({ theme, isDesktop }) => (isDesktop ? 0 : getGlobalNavWidth(theme))};

diff --git a/src/ui/Navigation/components/Drawer/Drawer.tsx b/src/ui/Navigation/components/Drawer/Drawer.tsx
@@ -4,7 +4,7 @@ import { type SwitchOrganization } from '../../../../providers/Organizations';
 import { type Organization } from '../../../../store/organizations';
 import { MenuIcon, MenuItemText } from '../../common.styles';
 import { type MenuItem } from '../../types';
-import ClientSelector from '../ClientSelector';
+import OrganizationSelector from '../OrganizationSelector';
 import {
   DrawerContainer,
   ExtrasContainer,
@@ -87,7 +87,8 @@ function Drawer(props: DrawerProps) {
   const orgSwitcherElement = useMemo(() => {
     return (
       <OrgSwitcherWrapper>
-        <ClientSelector
+        <OrganizationSelector
+          disabled={organizations.length <= 1}
           tagText={''}
           dataTestId={'organization-picker'}
           onSelect={async (option: string) => {

diff --git a/...s/ClientSelector/ClientSelector.styles.ts → ...onSelector/OrganizationSelector.styles.ts b/...s/ClientSelector/ClientSelector.styles.ts → ...onSelector/OrganizationSelector.styles.ts
@@ -24,16 +24,21 @@ export const Button = styled.button`
   cursor: pointer;
   height: calc(9 * ${({ theme }) => `${theme.spacing.sm}`});
 
-  :hover {
+  :not([disabled]):hover {
     background-color: ${({ theme }) => `${theme.utils.getColor('lightGrey', 50)}`};
   }
 
-  > span {
-    padding-right: ${({ theme }) => theme.spacing.sm};
-    display: inline-block;
+  &[disabled] {
+    cursor: default;
   }
 `;
 
+export const SelectedOrg = styled.span`
+  padding-right: ${({ theme }) => theme.spacing.sm};
+  display: inline-block;
+  font-weight: ${({ theme }) => theme.typography.weights.medium};
+`;
+
 export const ButtonTextWrapper = styled.div`
   display: flex;
   flex-direction: column;

diff --git a/...ponents/ClientSelector/ClientSelector.tsx → ...nizationSelector/OrganizationSelector.tsx b/...ponents/ClientSelector/ClientSelector.tsx → ...nizationSelector/OrganizationSelector.tsx
@@ -9,9 +9,10 @@ import {
   ButtonTextWrapper,
   ChevronWrapper,
   Option,
+  SelectedOrg,
   Tag,
   Wrapper,
-} from './ClientSelector.styles';
+} from './OrganizationSelector.styles';
 
 export type Props = {
   /** Items that are being declared as menu options */
@@ -32,7 +33,7 @@ export type TestProps = {
   dataTestId?: string;
 };
 
-function ClientSelector(props: Props & TestProps) {
+function OrganizationSelector(props: Props & TestProps) {
   const {
     items,
     disabled,
@@ -57,16 +58,18 @@ function ClientSelector(props: Props & TestProps) {
         >
           <ButtonContentWrapper>
             <ButtonTextWrapper theme={theme}>
-              <span>{buttonText}</span>
+              <SelectedOrg>{buttonText}</SelectedOrg>
               {tagText && (
                 <Tag theme={theme} textColor={textColor}>
                   {tagText}
                 </Tag>
               )}
             </ButtonTextWrapper>
-            <ChevronWrapper theme={theme}>
-              <FlippableArrow expanded={open} color={textColor} size={11} />
-            </ChevronWrapper>
+            {disabled ? null : (
+              <ChevronWrapper theme={theme}>
+                <FlippableArrow expanded={open} color={textColor} size={11} />
+              </ChevronWrapper>
+            )}
           </ButtonContentWrapper>
         </Button>
 
@@ -89,4 +92,4 @@ function ClientSelector(props: Props & TestProps) {
   );
 }
 
-export default ClientSelector;
+export default OrganizationSelector;
diff --git a/src/ui/Navigation/components/OrganizationSelector/index.ts b/src/ui/Navigation/components/OrganizationSelector/index.ts
@@ -0,0 +1 @@
+export { default } from './OrganizationSelector';
diff --git a/src/ui/TopBar/components/UserMenu/UserMenu.styles.ts b/src/ui/TopBar/components/UserMenu/UserMenu.styles.ts
@@ -4,36 +4,44 @@ import { Theme } from '@orfium/ictinus';
 import { getFocus } from '@orfium/ictinus/dist/theme/states';
 import { rem } from 'polished';
 
-const AVATAR_SIZE = 46;
+const AVATAR_SIZE_COLLAPSED = 36;
+const AVATAR_SIZE_EXPANDED = 46;
 
-export const Anchor = styled.div`
-  position: relative;
-  height: ${rem(AVATAR_SIZE)};
+export const AvatarButton = styled.button`
+  background-color: transparent;
+  box-shadow: none;
+  border-color: transparent;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+
+  &:focus-visible {
+    outline: ${({ theme }) => getFocus({ theme }).styleOutline};
+  }
+
+  img {
+    width: ${rem(AVATAR_SIZE_COLLAPSED)};
+    height: ${rem(AVATAR_SIZE_COLLAPSED)};
+    border-radius: 50%;
+  }
 `;
 
 export const MenuOuterWrapper = styled.div`
-  --max-width: auto;
-  --max-height: auto;
-  --min-width: ${rem(AVATAR_SIZE)};
-  --min-height: ${rem(AVATAR_SIZE)};
   border: ${rem(1)} solid ${({ theme }) => theme.utils.getColor('lightGrey', 200)};
   border-radius: ${rem(8)};
   box-shadow: ${({ theme }) => theme.elevation['04']};
   background-color: #fff;
   padding: ${({ theme }) => theme.spacing.md};
-  transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease,
-    border-color 0.25s ease, width 0.25s ease, height 0.25s ease;
+  transition: top 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
   width: var(--max-width);
   height: var(--max-height);
   overflow: hidden;
   position: absolute;
-  top: 0;
+  top: calc(100% + ${({ theme }) => theme.spacing.sm});
   right: 0;
 
-  [data-menu-header] {
-    transition: padding 0.25s ease;
-  }
-
   [data-menu-header] > div,
   [data-menu-options] {
     transition: opacity 0.15s ease;
@@ -42,27 +50,10 @@ export const MenuOuterWrapper = styled.div`
   }
 
   &.collapsed {
-    width: var(--min-width);
-    height: var(--min-height);
-    padding: 0;
-    background-color: transparent;
-    box-shadow: none;
-    border-color: transparent;
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: ${({ theme }) => getFocus({ theme }).styleOutline};
-    }
-
-    [data-menu-header] {
-      padding: 0;
-    }
-
-    [data-menu-header] > div,
-    [data-menu-options] {
-      opacity: 0;
-      visibility: hidden;
-    }
+    //pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+    top: calc(100% - ${({ theme }) => theme.spacing.md});
   }
 `;
 
@@ -80,8 +71,8 @@ export const Header = styled.div`
   align-items: center;
 
   > img {
-    width: ${rem(AVATAR_SIZE)};
-    height: ${rem(AVATAR_SIZE)};
+    width: ${rem(AVATAR_SIZE_EXPANDED)};
+    height: ${rem(AVATAR_SIZE_EXPANDED)};
     border-radius: 50%;
   }