feat: add dark mode

DIRACGrid · Oct 15, 2023 · d98eb6f · d98eb6f
1 parent d58dd6d
commit d98eb6f
Show file tree

Hide file tree

Showing 13 changed files with 263 additions and 155 deletions.
diff --git a/src/app/dashboard/jobmonitor/page.tsx b/src/app/dashboard/jobmonitor/page.tsx
@@ -1,4 +1,4 @@
-import { JobDataGrid } from "@/components/data/JobDataGrid";
+import { JobDataGrid } from "@/components/ui/JobDataGrid";
 
 export default async function Page() {
   return (

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/UserDashboard.tsx b/src/components/applications/UserDashboard.tsx
@@ -0,0 +1,31 @@
+"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";
+
+/**
+ * Build the showcase content with an AppBar
+ * @param props - children
+ * @returns showcase content
+ */
+export default function UserDashboard() {
+  const theme = useMUITheme();
+
+  return (
+    <React.Fragment>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box
+          sx={{
+            ml: { xs: "5%", md: "20%" },
+            mr: { xs: "5%", md: "20%" },
+          }}
+        >
+          <span>Hello User</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>
   );
 }
diff --git a/src/components/layout/Showcase.tsx b/src/components/layout/Showcase.tsx
@@ -11,87 +11,95 @@ import { LoginButton } from "../ui/LoginButton";
 import { Box, Stack } from "@mui/material";
 import { DashboardButton } from "../ui/DashboardButton";
 import Image from "next/image";
+import ThemeToggleButton from "../ui/ThemeToggleButton";
+import { useMUITheme } from "@/hooks/theme";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 
 /**
  * Build the showcase content with an AppBar
  * @param props - children
  * @returns showcase content
  */
 export default function Showcase() {
+  const theme = useMUITheme();
+
   const Item = styled(Paper)(({ theme }) => ({
     padding: theme.spacing(6),
     elevation: 0,
   }));
 
   return (
     <React.Fragment>
-      <CssBaseline />
-      <AppBar sx={{ bgcolor: "white" }}>
-        <Stack direction="row">
-          <Toolbar>
-            <DiracLogo />
-          </Toolbar>
-          <Toolbar
-            sx={{
-              justifyContent: "space-between",
-              flexGrow: 1,
-            }}
-          >
-            <div />
-            <Stack direction="row">
-              <DashboardButton />
-              <LoginButton />
-            </Stack>
-          </Toolbar>
-        </Stack>
-      </AppBar>
-      <Toolbar />
-      <Box
-        sx={{
-          ml: { xs: "5%", md: "20%" },
-          mr: { xs: "5%", md: "20%" },
-        }}
-      >
-        <Grid container spacing={2} sx={{ my: 2 }}>
-          <Grid item xs={12} md={6} lg={4}>
-            <Item>
-              The DIRAC interware is a software framework that enables
-              communities to interact with distributed computing resources.
-              DIRAC forms a layer between users and resources, hiding
-              diversities across computing and storage resources.
-            </Item>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <div style={{ width: "100%", position: "relative" }}>
-              <Image
-                src="/showcase1.png"
-                alt="DIRAC showcase1"
-                layout="responsive"
-                width={400}
-                height={400}
-              />
-            </div>
-          </Grid>
-          <Grid item xs={12} md={6}>
-            <div style={{ width: "100%", position: "relative" }}>
-              <Image
-                src="/showcase2.png"
-                alt="DIRAC showcase 2"
-                layout="responsive"
-                width={400}
-                height={400}
-              />
-            </div>
-          </Grid>
-          <Grid item xs={12} md={6} lg={4}>
-            <Item>
-              DIRAC has been adopted by several HEP and non-HEP experiments
-              communities, with different goals, intents, resources and
-              workflows: it is experiment agnostic, extensible, and flexible.
-            </Item>
+      <MUIThemeProvider theme={theme}>
+        <CssBaseline />
+        <AppBar>
+          <Stack direction="row">
+            <Toolbar>
+              <DiracLogo />
+            </Toolbar>
+            <Toolbar
+              sx={{
+                justifyContent: "space-between",
+                flexGrow: 1,
+              }}
+            >
+              <div />
+              <Stack direction="row">
+                <DashboardButton />
+                <ThemeToggleButton />
+                <LoginButton />
+              </Stack>
+            </Toolbar>
+          </Stack>
+        </AppBar>
+        <Toolbar />
+        <Box
+          sx={{
+            ml: { xs: "5%", md: "20%" },
+            mr: { xs: "5%", md: "20%" },
+          }}
+        >
+          <Grid container spacing={2} sx={{ my: 2 }}>
+            <Grid item xs={12} md={6} lg={4}>
+              <Item>
+                The DIRAC interware is a software framework that enables
+                communities to interact with distributed computing resources.
+                DIRAC forms a layer between users and resources, hiding
+                diversities across computing and storage resources.
+              </Item>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <div style={{ width: "100%", position: "relative" }}>
+                <Image
+                  src="/showcase1.png"
+                  alt="DIRAC showcase1"
+                  layout="responsive"
+                  width={400}
+                  height={400}
+                />
+              </div>
+            </Grid>
+            <Grid item xs={12} md={6}>
+              <div style={{ width: "100%", position: "relative" }}>
+                <Image
+                  src="/showcase2.png"
+                  alt="DIRAC showcase 2"
+                  layout="responsive"
+                  width={400}
+                  height={400}
+                />
+              </div>
+            </Grid>
+            <Grid item xs={12} md={6} lg={4}>
+              <Item>
+                DIRAC has been adopted by several HEP and non-HEP experiments
+                communities, with different goals, intents, resources and
+                workflows: it is experiment agnostic, extensible, and flexible.
+              </Item>
+            </Grid>
           </Grid>
-        </Grid>
-      </Box>
+        </Box>
+      </MUIThemeProvider>
     </React.Fragment>
   );
 }