diff --git a/src/ui/Navigation/components/Drawer/Drawer.styles.ts b/src/ui/Navigation/components/Drawer/Drawer.styles.ts index 7ed318fd..296540aa 100644 --- 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 index d091cc19..167dd366 100644 --- a/src/ui/Navigation/components/Drawer/Drawer.tsx +++ b/src/ui/Navigation/components/Drawer/Drawer.tsx @@ -89,7 +89,6 @@ function Drawer(props: DrawerProps) { { 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 index 6ff91d07..a701b29e 100644 --- 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 index 5255d99e..764f6104 100644 --- 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 index f00d9a5c..aa963e3b 100644 --- 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();