fix: white button on white background

DIRACGrid · Mar 19, 2024 · e640b9d · e640b9d
1 parent 1ce7746
commit e640b9d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 18 deletions.
diff --git a/src/components/applications/LoginForm.tsx b/src/components/applications/LoginForm.tsx
@@ -20,7 +20,6 @@ import { useRouter } from "next/navigation";
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
 import * as React from "react";
 import { useOidc } from "@axa-fr/react-oidc";
-import { deepOrange, lightGreen } from "@mui/material/colors";
 
 /**
  * Login form
@@ -201,8 +200,6 @@ export function LoginForm() {
                 <Button
                   variant="contained"
                   sx={{
-                    bgcolor: lightGreen[700],
-                    "&:hover": { bgcolor: deepOrange[500] },
                     flexGrow: 1,
                   }}
                   onClick={handleConfigurationChanges}

diff --git a/src/components/ui/DashboardButton.tsx b/src/components/ui/DashboardButton.tsx
@@ -1,7 +1,6 @@
 import { useOIDCContext } from "@/hooks/oidcConfiguration";
 import { useOidc } from "@axa-fr/react-oidc";
 import { Button } from "@mui/material";
-import { deepOrange, lightGreen } from "@mui/material/colors";
 import Link from "next/link";
 
 /**
@@ -19,12 +18,10 @@ export function DashboardButton() {
 
   return (
     <Button
-      sx={{
-        bgcolor: lightGreen[700],
-        "&:hover": { bgcolor: deepOrange[500] },
-      }}
+      variant="contained"
       component={Link}
       href="/dashboard"
+      style={{ margin: "3%" }}
     >
       Dashboard
     </Button>

diff --git a/src/components/ui/ProfileButton.tsx b/src/components/ui/ProfileButton.tsx
@@ -13,7 +13,7 @@ import {
   MenuItem,
   Tooltip,
 } from "@mui/material";
-import { deepOrange, lightGreen } from "@mui/material/colors";
+import { deepOrange } from "@mui/material/colors";
 import React from "react";
 
 /**
@@ -47,15 +47,7 @@ export function ProfileButton() {
 
   if (!isAuthenticated) {
     return (
-      <Button
-        sx={{
-          bgcolor: lightGreen[700],
-          "&:hover": { bgcolor: deepOrange[500] },
-        }}
-        variant="contained"
-        component={Link}
-        href="/auth"
-      >
+      <Button variant="contained" component={Link} href="/auth">
         Login
       </Button>
     );

diff --git a/src/hooks/theme.tsx b/src/hooks/theme.tsx
@@ -1,5 +1,7 @@
 import { ThemeContext } from "@/contexts/ThemeProvider";
 import { PaletteMode } from "@mui/material";
+import deepOrange from "@mui/material/colors/deepOrange";
+import lightGreen from "@mui/material/colors/lightGreen";
 import { createTheme } from "@mui/material/styles";
 import { useContext } from "react";
 
@@ -33,6 +35,31 @@ export const useMUITheme = () => {
         main: "#ffffff",
       },
     },
+    components: {
+      MuiButton: {
+        styleOverrides: {
+          contained: {
+            // Target the 'contained' variant
+            color: "white",
+            backgroundColor: lightGreen[700],
+            "&:hover": {
+              color: "white",
+              backgroundColor: deepOrange[500],
+            },
+          },
+          outlined: {
+            // Target the 'outlined' variant
+            color: lightGreen[700],
+            borderColor: lightGreen[700],
+            "&:hover": {
+              color: deepOrange[500],
+              borderColor: deepOrange[500],
+              backgroundColor: "transparent",
+            },
+          },
+        },
+      },
+    },
   });
 
   return muiTheme;