chore: implement changes based on design team fedback

Orfium · Mar 13, 2024 · f143c43 · f143c43
1 parent 736f66e
commit f143c43
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 7 deletions.
diff --git a/src/ui/Navigation/components/Drawer/Drawer.styles.ts b/src/ui/Navigation/components/Drawer/Drawer.styles.ts
@@ -85,7 +85,7 @@ export const ExtrasSectionMenuItem = styled.a`
 `;
 
 export const NavElementsContainer = styled.div`
-  padding: ${({ theme }) => `${theme.spacing.md}`};
+  padding: ${({ theme }) => `${rem(10)} ${theme.spacing.md} ${theme.spacing.md}`};
   display: flex;
   flex-direction: column;
   flex-grow: 1;

diff --git a/src/ui/Navigation/components/Drawer/Drawer.tsx b/src/ui/Navigation/components/Drawer/Drawer.tsx
@@ -89,7 +89,6 @@ function Drawer(props: DrawerProps) {
       <OrgSwitcherWrapper>
         <OrganizationSelector
           disabled={organizations.length <= 1}
-          tagText={''}
           dataTestId={'organization-picker'}
           onSelect={async (option: string) => {
             const foundOrg = organizations.find((org) => org.display_name === option);

diff --git a/src/ui/Navigation/components/GlobalNav/GlobalNav.styles.ts b/src/ui/Navigation/components/GlobalNav/GlobalNav.styles.ts
@@ -52,7 +52,7 @@ export const AppIcon = (theme: Theme) => css`
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s ease, box-shadow 0.1s ease;
+  transition: background-color 0.2s ease, box-shadow 0.1s ease, outline 0.1s ease;
   box-shadow: 0 0 0 0 #fff;
   cursor: pointer;
 
@@ -62,8 +62,7 @@ export const AppIcon = (theme: Theme) => css`
     transform: scale(1);
   }
 
-  &:focus-visible,
-  &.active {
+  &:focus-visible {
     box-shadow: 0 0 0 1px #fff;
     background-color: #ffffff20;
     outline: 1px solid #fff;
@@ -73,6 +72,12 @@ export const AppIcon = (theme: Theme) => css`
     background-color: #ffffff20;
   }
 
+  &.active {
+    box-shadow: 0 0 0 1px #fff;
+    background-color: ${theme.utils.getColor('blue', 500)};
+    outline: 1px solid #fff;
+  }
+
   &:active {
     > img,
     > span > svg {

diff --git a/src/ui/Navigation/components/OrganizationSelector/OrganizationSelector.styles.ts b/src/ui/Navigation/components/OrganizationSelector/OrganizationSelector.styles.ts
@@ -36,6 +36,7 @@ export const Button = styled.button`
 export const SelectedOrg = styled.span`
   padding-right: ${({ theme }) => theme.spacing.sm};
   display: inline-block;
+  text-align: left;
   font-weight: ${({ theme }) => theme.typography.weights.medium};
 `;
 
@@ -61,6 +62,7 @@ export const ChevronWrapper = styled.div`
 `;
 
 export const Tag = styled.span<{ textColor: string }>`
+  font-weight: ${({ theme }) => theme.typography.weights.medium};
   font-size: ${({ theme }) => theme.typography.fontSizes[12]};
   padding: ${({ theme }) => theme.spacing.xsm};
   background-color: ${({ theme }) => theme.utils.getColor('lightGrey', 100)};

diff --git a/src/ui/Navigation/components/OrganizationSelector/OrganizationSelector.tsx b/src/ui/Navigation/components/OrganizationSelector/OrganizationSelector.tsx
@@ -22,7 +22,7 @@ export type Props = {
   /** The text of the button to show - defaults to "More" */
   buttonText: ReactNode;
   /** The text of the tag to show - defaults to undefined */
-  tagText: ReactNode;
+  tagText?: ReactNode;
   /** Define if the button is in disabled state */
   disabled?: boolean;
   /** Menu position when open */
@@ -41,7 +41,7 @@ function OrganizationSelector(props: Props & TestProps) {
     buttonText = 'More',
     menuPosition = 'left',
     dataTestId,
-    tagText,
+    tagText = 'Organization',
   } = props;
   const [open, setOpen] = useState(false);
   const theme = useTheme();