add dark mode globally and switch in different components

2024-05-05 03:50:34 +02:00 · 2024-05-05 03:50:34 +02:00 · 151c9d9dc5
commit 151c9d9dc5
parent 0022c30d5e
12 changed files with 289 additions and 108 deletions
--- a/my-app/package-lock.json
+++ b/my-app/package-lock.json
@ -28,6 +28,7 @@
        "react-country-flag": "^3.1.0",
        "react-dom": "^18.3.1",
        "react-icons": "^5.2.0",
+        "react-router-dom": "^6.23.0",
        "react-scripts": "^5.0.1",
        "typescript": "^4.9.5",
        "web-vitals": "^2.1.4"
@ -3770,6 +3771,14 @@
        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
      }
    },
+    "node_modules/@remix-run/router": {
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+      "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
    "node_modules/@restart/hooks": {
      "version": "0.4.16",
      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
@ -15559,6 +15568,36 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-router": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+      "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.23.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+      "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+      "dependencies": {
+        "@remix-run/router": "1.16.0",
+        "react-router": "6.23.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
    "node_modules/react-scripts": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
--- a/my-app/package.json
+++ b/my-app/package.json
@ -23,6 +23,7 @@
    "react-country-flag": "^3.1.0",
    "react-dom": "^18.3.1",
    "react-icons": "^5.2.0",
+    "react-router-dom": "^6.23.0",
    "react-scripts": "^5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
--- a/my-app/src/App.tsx
+++ b/my-app/src/App.tsx
@ -1,29 +1,21 @@

-// import React from 'react';
-import logo from './img/first.jpg';
-import background from "./img/background.jpg";
-// import background_dark from "./img/background_dark.jpg";
 import './css/App.css';
 import './css/mine.css';
 import './css/mine_phone.css';

-import MenuSimple from './components/language';
-import ButtonSimple from './components/button'
-import MaterialUISwitch from './components/switch'
+import Home from './pages/home'

-import { Card, CardContent, CardMedia, Switch, Typography } from "@mui/material"
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { dark } from '@mui/material/styles/createPalette';
-// import { Switch } from '@mui/base/Switch';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import React, { useState } from "react";
-import { FaArrowRightLong } from "react-icons/fa6";
+import CssBaseline from '@mui/material/CssBaseline';
+import Header from './components/header';
+import { ColorModeContext } from './utils/color-toggle';
+

-import Button from '@mui/material/Button';

 function App()
 {
-
  // state to manage the dark mode
  const [toggleDarkMode, setToggleDarkMode] = useState(true);

@ -46,81 +38,14 @@ function App()
  });

  return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
-      <div>
-        <body>
-          <header>
-              <div className="header-content">
-                {/* <h1 className="title">A.P</h1> */}
-                <div className="logo">
-                  <img src={logo} alt="Logo" />
-                </div>
-
-                <div className="pages">
-                  Contact
-                </div>
-                <div className="pages">
-                  Projets
-                </div>
-                <div className="pages">
-                  CV
-                </div>
-                <div className="pages">
-                  Competences
-                </div>
-
-
-                <div className="language">
-                  <MenuSimple/>
-                  <MaterialUISwitch onChange={toggleDarkTheme}/>
-                  {/* <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked /> */}
-                </div>
-              </div>
-          </header>
-          <div className='home'>
-            <div className="presentation">
-                <div className='hello'>Bienvenue.</div>
-                <div className="description">Étudiant a 42 en informatique, je cherche un emploi afin de compléter 
-                  ma formation académique par une expérience professionnelle qui a du sens. 
-                  Je suis ouvert à de nombreuses propositions en rapport avec mes études 
-                  et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div>
-                <div className="cv_button">
-                  {/* <UnstyledButtonsSimple/> */}
-                  <ButtonSimple/>
-                </div>
-                {/* <div className="project_button"> */}
-                  {/* <UnstyledButtonsSimple/> */}
-                {/* </div> */}
-            </div>
-            <div className="project">
-                <div className='project_txt'>Projects</div>
-                <div className = "project_group">
-                  <p className="project_list">- Ft_Transcendence</p>
-                  <FaArrowRightLong className="arrow"/>
-                </div>
-                <div className = "project_group">
-                  <p className="project_list">- Cloud-1</p>
-                  <FaArrowRightLong className="arrow"/>
-                </div>
-                <div className = "project_group">
-                  <p className="project_list">- Minishell</p>
-                  <FaArrowRightLong className="arrow"/>
-                </div>
-                <div className = "project_group">
-                  <p className="project_list">- Cube3d</p>
-                  <FaArrowRightLong className="arrow"/>
-                </div>
-                <div className = "project_group">
-                  <p className="project_list">- Homemade NAS</p>
-                  <FaArrowRightLong className="arrow"/>
-                </div>
-
-            </div>
-          </div>
-        </body>
-      </div>
-    </ThemeProvider>
+    <BrowserRouter>
+    <CssBaseline />
+    <Header/>
+    <Routes>
+        <Route path="/" element={<Home/>}/>
+        <Route path="/test" element={<></>}/>
+    </Routes>
+    </BrowserRouter>
  );
 }

