Skip to content

Commit

Permalink
Merge pull request #375 from ArendPeter/front-page
Browse files Browse the repository at this point in the history 
Block out landing page elements
  • Loading branch information
@ArendPeter
ArendPeter authored Nov 12, 2023
2 parents fa23e2c + 274d68d commit 9f66f05
Show file tree
Hide file tree
Showing 11 changed files with 448 additions and 99 deletions.
125 changes: 60 additions & 65 deletions frontend/src/components/ElectionForm/QuickPoll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import TextField from "@mui/material/TextField";
import { useNavigate } from "react-router"
import structuredClone from '@ungap/structured-clone';
import { StyledButton, StyledTextField } from '../styles.js'
import { Button, IconButton } from '@mui/material';
import { Box, Button, IconButton } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { useCookie } from '../../hooks/useCookie';
import { useLocalStorage } from '../../hooks/useLocalStorage';
import Typography from '@mui/material/Typography';
import { usePostElection } from '../../hooks/useAPI';
import { useCookie } from '../../hooks/useCookie';

const QuickPoll = ({ authSession }) => {
const [tempID, setTempID] = useCookie('temp_id', '0')
Expand Down Expand Up @@ -141,91 +141,86 @@ const QuickPoll = ({ authSession }) => {

return (
<form onSubmit={onSubmit} >
<Grid container>
<Grid item xs={12} sx={{ p: 1, pt: 2 }}>
<Box sx={{
display: 'flex',
gap: 2,
flexDirection: 'column',
}}>
<StyledTextField
autoFocus
error={titleError}
helperText={titleError ? "Election name is required" : ""}
id="election-name"
name="name"
type="text"
value={election.title}
label="What is your poll question?"
sx={{
label: {fontWeight: 600, fontSize: 18}
}}
required
onChange={(e) => {
setTitleError(false)
applyElectionUpdate(election => { election.title = e.target.value })
}}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
handleEnter(ev)
}
}}
/>
{election.races[0].candidates?.map((candidate, index) => (
<StyledTextField
autoFocus
error={titleError}
helperText={titleError ? "Election name is required" : ""}
id="election-name"
name="name"
id={`candidate-name-${String(index)}`}
name="candidate-name"
type="text"
value={election.title}
label="What is your poll question?"
value={candidate.candidate_name}
label={`Option ${index + 1}`}
sx={{
label: {fontWeight: 600, fontSize: 18}
}}
required
onChange={(e) => {
setTitleError(false)
applyElectionUpdate(election => { election.title = e.target.value })
onUpdateCandidate(index, e.target.value)
}}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
handleEnter(ev)
}
}}
/>
</Grid>

{election.races[0].candidates?.map((candidate, index) => (
<Grid item xs={12} sx={{ p: 1 }}>
<StyledTextField
id={`candidate-name-${String(index)}`}
name="candidate-name"
type="text"
value={candidate.candidate_name}
label={`Option ${index + 1}`}
sx={{
label: {fontWeight: 600, fontSize: 18}
}}
onChange={(e) => {
onUpdateCandidate(index, e.target.value)
}}
onKeyPress={(ev) => {
if (ev.key === 'Enter') {
handleEnter(ev)
}
}}
/>
</Grid>
))}
<Grid item xs={12} sx={{ p: 1 }}>
<StyledButton
type='submit'
variant="contained"
disabled={isPending} >

