Merge pull request #59 from galaxyproject/fran/53-header-nav

fix: highlight selected page in topnav (#53)
galaxyproject · Sep 13, 2024 · d226ede · d226ede
2 parents 9fc1f53 + bce8723
commit d226ede
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 24 deletions.
diff --git a/app/theme/common/palette.ts b/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,
 };
diff --git a/app/theme/theme.ts b/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));
 }
diff --git a/app/views/HomeView/homeView.tsx b/app/views/HomeView/homeView.tsx
@@ -10,8 +10,8 @@ export const HomeView = (): JSX.Element => {
     <Fragment>
       <SectionHero />
       <SectionSubHero />
-      <SectionHelp />
       <SectionAnalytics />
+      <SectionHelp />
       <SectionBranding />
     </Fragment>
   );

diff --git a/types/theme.d.ts b/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";