--- a/my-app/src/components/button.tsx
+++ b/my-app/src/components/button.tsx
@ -34,10 +34,10 @@ const grey = {

 const Button = styled(BaseButton)(
  ({ theme }) => `
+  align-self: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
-  line-height: 1.5;
  background-color: ${blue[500]};
  padding: 8px 16px;
  border-radius: 8px;
--- a/my-app/src/components/header.tsx
+++ b/my-app/src/components/header.tsx
@ -0,0 +1,64 @@
+import MenuSimple from './language';
+import MaterialUISwitch from './switch'
+import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
+// import { ThemeProvider, createTheme } from '@mui/material/styles';
+import React, { useState, useContext } from "react";
+
+import logo from '../img/first.jpg';
+
+// import { ColorModeContext } from '../utils/color-toggle'
+
+// const theme = useTheme()
+// const colorMode = React.useContext(ColorModeContext);
+
+import { ColorModeContext } from '../utils/color-toggle';
+
+// const { ColorMode, setColorMode } = useColorMode();
+
+
+function Header()
+{
+    
+    const { changeMode } = useContext(ColorModeContext);
+    // const { colorMode, setColorMode } = changeMode();
+
+    // const toggleColorMode = () => {
+    //     // Call setColorMode and pass the new color mode value
+    //     setColorMode(colorMode === 'light' ? 'dark' : 'light');
+    // };
+
+    return (
+        // <ThemeProvider theme={darkTheme}>
+        <header>
+            <div className="header-content">
+              {/* <h1 className="title">A.P</h1> */}
+              <div className="logo">
+                <img src={logo} alt="Logo" />
+              </div>
+
+              <div className="pages">
+                Contact
+              </div>
+              <div className="pages">
+                Projets
+              </div>
+              <div className="pages">
+                CV
+              </div>
+              <div className="pages">
+                Competences
+              </div>
+
+
+              <div className="language">
+                <MenuSimple/>
+                <MaterialUISwitch onChange={changeMode}/>
+                {/* <Switch className="dark_mode" checked={toggleDarkMode} onChange={toggleDarkTheme} defaultChecked /> */}
+              </div>
+            </div>
+        </header>
+        // </ThemeProvider>
+    )
+}
+
+export default Header;
--- a/my-app/src/components/test.tsx
+++ b/my-app/src/components/test.tsx
@ -0,0 +1,62 @@
+import * as React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
+// import Brightness4Icon from '@mui/icons-material/Brightness4';
+// import Brightness7Icon from '@mui/icons-material/Brightness7';
+
+const ColorModeContext = React.createContext({ toggleColorMode: () => {} });
+
+// function MyApp() {
+//   const theme = useTheme();
+//   const colorMode = React.useContext(ColorModeContext);
+//   return (
+//     <Box
+//       sx={{
+//         display: 'flex',
+//         width: '100%',
+//         alignItems: 'center',
+//         justifyContent: 'center',
+//         bgcolor: 'background.default',
+//         color: 'text.primary',
+//         borderRadius: 1,
+//         p: 3,
+//       }}
+//     >
+//       {theme.palette.mode} mode
+//       <IconButton sx={{ ml: 1 }} onClick={colorMode.toggleColorMode} color="inherit">
+//         {theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
+//       </IconButton>
+//     </Box>
+//   );
+// }
+
+export default function ToggleColorMode() {
+  const [mode, setMode] = React.useState<'light' | 'dark'>('light');
+  const colorMode = React.useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+      },
+    }),
+    [],
+  );
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+        },
+      }),
+    [mode],
+  );
+
+//   return (
+//     <ColorModeContext.Provider value={colorMode}>
+//       <ThemeProvider theme={theme}>
+//         <MyApp />
+//       </ThemeProvider>
+//     </ColorModeContext.Provider>
+//   );
+}
--- a/my-app/src/css/mine.css
+++ b/my-app/src/css/mine.css
@ -60,8 +60,8 @@ body {
    /* height: 5vh; */

    transition-property: transform;
-    transition-duration: 1s;
-    transition: all 700ms ease;
+    /* transition-duration: 200ms; */
+    transition: all 200ms ease;

    &:hover {
      transform: scale(1.1);
@ -93,9 +93,8 @@ body {
    margin-right: 0vw;
  }

-  .css-15bhy65 {
+  /* .css-15bhy65 {
    /* margin-right:  20px; */
-  }

  Button{
    font-weight: 800;
@ -175,9 +174,9 @@ body {

  }
  
-  .css-cg7pzv {
+  /* .css-cg7pzv {
    width: 20vw;
-  } 
+  }  */

  .project_group {
    font-size: 1vw;
@ -194,7 +193,7 @@ body {
    margin-right: 2vw;
    /* justify-content: space-between; */
    transition-property: transform;
-    transition-duration: 700ms;
+    transition-duration: 500ms;
    &:hover {
        transform: scale(1.15);
    }
--- a/my-app/src/css/mine_phone.css
+++ b/my-app/src/css/mine_phone.css
@ -47,12 +47,11 @@
        max-width: 100%;
    }
    .cv_button {
-        width: 20vw;
+        width: 100%;
        margin: 0;
        margin-top: 5vw;
-        margin-right: 40vw;
-        margin-left: 40vw;
-
+        /* margin-right: 40vw; */
+        /* margin-left: 40vw; */
        /* align-module: center; */
        /* align-items: center; */
        /* display: inline-block; */
--- a/my-app/src/index.tsx
+++ b/my-app/src/index.tsx
@ -2,14 +2,18 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+// import ColorModeProvider from './utils/color-toggle';
 import reportWebVitals from './reportWebVitals';

+
+import { ColorModeProvider } from "./utils/color-toggle"
+
 const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
 );
 root.render(
  <React.StrictMode>
-    <App />
+      <ColorModeProvider />
  </React.StrictMode>
 );

--- a/my-app/src/pages/home.tsx
+++ b/my-app/src/pages/home.tsx
@ -0,0 +1,52 @@
+import Header from '../components/header'
+import ButtonSimple from '../components/button'
+
+import { FaArrowRightLong } from "react-icons/fa6";
+
+function Home()
+{
+    return(
+      <div>
+        <body>
+          {/* <Header/> */}
+          <div className='home'>
+            <div className="presentation">
+                <div className='hello'>Bienvenue.</div>
+                <div className="description">Étudiant a 42 en informatique, je cherche un emploi afin de compléter 
+                  ma formation académique par une expérience professionnelle qui a du sens. 
+                  Je suis ouvert à de nombreuses propositions en rapport avec mes études 
+                  et suis prêt à discuter de mon parcours plus amplement lors d’un entretien.</div>
+                <div className="cv_button">
+                  <ButtonSimple/>
+                </div>
+            </div>
+            <div className="project">
+                <div className='project_txt'>Projects</div>
+                <div className = "project_group">
+                  <p className="project_list">- Ft_Transcendence</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- Cloud-1</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- Minishell</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- Cube3d</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+                <div className = "project_group">
+                  <p className="project_list">- Homemade NAS</p>
+                  <FaArrowRightLong className="arrow"/>
+                </div>
+            </div>
+          </div>
+        </body>
+      </div>
+    )
+}
+
+export default Home;
--- a/my-app/src/setupTests.ts
+++ b/my-app/src/setupTests.ts
@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
--- a/my-app/src/utils/color-toggle.tsx
+++ b/my-app/src/utils/color-toggle.tsx
@ -0,0 +1,41 @@
+import React, { createContext, useContext, useState } from 'react';
+import { useTheme, ThemeProvider, createTheme } from '@mui/material/styles';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
+
+import CssBaseline from '@mui/material/CssBaseline';
+
+import Header from '../components/header';
+import App from "../App"
+
+
+export const ColorModeContext = createContext<any>(true);
+
+export const ColorModeProvider = ({ children }: any) => {
+    
+    const [ColorMode, setColorMode] = useState(true); // Define your initial state here
+    const darkTheme = createTheme({
+      palette: {
+        mode: ColorMode ? 'dark' : 'light',
+        primary: {
+          main: '#90caf9',
+        },
+        secondary: {
+          main: '#131052',
+        },
+      },
+    });
+    
+    function changeMode() {
+        console.log("CHANGE MOOOOODE")
+        setColorMode(!ColorMode)
+    }
+
+    return (
+        <ThemeProvider theme={darkTheme}>        
+        <ColorModeContext.Provider value={{ ColorMode, changeMode }}>
+            <App/>
+        </ColorModeContext.Provider>
+        </ThemeProvider>
+
+    );
+};