dark theme added

2024-11-07 00:46:47 +05:30
parent 04ed79b337
commit f4a0327c9a
4 changed files with 154 additions and 183 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,96 +1,22 @@
 import React from 'react';
 import { Routes, Route } from 'react-router-dom';
-import { ThemeProvider, createTheme } from "@mui/material/styles";
+import {  createTheme } from "@mui/material/styles";
 import { GlobalInfoProvider } from "./context/globalInfo";
 import { PageWrapper } from "./pages/PageWrappper";
+import ThemeModeProvider from './context/theme-provider';
+

-const theme = createTheme({
-  palette: {
-    primary: {
-      main: "#ff00c3",
-      contrastText: "#ffffff",
-    },
-  },
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          // Default styles for all buttons (optional)
-          textTransform: "none",
-        },
-        containedPrimary: {
-          // Styles for 'contained' variant with 'primary' color
-          '&:hover': {
-            backgroundColor: "#ff66d9",
-          },
-        },
-        outlined: {
-          // Apply white background for all 'outlined' variant buttons
-          backgroundColor: "#ffffff",
-          '&:hover': {
-            backgroundColor: "#f0f0f0", // Optional lighter background on hover
-          },
-        },
-      },
-    },
-    MuiLink: {
-      styleOverrides: {
-        root: {
-          '&:hover': {
-            color: "#ff00c3",
-          },
-        },
-      },
-    },
-    MuiIconButton: {
-      styleOverrides: {
-        root: {
-          // '&:hover': {
-          //   color: "#ff66d9",
-          // },
-        },
-      },
-    },
-    MuiTab: {
-      styleOverrides: {
-        root: {
-          textTransform: "none",
-        },
-      },
-    },
-    MuiAlert: {
-      styleOverrides: {
-        standardInfo: {
-          backgroundColor: "#fce1f4",
-          color: "#ff00c3",
-          '& .MuiAlert-icon': {
-            color: "#ff00c3",
-          },
-        },
-      },
-    },
-    MuiAlertTitle: {
-      styleOverrides: {
-        root: {
-          '& .MuiAlert-icon': {
-            color: "#ffffff",
-          },
-        },
-      },
-    },
-  },
-});


 function App() {
  return (
-    <ThemeProvider theme={theme}>
+    <ThemeModeProvider>
      <GlobalInfoProvider>
        <Routes>
          <Route path="/*" element={<PageWrapper />} />
        </Routes>
      </GlobalInfoProvider>
-    </ThemeProvider>
+    </ThemeModeProvider>
  );
 }

--- a/src/components/molecules/NavBar.tsx
+++ b/src/components/molecules/NavBar.tsx
@@ -3,14 +3,15 @@ import axios from 'axios';
 import styled from "styled-components";
 import { stopRecording } from "../../api/recording";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { IconButton, Menu, MenuItem, Typography, Avatar } from "@mui/material";
-import { AccountCircle, Logout, Clear } from "@mui/icons-material";
+import { IconButton, Menu, MenuItem, Typography, Avatar, Tooltip } from "@mui/material";
+import { AccountCircle, Logout, Clear, Brightness4, Brightness7 } from "@mui/icons-material";
 import { useNavigate } from 'react-router-dom';
 import { AuthContext } from '../../context/auth';
 import { SaveRecording } from '../molecules/SaveRecording';
 import DiscordIcon from '../atoms/DiscordIcon';
 import { apiUrl } from '../../apiConfig';
 import MaxunLogo from "../../assets/maxunlogo.png";
