From 0920798e9ee42aebf246b420890e6bf61812ee52 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Thu, 21 Sep 2023 15:48:50 -0700
Subject: [PATCH 1/6] started highlight first wednesday

---
 app/CalendarPage.jsx  | 55 +++++++++++++++++++++++++++++++++++++++----
 app/MainPage.jsx      | 47 +++++++++++++++++++++++-------------
 app/WheelSpinPage.jsx |  8 ++++++-
 app/page.jsx          |  2 +-
 4 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
index b467e7e..cb92619 100644
--- a/app/CalendarPage.jsx
+++ b/app/CalendarPage.jsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, {useState} from 'react'
 import styled from '@emotion/styled'
-import { Box, Container, Grid, Paper, Typography } from '@mui/material';
+import { Box, Container, Grid, Paper, Typography, Badge } from '@mui/material';
 import { grey } from '@mui/material/colors';
-import { DateCalendar } from '@mui/x-date-pickers';
+import { DateCalendar, PickersDay } from '@mui/x-date-pickers';
 
 const SuiteAndBTCGraphic = (
 <svg width="485" height="372" viewBox="0 0 485 372" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -75,8 +75,45 @@ const CustomDiv = styled.div`
 
 `;
 
+const isFirstWednesday = (dateStr) => {
+  // console.log(JSON.stringify(dateStr))
+  let date = new Date(dateStr);
+  return date.getDay() === 3 && date.getDate() <= 7;
+}
+
+const ServerDay = (props) => {
+  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
+
+  const isSelected = !props.outsideCurrentMonth && isFirstWednesday(props.day.date());
+
+  return (
+    <Badge
+      key={props.day.toString()}
+      variant='dot'
+      color='secondary'
+      invisible={isSelected ? false : true}
+      overlap='circular'
+    >
+      <PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
+    </Badge>
+  );
+}
+
+
+/*
+
+The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. 
+1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
+*** 2. We also want to have the only badge be on the first wednesday of each month
+        - onMonthChange has been added. Need to get this info to the day components to render badge
+3. Also need to change colors
+
+*/
 
 const CalendarPage = () => {
+
+  const [highlightedDays, setHighlightedDays] = useState([11,20,9])
+
   return (
     <CustomDiv>
       <Container>
@@ -87,7 +124,17 @@ const CalendarPage = () => {
             </Box>
             <Box>
               <Paper>
-                <DateCalendar />
+                <DateCalendar 
+                  slots={{
+                    day: ServerDay
+                  }}
+                  onMonthChange={(month) => console.log(JSON.stringify(month))}
+                  slotProps={{
+                    day: {
+                      highlightedDays
+                    }
+                  }}
+                />
               </Paper>
             </Box>
             <Box>
diff --git a/app/MainPage.jsx b/app/MainPage.jsx
index 19e0bc7..6c478f5 100644
--- a/app/MainPage.jsx
+++ b/app/MainPage.jsx
@@ -1,12 +1,13 @@
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { Grid } from '@mui/material';
+import { Container, Grid, Typography } from '@mui/material';
 import React from 'react'
 
 const CustomDiv = styled.div`
     background-color: ${(props) => props.theme.palette.primary.main};
-    height: 140vh;
-    width: 100%
+    height: 1500px;
+    width: 100%;
+    display: flex;
 `;
 
 const CustomH1 = styled.h1`
@@ -30,6 +31,8 @@ const CircleContainer = styled.div`
   justify-content: center;
   align-items: center;
   font-size: 24px; /* Replace with your desired font size */
+  border-style: solid;
+  border-color: purple;
 `;
 
 const HorizontalLine = styled.div`
@@ -40,21 +43,31 @@ const HorizontalLine = styled.div`
 
 function MainPage() {
   return (
-    <CustomDiv style={{display: 'flex'}}>
-        <Grid container justifyContent="center" alignItems="center" spacing={5}>
-            <Grid item xs={4}>
-                <CustomH1>Empowerment for those who need it most</CustomH1>
-                <HorizontalLine />
-                <CustomH3>Bitcoin is a grassroots technology for communities to build lasting wealth</CustomH3>
+    <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'}}>
+                        <Grid item>
+                            <Typography align='center' variant='h2'>Empowerment for those who need it most</Typography>
+                        </Grid>
+                        <Grid item>
+                            <HorizontalLine />
+                        </Grid>
+                        <Grid item>
+                            <Typography align='center' variant='h5'>Bitcoin is a grassroots technology for communities to build lasting wealth</Typography>
+                        </Grid>
+                    </Grid>
+                </Grid>
+                <Grid item sm={4} xs={12} style={{borderStyle: 'solid', borderColor: 'yellow'}}>
+                    <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"/>
+                        </svg>
+                    </CircleContainer>
+                </Grid>
             </Grid>
-            <Grid item xs={4}>
-                <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"/>
-                    </svg>
-                </CircleContainer>
-            </Grid>/
-        </Grid>
+        </Container>
     </CustomDiv>
   );
 }
diff --git a/app/WheelSpinPage.jsx b/app/WheelSpinPage.jsx
index e82fe3a..e797246 100644
--- a/app/WheelSpinPage.jsx
+++ b/app/WheelSpinPage.jsx
@@ -20,10 +20,16 @@ const WheelSpinPage = () => {
 
   const [openSpinResult, setOpenSpinResult] = useState(false);
   const [winningIndex, setWinningIndex] = useState(0);
+  const [emailValue, setEmailValue] = useState("");
 
   const wheelRef = useRef();
 
+  const handleTextChange = (event) => {
+    setEmailValue(event.target.value);
+  }
+
   const submitHandler = () => {
+    setEmailValue("");
     wheelRef.current.spin(1000);
   }
 
@@ -80,7 +86,7 @@ const WheelSpinPage = () => {
         <Grid container justifyContent="center" alignItems="center" spacing={3}>
           <Grid item xs={6}>
             <h1>Join our mailing list to spin the wheel for a chance to win BTC!</h1>
-            <TextField /><Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
+            <TextField value={emailValue} onChange={handleTextChange}/><Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
           </Grid>
           <Grid item xs={6}>
             <Grid container justifyContent="center">
diff --git a/app/page.jsx b/app/page.jsx
index 841848b..02b00b7 100644
--- a/app/page.jsx
+++ b/app/page.jsx
@@ -42,7 +42,7 @@ const Home = () => {
           <PerksPage />
           <WheelSpinPage />
           <CalendarPage />
-          <GraphPage />
+          {/* <GraphPage /> */}
           <BottomBar />
         </div>
       </LocalizationProvider>

From 9c4044a00183d72f6e0c0267db69d6dd54d78257 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Fri, 22 Sep 2023 23:02:33 -0700
Subject: [PATCH 2/6] first wednesday working on calendar

---
 app/CalendarPage.jsx | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
index cb92619..e973e99 100644
--- a/app/CalendarPage.jsx
+++ b/app/CalendarPage.jsx
@@ -75,16 +75,15 @@ const CustomDiv = styled.div`
 
 `;
 
-const isFirstWednesday = (dateStr) => {
-  // console.log(JSON.stringify(dateStr))
-  let date = new Date(dateStr);
-  return date.getDay() === 3 && date.getDate() <= 7;
+const isFirstWednesday = (day) => {
+    let date = new Date(day);
+    return date.getDay() === 3 && date.getDate() <= 7;
 }
 
-const ServerDay = (props) => {
-  const { highlightedDays = [], day, outsideCurrentMonth, ...other } = props;
+const MeetupDay = (props) => {
+  const {day, outsideCurrentMonth, ...other } = props;
 
-  const isSelected = !props.outsideCurrentMonth && isFirstWednesday(props.day.date());
+  const isSelected = !props.outsideCurrentMonth && isFirstWednesday(day);
 
   return (
     <Badge
@@ -106,14 +105,13 @@ The goal of the calendar is to be able to click on dates and have a popup that s
 1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
 *** 2. We also want to have the only badge be on the first wednesday of each month
         - onMonthChange has been added. Need to get this info to the day components to render badge
+        - Since there will be a default month, use that and onMonthChange to set badges
 3. Also need to change colors
 
 */
 
 const CalendarPage = () => {
 
-  const [highlightedDays, setHighlightedDays] = useState([11,20,9])
-
   return (
     <CustomDiv>
       <Container>
@@ -126,13 +124,7 @@ const CalendarPage = () => {
               <Paper>
                 <DateCalendar 
                   slots={{
-                    day: ServerDay
-                  }}
-                  onMonthChange={(month) => console.log(JSON.stringify(month))}
-                  slotProps={{
-                    day: {
-                      highlightedDays
-                    }
+                    day: MeetupDay
                   }}
                 />
               </Paper>

From fcdf4d0f87027ba862ea83352d0f0d4a8d80b09e Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Sat, 23 Sep 2023 17:18:37 -0700
Subject: [PATCH 3/6] added meetup modal

---
 app/CalendarPage.jsx | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
index e973e99..b5a50fc 100644
--- a/app/CalendarPage.jsx
+++ b/app/CalendarPage.jsx
@@ -3,6 +3,7 @@ import styled from '@emotion/styled'
 import { Box, Container, Grid, Paper, Typography, Badge } from '@mui/material';
 import { grey } from '@mui/material/colors';
 import { DateCalendar, PickersDay } from '@mui/x-date-pickers';
+import MeetupDetails from '@components/MeetupDetails';
 
 const SuiteAndBTCGraphic = (
 <svg width="485" height="372" viewBox="0 0 485 372" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -76,6 +77,9 @@ const CustomDiv = styled.div`
 `;
 
 const isFirstWednesday = (day) => {
+  // console.log(day);
+  // console.log(day instanceof Date);
+  // console.log(JSON.stringify(day));
     let date = new Date(day);
     return date.getDay() === 3 && date.getDate() <= 7;
 }
@@ -90,7 +94,7 @@ const MeetupDay = (props) => {
       key={props.day.toString()}
       variant='dot'
       color='secondary'
-      invisible={isSelected ? false : true}
+      invisible={!isSelected}
       overlap='circular'
     >
       <PickersDay {...other} outsideCurrentMonth={outsideCurrentMonth} day={day} />
@@ -99,22 +103,33 @@ const MeetupDay = (props) => {
 }
 
 
+
 /*
 
 The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. 
-1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
-*** 2. We also want to have the only badge be on the first wednesday of each month
-        - onMonthChange has been added. Need to get this info to the day components to render badge
-        - Since there will be a default month, use that and onMonthChange to set badges
+*** 1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
 3. Also need to change colors
 
 */
 
 const CalendarPage = () => {
+  const [openMeetupDetails, setOpenMeetupDetails] = useState(false);
+
+  const closeMeetupDetails = () => {
+    setOpenMeetupDetails(false);
+  }
+
+  const checkToOpenDetails = (value, selectionState) => {
+    console.log("Test");
+    console.log(value);
+    console.log(isFirstWednesday(value));
+    isFirstWednesday(value) ? setOpenMeetupDetails(true) : null;
+  }
 
   return (
     <CustomDiv>
       <Container>
+        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} />
         <Grid container spacing={3}>
           <Grid item xs={6}>
             <Box sx={{display: "flex", justifyContent: "center"}}>
@@ -126,6 +141,7 @@ const CalendarPage = () => {
                   slots={{
                     day: MeetupDay
                   }}
+                  onChange={checkToOpenDetails}
                 />
               </Paper>
             </Box>

From 900a22af0bb0a75837cc3c03dbad8bdbb7a8eab4 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Sat, 23 Sep 2023 17:49:27 -0700
Subject: [PATCH 4/6] added dynamic dates to event modal

---
 app/CalendarPage.jsx         | 12 ++++++------
 components/MeetupDetails.jsx | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 components/MeetupDetails.jsx

diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx
index b5a50fc..2d5125a 100644
--- a/app/CalendarPage.jsx
+++ b/app/CalendarPage.jsx
@@ -107,29 +107,29 @@ const MeetupDay = (props) => {
 /*
 
 The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. 
-*** 1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
 3. Also need to change colors
 
 */
 
 const CalendarPage = () => {
   const [openMeetupDetails, setOpenMeetupDetails] = useState(false);
+  const [selectedMeetupDate, setSelectedMeetupDate] = useState();
 
   const closeMeetupDetails = () => {
     setOpenMeetupDetails(false);
   }
 
   const checkToOpenDetails = (value, selectionState) => {
-    console.log("Test");
-    console.log(value);
-    console.log(isFirstWednesday(value));
-    isFirstWednesday(value) ? setOpenMeetupDetails(true) : null;
+    if (isFirstWednesday(value)) {
+      setSelectedMeetupDate(value);
+      setOpenMeetupDetails(true);
+    }
   }
 
   return (
     <CustomDiv>
       <Container>
-        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} />
+        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} date={selectedMeetupDate} />
         <Grid container spacing={3}>
           <Grid item xs={6}>
             <Box sx={{display: "flex", justifyContent: "center"}}>
diff --git a/components/MeetupDetails.jsx b/components/MeetupDetails.jsx
new file mode 100644
index 0000000..57122e1
--- /dev/null
+++ b/components/MeetupDetails.jsx
@@ -0,0 +1,22 @@
+import { Dialog, DialogContent, DialogTitle, Typography } from '@mui/material'
+import React from 'react'
+
+const MeetupDetails = (props) => {
+    let date = new Date(props.date);
+  return (
+    <Dialog open={props.open} onClose={props.onClose}>
+        <DialogContent>
+            <DialogTitle>
+                <Typography variant='h4' align='center'>Caffeine and Coin</Typography>
+            </DialogTitle>
+            <DialogContent>
+                <Typography variant='h6'>Date & Time: {date.getMonth() + 1}/{date.getDay()}/{date.getFullYear()} at 6:00pm</Typography>
+                <Typography variant='h6'>Location: Sketchy railway tunnel on the North Side</Typography>
+                <Typography variant='h6'>Come hang out and dodge hobo knifings while discussing and learning about bitcoin!</Typography>
+            </DialogContent>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+export default MeetupDetails
\ No newline at end of file

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 5/6] 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>

From 8f674ddcb82775c4fba2254033b8017371029006 Mon Sep 17 00:00:00 2001
From: Max <mrheffern@gmail.com>
Date: Sun, 24 Sep 2023 19:41:38 -0700
Subject: [PATCH 6/6] minor ui fixes

---
 app/WheelSpinPage.jsx   | 17 +++++++++++++++--
 components/InfoCard.jsx |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/WheelSpinPage.jsx b/app/WheelSpinPage.jsx
index bd014c5..2937ed4 100644
--- a/app/WheelSpinPage.jsx
+++ b/app/WheelSpinPage.jsx
@@ -85,8 +85,21 @@ const WheelSpinPage = () => {
         <WinningDialog open={openSpinResult} close={setOpenSpinResult} prizeAmount={wheelItems.items[winningIndex].label} />
         <Grid container justifyContent="center" alignItems="center" spacing={3}>
           <Grid item xs={6}>
-            <h1>Join our mailing list to spin the wheel for a chance to win BTC!</h1>
-            <TextField value={emailValue} onChange={handleTextChange}/><Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
+            <Grid container direction="column">
+              <Grid item>
+                <h1>Join our mailing list to spin the wheel for a chance to win BTC!</h1>
+              </Grid>
+              <Grid item>
+                <Grid container spacing={1} alignItems="center">
+                  <Grid item>
+                    <TextField label="Email" variant='filled' size='small' value={emailValue} onChange={handleTextChange}/> 
+                  </Grid>
+                  <Grid item>
+                    <Button variant="contained" color="secondary" onClick={submitHandler}>Submit and Spin!</Button>
+                  </Grid>
+                </Grid>
+              </Grid>
+            </Grid>
           </Grid>
           <Grid item xs={6}>
             <Grid container justifyContent="center">
diff --git a/components/InfoCard.jsx b/components/InfoCard.jsx
index 06fe66a..8965b9d 100644
--- a/components/InfoCard.jsx
+++ b/components/InfoCard.jsx
@@ -4,7 +4,7 @@ import React from 'react'
 
 const InfoCard = (props) => {
   return (
-    <Card sx={{height: 500}}>
+    <Card sx={{height: 550}}>
       <Container>
         <Typography variant="h3" align='center' marginY={4}>{props.title}</Typography>
         <Box>