cleaning up layout

app/BottomBar.jsx

@@ -1,17 +1,25 @@
 import React from 'react'
 import styled from '@emotion/styled'
+import { Grid, Typography } from '@mui/material';
 
 const CustomDiv = styled.div`
-    background-color: ${(props) => props.theme.palette.primary.brightest};
+    background-color: black;
-    height: 10vh;
+    color: white;
+    height: 50px;
     width: 100%
 `;
 
 const BottomBar = () => {
   return (
     <CustomDiv>
-      contact: 530-368-6616
+      <Grid container alignItems='center' style={{height: "100%"}}>
-      email: mrheffern@gmail.com
+        <Grid item>
+          <Typography style={{marginLeft: "10px"}}>
+            Phone: 530-368-6616
+            Email: mrheffern@gmail.com
+          </Typography>
+        </Grid>
+      </Grid>
     </CustomDiv>
   )
 }

app/MainPage.jsx

@@ -5,22 +5,12 @@ import React from 'react'
 
 const CustomDiv = styled.div`
     background-color: ${(props) => props.theme.palette.primary.main};
-    height: 1500px;
+    height: 700px;
     width: 100%;
     display: flex;
 `;
 
-const CustomH1 = styled.h1`
-    color: #2F2E41;
-`;
 
-const CustomH3 = styled.h3`
-    color: #000;
-`;
-
-const StyledGrid = styled(Grid)`
-    height: 100vh;
-`;
 
 const CircleContainer = styled.div`
   width: 325px;
@@ -44,10 +34,10 @@ const HorizontalLine = styled.div`
 function MainPage() {
   return (
     <CustomDiv>
-        <Container style={{borderStyle: 'solid', borderColor: 'orange'}}>
+        <Container>
-            <Grid style={{borderStyle: 'solid', borderColor: 'red'}} container marginTop={20} justifyContent='center' spacing={2}>
+            <Grid container marginTop={20} justifyContent='center' spacing={2}>
-                <Grid item sm={4} xs={12} style={{borderStyle: 'solid', borderColor: 'green'}}>
+                <Grid item sm={4} xs={12}>
-                    <Grid container direction="column" style={{borderStyle: 'solid', borderColor: 'blue'}}>
+                    <Grid container direction="column">
                         <Grid item>
                             <Typography align='center' variant='h2'>Empowerment for those who need it most</Typography>
                         </Grid>
@@ -59,7 +49,7 @@ function MainPage() {
                         </Grid>
                     </Grid>
                 </Grid>
-                <Grid item sm={4} xs={12} style={{borderStyle: 'solid', borderColor: 'yellow'}}>
+                <Grid item sm={4} xs={12}>
                     <CircleContainer>
                         <svg xmlns="http://www.w3.org/2000/svg" width="96" height="147" viewBox="0 0 192 295" fill="none">
                             <path d="M15.25 59.25H132.917C144.619 59.25 155.843 63.8989 164.118 72.1739C172.393 80.449 177.042 91.6723 177.042 103.375C177.042 115.078 172.393 126.301 164.118 134.576C155.843 142.851 144.619 147.5 132.917 147.5M132.917 147.5C144.619 147.5 155.843 152.149 164.118 160.424C172.393 168.699 177.042 179.922 177.042 191.625C177.042 203.328 172.393 214.551 164.118 222.826C155.843 231.101 144.619 235.75 132.917 235.75H15.25M132.917 147.5H44.6667M44.6667 59.25V235.75M59.375 15.125V59.25M118.208 15.125V59.25M59.375 235.75V279.875M118.208 235.75V279.875" stroke="#FAE84E" stroke-width="29.4167" stroke-linecap="round" stroke-linejoin="round"/>

app/WheelSpinPage.jsx

@@ -8,7 +8,7 @@ import WinningDialog from '@components/WinningDialog';
 
 const CustomDiv = styled.div`
     background-color: ${(props) => props.theme.palette.primary.main};
-    height: 140vh;
+    height: 900px;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -49,12 +49,12 @@ const WheelSpinPage = () => {
         { label: '4 KSats', backgroundColor: theme.palette.secondary.main },
         { label: '4 KSats', backgroundColor: '#f7931a' },
         { label: '4 KSats', backgroundColor: theme.palette.secondary.main },
-        { label: '17 KSats', backgroundColor: '#f7931a'},
+        { label: '19 KSats', backgroundColor: '#f7931a'},
         { label: '4 KSats', backgroundColor: theme.palette.secondary.main},
         { label: '4 KSats', backgroundColor: '#f7931a'},
         { label: '4 KSats', backgroundColor: theme.palette.secondary.main},
         { label: '4 KSats', backgroundColor: '#f7931a'},
-        { label: '17 KSats', backgroundColor: theme.palette.secondary.main},
+        { label: '19 KSats', backgroundColor: theme.palette.secondary.main},
         { label: '4 KSats', backgroundColor: '#f7931a'},
         { label: '4 KSats', backgroundColor: theme.palette.secondary.main},
         { label: '4 KSats', backgroundColor: '#f7931a'}

app/page.jsx

@@ -1,6 +1,6 @@
 "use client"
 import { LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
-import { AppBar, Grid, ThemeProvider, Toolbar } from '@mui/material';
+import { AppBar, Grid, ThemeProvider, Toolbar, Typography } from '@mui/material';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import theme from './theme';
@@ -35,7 +35,7 @@ const Home = () => {
         <div id='mainDiv'>
           <AppBar>
             <StyledToolbar>
-              Spokane Bitcoin Club
+              <Typography variant='h5'>Spokane Bitcoin Club</Typography>
             </StyledToolbar>
           </AppBar>
           <MainPage />

components/InfoCard.jsx

@@ -4,15 +4,15 @@ import React from 'react'
 
 const InfoCard = (props) => {
   return (
-    <Card sx={{height: 450}}>
+    <Card sx={{height: 500}}>
       <Container>
-        <Typography variant="h5" align='center' marginY={4}>{props.title}</Typography>
+        <Typography variant="h3" align='center' marginY={4}>{props.title}</Typography>
         <Box>
           <Box marginBottom={4} sx={{textAlign: 'center'}}>
             {props.picture} 
           </Box>
           <Box>
-            <Typography>{props.text}</Typography>
+            <Typography variant='h5'>{props.text}</Typography>
           </Box>
         </Box>
       </Container>