From b4cf1d832076d53bc6aa25c03bccb3e4afc766ac Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Thu, 19 Oct 2023 21:16:21 -0700 Subject: [PATCH 01/10] Add vote count to header --- frontend/src/components/Footer.tsx | 3 +- frontend/src/components/LandingPage.tsx | 39 +--------- .../LandingPageFeatureElections.tsx | 3 + .../LandingPage/LandingPageFeatures.tsx | 3 + .../LandingPage/LandingPageHero.tsx | 73 +++++++++++++++++++ .../LandingPage/LandingPagePricing.tsx | 3 + .../LandingPage/LandingPageTestimonials.tsx | 3 + 7 files changed, 88 insertions(+), 39 deletions(-) create mode 100644 frontend/src/components/LandingPage/LandingPageFeatureElections.tsx create mode 100644 frontend/src/components/LandingPage/LandingPageFeatures.tsx create mode 100644 frontend/src/components/LandingPage/LandingPageHero.tsx create mode 100644 frontend/src/components/LandingPage/LandingPagePricing.tsx create mode 100644 frontend/src/components/LandingPage/LandingPageTestimonials.tsx diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index f5600aeb..b77df5a5 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -10,8 +10,7 @@ export default function Footer() { - theme.palette.grey[200],//Make theme pallete for this + backgroundColor: 'var(--brand-gray-1)', p: 6, width: '100%', mt: 'auto' diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 0ffc0523..13f5b2b2 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -3,46 +3,11 @@ 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'; const LandingPage = ({ authSession }) => { return ( - - - - - STAR Elections - - - Open source election software - - - From quick polls to highly secure elections - - - Voting methods approved by the Equal Vote Coalition - - - - - - - + ) } diff --git a/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx b/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx new file mode 100644 index 00000000..ff2091f1 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default () => { return <>; } \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageFeatures.tsx b/frontend/src/components/LandingPage/LandingPageFeatures.tsx new file mode 100644 index 00000000..ff2091f1 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageFeatures.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default () => { return <>; } \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageHero.tsx b/frontend/src/components/LandingPage/LandingPageHero.tsx new file mode 100644 index 00000000..0b7dbcba --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageHero.tsx @@ -0,0 +1,73 @@ +import Box from '@mui/material/Box' +import Grid from '@mui/material/Grid' +import Typography from '@mui/material/Typography' +import React from 'react' +import QuickPoll from '../ElectionForm/QuickPoll' + +export default ({authSession}) => { + return ( + + + + + STAR Elections + + + Open source election software + + + From quick polls to highly secure elections + + + Voting methods approved by the Equal Vote Coalition + + + + Elections Created + 10001 + + + Votes Cast + 10001 + + + + + + + + + ) +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPagePricing.tsx b/frontend/src/components/LandingPage/LandingPagePricing.tsx new file mode 100644 index 00000000..ff2091f1 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPagePricing.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default () => { return <>; } \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageTestimonials.tsx b/frontend/src/components/LandingPage/LandingPageTestimonials.tsx new file mode 100644 index 00000000..ff2091f1 --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageTestimonials.tsx @@ -0,0 +1,3 @@ +import React from 'react' + +export default () => { return <>; } \ No newline at end of file From 395f82768383a0a1935f5ea90955066c9ba2e5fd Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Thu, 19 Oct 2023 22:06:45 -0700 Subject: [PATCH 02/10] Add featured election section --- .../src/components/ElectionForm/QuickPoll.tsx | 2 +- frontend/src/components/LandingPage.tsx | 20 +++++++++++- .../LandingPage/FeaturedElection.tsx | 16 ++++++++++ .../LandingPageFeatureElections.tsx | 31 ++++++++++++++++++- .../LandingPage/LandingPageHero.tsx | 13 +++----- frontend/src/index.css | 11 ++++++- 6 files changed, 80 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/LandingPage/FeaturedElection.tsx diff --git a/frontend/src/components/ElectionForm/QuickPoll.tsx b/frontend/src/components/ElectionForm/QuickPoll.tsx index db7a9de4..4569a098 100644 --- a/frontend/src/components/ElectionForm/QuickPoll.tsx +++ b/frontend/src/components/ElectionForm/QuickPoll.tsx @@ -7,10 +7,10 @@ import structuredClone from '@ungap/structured-clone'; import { StyledButton, StyledTextField } from '../styles.js' import { 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') diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 13f5b2b2..e2dca093 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -4,10 +4,28 @@ 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/LandingPageFeatureElections'; const LandingPage = ({ authSession }) => { return ( - + + + + ) } diff --git a/frontend/src/components/LandingPage/FeaturedElection.tsx b/frontend/src/components/LandingPage/FeaturedElection.tsx new file mode 100644 index 00000000..d77706b0 --- /dev/null +++ b/frontend/src/components/LandingPage/FeaturedElection.tsx @@ -0,0 +1,16 @@ +import { Paper, Typography } from "@mui/material"; +import React from 'react'; + +export default ({electionId}) => { + return + Election Title + election info + election info + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx b/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx index ff2091f1..e3091b04 100644 --- a/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx +++ b/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx @@ -1,3 +1,32 @@ +import { Box, Typography } from '@mui/material' import React from 'react' +import FeaturedElection from './FeaturedElection' -export default () => { return <>; } \ No newline at end of file +export default ({electionIds}) => { + return + + Vote in a Featured Public Election + + + {electionIds.map(electionId => )} + + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageHero.tsx b/frontend/src/components/LandingPage/LandingPageHero.tsx index 0b7dbcba..35b45243 100644 --- a/frontend/src/components/LandingPage/LandingPageHero.tsx +++ b/frontend/src/components/LandingPage/LandingPageHero.tsx @@ -7,16 +7,11 @@ import QuickPoll from '../ElectionForm/QuickPoll' export default ({authSession}) => { return ( - + STAR Elections diff --git a/frontend/src/index.css b/frontend/src/index.css index 80b30a07..5fc39811 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -14,7 +14,8 @@ --ltbrand-red: #FF6069FF; --brand-purple: #4D2586; - --brand-ltblue: #2AA2B3; + --brand-ltblue: #2AA2B3; + --brand-ltblue-comma: 42, 162, 179; /* comma version to be used within rgba */ --brand-blue: #02627c; --brand-gold: #FFE156; --brand-red: #EE2C53; @@ -371,4 +372,12 @@ code { .activewinnerResultTab{ border-bottom: 1px solid transparent; background-color: var(--brand-white); +} + +.featuredElection:hover{ + /*Copied from Paper elevation 8, except for color change and doubled opacity*/ + box-shadow: + 0px 5px 5px -3px rgba(var(--brand-ltblue-comma), 0.4), + 0px 8px 10px 1px rgba(var(--brand-ltblue-comma), 0.28), + 0px 3px 14px 2px rgba(var(--brand-ltblue-comma), 0.24); } \ No newline at end of file From 3cda53e1b3a977d18adbb332a79a94a5840da847 Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Thu, 19 Oct 2023 22:54:17 -0700 Subject: [PATCH 03/10] Add features section --- frontend/src/components/LandingPage.tsx | 5 +- .../LandingPageFeatureElections.tsx | 6 +- .../LandingPage/LandingPageFeatures.tsx | 74 ++++++++++++++++++- 3 files changed, 79 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index e2dca093..445daba3 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -5,6 +5,7 @@ import Box from '@mui/material/Box'; import QuickPoll from './ElectionForm/QuickPoll'; import LandingPageHero from './LandingPage/LandingPageHero'; import LandingPageFeatureElections from './LandingPage/LandingPageFeatureElections'; +import LandingPageFeatures from './LandingPage/LandingPageFeatures'; const LandingPage = ({ authSession }) => { return ( @@ -12,7 +13,7 @@ const LandingPage = ({ authSession }) => { width: '100%', display: 'flex', flexDirection: 'column', - gap: '10rem', + gap: '20rem', minHeight: '600px', justifyContent: 'center', margin: 'auto', @@ -20,11 +21,11 @@ const LandingPage = ({ authSession }) => { }}> + ) } diff --git a/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx b/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx index e3091b04..58256f7c 100644 --- a/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx +++ b/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx @@ -8,13 +8,13 @@ export default ({electionIds}) => { flexDirection: 'column', background: 'var(--brand-gray-1)', clip: 'unset', - width: '100%' + width: '100%', + p: { xs: 2}, }}> Vote in a Featured Public Election @@ -22,7 +22,7 @@ export default ({electionIds}) => { display: 'flex', flexDirection: 'row', gap: '2rem', - p: { xs: 2, md: 2 }, + p: { xs: 4}, justifyContent: 'center', flexWrap: 'wrap', }}> diff --git a/frontend/src/components/LandingPage/LandingPageFeatures.tsx b/frontend/src/components/LandingPage/LandingPageFeatures.tsx index ff2091f1..f3e703d7 100644 --- a/frontend/src/components/LandingPage/LandingPageFeatures.tsx +++ b/frontend/src/components/LandingPage/LandingPageFeatures.tsx @@ -1,3 +1,75 @@ +import { Box, Grid, Typography } from '@mui/material' import React from 'react' +import FeaturedElection from './FeaturedElection' -export default () => { return <>; } \ No newline at end of file +export default () => { + let rowSxProps = { + marginLeft: 5, + display: 'flex', + flexDirection: {xs: 'column', lg: 'row'}, + width: '100%', + maxWidth: '110rem', + gap: {xs: '2rem', lg: '8rem'}, + }; + + let itemSxProps= { + flexShrink: '0', + width: '25%', + minWidth: '30rem', + }; + + return + Features + + + + Voting Methods + Supports a variety of single and multiwinner voting methods + + +
    +
  • STAR Voting
    • +
  • STAR PR
    • +
  • Ranked Robin
    • +
+ + + + +
    +
  • Direct Link
    great for Open elections
    • +
  • Email List
    ballots will be emailed to voters
    • +
  • Voter ID List
    voters input an id to access ballot
    • +
+ + + Reach your Voters + Lots of ways to share ballots with Voters + + + + + Use Cases + Good for elections of all shapes and sizes + + +
    +
  • Public Polls
    for online opinion polling
    • +
  • Private Polls
    for your club
    • +
  • Official Elections
    for your organization
    • +
+ + + + +} \ No newline at end of file From 97726a445690fdb0b0bb991a78a40493d8faecb2 Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Fri, 20 Oct 2023 13:08:56 -0700 Subject: [PATCH 04/10] Fix responsive issues with features section --- .../LandingPage/LandingPageFeatures.tsx | 24 +++++++++---------- .../LandingPage/LandingPageHero.tsx | 6 +++-- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/LandingPage/LandingPageFeatures.tsx b/frontend/src/components/LandingPage/LandingPageFeatures.tsx index f3e703d7..bf180bc8 100644 --- a/frontend/src/components/LandingPage/LandingPageFeatures.tsx +++ b/frontend/src/components/LandingPage/LandingPageFeatures.tsx @@ -4,12 +4,12 @@ import FeaturedElection from './FeaturedElection' export default () => { let rowSxProps = { - marginLeft: 5, + paddingLeft: 5, display: 'flex', flexDirection: {xs: 'column', lg: 'row'}, width: '100%', maxWidth: '110rem', - gap: {xs: '2rem', lg: '8rem'}, + gap: {xs: '0rem', lg: '8rem'}, }; let itemSxProps= { @@ -29,15 +29,15 @@ export default () => { display: 'flex', flexDirection: 'column', paddingTop: '5rem', - gap: '15rem', + gap: {xs: '3rem', lg: '15rem'}, }}> - Voting Methods + Voting Methods Supports a variety of single and multiwinner voting methods - -
    + +
    • STAR Voting
    • STAR PR
    • Ranked Robin
      • @@ -45,25 +45,25 @@ export default () => { - -
        + +
        • Direct Link
          great for Open elections
        • Email List
          ballots will be emailed to voters
        • Voter ID List
          voters input an id to access ballot
         - Reach your Voters + Reach your Voters Lots of ways to share ballots with Voters - Use Cases + Use Cases Good for elections of all shapes and sizes - -
          + +
          • Public Polls
            for online opinion polling
          • Private Polls
            for your club
          • Official Elections
            for your organization
            • diff --git a/frontend/src/components/LandingPage/LandingPageHero.tsx b/frontend/src/components/LandingPage/LandingPageHero.tsx index 35b45243..aa5c2be8 100644 --- a/frontend/src/components/LandingPage/LandingPageHero.tsx +++ b/frontend/src/components/LandingPage/LandingPageHero.tsx @@ -11,7 +11,7 @@ export default ({authSession}) => { margin: 'auto', p: { xs: 2, md: 2 }, }}> - + STAR Elections @@ -60,7 +60,9 @@ export default ({authSession}) => { - + + + From 76429fa65ce29cec28ff34fe025d2870f30ff55a Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Fri, 20 Oct 2023 18:35:10 -0700 Subject: [PATCH 05/10] Add sign up bar --- frontend/src/components/LandingPage.tsx | 4 +- ...s.tsx => LandingPageFeaturedElections.tsx} | 0 .../LandingPage/LandingPageSignUpBar.tsx | 37 +++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) rename frontend/src/components/LandingPage/{LandingPageFeatureElections.tsx => LandingPageFeaturedElections.tsx} (100%) create mode 100644 frontend/src/components/LandingPage/LandingPageSignUpBar.tsx diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 445daba3..8ff6b7b8 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -4,8 +4,9 @@ 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/LandingPageFeatureElections'; +import LandingPageFeatureElections from './LandingPage/LandingPageFeaturedElections'; import LandingPageFeatures from './LandingPage/LandingPageFeatures'; +import LandingPageSignUpBar from './LandingPage/LandingPageSignUpBar'; const LandingPage = ({ authSession }) => { return ( @@ -26,6 +27,7 @@ const LandingPage = ({ authSession }) => { '5c84e93b-b01c-4ab0-82ee-7181cb7ac995' ]}/> + ) } diff --git a/frontend/src/components/LandingPage/LandingPageFeatureElections.tsx b/frontend/src/components/LandingPage/LandingPageFeaturedElections.tsx similarity index 100% rename from frontend/src/components/LandingPage/LandingPageFeatureElections.tsx rename to frontend/src/components/LandingPage/LandingPageFeaturedElections.tsx diff --git a/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx b/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx new file mode 100644 index 00000000..faa1adec --- /dev/null +++ b/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx @@ -0,0 +1,37 @@ +import { Box, Button, Typography } from '@mui/material'; +import React from 'react'; +import { StyledButton } from '../styles'; + +export default ({authSession}) => + + + Sign up to create your first election (It's Free!) + {/*I just copied styled button but removed the full width*/ } + + + \ No newline at end of file From b1231749e0e48bc11d3c1dfa74dec233bda35904 Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Fri, 20 Oct 2023 18:56:28 -0700 Subject: [PATCH 06/10] Add testimonials section --- frontend/src/components/LandingPage.tsx | 18 ++++++++ .../LandingPage/LandingPageTestimonials.tsx | 46 ++++++++++++++++++- 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 8ff6b7b8..6dd77c42 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -7,6 +7,7 @@ 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'; const LandingPage = ({ authSession }) => { return ( @@ -28,6 +29,23 @@ const LandingPage = ({ authSession }) => { ]}/> + ) } diff --git a/frontend/src/components/LandingPage/LandingPageTestimonials.tsx b/frontend/src/components/LandingPage/LandingPageTestimonials.tsx index ff2091f1..1edd7d36 100644 --- a/frontend/src/components/LandingPage/LandingPageTestimonials.tsx +++ b/frontend/src/components/LandingPage/LandingPageTestimonials.tsx @@ -1,3 +1,47 @@ +import { Box, Typography } from '@mui/material' import React from 'react' +import FeaturedElection from './FeaturedElection' -export default () => { return <>; } \ No newline at end of file +export default ({testimonials}) => { + return + + Testimonials + + + {testimonials.map(testimonial => + + + "{testimonial.quote}"
            -{testimonial.name}             +             +             + )} +             +             +} \ No newline at end of file From 6c025e26129966f81b530e06bf79b67d4fd143e3 Mon Sep 17 00:00:00 2001 From: Arend Peter Castelein Date: Fri, 20 Oct 2023 19:15:06 -0700 Subject: [PATCH 07/10] Add pricing options --- frontend/src/components/LandingPage.tsx | 25 +++++++++-- .../LandingPage/LandingPagePricing.tsx | 42 ++++++++++++++++++- .../LandingPage/LandingPageSignUpBar.tsx | 1 + .../LandingPage/LandingPageTestimonials.tsx | 1 - 4 files changed, 64 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index 6dd77c42..e4983c21 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -8,6 +8,8 @@ import LandingPageFeatureElections from './LandingPage/LandingPageFeaturedElecti 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 ( @@ -15,11 +17,11 @@ const LandingPage = ({ authSession }) => { width: '100%', display: 'flex', flexDirection: 'column', - gap: '20rem', + gap: '15rem', minHeight: '600px', - justifyContent: 'center', margin: 'auto', - clip: 'unset', + paddingTop: '8rem', + paddingBottom: '8rem', }}> { url: 'https://yt3.googleusercontent.com/el7OsIUIJVHjHIwsNXgrBVft0Ht3RSfJ3wO94MQivXaa_IK0JMGlHrPIbvt8fYtXvjJfErcdG-Y=s176-c-k-c0x00ffffff-no-rj' }, ]}/> + $0.00, + description: <>Unlimited voters for Public elections
            Private elections up to 100 voters + }, + { + title: 'Professional', + price: <>starts at $100.00, + description: <>Private elections over 100 voters
            All proceeds go to non-profit use
            Contact us at elections@equal.vote for a quote
            + }, + { + title: 'Discounted Professional', + price: ??, + description: <>Are you a non-profit or a student organization?
            Contact us for a discount at elections@equal.vote + }, + ]}/>             ) } diff --git a/frontend/src/components/LandingPage/LandingPagePricing.tsx b/frontend/src/components/LandingPage/LandingPagePricing.tsx index ff2091f1..517eb1d5 100644 --- a/frontend/src/components/LandingPage/LandingPagePricing.tsx +++ b/frontend/src/components/LandingPage/LandingPagePricing.tsx @@ -1,3 +1,43 @@ +import { Box, Paper, Typography } from '@mui/material' import React from 'react' -export default () => { return <>; } \ No newline at end of file +export default ({options}) => { + return + + Pricing + + + {options.map(option => + + {option.title} + {option.price} + {option.description} + + )} + + +} \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx b/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx index faa1adec..52bf08b9 100644 --- a/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx +++ b/frontend/src/components/LandingPage/LandingPageSignUpBar.tsx @@ -12,6 +12,7 @@ export default ({authSession}) => { return Date: Fri, 20 Oct 2023 19:27:56 -0700 Subject: [PATCH 08/10] Tweak responsiveness --- frontend/src/components/LandingPage/FeaturedElection.tsx | 3 ++- frontend/src/components/LandingPage/LandingPageFeatures.tsx | 3 +-- frontend/src/components/LandingPage/LandingPagePricing.tsx | 3 ++- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/LandingPage/FeaturedElection.tsx b/frontend/src/components/LandingPage/FeaturedElection.tsx index d77706b0..b2f25b6c 100644 --- a/frontend/src/components/LandingPage/FeaturedElection.tsx +++ b/frontend/src/components/LandingPage/FeaturedElection.tsx @@ -3,7 +3,8 @@ import React from 'react'; export default ({electionId}) => { return { let itemSxProps= { flexShrink: '0', - width: '25%', - minWidth: '30rem', + width: {xs: '100%', lg: '35%'}, }; return { }}> {options.map(option => Date: Tue, 24 Oct 2023 22:44:33 -0700 Subject: [PATCH 09/10] Switch Paper to Card --- frontend/src/components/LandingPage.tsx | 11 +++------- .../LandingPage/FeaturedElection.tsx | 21 ++++++++++++------- .../LandingPage/LandingPagePricing.tsx | 4 ++-- 3 files changed, 19 insertions(+), 17 deletions(-) diff --git a/frontend/src/components/LandingPage.tsx b/frontend/src/components/LandingPage.tsx index e4983c21..6c9d5865 100644 --- a/frontend/src/components/LandingPage.tsx +++ b/frontend/src/components/LandingPage.tsx @@ -52,17 +52,12 @@ const LandingPage = ({ authSession }) => { { title: 'Free Tier', price: $0.00, - description: <>Unlimited voters for Public elections
            Private elections up to 100 voters + description: <>Unlimited voters for Public elections

            Private elections up to 100 voters }, { title: 'Professional', - price: <>starts at $100.00, - description: <>Private elections over 100 voters
            All proceeds go to non-profit use
            Contact us at elections@equal.vote for a quote
            - }, - { - title: 'Discounted Professional', - price: ??, - description: <>Are you a non-profit or a student organization?
            Contact us for a discount at elections@equal.vote + price: <>Contact for quote, + description: <>Private elections over 100 voters

            All proceeds go to non-profit use

            Discounts are available on request

            Email elections@equal.vote }, ]}/>             diff --git a/frontend/src/components/LandingPage/FeaturedElection.tsx b/frontend/src/components/LandingPage/FeaturedElection.tsx index b2f25b6c..2aae9e5c 100644 --- a/frontend/src/components/LandingPage/FeaturedElection.tsx +++ b/frontend/src/components/LandingPage/FeaturedElection.tsx @@ -1,17 +1,24 @@ -import { Paper, Typography } from "@mui/material"; +import { Card, CardActionArea, CardContent, Paper, Typography } from "@mui/material"; import React from 'react'; +import { useNavigate } from "react-router"; + export default ({electionId}) => { - return navigate(`/Election/${electionId}`)} elevation={8} sx={{ width: '100%', maxWidth: '20rem', display: 'flex', flexDirection: 'column', flexShrink: '0', - p: { xs: 2, md: 2 }, }}> - Election Title - election info - election info - + + + Election Title + election info + election info + + + } \ No newline at end of file diff --git a/frontend/src/components/LandingPage/LandingPagePricing.tsx b/frontend/src/components/LandingPage/LandingPagePricing.tsx index f8125107..8fd5592c 100644 --- a/frontend/src/components/LandingPage/LandingPagePricing.tsx +++ b/frontend/src/components/LandingPage/LandingPagePricing.tsx @@ -20,7 +20,7 @@ export default ({options}) => { { {options.map(option => Date: Tue, 24 Oct 2023 23:03:32 -0700 Subject: [PATCH 10/10] Refactor quick poll to remove padding (trash can was creating a white bar on small screen) --- .../src/components/ElectionForm/QuickPoll.tsx | 123 +++++++++--------- 1 file changed, 59 insertions(+), 64 deletions(-) diff --git a/frontend/src/components/ElectionForm/QuickPoll.tsx b/frontend/src/components/ElectionForm/QuickPoll.tsx index 4569a098..2c9d617c 100644 --- a/frontend/src/components/ElectionForm/QuickPoll.tsx +++ b/frontend/src/components/ElectionForm/QuickPoll.tsx @@ -5,7 +5,7 @@ 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 { useLocalStorage } from '../../hooks/useLocalStorage'; import Typography from '@mui/material/Typography'; @@ -141,24 +141,46 @@ const QuickPoll = ({ authSession }) => { return (
            - - + + { + setTitleError(false) + applyElectionUpdate(election => { election.title = e.target.value }) + }} + onKeyPress={(ev) => { + if (ev.key === 'Enter') { + handleEnter(ev) + } + }} + /> + {election.races[0].candidates?.map((candidate, index) => ( { - setTitleError(false) - applyElectionUpdate(election => { election.title = e.target.value }) + onUpdateCandidate(index, e.target.value) }} onKeyPress={(ev) => { if (ev.key === 'Enter') { @@ -166,66 +188,39 @@ const QuickPoll = ({ authSession }) => { } }} /> - - - {election.races[0].candidates?.map((candidate, index) => ( - - { - onUpdateCandidate(index, e.target.value) - }} - onKeyPress={(ev) => { - if (ev.key === 'Enter') { - handleEnter(ev) - } - }} - /> - ))} - + + + Create Quick Poll + + {!authSession.isLoggedIn() ? - - Create Quick Poll + disabled={isPending} + onClick={() => authSession.openLogin()}> + Log in for more settings - - - {!authSession.isLoggedIn() ? - authSession.openLogin()}> - Log in for more settings - - : - - Explore more settings - - } - - - - + : + + Explore more settings + + } + setElectionData(QuickPollTemplate)} > - - + +
            ) }