+import { useThemeMode } from '../../context/theme-provider';

 interface NavBarProps {
  recordingName: string;
@@ -18,10 +19,11 @@ interface NavBarProps {
 }

 export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) => {
-  const { notify, browserId, setBrowserId, recordingUrl } = useGlobalInfoStore();
+  const { notify, browserId, setBrowserId } = useGlobalInfoStore();
  const { state, dispatch } = useContext(AuthContext);
  const { user } = state;
  const navigate = useNavigate();
+  const { darkMode, toggleTheme } = useThemeMode();

  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

@@ -51,20 +53,18 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
  };

  return (
-    <NavBarWrapper>
-      <div style={{
-        display: 'flex',
-        justifyContent: 'flex-start',
-      }}>
+    <NavBarWrapper mode={darkMode ? 'dark' : 'light'}>
+      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
        <img src={MaxunLogo} width={45} height={40} style={{ borderRadius: '5px', margin: '5px 0px 5px 15px' }} />
-        <div style={{ padding: '11px' }}><ProjectName>Maxun</ProjectName></div>
+        <div style={{ padding: '11px' }}>
+          <ProjectName mode={darkMode ? 'dark' : 'light'}>Maxun</ProjectName>
+        </div>
      </div>
-      {
-        user ? (
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
-            {!isRecording ? (
-              <>
-                <IconButton
+      {user ? (
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }}>
+          {!isRecording ? (
+            <>
+              <IconButton
                component="a"
                href="https://discord.gg/NFhWDCdb"
                target="_blank"
@@ -76,72 +76,71 @@ export const NavBar: React.FC<NavBarProps> = ({ recordingName, isRecording }) =>
                  padding: '8px',
                  marginRight: '10px',
                }}
-                >
+              >
                <DiscordIcon sx={{ marginRight: '5px' }} />
-                </IconButton>
+              </IconButton>
              <iframe src="https://ghbtns.com/github-btn.html?user=getmaxun&repo=maxun&type=star&count=true&size=large" frameBorder="0" scrolling="0" width="170" height="30" title="GitHub"></iframe>
-                <IconButton onClick={handleMenuOpen} sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  borderRadius: '5px',
-                  padding: '8px',
-                  marginRight: '10px',
-                  '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
-                }}>
-                  <AccountCircle sx={{ marginRight: '5px' }} />
-                  <Typography variant="body1">{user.email}</Typography>
+              <IconButton onClick={handleMenuOpen} sx={{
+                display: 'flex',
+                alignItems: 'center',
+                borderRadius: '5px',
+                padding: '8px',
+                marginRight: '10px',
+                '&:hover': { backgroundColor: 'white', color: '#ff00c3' }
+              }}>
+                <AccountCircle sx={{ marginRight: '5px' }} />
+                <Typography variant="body1">{user.email}</Typography>
+              </IconButton>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleMenuClose}
+                anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+                transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+              >
+                <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
+                  <Logout sx={{ marginRight: '5px' }} /> Logout
+                </MenuItem>
+              </Menu>
+              {/* Theme Toggle Button */}
+              <Tooltip title="Toggle light/dark theme">
+                <IconButton onClick={toggleTheme} color="inherit">
+                  {darkMode ? <Brightness7 /> : <Brightness4 />}
                </IconButton>
-                <Menu
-                  anchorEl={anchorEl}
-                  open={Boolean(anchorEl)}
-                  onClose={handleMenuClose}
-                  anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'right',
-                  }}
-                  transformOrigin={{
-                    vertical: 'top',
-                    horizontal: 'right',
-                  }}
-                >
-                  <MenuItem onClick={() => { handleMenuClose(); logout(); }}>
-                    <Logout sx={{ marginRight: '5px' }} /> Logout
-                  </MenuItem>
-                </Menu>
-              </>
-            ) : (
-              <>
-                <IconButton onClick={goToMainMenu} sx={{
-                  borderRadius: '5px',
-                  padding: '8px',
-                  background: 'red',
-                  color: 'white',
-                  marginRight: '10px',
-                  '&:hover': { color: 'white', backgroundColor: 'red' }
-                }}>
-                  <Clear sx={{ marginRight: '5px' }} />
-                  Discard
-                </IconButton>
-                <SaveRecording fileName={recordingName} />
-              </>
-            )}
-          </div>
-        ) : ""
-      }
+              </Tooltip>
+            </>
+          ) : (
+            <>
+              <IconButton onClick={goToMainMenu} sx={{
+                borderRadius: '5px',
+                padding: '8px',
+                background: 'red',
+                color: 'white',
+                marginRight: '10px',
+                '&:hover': { color: 'white', backgroundColor: 'red' }
+              }}>
+                <Clear sx={{ marginRight: '5px' }} />
+                Discard
+              </IconButton>
+              <SaveRecording fileName={recordingName} />
+            </>
+          )}
+        </div>
+      ) : null}
    </NavBarWrapper>
  );
 };

-const NavBarWrapper = styled.div`
+const NavBarWrapper = styled.div<{ mode: 'light' | 'dark' }>`
  grid-area: navbar;
-  background-color: white;
-  padding:5px;
+  background-color: ${({ mode }) => (mode === 'dark' ? '#1e2124' : '#ffffff')};
+  padding: 5px;
  display: flex;
  justify-content: space-between;
-  border-bottom: 1px solid #e0e0e0;
+  border-bottom: 1px solid ${({ mode }) => (mode === 'dark' ? '#333' : '#e0e0e0')};
 `;

-const ProjectName = styled.b`
-  color: #3f4853;
+const ProjectName = styled.b<{ mode: 'light' | 'dark' }>`
+  color: ${({ mode }) => (mode === 'dark' ? 'white' : 'black')};
  font-size: 1.3em;
 `;
