Crypteam
/
Cryptid
4
0
Fork 0
Code Issues 10 Pull Requests Packages Projects 9 Releases Wiki Activity

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

Browse Source
pull/52/head
Pierre Ferreira 1 year ago
parent 1e965a011e
commit faf141db42
23 changed files with 183 additions and 63 deletions
Show Stats Download Patch File Download Diff File

34
cryptide_project/src/App.tsx
Unescape View File

@ -23,6 +23,9 @@ import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
/* Style */ /* Style */
import './App.css'; import './App.css';
import { ThemeProvider } from './Style/ThemeContext';
// import theme from './Style/Theme';
/* bootstrap */ /* bootstrap */
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
@ -58,22 +61,25 @@ function App() {
// <img src={logo} className="App-logo" alt="logo" /> // <img src={logo} className="App-logo" alt="logo" />
// </header> // </header>
// </div> // </div>
//@ts-ignore //@ts-ignore
<IntlProvider locale={locale} messages={messages[locale]}> <IntlProvider locale={locale} messages={messages[locale]}>
<BrowserRouter> <ThemeProvider>
{/* <AppNavbar changeLocale={changeLocale} /> */} <BrowserRouter>
{hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />} {/* <AppNavbar changeLocale={changeLocale} /> */}
<Routes> {hasNavbarVisible && <AppNavbar changeLocale={changeLocale} />}
<Route path="/" element={<Home />} /> <Routes>
<Route path="/login" element={<Login />} /> <Route path="/" element={<Home />} />
<Route path="/signup" element={<SignUp />} /> <Route path="/login" element={<Login />} />
<Route path="/play" element={<Play/>} /> <Route path="/signup" element={<SignUp />} />
<Route path="/lobby" element={<Lobby/>} /> <Route path="/play" element={<Play/>} />
<Route path="/endgame" element={<EndGame/>} /> <Route path="/lobby" element={<Lobby/>} />
<Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale} />} /> <Route path="/endgame" element={<EndGame/>} />
<Route path="/info" element={<InfoPage/>} /> <Route path="/game" element={<InGame locale={locale} changeLocale={changeLocale} />} />
</Routes> <Route path="/info" element={<InfoPage/>} />
</BrowserRouter> </Routes>
</BrowserRouter>
</ThemeProvider>
</IntlProvider> </IntlProvider>
); );
} }

11
cryptide_project/src/Components/BigButtonNav.tsx
Unescape View File

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

8
cryptide_project/src/Components/ButtonImgNav.css
Unescape View File

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

5
cryptide_project/src/Components/ButtonImgNav.tsx
Unescape View File

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

3
cryptide_project/src/Components/ChoiceBar.css
Unescape View File

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

5
cryptide_project/src/Components/ChoiceBar.tsx
Unescape View File

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

3
cryptide_project/src/Components/NavBar.css
Unescape View File

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

16
cryptide_project/src/Components/NavBar.tsx
Unescape View File

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

8
cryptide_project/src/Components/PersonStatus.tsx
Unescape View File

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

2
cryptide_project/src/Pages/EndGame.css
Unescape View File

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

10
cryptide_project/src/Pages/EndGame.tsx
Unescape View File

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

4
cryptide_project/src/Pages/Home.css
Unescape View File

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

12
cryptide_project/src/Pages/Home.tsx
Unescape View File

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

4
cryptide_project/src/Pages/InGame.css
Unescape View File

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

44
cryptide_project/src/Pages/InGame.tsx
Unescape View File

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

6
cryptide_project/src/Pages/Lobby.css
Unescape View File

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

12
cryptide_project/src/Pages/Lobby.tsx
Unescape View File

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

9
cryptide_project/src/Pages/Play.css
Unescape View File

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

10
cryptide_project/src/Pages/Play.tsx
Unescape View File

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

10
cryptide_project/src/Style/Color.tsx
Unescape View File

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

2
cryptide_project/src/Style/Global.css
Unescape View File

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

13
cryptide_project/src/Style/Theme.tsx
Unescape View File

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

15
cryptide_project/src/Style/ThemeContext.tsx
Unescape View File

@ -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 }}
Write Preview
Loading…
Cancel
Save