ajout d'un theme global pour toutes les couleurs primaire, secondaire et quelque texte principaux 💄

cryptide_project/src/App.tsx

@@ -23,6 +23,9 @@ import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
 /* Style */
 import './App.css';
 
+import { ThemeProvider } from './Style/ThemeContext';
+// import theme from './Style/Theme';
+
 /* bootstrap */
 import 'bootstrap/dist/css/bootstrap.min.css';
 
@@ -58,8 +61,10 @@ function App() {
   //     <img src={logo} className="App-logo" alt="logo" />
   //   </header>
   // </div>
+
   //@ts-ignore
   <IntlProvider locale={locale} messages={messages[locale]}>
+    <ThemeProvider>
       <BrowserRouter>  
         {/* <AppNavbar changeLocale={changeLocale} /> */}
         {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
@@ -74,6 +79,7 @@ function App() {
           <Route path="/info" element={<InfoPage/>} />
         </Routes>
       </BrowserRouter>
+    </ThemeProvider>
   </IntlProvider>
   );
 }

cryptide_project/src/Components/BigButtonNav.tsx

@@ -3,11 +3,20 @@ import { Link } from 'react-router-dom';
 import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';
 
+import { useTheme } from '../Style/ThemeContext';
+import COLORS from '../Style/Color';
 //@ts-ignore
 function BigButtonNav({ dest, img}) {
+    
+    const theme = useTheme();
+
+    // const mystyle = {
+    //     backgroundColor: "#0064E0",
+    // };
+
     return (
     <Link to={dest} className="link-without-underline">
-        <button className='bigbuttonNabImg'>
+        <button className='bigbuttonNabImg' style={{ backgroundColor: theme.colors.primary }}>
             <img src={img} alt="Button Image" height="100" width="100"/>
         </button>
     </Link>

cryptide_project/src/Components/ButtonImgNav.css

@@ -3,8 +3,8 @@
     width: auto;
     height: 65px;
 
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
-    color: #2A4541;
+    /* color: #2A4541; */
     border-radius: 15px;
     border-width: 0;
 
@@ -20,8 +20,8 @@
     width: auto;
     height: 100px;
 
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
-    color: #2A4541;
+    /* color: #2A4541; */
     border-radius: 15px;
     border-width: 0;
 

cryptide_project/src/Components/ButtonImgNav.tsx

@@ -3,11 +3,14 @@ import { Link } from 'react-router-dom';
 import './ButtonImgNav.css';
 import { FormattedMessage } from 'react-intl';
 
+import { useTheme } from '../Style/ThemeContext';
+
 //@ts-ignore
 function ButtonImgNav({ dest, img, text = "" }) {
+    const theme = useTheme();
     return (
     <Link to={dest} className="link-without-underline"> {/*target='_blank' ==> ouvre un nouvelle onglet*/ }
-        <button className='buttonNabImg'>
+        <button className='buttonNabImg' style={{ backgroundColor: theme.colors.primary, color: theme.colors.secondary}}>
             <img src={img} alt="Button Image" height="50" width="50"/>
             <p>{text}</p>
         </button>

cryptide_project/src/Components/ChoiceBar.css

@@ -13,10 +13,9 @@
 .choice-bar-button {
     margin: 5px;
     padding: 10px;
-    background-color: lightseagreen;
+    /* background-color: lightseagreen; */
     color: #fff;
     border: 2px solid grey;
     border-radius: 5px;
     cursor: pointer;
 }
-  

cryptide_project/src/Components/ChoiceBar.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
 import './ChoiceBar.css';
+import { useTheme } from '../Style/ThemeContext';
 
 const ChoiceBar = () => {
   const players = ['Player1', 'Player2', 'Player3']; 
-
+  const theme = useTheme();
   return (
     <div className="choice-bar-container">
       <h3 className="choice-bar-heading">Quel joueur voulez-vous interroger ?</h3>
       <div>
         {players.map((player, index) => (
-          <button key={index} className="choice-bar-button">
+          <button key={index} className="choice-bar-button" style={{ backgroundColor: theme.colors.primary }}>
             {player}
           </button>
         ))}

cryptide_project/src/Components/NavBar.css

@@ -1,6 +1,6 @@
 
 .custom-navbar{
-    background-color: #85C9C2;
+    /* background-color: #85C9C2; */
     color: #fff;
     text-emphasis-color: #fff;
 }
@@ -17,7 +17,6 @@
 
 
 .navbar-title-dd a {
-    background-color: #2A4541;
     color: #fff;
     border-radius: 15;
     padding: 10px 20px; /* Ajustez le rembourrage selon vos préférences */

cryptide_project/src/Components/NavBar.tsx

@@ -14,21 +14,25 @@ import { HiLanguage } from 'react-icons/hi2';
 /* Components */
 import './NavBar.css';
 
+/* Style */
+import { useTheme } from '../Style/ThemeContext';
+
 // @ts-ignore
 function AppNavbar({changeLocale}) {
+    const theme = useTheme();
     return (
-        <Navbar expand="lg" className="custom-navbar">
+        <Navbar expand="lg" className="custom-navbar" style={{ backgroundColor: theme.colors.primary }}>
         <Container>
             <Navbar.Brand href="/">
                 <div>
-                    <h2>Cryptide</h2>
+                    <h2 style={{color:theme.colors.text}}>Cryptide</h2>
-                    <h6>by Crypteam</h6>
+                    <h6 style={{color:theme.colors.text}}>by Crypteam</h6>
                 </div>
             </Navbar.Brand>
             <Navbar.Toggle aria-controls="basic-navbar-nav" />
             <Navbar.Collapse id="basic-navbar-nav">
             <Nav className="me-auto">
-                <NavDropdown title={<span><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown">
+                <NavDropdown title={<span style={{color:theme.colors.text}}><FormattedMessage id="play"/></span>} className="navbar-title" id="basic-nav-dropdown" >
                     <NavDropdown.Item href="play"><FormattedMessage id="play_solo"/> </NavDropdown.Item>
                     <NavDropdown.Divider />
                     <NavDropdown.Item href="play"><FormattedMessage id="create_room"/> </NavDropdown.Item>
@@ -37,11 +41,11 @@ function AppNavbar({changeLocale}) {
             </Nav>
             <div className='leftdiv'>
                 <Nav className="ml-auto navbar-title-dd">
-                    <Nav.Link href="login" className='navbar-title-dd'> 
+                    <Nav.Link href="login" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
                         <BiLogInCircle/>
                         <FormattedMessage id="log_in"/> 
                     </Nav.Link>
-                    <Nav.Link href="signup" className='navbar-title-dd'> 
+                    <Nav.Link href="signup" className='navbar-title-dd' style={{ backgroundColor: theme.colors.secondary }}> 
                         <BsFillPersonPlusFill/>
                         <FormattedMessage id="sign_up"/> 
                     </Nav.Link>

cryptide_project/src/Components/PersonStatus.tsx

@@ -1,15 +1,21 @@
 import React from 'react';
+
+/* Style */
 import '../Style/Global.css'
+import { useTheme } from '../Style/ThemeContext';
+
+/* Ressources */
 import Person from '../res/img/Person.png'
 import leave from '../res/img/bot.png'
 
 //@ts-ignore
 function PersonStatus({img = Person, state= leave, name = "Dummy"}) {
+    const theme=useTheme();
     return (
         <div className='centerDivV'>
             <img src={img} alt="player" height="100" width="100"/>
             <h4>{name}</h4>
-            <div className='statusDiv'>
+            <div className='statusDiv' style={{ backgroundColor: theme.colors.primary }}>
                 <img src={state} alt="state" height="30" width="30"/>
             </div>
         </div>

cryptide_project/src/Pages/EndGame.css

@@ -15,7 +15,7 @@
     width: fit-content;
 
     border-radius: 0px 0px 30px 30px;
-    border: solid #85C9C2;
+    border: solid;
     border-width: 0 5px;
 
     padding: 20px;

cryptide_project/src/Pages/EndGame.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
+
+
+/* Style */
 import './EndGame.css';
 import '../Style/Global.css';
+import { useTheme } from '../Style/ThemeContext';
+
+/* res */
 import Person from '../res/img/Person.png';
 import Leave from '../res/icon/leave.png';
 import Replay from '../res/icon/replay.png';
@@ -18,10 +24,12 @@ import { FormattedMessage } from 'react-intl';
 
 
 function EndGame() {
+
+    const theme = useTheme();
     return (
         <div>
             <div className="head">
-                <header className='leaderboard-header'>
+                <header className='leaderboard-header' style={{ borderColor: theme.colors.primary }}>
                     <h1>Dummy a gagné !</h1>
                     <h3>Le tueur était <u>Bob</u></h3>
                 </header>

cryptide_project/src/Pages/Home.css

@@ -6,7 +6,7 @@
     min-height: 100vh;
     display: flex;
     font-size: calc(10px + 2vmin);
-    color: #2A4541;
+    /* color: #2A4541; */
 }
 
 /**Divider**/
@@ -41,7 +41,7 @@
 
 /*Global ???*/
 .button {
-    background-color: #49A4BE;
+    /* background-color: #49A4BE;   */
     color: #fff;
     padding: 10px 20px;
     border-radius: 10;

cryptide_project/src/Pages/Home.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import './Home.css';
 import '../App.css';
+import { useTheme } from '../Style/ThemeContext';
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
+import ButtonImgNav from '../Components/ButtonImgNav';
 
 
 function Home() {
-
+    const theme=useTheme();
     return (
         
     <div className="home-container">
@@ -46,7 +48,13 @@ function Home() {
             <h3> <u><FormattedMessage id="game.illustratedBy"/></u><br/> Kwanchai Moriya</h3>
             {/* <button>Jouer au jeu</button> */}
             <br/>
-            <Link to="/play" className='button'> <FormattedMessage id="play"/> </Link>
+            <Link to="/play" className='button' 
+                style={{ 
+                    backgroundColor: theme.colors.primary,
+                    borderColor: theme.colors.secondary
+                }}>
+                <FormattedMessage id="play"/> 
+            </Link>
         </div>
     </div>
     );

cryptide_project/src/Pages/InGame.css

@@ -7,7 +7,7 @@
     width: 30%;
 
     border-radius: 0px 0px 30px 30px;
-    border: solid #85C9C2;
+    border: solid;
     border-width: 2px 5px;
 
     background-color: white;
@@ -89,7 +89,7 @@
 }
 
 .button{
-    background-color: #85C9C2;
+    /*background-color: #85C9C2;*/
     
     border: solid 2px #85C9C2;
     border-radius: 10px;

cryptide_project/src/Pages/InGame.tsx

@@ -3,7 +3,7 @@ import Switch from "react-switch";
 
 /* Style */
 import "./InGame.css"
-
+import {useTheme} from '../Style/ThemeContext'
 /* Component */
 import GraphContainer from '../Components/GraphContainer';
 import ChoiceBar from '../Components/ChoiceBar';
@@ -31,6 +31,7 @@ import Stub from '../source/Stub';
 import { HiLanguage } from 'react-icons/hi2';
 import { Nav, NavDropdown } from 'react-bootstrap';
 import { FormattedMessage } from 'react-intl';
+import Color from '../source/Color';
 
 //@ts-ignore
 const InGame = ({locale, changeLocale}) => {
@@ -55,7 +56,7 @@ const InGame = ({locale, changeLocale}) => {
   ];
 
 
-
+  const theme = useTheme();
 
     const [showChoiceBar, setShowChoiceBar] = useState(false);
   
@@ -116,7 +117,10 @@ const InGame = ({locale, changeLocale}) => {
 
     return (
       <div id="mainDiv">
-        <div className='upperInfo'>
+        <div className='upperInfo' 
+          style={{ 
+              borderColor: theme.colors.secondary
+          }}>
           {/* texte changeable et a traduire */}
           <p>Dummy, à vous de jouer !</p>
         </div>
@@ -125,20 +129,34 @@ const InGame = ({locale, changeLocale}) => {
         </div>
 
         <div className='playerlistDiv'>
-          <button className='button' onClick={handleChangeP}>
+          <button className='button' 
+            style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeP}>
             Players
           </button>
         </div>
 
         <div className='paramDiv'>
-          <button className='button' onClick={handleChangeS}>
+          <button className='button'
+            style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+            }}
+            onClick={handleChangeS}>
             <img src={Param} alt="paramètres" height='40'/>
           </button>
         </div>
 
         <div className='menuGame'>
           <Link to='/info' target='_blank'>
-            <button className='button'>
+            <button className='button' 
+              style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+              }}>
               <img src={Info} alt="info" height="40"/>
             </button>
           </Link>
@@ -147,12 +165,20 @@ const InGame = ({locale, changeLocale}) => {
           </button> */}
 
           <Link to='/info' target='_blank'>
-            <button className='button'>
+            <button className='button'
+              style={{ 
+                backgroundColor: theme.colors.primary,
+                borderColor: theme.colors.secondary
+              }}>
               <img src={Check} alt="check" height="40"/>
             </button>
           </Link>
 
-          <button className='button' onClick={handleChange}>
+          <button className='button' onClick={handleChange}
+            style={{ 
+              backgroundColor: theme.colors.primary,
+              borderColor: theme.colors.secondary
+            }}>
             <img src={Alpha} alt="indice" height="40"/>
           </button>
         </div>
@@ -226,7 +252,7 @@ const InGame = ({locale, changeLocale}) => {
         <div id="bottom-container">
           {showChoiceBar && <ChoiceBar />}
         </div>
-        <div id="endgamebutton"> {/*  tmp */}
+        <div id="endgamebutton" > {/*  tmp */}
           <ButtonImgNav dest="/endgame" img={Leave} text='endgame'/>
         </div>
       </div>

cryptide_project/src/Pages/Lobby.css

@@ -5,7 +5,7 @@
     background-color: #fff;
     min-height: 100vh;
     font-size: calc(10px + 2vmin);
-    color: #2A4541;
+    /* color: #2A4541; */
 }
 
 .left-section {
@@ -15,8 +15,8 @@
 }
 
 .lobby-vertical-divider{
-    width: 5px;
+    width: 10px;
-    background-color: #2A4541;
+    /* background-color: #2A4541; */
 }
 
 .right-section {

cryptide_project/src/Pages/Lobby.tsx

@@ -1,13 +1,21 @@
 import React from 'react';
+
+/* Style */
 import './Lobby.css';
-import PlayerItemList from '../Components/PlayerItemList'
+import { useTheme } from '../Style/ThemeContext';
+
+/* res */
 import Person from '../res/img/Person.png';
 import Bot from '../res/img/bot.png';
 import param from '../res/icon/param.png';
 import cible from '../res/icon/cible.png';
+
+/* Component */
 import ButtonImgNav from '../Components/ButtonImgNav';
+import PlayerItemList from '../Components/PlayerItemList'
 
 function Lobby() {
+    const theme=useTheme();
     return (
         <div className='lobby-container'>
             <div className='left-part'>
@@ -19,7 +27,7 @@ function Lobby() {
                 </div>
             </div>
 
-            <div className="lobby-vertical-divider"></div>
+            <div className="lobby-vertical-divider" style={{backgroundColor: theme.colors.secondary}}></div>
 
             <div className='right-part'>
                 <div className='title-param-div'>

cryptide_project/src/Pages/Play.css

@@ -79,10 +79,13 @@
     width:200px;
     height: 8vh;
 
-    background-color: #85C9C2;
+    /* background-color: #85C9C2;
-    color: #2A4541;
+    color: #2A4541; */
+    color: white;
+
+    border: solid;
     border-radius: 15px;
-    border-width: 0;
+    border-width: 2px;
 
     font-size:larger;
 }

cryptide_project/src/Pages/Play.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-/* Page */
+/* Style */
 import './Play.css';
+import { useTheme } from '../Style/ThemeContext';
 
 /* Nav */
 import { Link } from 'react-router-dom';
@@ -19,6 +20,7 @@ import share from '../res/icon/share.png';
 
 
 function Play() {
+    const theme=useTheme()
     return (
 
         <div className="MainContainer">
@@ -41,13 +43,13 @@ function Play() {
                 </div>
                 <div className='buttonGroupVertical'>
                     <Link to="/lobby">
-                        <button className="ButtonNav"> Jouer seul </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Jouer seul </button>
                     </Link>
                     <Link to="/">
-                        <button className="ButtonNav"> Créer une partie </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Créer une partie </button>
                     </Link>
                     <Link to="/">
-                        <button className="ButtonNav"> Rejoindre </button>
+                        <button className="ButtonNav" style={{backgroundColor: theme.colors.primary, borderColor: theme.colors.secondary}}> Rejoindre </button>
                     </Link>
                 </div>
             </div>

cryptide_project/src/Style/Color.tsx

@@ -0,0 +1,10 @@
+const COLORS = {
+    primary:'#0064E0',
+    secondary:'',
+    tertiary:'',
+    
+    white: '#fff',
+    black: '#000',
+}
+
+export default COLORS;

cryptide_project/src/Style/Global.css

@@ -23,7 +23,7 @@
 }
 
 .statusDiv{
-    background-color: #A7E2DC;
+    /* background-color: #A7E2DC; */
     border-radius: 15px;
 
     height: 30px;

cryptide_project/src/Style/Theme.tsx

@@ -0,0 +1,13 @@
+// theme.js
+const theme = {
+    colors: {
+        primary: '#0064E0',
+        secondary: '#0052B8',
+        
+        text: '#fff'
+
+        //faire une gestion dark/light
+    },
+};
+
+export default theme;

cryptide_project/src/Style/ThemeContext.tsx

@@ -0,0 +1,15 @@
+// ThemeContext.js
+import React, { createContext, useContext } from 'react';
+import theme from './Theme';
+
+const ThemeContext = createContext(theme);
+
+export const useTheme = () => useContext(ThemeContext);
+
+//@ts-ignore
+export const ThemeProvider = ({ children }) => (
+    <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
+);
+
+
+//* style={{ color: theme.colors.primary }}