upcoming: [M3-9002] - Replace hamburger icon in left navigation (#11462)

* upcoming: [M3-9002] - Left Navigation Update * removed akamai color logo * updated pin icon tooltip text * Fix table focus state and global header background * Update logo color * Revert logo change --------- Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
linode · Dec 31, 2024 · 8372aa2 · 8372aa2
1 parent b7a8e87
commit 8372aa2
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
@@ -45,6 +45,12 @@ export const StyledAkamaiLogo = styled(AkamaiLogo, {
   '& .akamai-logo-name': {
     transition: theme.transitions.create(['opacity']),
   },
+  'path, polygon': {
+    fill: theme.tokens.color.Neutrals.White,
+    [theme.breakpoints.down('md')]: {
+      fill: theme.tokens.sideNavigation.Icon,
+    },
+  },
   // give the svg a transition so it smoothly resizes
   transition: 'width .1s linear',
 }));

diff --git a/packages/ui/src/foundations/themes/dark.ts b/packages/ui/src/foundations/themes/dark.ts
@@ -9,6 +9,7 @@ import {
   Content,
   Dropdown,
   Elevation,
+  GlobalHeader,
   Interaction,
   NotificationToast,
   Select,
@@ -228,8 +229,8 @@ export const darkTheme: ThemeOptions = {
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: tempReplacementforColorNeutralsBlack,
-          color: primaryColors.text,
+          backgroundColor: GlobalHeader.Background,
+          color: GlobalHeader.Text.Default,
         },
       },
     },

diff --git a/packages/ui/src/foundations/themes/index.ts b/packages/ui/src/foundations/themes/index.ts
@@ -30,6 +30,7 @@ import type {
   ElevationTypes as ElevationTypesLight,
   FontTypes,
   GlobalFooterTypes,
+  GlobalHeaderTypes,
   InteractionTypes as InteractionTypesLight,
   RadiusTypes,
   SideNavigationTypes as SideNavigationTypesLight,
@@ -124,6 +125,7 @@ declare module '@mui/material/styles/createTheme' {
       color: ColorTypes;
       font: FontTypes;
       footer: GlobalFooterTypes;
+      header: GlobalHeaderTypes;
       spacing: SpacingTypes;
       // ----------------------------------------
       accent: AccentTypes;
@@ -164,6 +166,7 @@ declare module '@mui/material/styles/createTheme' {
       color?: ColorTypes;
       font?: FontTypes;
       footer?: GlobalFooterTypes;
+      header?: GlobalHeaderTypes;
       spacing?: SpacingTypes;
       // ----------------------------------------
       accent?: AccentTypes;

diff --git a/packages/ui/src/foundations/themes/light.ts b/packages/ui/src/foundations/themes/light.ts
@@ -12,6 +12,7 @@ import {
   Elevation,
   Font,
   GlobalFooter,
+  GlobalHeader,
   Interaction,
   NotificationToast,
   Radius,
@@ -333,8 +334,8 @@ export const lightTheme: ThemeOptions = {
     MuiAppBar: {
       styleOverrides: {
         root: {
-          backgroundColor: bg.bgPaper,
-          color: primaryColors.text,
+          backgroundColor: GlobalHeader.Background,
+          color: GlobalHeader.Text.Default,
           position: 'relative',
         },
       },
@@ -1454,7 +1455,7 @@ export const lightTheme: ThemeOptions = {
           '&.Mui-active': {
             color: Table.HeaderFilled.Text,
           },
-          ':hover': {
+          ':hover, :focus': {
             ...MuiTableHeadSvgStyles,
             color: Color.Brand[60],
             cursor: 'pointer',
@@ -1760,6 +1761,7 @@ export const lightTheme: ThemeOptions = {
     elevation: Elevation,
     font: Font,
     footer: GlobalFooter,
+    header: GlobalHeader,
     interaction: Interaction,
     radius: Radius,
     sideNavigation: SideNavigation,