fix: highlight selected page in topnav (#53)

app/theme/common/palette.ts

@@ -1,4 +1,4 @@
-import { PaletteColorOptions } from "@mui/material";
+import { PaletteColor } from "@mui/material";
 
 /**
  * Palette "Hero"
@@ -17,7 +17,9 @@ export const heroMain = HERO.MAIN;
 /**
  * Palette Option "Hero"
  */
-export const hero: PaletteColorOptions = {
+export const hero: PaletteColor = {
+  contrastText: "#FFFFFF",
+  dark: heroMain,
   light: heroLight,
   main: heroMain,
 };

app/theme/theme.ts

@@ -9,15 +9,16 @@ import * as P from "./common/palette";
  * @returns theme with custom theme overrides.
  */
 export function mergeAppTheme(theme: Theme): Theme {
-  return createTheme(
-    deepmerge(theme, {
-      components: {
-        MuiButton: C.MuiButton(theme),
-        MuiCssBaseline: C.MuiCssBaseline(theme),
-      },
-      palette: {
-        hero: P.hero,
-      },
-    })
-  );
+  const appTheme = { ...theme };
+
+  // Merge palette with hero color.
+  appTheme.palette = { ...appTheme.palette, hero: P.hero };
+
+  // Marge custom components.
+  const components = {
+    MuiButton: C.MuiButton(appTheme),
+    MuiCssBaseline: C.MuiCssBaseline(appTheme),
+  };
+
+  return createTheme(deepmerge(appTheme, components));
 }

types/theme.d.ts

@@ -1,13 +1,5 @@
-import { Theme as MTheme } from "@mui/material";
-
-/**
- * Button prop options.
- */
-declare module "@mui/material/Button" {
-  interface ButtonPropsColorOverrides {
-    hero: true;
-  }
-}
+import type {} from "@mui/material/Button";
+import { PaletteColorOptions } from "@mui/material/styles";
 
 /**
  * Palette definitions.
@@ -22,6 +14,15 @@ declare module "@mui/material/styles/createPalette" {
   }
 }
 
+/**
+ * Button prop options.
+ */
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides {
+    hero: true;
+  }
+}
+
 declare module "@emotion/react" {
   export interface Theme extends MTheme {
     name: "EmotionTheme";