finishing minor changes

Front/src/App.tsx

@@ -5,6 +5,7 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Container from '@mui/material/Container';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { teal } from '@mui/material/colors';
 
 import Header from './Header'
 import CoinList from './coinList/coinList';
@@ -27,8 +28,22 @@ function App() {
   const theme = React.useMemo(
     () =>
       createTheme({
+        typography: {
+          h1: {
+            fontSize: 28,
+            fontWeight: 500,
+          },
+          h2: {
+            fontSize: 24,
+            fontWeight: 200,
+            paddingBottom: 20,
+          }
+        },
         palette: {
           mode,
+          primary: {
+            main: teal[700],
+          },
         },
       }),
     [mode],
@@ -37,25 +52,25 @@ function App() {
   return (
     <div className="App">
       <BrowserRouter>
-      <ColorModeContext.Provider value={colorMode}>
-        <ThemeProvider theme={theme}>
-          <Header colorMode={colorMode} theme={theme} />
-          <Container maxWidth="md">
-            <Box sx={{ flexGrow: 1 }}>
-              <Grid container
-                spacing={0}
-                direction="column"
-                justifyContent="center"
-              >
-                <Routes>
-                  <Route path="/" element={<CoinList />} />
-                  <Route path="/coin/:id" element={<CoinDetails />} />
-                </Routes>
-              </Grid>
-            </Box>
-          </Container>
-        </ThemeProvider>
-      </ColorModeContext.Provider>
+        <ColorModeContext.Provider value={colorMode}>
+          <ThemeProvider theme={theme}>
+            <Header />
+            <Container maxWidth="md">
+              <Box sx={{ flexGrow: 1 }}>
+                <Grid container
+                  spacing={0}
+                  direction="column"
+                  justifyContent="center"
+                >
+                  <Routes>
+                    <Route path="/" element={<CoinList />} />
+                    <Route path="/coin/:id" element={<CoinDetails />} />
+                  </Routes>
+                </Grid>
+              </Box>
+            </Container>
+          </ThemeProvider>
+        </ColorModeContext.Provider>
       </BrowserRouter>
     </div>
   );

Front/src/Header.tsx

@@ -5,23 +5,11 @@ import Box from '@mui/material/Box';
 import AppBar from '@mui/material/AppBar';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
-import IconButton from '@mui/material/IconButton';
-import Brightness4Icon from '@mui/icons-material/Brightness4';
-import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { useTheme } from '@mui/material/styles';
 
 const ColorModeContext = React.createContext({ toggleColorMode: () => { } });
 
-interface HeaderProps {
-  colorMode: {
-    toggleColorMode: () => void;
-  }
-  theme: any;
-}
-
-const Header = (props: HeaderProps): JSX.Element => {
-  const theme = useTheme();
-  const colorMode = React.useContext(ColorModeContext);
+const Header = (): JSX.Element => {
   return (
     <Box style={{ marginBottom: 60 }} sx={{ flexGrow: 1 }}>
       <AppBar position="static">
@@ -31,9 +19,6 @@ const Header = (props: HeaderProps): JSX.Element => {
               CoinGecko Data
             </Link>
           </Typography>
-          <IconButton sx={{ ml: 1 }} onClick={props.colorMode.toggleColorMode} color="inherit">
-            {props.theme.palette.mode === 'dark' ? <Brightness7Icon /> : <Brightness4Icon />}
-          </IconButton>
         </Toolbar>
       </AppBar>
     </Box>

Front/src/coinDetails/coinChart.tsx

@@ -14,6 +14,7 @@ import { Line } from 'react-chartjs-2';
 import { useGetCoinChartQuery } from '../coinApi';
 import { format } from 'date-fns';
 
+import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Grid from '@mui/material/Grid';
@@ -45,7 +46,6 @@ export interface IDurationOptions extends Array<IDurationOption> { }
 
 const CoinChart = (props: ICoinChartProps): JSX.Element => {
 
-  const ref = React.useRef<any>(null);
   const [duration, setDuration] = React.useState('max')
   const [redraw, setRedraw] = React.useState(false);
 
@@ -117,10 +117,7 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
   };
 
   return (
-    <div
-      ref={ref}
-      className="chart"
-    >
+    <Box>
       {
         data && <>
           <Grid container justifyContent="flex-start" style={{ marginBottom: 20 }}>
@@ -150,7 +147,7 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
           </div>
         </>
       }
-    </div>
+    </Box>
   )
 }
 

Front/src/coinDetails/coinDetails.tsx

@@ -4,6 +4,7 @@ import { useGetCoinInfoQuery } from '../coinApi';
 
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 
 import CoinChart from './coinChart';
 import CoinStats from './coinStats';
@@ -20,34 +21,35 @@ const CoinDetails = (): JSX.Element => {
   } = useGetCoinInfoQuery(id ? id : '');
 
   return (
-    <div className="details">
+    <Box>
       {isLoading && <div>Loading...</div>}
       {
         data && isSuccess && <>
-          <div className="details-title">
-            <img src={data.image.large} width="28" height="28" />
-            <h1>{data.name}</h1>
-          </div>
-          <Box>
-            <Grid container>
-              <Grid item xs={12} sm={12} md={8}>
-                <CoinInfo data={data} />
-              </Grid>
-              <Grid item xs={12} sm={12} md={4}>
-                <CoinStats data={data} />
-              </Grid>
-              <Grid item xs={12} style={{marginTop: 20}}>
-                <CoinChart coin={data.id} />
-              </Grid>
-              <Grid item xs={12} style={{marginTop: 40}}>
-                <div style={{lineHeight: 2}} dangerouslySetInnerHTML={{ __html: data.description.en }} />
-              </Grid>
+          <Grid container style={{ marginBottom: 40 }}>
+            <Typography variant="h1">
+              <img src={data.image.large} width="28" height="28" style={{ marginRight: 10 }} />
+              {data.name}
+            </Typography>
+          </Grid>
+          <Grid container>
+            <Grid item xs={12} sm={12} md={8}>
+              <CoinInfo data={data} />
             </Grid>
-            </Box>
-          </>
+            <Grid item xs={12} sm={12} md={4}>
+              <CoinStats data={data} />
+            </Grid>
+            <Grid item xs={12} style={{ marginTop: 20 }}>
+              <CoinChart coin={data.id} />
+            </Grid>
+            <Grid item xs={12} style={{ marginTop: 40 }}>
+              <Typography variant="body2" dangerouslySetInnerHTML={{ __html: data.description.en }}></Typography>
+            </Grid>
+          </Grid>
+
+        </>
       }
-        </div>
+    </Box>
   )
 }
 
-      export default CoinDetails;
+export default CoinDetails;

Front/src/coinDetails/coinInfo.tsx

@@ -6,6 +6,8 @@ import TwitterIcon from '@mui/icons-material/Twitter';
 import LinkIcon from '@mui/icons-material/Link';
 import Button from '@mui/material/Button';
 import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 
 import { ICoinInfoProps } from './coinDetails-types'
 
@@ -14,8 +16,8 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
   console.log("CoinInfo props.data: ", data)
 
   return (
-    <div>
-      <h2>Info</h2>
+    <Box>
+      <Typography variant="h2">Info</Typography>
       <Grid container justifyContent="flex-start">
         <Grid item xs={12}>
           Rank: #{data.market_cap_rank}
@@ -66,7 +68,7 @@ const CoinInfo = (props: ICoinInfoProps): JSX.Element => {
           )
         }
       </Grid>
-    </div>
+    </Box>
   )
 }
 

Front/src/coinDetails/coinStats.tsx

@@ -3,6 +3,8 @@ import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
 import TableContainer from '@mui/material/TableContainer';
 import TableRow from '@mui/material/TableRow';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
 
 import { ICoinStatsProps, ICoinInfoProps, IStatsRow } from './coinDetails-types'
 
@@ -24,8 +26,8 @@ const CoinStats = (props: ICoinStatsProps): JSX.Element => {
   ]
 
   return (
-    <div className="info-stats">
-      <h2>Statistics</h2>
+    <Box>
+      <Typography variant="h2">Statistics</Typography>
       <TableContainer>
         <Table size="small" >
           <TableBody>
@@ -40,7 +42,7 @@ const CoinStats = (props: ICoinStatsProps): JSX.Element => {
           </TableBody>
         </Table>
       </TableContainer>
-    </div>
+      </Box>
   )
 }
 

Front/src/coinList/coinList.tsx

@@ -1,6 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 import { Link } from "react-router-dom";
 
+import Box from '@mui/material/Box';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import TableCell from '@mui/material/TableCell';
@@ -26,7 +27,7 @@ const CoinList = (): JSX.Element => {
   const { data: globalData, isLoading: globalIsLoading, isSuccess: lobalSuccess } = useGetGlobalQuery();
 
   return (
-    <div className="coin-list">
+    <Box className="coin-list">
       {isLoading || globalIsLoading && <div>Loading...</div>}
       {
         globalData &&
@@ -117,7 +118,7 @@ const CoinList = (): JSX.Element => {
           </TableContainer>
       }
       <Pager page={page} per_page={per_page}/>
-    </div>
+    </Box>
   )
 }
 

Front/src/index.css

@@ -10,15 +10,13 @@ body {
 
 a {
   text-decoration: none;
-  color: #1976d2;
+  color: #44a37d;
 }
 
 .coin-list a {
   color: #444444;
 }
 
-h2 { color: #888888; font-weight: lighter;}
-
 header a {
   color: #fff;
   text-decoration: none;
@@ -44,31 +42,3 @@ header a {
   color: #777777;
   text-transform: uppercase;
 }
-
-.globalText {
-  font-weight: normal;
-  font-size: 0.9em;
-  font-style: italic;
-  margin-left: 5px;
-  color: #777777;
-  margin-bottom: 20px;
-}
-
-.chart-container {
-  height: inherit;
-}
-
-
-.details-title {
-  display:flex;
-  align-items:center;
-  justify-content:start;
-}
-
-.details-title img {
-  margin-right: 15px;
-}
-
-.details h2 {
-  margin-top: 0px;
-}