From acef341d51bf54fb219eca454910ff80c8a9f718 Mon Sep 17 00:00:00 2001 From: Keith Moss Date: Fri, 19 Jul 2024 16:20:15 +0800 Subject: [PATCH] Experimenting with a question/form section header element on the Add Stall and About pages --- .../src/features/aboutPage/AboutPage.tsx | 59 ++++++++++--------- .../addStallFormFoodOptionsSelector.tsx | 12 +++- .../addStallFormForOwner.tsx | 25 +++++--- .../addStallFormForTipOff.tsx | 18 +++++- .../addStallFormPrivacyNotice.tsx | 8 ++- 5 files changed, 79 insertions(+), 43 deletions(-) diff --git a/public-redesign/src/features/aboutPage/AboutPage.tsx b/public-redesign/src/features/aboutPage/AboutPage.tsx index 0534b88d22..931bbf15d1 100644 --- a/public-redesign/src/features/aboutPage/AboutPage.tsx +++ b/public-redesign/src/features/aboutPage/AboutPage.tsx @@ -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', @@ -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() { @@ -60,10 +53,12 @@ export default function AboutPage() { - What is this? + What is this? A map of sausage and cake availability on election day. + I still don't understand It's practically part of the Australian Constitution. Or something. + But how do you get all of the sausage sizzles?

@@ -89,8 +84,9 @@ export default function AboutPage() { Democracy Sausage incorporates data that is: © Commonwealth of Australia (Australian Electoral Commission){' '} {new Date().getFullYear()} + What do the all of the icons mean? - + {getAllFoodsAvailableOnStalls().map((noms) => ( @@ -106,20 +102,24 @@ export default function AboutPage() { ))} + What does the halal symbol indicate? - Firstly, it's important to note that our site can't actually provide halal certification, and we - display the symbol based on information submitted to us by the folks running the stalls themselves. -
-
- 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're happy to be - corrected on that). For the curious, the ABC's Bush Telegraph has more in their segment{' '} - - What's the big fuss about Halal certification? - - . +

+ Firstly, it's important to note that our site can't actually provide halal certification, and we + display the symbol based on information submitted to us by the folks running the stalls themselves. +

+

+ 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're happy to be + corrected on that). For the curious, the ABC's Bush Telegraph has more in their segment{' '} + + What's the big fuss about Halal certification? + + . +

+ Who are you?

We're six people, three babies, three cats, and some parrots.

@@ -133,6 +133,7 @@ export default function AboutPage() { ausdemocracysausage@gmail.com.

+ Who do we need permission from to run a sausage sizzle fundraiser at our school? Well your school, first of all (but you knew that already). Beyond that, your local government may require you @@ -143,8 +144,10 @@ export default function AboutPage() { . + Are you part of any political parties? Nope! Democracy Sausage is 100% non-partisan, organic, hormone free, and grass fed. + Will you share my info with others?

@@ -157,8 +160,6 @@ export default function AboutPage() {

- - {/* */} ); } diff --git a/public-redesign/src/features/addStall/addStallStallForm/addStallFormFoodOptionsSelector.tsx b/public-redesign/src/features/addStall/addStallStallForm/addStallFormFoodOptionsSelector.tsx index f38dde2ffe..3945f3ec38 100644 --- a/public-redesign/src/features/addStall/addStallStallForm/addStallFormFoodOptionsSelector.tsx +++ b/public-redesign/src/features/addStall/addStallStallForm/addStallFormFoodOptionsSelector.tsx @@ -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 { @@ -59,7 +60,12 @@ export default function AddStallFormFoodOptionsSelector(props: Props) { return ( - + What's on offer? @@ -90,7 +96,7 @@ export default function AddStallFormFoodOptionsSelector(props: Props) { } disablePadding > - + {option.icon.react} @@ -106,7 +112,7 @@ export default function AddStallFormFoodOptionsSelector(props: Props) { {/* We can't use here because `control` has a different type for the Owner and TipOff form */} - + + Stall details - + } - + } - + } - + + Your details - + Tell us about the stall - + {/* ###################### Your Details ###################### */} - + Your details - + ({ marginTop: theme.spacing(2), @@ -25,7 +26,12 @@ const PrivacyMessage = styled('div')(() => ({ export default function AddStallFormPrivacyNotice() { return ( - + A word about privacy