Create Quick Poll
</StyledButton>
{!authSession.isLoggedIn() ?
<StyledButton
type='submit'
variant="contained"
disabled={isPending} >

Create Quick Poll
disabled={isPending}
onClick={() => authSession.openLogin()}>
Log in for more settings
</StyledButton>
</Grid>
<Grid item xs={12} sx={{ p: 1 }}>
{!authSession.isLoggedIn() ?
<StyledButton
variant="contained"
disabled={isPending}
onClick={() => authSession.openLogin()}>
Log in for more settings
</StyledButton>
:
<StyledButton
variant="contained"
disabled={isPending}
href='/CreateElection'>
Explore more settings
</StyledButton>
}
</Grid>
<Grid item xs={11}>
</Grid>
<Grid item xs={1} sx={{ p: 1 }}>
:
<StyledButton
variant="contained"
disabled={isPending}
href='/CreateElection'>
Explore more settings
</StyledButton>
}
<Box sx={{
marginLeft: 'auto'
}}>
<IconButton
type="button"
onClick={() => setElectionData(QuickPollTemplate)} >
<DeleteIcon />
</IconButton>
</Grid>
</Grid>
</Box>
</Box>
</form >
)
}
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@ export default function Footer() {
<Box
component="footer"
sx={{
backgroundColor: (theme) =>
theme.palette.grey[200],//Make theme pallete for this
backgroundColor: 'var(--brand-gray-1)',
p: 6,
width: '100%',
mt: 'auto'
Expand Down
80 changes: 49 additions & 31 deletions frontend/src/components/LandingPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,45 +3,63 @@ import Grid from "@mui/material/Grid";
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import QuickPoll from './ElectionForm/QuickPoll';
import LandingPageHero from './LandingPage/LandingPageHero';
import LandingPageFeatureElections from './LandingPage/LandingPageFeaturedElections';
import LandingPageFeatures from './LandingPage/LandingPageFeatures';
import LandingPageSignUpBar from './LandingPage/LandingPageSignUpBar';
import LandingPageTestimonials from './LandingPage/LandingPageTestimonials';
import { Paper } from '@mui/material';
import LandingPagePricing from './LandingPage/LandingPagePricing';

const LandingPage = ({ authSession }) => {
return (
<Box sx={{
width: '100%',
display: 'flex',
flexDirection: 'column',
gap: '15rem',
minHeight: '600px',
justifyContent: 'center',
pt: { xs: 0, md: 0 },
margin: 'auto',
paddingTop: '8rem',
paddingBottom: '8rem',
}}>
<Grid container sx={{
maxWidth: '1300px',
p: { xs: 2, md: 2 },
}}>
<Grid item xs={12} md={7}>
<Typography variant="h3" style={{ fontWeight: 700 }} >
STAR Elections
</Typography>
<Typography variant="h5" style={{
opacity: '0.7',
}}>
Open source election software
</Typography>
<Typography variant="h5" style={{
opacity: '0.7',
}}>
From quick polls to highly secure elections
</Typography>
<Typography variant="h5" style={{
opacity: '0.7',
paddingBottom: '30px',
}}>
Voting methods approved by the <a target="_blank" href={'https://www.equal.vote'} style={{ color: 'inherit', textDecoration: 'underline' }}>Equal Vote Coalition</a>
</Typography>
</Grid>
<Grid item xs={12} md={5}>
<QuickPoll authSession={authSession} />
</Grid>
</Grid>
<LandingPageHero authSession={authSession}/>
<LandingPageFeatureElections electionIds={[
'52c2b793-bdfe-49e8-b4cf-f448108c39af',
'e45e93b1-9e4e-4a87-bb80-e7dbbd6e4721',
'5c84e93b-b01c-4ab0-82ee-7181cb7ac995'
]}/>
<LandingPageFeatures/>
<LandingPageSignUpBar authSession={authSession}/>
<LandingPageTestimonials testimonials={[
{
quote: 'STAR Voting is Awesome!',
name: 'John Doe',
url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
},
{
quote: 'STAR Voting is Awesome!',
name: 'Jane Doe',
url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
},
{
quote: 'STAR Voting is Awesome!',
name: 'Equal Vote',
url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj'
},
]}/>
<LandingPagePricing options={[
{
title: 'Free Tier',
price: <b>$0.00</b>,
description: <>Unlimited voters for Public elections<br/><br/>Private elections up to 100 voters</>
},
{
title: 'Professional',
price: <><b>Contact for quote</b></>,
description: <>Private elections over 100 voters<br/><br/>All proceeds go to non-profit use<br/><br/>Discounts are available on request<br/><br/>Email [email protected]</>
},
]}/>
</Box>
)
}
Expand Down
24 changes: 24 additions & 0 deletions frontend/src/components/LandingPage/FeaturedElection.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Card, CardActionArea, CardContent, Paper, Typography } from "@mui/material";
import React from 'react';
import { useNavigate } from "react-router";


export default ({electionId}) => {
const navigate = useNavigate();

return <Card className='featuredElection' onClick={() => navigate(`/Election/${electionId}`)} elevation={8} sx={{
width: '100%',
maxWidth: '20rem',
display: 'flex',
flexDirection: 'column',
flexShrink: '0',
}}>
<CardActionArea sx={{p: { xs: 2, md: 2 }}}>
<CardContent>
<Typography variant='h5'>Election Title</Typography>
<Typography variant='h6'>election info</Typography>
<Typography variant='h6'>election info</Typography>
</CardContent>
</CardActionArea>
</Card>
}
32 changes: 32 additions & 0 deletions frontend/src/components/LandingPage/LandingPageFeaturedElections.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Box, Typography } from '@mui/material'
import React from 'react'
import FeaturedElection from './FeaturedElection'

export default ({electionIds}) => {
return <Box sx={{
display: 'flex',
flexDirection: 'column',
background: 'var(--brand-gray-1)',
clip: 'unset',
width: '100%',
p: { xs: 2},
}}>
<Box sx={{
width: '100%',
maxWidth: '1300px',
margin: 'auto',
}}>
<Typography variant='h4' sx={{textAlign: 'left'}}>Vote in a Featured Public Election</Typography>
</Box>
<Box sx={{
display: 'flex',
flexDirection: 'row',
gap: '2rem',
p: { xs: 4},
justifyContent: 'center',
flexWrap: 'wrap',
}}>
{electionIds.map(electionId => <FeaturedElection electionId={electionId}/>)}
</Box>
</Box>
}
Loading

0 comments on commit 9f66f05

Please sign in to comment.