From a762a3cbb712a7844e172160da142f8674861f23 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Sat, 23 Sep 2023 22:32:52 -0700
Subject: [PATCH] cleaning up layout

---
 app/BottomBar.jsx       | 16 ++++++++++++----
 app/MainPage.jsx        | 22 ++++++----------------
 app/WheelSpinPage.jsx   |  6 +++---
 app/page.jsx            |  4 ++--
 components/InfoCard.jsx |  6 +++---
 5 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/app/BottomBar.jsx b/app/BottomBar.jsx
index 71cea8f..dd49bb1 100644
--- a/app/BottomBar.jsx
+++ b/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};
-    height: 10vh;
+    background-color: black;
+    color: white;
+    height: 50px;
     width: 100%
 `;
 
 const BottomBar = () => {
   return (
     <CustomDiv>
-      contact: 530-368-6616
-      email: mrheffern@gmail.com
+      <Grid container alignItems='center' style={{height: "100%"}}>
+        <Grid item>
+          <Typography style={{marginLeft: "10px"}}>
+            Phone: 530-368-6616
+            Email: mrheffern@gmail.com
+          </Typography>
+        </Grid>
+      </Grid>
     </CustomDiv>
   )
 }
diff --git a/app/MainPage.jsx b/app/MainPage.jsx
index 6c478f5..b5c945b 100644
--- a/app/MainPage.jsx
+++ b/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'}}>
-            <Grid style={{borderStyle: 'solid', borderColor: 'red'}} container marginTop={20} justifyContent='center' spacing={2}>
-                <Grid item sm={4} xs={12} style={{borderStyle: 'solid', borderColor: 'green'}}>
-                    <Grid container direction="column" style={{borderStyle: 'solid', borderColor: 'blue'}}>
+        <Container>
+            <Grid container marginTop={20} justifyContent='center' spacing={2}>
+                <Grid item sm={4} xs={12}>
+                    <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"/>
diff --git a/app/WheelSpinPage.jsx b/app/WheelSpinPage.jsx
index e797246..bd014c5 100644
--- a/app/WheelSpinPage.jsx
+++ b/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'}
diff --git a/app/page.jsx b/app/page.jsx
index 02b00b7..4dd0476 100644
--- a/app/page.jsx
+++ b/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 />
diff --git a/components/InfoCard.jsx b/components/InfoCard.jsx
index 4a652c6..06fe66a 100644
--- a/components/InfoCard.jsx
+++ b/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>