feat: add dark mode

aldbr · Oct 15, 2023 · 3795724 · 3795724
1 parent d58dd6d
commit 3795724
Show file tree

Hide file tree

Showing 17 changed files with 364 additions and 228 deletions.
diff --git a/src/app/dashboard/jobmonitor/page.tsx b/src/app/dashboard/jobmonitor/page.tsx
@@ -1,10 +1,5 @@
-import { JobDataGrid } from "@/components/data/JobDataGrid";
+import JobMonitor from "@/components/applications/JobMonitor";
 
 export default async function Page() {
-  return (
-    <div style={{ width: "100%", height: 400 }}>
-      <h2>Job Monitor</h2>
-      <JobDataGrid />
-    </div>
-  );
+  return <JobMonitor />;
 }
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
@@ -1,7 +1,5 @@
+import UserDashboard from "@/components/applications/UserDashboard";
+
 export default function Page() {
-  return (
-    <div>
-      <span>Hello User</span>
-    </div>
-  );
+  return <UserDashboard />;
 }
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,23 +0,0 @@
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 0, 0, 0;
-    --background-start-rgb: 255, 255, 255;
-    --background-end-rgb: 255, 255, 255;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,6 @@
-import "./globals.css";
 import { Inter } from "next/font/google";
 import { OIDCProvider } from "@/components/auth/OIDCUtils";
+import { ThemeProvider } from "@/contexts/ThemeProvider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -21,7 +21,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <OIDCProvider>{children}</OIDCProvider>
+        <OIDCProvider>
+          <ThemeProvider>{children}</ThemeProvider>
+        </OIDCProvider>
       </body>
     </html>
   );

diff --git a/src/components/applications/JobMonitor.tsx b/src/components/applications/JobMonitor.tsx
@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Box } from "@mui/material";
+import { useMUITheme } from "@/hooks/theme";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import { JobDataGrid } from "../ui/JobDataGrid";
+
+/**
+ * Build the Job Monitor application
+ * @returns Job Monitor content
+ */
+export default function JobMonitor() {
+  const theme = useMUITheme();
+
+  return (
+    <React.Fragment>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box
+          sx={{
+            ml: "5%",
+            mr: "5%",
+          }}
+        >
+          <h2>Job Monitor</h2>
+          <JobDataGrid />
+        </Box>
+      </MUIThemeProvider>
+    </React.Fragment>
+  );
+}
diff --git a/src/components/applications/UserDashboard.tsx b/src/components/applications/UserDashboard.tsx
@@ -0,0 +1,32 @@
+"use client";
+import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Box } from "@mui/material";
+import { useMUITheme } from "@/hooks/theme";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import { useOidcAccessToken } from "@axa-fr/react-oidc";
+
+/**
+ * Build the User Dashboard page
+ * @returns User Dashboard content
+ */
+export default function UserDashboard() {
+  const theme = useMUITheme();
+  const { accessTokenPayload } = useOidcAccessToken();
+
+  return (
+    <React.Fragment>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box
+          sx={{
+            ml: "5%",
+            mr: "5%",
+          }}
+        >
+          <span>Hello {accessTokenPayload["preferred_username"]}</span>
+        </Box>
+      </MUIThemeProvider>
+    </React.Fragment>
+  );
+}
diff --git a/src/components/layout/Dashboard.tsx b/src/components/layout/Dashboard.tsx
@@ -9,6 +9,9 @@ import Toolbar from "@mui/material/Toolbar";
 import Stack from "@mui/material/Stack";
 import { LoginButton } from "../ui/LoginButton";
 import DashboardDrawer from "../ui/DashboardDrawer";
