feat(client): add a sidebar-specific accent colour for dark mode

The sidebar selected-icon colour was sharing primary.main, which read too dark in dark mode. Introduce palette.sidebar.accent (brand green in light mode, a lighter green in dark mode) and route NavItem through it so primary stays brand-green for buttons and the rest of the UI.

client/src/Components/sidebar/NavItem.tsx

@@ -22,7 +22,9 @@ export const NavItem = ({
 }) => {
 	const { collapsed } = useSidebar();
 	const theme = useTheme();
-	const iconStroke = selected ? theme.palette.primary.main : theme.palette.text.secondary;
+	const iconStroke = selected
+		? theme.palette.sidebar.accent
+		: theme.palette.text.secondary;
 
 	const buttonBgColor = selected ? theme.palette.action.selected : "transparent";
 	const buttonBgHoverColor = selected
@@ -79,7 +81,7 @@ export const NavItem = ({
 						},
 						".MuiListItemButton-root:hover &": {
 							"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
-								stroke: theme.palette.primary.main,
+								stroke: theme.palette.sidebar.accent,
 							},
 						},
 					}}

client/src/Utils/Theme/Palette.ts

@@ -15,6 +15,7 @@ export const colors = {
 	gray900: "#151518",
 	gray850: "#1c1c21",
 	brandGreen: "#13715B",
+	brandGreenLight: "#4DAF94",
 };
 
 export const lightPalette = {
@@ -24,6 +25,9 @@ export const lightPalette = {
 	secondary: {
 		main: colors.gray200,
 	},
+	sidebar: {
+		accent: colors.brandGreen,
+	},
 };
 
 export const darkPalette = {
@@ -37,4 +41,7 @@ export const darkPalette = {
 		default: colors.gray900,
 		paper: colors.gray850,
 	},
+	sidebar: {
+		accent: colors.brandGreenLight,
+	},
 };

client/src/Utils/Theme/Theme.ts

@@ -13,6 +13,12 @@ declare module "@mui/material/styles" {
 		eyebrow?: React.CSSProperties;
 		fontFamilyMonospace?: string;
 	}
+	interface Palette {
+		sidebar: { accent: string };
+	}
+	interface PaletteOptions {
+		sidebar?: { accent: string };
+	}
 }
 
 declare module "@mui/material/Typography" {