fix(ui): Set MUI ThemeProvider on the complete website

annelhote · Mar 21, 2024 · 4f1938c · 4f1938c
1 parent 8db3ef8
commit 4f1938c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 25 deletions.
diff --git a/src/index.js → src/index.jsx b/src/index.js → src/index.jsx
@@ -1,3 +1,5 @@
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
@@ -39,9 +41,24 @@ const router = createHashRouter([
   }
 ]);
 
+const darkTheme = createTheme({
+  palette: {
+    mode: 'dark',
+    background: {
+      default: "#27272a"
+    },
+    text:{
+      primary: "#e4e5e6"
+    }
+  },
+});
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <ThemeProvider theme={darkTheme}>
+      <CssBaseline />
+      <RouterProvider router={router} />
+    </ThemeProvider>
   </React.StrictMode>
 );
diff --git a/src/index.scss b/src/index.scss
@@ -1,13 +1,3 @@
-body {
-  background-color: #27272a;
-  color: #e4e5e6;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-  sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-}
-
 .open-trail {
   margin: auto;
   width: 75%;

diff --git a/src/pages/trail.jsx b/src/pages/trail.jsx
@@ -1,7 +1,5 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Breadcrumbs, Grid, Link, Typography } from '@mui/material';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
 import gpxParser from 'gpxparser';
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -19,15 +17,6 @@ import gpxTourDuQueyras from '../data/tour-du-queyras.gpx';
 import data from '../data/data.json';
 import { chunkArray, downSampleArray, getClosestPointByCoordinates, getDataFromOverpass, getMarkerFromType, getTypeFromName } from '../utils';
 
-const darkTheme = createTheme({
-  palette: {
-    mode: 'dark',
-    primary: {
-      main: '#fff',
-    },
-  },
-});
-
 const Trail = () => {
   const params = useParams();
 
@@ -148,8 +137,7 @@ const Trail = () => {
   }, [filters]);
 
   return (
-    <ThemeProvider theme={darkTheme}>
-      <CssBaseline />
+    <>
       {gpx && (
         <Box className='open-trail' sx={{ flexGrow: 0.75 }}>
           <Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 4, sm: 8, md: 12 }}>
@@ -216,7 +204,7 @@ const Trail = () => {
           </Grid>
         </Box>
       )}
-    </ThemeProvider>
+    </>
   );
 };