Skip to content

Commit

Permalink
Experimenting with a question/form section header element on the Add …
Browse files Browse the repository at this point in the history 
…Stall and About pages
  • Loading branch information
@keithamoss
keithamoss committed Jul 19, 2024
1 parent aabe257 commit acef341
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 43 deletions.
59 changes: 30 additions & 29 deletions public-redesign/src/features/aboutPage/AboutPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,11 @@ import { Box, List, ListItemButton, ListItemIcon, ListItemText } from '@mui/mate
import { grey } from '@mui/material/colors';
import { styled } from '@mui/material/styles';
import { Helmet } from 'react-helmet-async';
import { mapaThemePrimaryGrey } from '../../app/ui/theme';
import { getBaseURL } from '../../app/utils';
import { appBarHeight } from '../addStall/addStallHelpers';
import { getAllFoodsAvailableOnStalls, getSupportingIconsForAboutPage, standaloneIconSize } from '../icons/iconHelpers';

// const bottomNav = 56;

// const Root = styled('div')(({ theme }) => ({
// height: '100%',
// backgroundColor: theme.palette.mode === 'light' ? grey[100] : theme.palette.background.default,
// paddingBottom: `${bottomNav}px`,
// }));

const StyledInteractableBoxFullHeight = styled(Box)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'light' ? grey[100] : grey[800],
overflowY: 'auto',
Expand All @@ -25,27 +18,27 @@ const StyledInteractableBoxFullHeight = styled(Box)(({ theme }) => ({
const PageWrapper = styled('div')(({ theme }) => ({
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
'& h3:first-child': {
marginTop: theme.spacing(1),
},
}));

const Question = styled('h3')(({ theme }) => ({
borderTop: `5px solid ${mapaThemePrimaryGrey}`,
marginTop: theme.spacing(3),
marginBottom: theme.spacing(1),
borderBottom: `1px solid ${grey[300]}`,
}));

const Answer = styled('div')(({ theme }) => ({
marginBottom: theme.spacing(3),
fontSize: '14px',
lineHeight: '24px',
color: grey[800],
width: '75%',

'& > p': {
marginTop: theme.spacing(1),
marginTop: 0,
marginBottom: theme.spacing(1),
},
'& li': {
marginTottom: theme.spacing(1),
},
}));

export default function AboutPage() {
Expand All @@ -60,10 +53,12 @@ export default function AboutPage() {
</Helmet>

<PageWrapper>
<Question sx={{ mt: 0 }}>What is this?</Question>
<Question>What is this?</Question>
<Answer>A map of sausage and cake availability on election day.</Answer>

<Question>I still don&apos;t understand</Question>
<Answer>It&apos;s practically part of the Australian Constitution. Or something.</Answer>

<Question>But how do you get all of the sausage sizzles?</Question>
<Answer>
<p>
Expand All @@ -89,8 +84,9 @@ export default function AboutPage() {
Democracy Sausage incorporates data that is: © Commonwealth of Australia (Australian Electoral Commission){' '}
{new Date().getFullYear()}
</Answer>

<Question>What do the all of the icons mean?</Question>
<Answer>
<Answer sx={{ '& ul': { paddingTop: 0, paddingBottom: 0 } }}>
<List>
{getAllFoodsAvailableOnStalls().map((noms) => (
<ListItemButton key={noms.value}>
Expand All @@ -106,20 +102,24 @@ export default function AboutPage() {
))}
</List>
</Answer>

<Question>What does the halal symbol indicate?</Question>
<Answer>
Firstly, it&apos;s important to note that our site can&apos;t actually provide halal certification, and we
display the symbol based on information submitted to us by the folks running the stalls themselves.
<br />
<br />
The halal symbol we use is widely understood by our users to indicate halal. (From what we understand, it is
just one of a variation of halal seals / stamps that are used in Australia - though we&apos;re happy to be
corrected on that). For the curious, the ABC&apos;s Bush Telegraph has more in their segment{' '}
<a href="https://www.abc.net.au/radionational/programs/archived/bushtelegraph/halal/5843904">
What&apos;s the big fuss about Halal certification?
</a>
.
<p>
Firstly, it&apos;s important to note that our site can&apos;t actually provide halal certification, and we
display the symbol based on information submitted to us by the folks running the stalls themselves.
</p>
<p>
The halal symbol we use is widely understood by our users to indicate halal. (From what we understand, it is
just one of a variation of halal seals / stamps that are used in Australia - though we&apos;re happy to be
corrected on that). For the curious, the ABC&apos;s Bush Telegraph has more in their segment{' '}
<a href="https://www.abc.net.au/radionational/programs/archived/bushtelegraph/halal/5843904">
What&apos;s the big fuss about Halal certification?
</a>
.
</p>
</Answer>

<Question>Who are you?</Question>
<Answer>
<p>We&apos;re six people, three babies, three cats, and some parrots.</p>
Expand All @@ -133,6 +133,7 @@ export default function AboutPage() {
<a href="mailto:[email protected]">[email protected]</a>.
</p>
</Answer>

<Question>Who do we need permission from to run a sausage sizzle fundraiser at our school?</Question>
<Answer>
Well your school, first of all (but you knew that already). Beyond that, your local government may require you
Expand All @@ -143,8 +144,10 @@ export default function AboutPage() {
</a>
.
</Answer>

<Question>Are you part of any political parties?</Question>
<Answer>Nope! Democracy Sausage is 100% non-partisan, organic, hormone free, and grass fed.</Answer>

<Question>Will you share my info with others?</Question>
<Answer>
<p>
Expand All @@ -157,8 +160,6 @@ export default function AboutPage() {
</p>
</Answer>
</PageWrapper>

{/* <BottomBar /> */}
</StyledInteractableBoxFullHeight>
);
}
12 changes: 9 additions & 3 deletions public-redesign/src/features/addStall/addStallStallForm/addStallFormFoodOptionsSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { useMemo } from 'react';
import { FormFieldValidationErrorMessageOnly } from '../../../app/forms/formHelpers';
import { StallFoodOptions, StallFoodOptionsErrors } from '../../../app/services/stalls';
import TextFieldWithout1Password from '../../../app/ui/textFieldWithout1Password';
import { mapaThemePrimaryGrey } from '../../../app/ui/theme';
import { getAllFoodsAvailableOnStalls, standaloneIconSize } from '../../icons/iconHelpers';

interface Props {
Expand Down Expand Up @@ -59,7 +60,12 @@ export default function AddStallFormFoodOptionsSelector(props: Props) {

return (
<React.Fragment>
<Typography gutterBottom variant="h6" component="div" sx={{ mb: 0 }}>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{ mt: 1, mb: 0, borderTop: `5px solid ${mapaThemePrimaryGrey}` }}
>
What&apos;s on offer?
</Typography>

Expand Down Expand Up @@ -90,7 +96,7 @@ export default function AddStallFormFoodOptionsSelector(props: Props) {
}
disablePadding
>
<ListItemButton onClick={onClickFoodOption(option.value as keyof StallFoodOptions)}>
<ListItemButton onClick={onClickFoodOption(option.value as keyof StallFoodOptions)} sx={{ pl: 0 }}>
<ListItemAvatar>
<Avatar alt={option.value} sx={{ backgroundColor: 'transparent', '& svg': standaloneIconSize }}>
{option.icon.react}
Expand All @@ -106,7 +112,7 @@ export default function AddStallFormFoodOptionsSelector(props: Props) {
</FormControl>

{/* We can't use <Controller /> here because `control` has a different type for the Owner and TipOff form */}
<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<TextFieldWithout1Password
label="Anything else?"
Expand Down
25 changes: 18 additions & 7 deletions public-redesign/src/features/addStall/addStallStallForm/addStallFormForOwner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useAppSelector } from '../../../app/hooks/store';
import { Election } from '../../../app/services/elections';
import { Stall, StallFoodOptions, StallOwnerModifiableProps } from '../../../app/services/stalls';
import TextFieldWithout1Password from '../../../app/ui/textFieldWithout1Password';
import { mapaThemePrimaryGrey } from '../../../app/ui/theme';
import { getBaseURL } from '../../../app/utils';
import { selectActiveElections } from '../../elections/electionsSlice';
import { getPollingPlacePermalinkFromElectionAndPollingPlace } from '../../pollingPlaces/pollingPlaceHelpers';
Expand Down Expand Up @@ -129,11 +130,16 @@ export default function AddStallFormForOwner(props: Props) {
{/* ######################
Stall Details
###################### */}
<Typography gutterBottom variant="h6" component="div" sx={{ mb: 2 }}>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{ mb: 2, borderTop: `5px solid ${mapaThemePrimaryGrey}` }}
>
Stall details
</Typography>

<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<Controller
name="name"
Expand All @@ -151,7 +157,7 @@ export default function AddStallFormForOwner(props: Props) {
{errors.name !== undefined && <FormFieldValidationError error={errors.name} />}
</FormControl>

<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<Controller
name="description"
Expand All @@ -170,7 +176,7 @@ export default function AddStallFormForOwner(props: Props) {
{errors.description !== undefined && <FormFieldValidationError error={errors.description} />}
</FormControl>

<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<Controller
name="opening_hours"
Expand All @@ -184,7 +190,7 @@ export default function AddStallFormForOwner(props: Props) {
{errors.opening_hours !== undefined && <FormFieldValidationError error={errors.opening_hours} />}
</FormControl>

<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<Controller
name="website"
Expand All @@ -210,11 +216,16 @@ export default function AddStallFormForOwner(props: Props) {
{/* ######################
Your Details
###################### */}
<Typography gutterBottom variant="h6" component="div" sx={{ mb: 2 }}>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{ mt: 1, mb: 2, borderTop: `5px solid ${mapaThemePrimaryGrey}` }}
>
Your details
</Typography>

<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<Controller
name="email"
Expand Down
18 changes: 15 additions & 3 deletions public-redesign/src/features/addStall/addStallStallForm/addStallFormForTipOff.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { useAppSelector } from '../../../app/hooks/store';
import { Election } from '../../../app/services/elections';
import { Stall, StallFoodOptions, StallTipOffModifiableProps } from '../../../app/services/stalls';
import TextFieldWithout1Password from '../../../app/ui/textFieldWithout1Password';
import { mapaThemePrimaryGrey } from '../../../app/ui/theme';
import { getBaseURL } from '../../../app/utils';
import { selectActiveElections } from '../../elections/electionsSlice';
import { getPollingPlacePermalinkFromElectionAndPollingPlace } from '../../pollingPlaces/pollingPlaceHelpers';
Expand Down Expand Up @@ -118,17 +119,28 @@ export default function AddStallFormForTipOff(props: Props) {
<Typography variant="h6">Tell us about the stall</Typography>
</Paper>

<Box sx={{ width: '100%', p: 2 }}>
<Box
sx={{
width: '100%',
p: 2,
pt: 1, // Only pt 1 so we keep a consistent 16px with the spacing between sections as with AddStallFormForOwner
}}
>
<AddStallFormFoodOptionsSelector foodOptions={noms} onChange={onFoodOptionChange} errors={errors.noms} />

{/* ######################
Your Details
###################### */}
<Typography gutterBottom variant="h6" component="div" sx={{ mb: 2 }}>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{ mt: 1, mb: 2, borderTop: `5px solid ${mapaThemePrimaryGrey}` }}
>
Your details
</Typography>

<FormControl fullWidth={true} sx={{ mb: 3 }} component="fieldset" variant="outlined">
<FormControl fullWidth={true} sx={{ mb: 2 }} component="fieldset" variant="outlined">
<FormGroup>
<Controller
name="email"
Expand Down
8 changes: 7 additions & 1 deletion public-redesign/src/features/addStall/addStallStallForm/addStallFormPrivacyNotice.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import SecurityIcon from '@mui/icons-material/Security';
import { List, ListItem, ListItemIcon, ListItemText, Typography } from '@mui/material';
import { styled } from '@mui/material/styles';
import { mapaThemePrimaryGrey } from '../../../app/ui/theme';

const PrivacyNoticeContainer = styled('div')(({ theme }) => ({
marginTop: theme.spacing(2),
Expand All @@ -25,7 +26,12 @@ const PrivacyMessage = styled('div')(() => ({
export default function AddStallFormPrivacyNotice() {
return (
<PrivacyNoticeContainer>
<Typography gutterBottom variant="h6" component="div" sx={{ mb: 1 }}>
<Typography
gutterBottom
variant="h6"
component="div"
sx={{ mt: 1, mb: 1, borderTop: `5px solid ${mapaThemePrimaryGrey}` }}
>
A word about privacy
</Typography>

Expand Down

0 comments on commit acef341

Please sign in to comment.