+import { useMUITheme } from "@/hooks/theme";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import { ThemeToggleButton } from "../ui/ThemeToggleButton";
 
 interface DashboardProps {
   children: React.ReactNode;
@@ -22,6 +25,7 @@ interface DashboardProps {
  * @return an dashboard layout
  */
 export default function Dashboard(props: DashboardProps) {
+  const theme = useMUITheme();
   /** State management for mobile drawer */
   const [mobileOpen, setMobileOpen] = React.useState(false);
   const handleDrawerToggle = () => {
@@ -34,66 +38,70 @@ export default function Dashboard(props: DashboardProps) {
   return (
     <Box sx={{ display: "flex" }}>
       <CssBaseline />
-      <AppBar
-        position="fixed"
-        elevation={0}
-        sx={{
-          width: { sm: `calc(100% - ${drawerWidth}px)` },
-          ml: { sm: `${drawerWidth}px` },
-          bgcolor: "white",
-        }}
-      >
-        <Stack direction="row">
-          <Toolbar>
-            <IconButton
-              aria-label="open drawer"
-              edge="start"
-              onClick={handleDrawerToggle}
-              sx={{ mr: 2, display: { sm: "none" } }}
-              data-testid="drawer-toggle-button"
+      <MUIThemeProvider theme={theme}>
+        <AppBar
+          position="fixed"
+          elevation={0}
+          sx={{
+            width: { sm: `calc(100% - ${drawerWidth}px)` },
+            ml: { sm: `${drawerWidth}px` },
+          }}
+        >
+          <Stack direction="row">
+            <Toolbar>
+              <IconButton
+                aria-label="open drawer"
+                edge="start"
+                onClick={handleDrawerToggle}
+                sx={{ mr: 2, display: { sm: "none" } }}
+                data-testid="drawer-toggle-button"
+              >
+                <MenuIcon />
+              </IconButton>
+            </Toolbar>
+            <Toolbar
+              sx={{
+                justifyContent: "space-between",
+                flexGrow: 1,
+              }}
             >
-              <MenuIcon />
-            </IconButton>
-          </Toolbar>
-          <Toolbar
-            sx={{
-              justifyContent: "space-between",
-              flexGrow: 1,
-            }}
-          >
-            <div />
-            <LoginButton />
-          </Toolbar>
-        </Stack>
-      </AppBar>
-      <Box
-        component="nav"
-        sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
-        aria-label="side bar"
-      >
-        {/* Here two types of drawers are rendered:
+              <div />
+              <Stack direction="row">
+                <ThemeToggleButton />
+                <LoginButton />
+              </Stack>
+            </Toolbar>
+          </Stack>
+        </AppBar>
+        <Box
+          component="nav"
+          sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
+          aria-label="side bar"
+        >
+          {/* Here two types of drawers are rendered:
            1. Temporary drawer: Visible on small screens (xs) and is collapsible.
            2. Permanent drawer: Visible on larger screens (sm) and stays fixed.
           Depending on the screen size, only one will be visible at a time. */}
-        <DashboardDrawer
-          variant="temporary"
-          mobileOpen={mobileOpen}
-          width={drawerWidth}
-          handleDrawerToggle={handleDrawerToggle}
-        />
-        <DashboardDrawer
-          variant="permanent"
-          mobileOpen={mobileOpen}
-          width={drawerWidth}
-          handleDrawerToggle={handleDrawerToggle}
-        />
-      </Box>
-      <Box
-        component="main"
-        sx={{ pt: 10, px: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
-      >
-        {props.children}
-      </Box>
+          <DashboardDrawer
+            variant="temporary"
+            mobileOpen={mobileOpen}
+            width={drawerWidth}
+            handleDrawerToggle={handleDrawerToggle}
+          />
+          <DashboardDrawer
+            variant="permanent"
+            mobileOpen={mobileOpen}
+            width={drawerWidth}
+            handleDrawerToggle={handleDrawerToggle}
+          />
+        </Box>
+        <Box
+          component="main"
+          sx={{ pt: 10, px: 3, width: { sm: `calc(100% - ${drawerWidth}px)` } }}
+        >
+          {props.children}
+        </Box>
+      </MUIThemeProvider>
     </Box>
   );
 }