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 ( - contact: 530-368-6616 - email: mrheffern@gmail.com + + + + Phone: 530-368-6616 + Email: mrheffern@gmail.com + + + ) } diff --git a/app/CalendarPage.jsx b/app/CalendarPage.jsx index b467e7e..2d5125a 100644 --- a/app/CalendarPage.jsx +++ b/app/CalendarPage.jsx @@ -1,8 +1,9 @@ -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'; +import MeetupDetails from '@components/MeetupDetails'; const SuiteAndBTCGraphic = ( @@ -75,11 +76,60 @@ 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; +} + +const MeetupDay = (props) => { + const {day, outsideCurrentMonth, ...other } = props; + + const isSelected = !props.outsideCurrentMonth && isFirstWednesday(day); + + return ( + + + + ); +} + + + +/* + +The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. +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) => { + if (isFirstWednesday(value)) { + setSelectedMeetupDate(value); + setOpenMeetupDetails(true); + } + } + return ( + @@ -87,7 +137,12 @@ const CalendarPage = () => { - + diff --git a/app/MainPage.jsx b/app/MainPage.jsx index 19e0bc7..b5c945b 100644 --- a/app/MainPage.jsx +++ b/app/MainPage.jsx @@ -1,25 +1,16 @@ 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: 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; @@ -30,6 +21,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 +33,31 @@ const HorizontalLine = styled.div` function MainPage() { return ( - - - - Empowerment for those who need it most - - Bitcoin is a grassroots technology for communities to build lasting wealth + + + + + + + Empowerment for those who need it most + + + + + + Bitcoin is a grassroots technology for communities to build lasting wealth + + + + + + + + + + - - - - - - - / - + ); } diff --git a/app/WheelSpinPage.jsx b/app/WheelSpinPage.jsx index e82fe3a..2937ed4 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; @@ -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); } @@ -43,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'} @@ -79,8 +85,21 @@ const WheelSpinPage = () => { -

Join our mailing list to spin the wheel for a chance to win BTC!

- + + +

Join our mailing list to spin the wheel for a chance to win BTC!

+ + + + + + + + + + + + diff --git a/app/page.jsx b/app/page.jsx index 841848b..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,14 +35,14 @@ const Home = () => {
- Spokane Bitcoin Club + Spokane Bitcoin Club - + {/* */}
diff --git a/components/InfoCard.jsx b/components/InfoCard.jsx index 4a652c6..8965b9d 100644 --- a/components/InfoCard.jsx +++ b/components/InfoCard.jsx @@ -4,15 +4,15 @@ import React from 'react' const InfoCard = (props) => { return ( - + - {props.title} + {props.title} {props.picture} - {props.text} + {props.text} 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 ( + + + + Caffeine and Coin + + + Date & Time: {date.getMonth() + 1}/{date.getDay()}/{date.getFullYear()} at 6:00pm + Location: Sketchy railway tunnel on the North Side + Come hang out and dodge hobo knifings while discussing and learning about bitcoin! + + + + ) +} + +export default MeetupDetails \ No newline at end of file