--- a/src/components/organisms/MainMenu.tsx
+++ b/src/components/organisms/MainMenu.tsx
@@ -1,10 +1,9 @@
-import * as React from 'react';
+import React from 'react';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
-import { Paper, Button } from "@mui/material";
-import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, Link, CloudQueue } from "@mui/icons-material";
-import { apiUrl } from "../../apiConfig";
+import { Paper, Button, useTheme } from "@mui/material";
+import { AutoAwesome, FormatListBulleted, VpnKey, Usb, Article, CloudQueue } from "@mui/icons-material";

 interface MainMenuProps {
  value: string;
@@ -12,6 +11,7 @@ interface MainMenuProps {
 }

 export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenuProps) => {
+  const theme = useTheme();

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    handleChangeContent(newValue);
@@ -22,16 +22,14 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
      sx={{
        height: 'auto',
        width: '250px',
-        backgroundColor: 'white',
+        backgroundColor: theme.palette.background.paper,
        paddingTop: '0.5rem',
+        color: theme.palette.text.primary,
      }}
      variant="outlined"
      square
    >
-      <Box sx={{
-        width: '100%',
-        paddingBottom: '1rem',
-      }}>
+      <Box sx={{ width: '100%', paddingBottom: '1rem' }}>
        <Tabs
          value={value}
          onChange={handleChange}
@@ -41,44 +39,28 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
          sx={{ alignItems: 'flex-start' }}
        >
          <Tab
-            sx={{
-              justifyContent: 'flex-start',
-              textAlign: 'left',
-              fontSize: 'medium',
-            }}
+            sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
            value="recordings"
            label="Robots"
            icon={<AutoAwesome />}
            iconPosition="start"
          />
          <Tab
-            sx={{
-              justifyContent: 'flex-start',
-              textAlign: 'left',
-              fontSize: 'medium',
-            }}
+            sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
            value="runs"
            label="Runs"
            icon={<FormatListBulleted />}
            iconPosition="start"
          />
          <Tab
-            sx={{
-              justifyContent: 'flex-start',
-              textAlign: 'left',
-              fontSize: 'medium',
-            }}
+            sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
            value="proxy"
            label="Proxy"
            icon={<Usb />}
            iconPosition="start"
          />
          <Tab
-            sx={{
-              justifyContent: 'flex-start',
-              textAlign: 'left',
-              fontSize: 'medium',
-            }}
+            sx={{ justifyContent: 'flex-start', textAlign: 'left', fontSize: 'medium', color: theme.palette.text.primary }}
            value="apikey"
            label="API Key"
            icon={<VpnKey />}
@@ -87,7 +69,7 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
        </Tabs>
        <hr />
        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1rem', textAlign: 'left' }}>
-          <Button href={`${apiUrl}/api-docs/`} target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
+          <Button href="/api-docs" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<Article />}>
            API Docs
          </Button>
          <Button href="https://forms.gle/hXjgqDvkEhPcaBW76" target="_blank" rel="noopener noreferrer" sx={buttonStyles} startIcon={<CloudQueue />}>
@@ -97,17 +79,17 @@ export const MainMenu = ({ value = 'recordings', handleChangeContent }: MainMenu
      </Box>
    </Paper>
  );
-}
+};

 const buttonStyles = {
  justifyContent: 'flex-start',
  textAlign: 'left',
  fontSize: 'medium',
-  padding: '6px 16px 6px 22px', 
+  padding: '6px 16px 6px 22px',
  minHeight: '48px',
  minWidth: '100%',
  display: 'flex',
  alignItems: 'center',
  textTransform: 'none',
-  color: '#6C6C6C !important',
-};
+  color: 'inherit',
+};
--- a/src/context/theme-provider.tsx
+++ b/src/context/theme-provider.tsx
@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useState } from 'react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+
+const lightTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: '#1e88e5',
+    },
+    background: {
+      default: '#ffffff',
+      paper: '#f5f5f5',
+    },
+    text: {
+      primary: '#000000',
+    },
+  },
+});
+
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    primary: {
+      main: '#90caf9',
+    },
+    background: {
+      default: '#121212',
+      paper: '#1e2124',
+    },
+    text: {
+      primary: '#ffffff',
+    },
+  },
+});
+
+// Create context for theme mode with state for current mode
+// In theme-provider.tsx
+
+const ThemeModeContext = createContext({
+  toggleTheme: () => {},
+  darkMode: false, // Add darkMode to context
+});
+
+export const useThemeMode = () => useContext(ThemeModeContext);
+
+const ThemeModeProvider = ({ children }: { children: React.ReactNode }) => {
+  const [darkMode, setDarkMode] = useState(false);
+
+  const toggleTheme = () => {
+    setDarkMode((prevMode) => !prevMode);
+  };
+
+  return (
+    <ThemeModeContext.Provider value={{ toggleTheme, darkMode }}> {/* Pass darkMode here */}
+      <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </ThemeModeContext.Provider>
+  );
+};
+
+export default ThemeModeProvider;