Merge pull request #1646 from zetkin/survey-page-styling-xuan

survey page styling
zetkin · Nov 12, 2023 · 93c0a4e · 93c0a4e
2 parents b2cd619 + efa7609
commit 93c0a4e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 12 deletions.
diff --git a/src/features/surveys/components/surveyForm/OptionsQuestion.tsx b/src/features/surveys/components/surveyForm/OptionsQuestion.tsx
@@ -20,7 +20,16 @@ const OptionsQuestion: FC<{ element: ZetkinSurveyOptionsQuestionElement }> = ({
 }) => {
   return (
     <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">
+      <FormLabel
+        id="demo-radio-buttons-group-label"
+        style={{
+          color: 'black',
+          fontSize: '1.5em',
+          fontWeight: '500',
+          marginBottom: '0.5em',
+          marginTop: '0.5em',
+        }}
+      >
         {element.question.question}
       </FormLabel>
       {element.question.response_config.widget_type === 'checkbox' && (

diff --git a/src/features/surveys/components/surveyForm/TextQuestion.tsx b/src/features/surveys/components/surveyForm/TextQuestion.tsx
@@ -6,11 +6,21 @@ const OptionsQuestion: FC<{ element: ZetkinSurveyTextQuestionElement }> = ({
   element,
 }) => {
   return (
-    <FormControl>
-      <FormLabel id="demo-radio-buttons-group-label">
+    <FormControl sx={{ width: '100%' }}>
+      <FormLabel
+        id="demo-radio-buttons-group-label"
+        style={{
+          color: 'black',
+          fontSize: '1.5em',
+          fontWeight: '500',
+          marginBottom: '0.5em',
+          marginTop: '0.5em',
+        }}
+      >
         {element.question.question}
       </FormLabel>
       <TextField
+        fullWidth
         id={`input-${element.id}`}
         name={`${element.id}.text`}
         type="text"

diff --git a/src/features/surveys/l10n/messageIds.ts b/src/features/surveys/l10n/messageIds.ts
@@ -176,7 +176,7 @@ export default makeMessages('feat.surveys', {
       anonymous: m('Submit anonymously'),
       nameAndEmail: m('Sign with name and e-mail'),
     },
-    signOptions: m('Choose 1 of these signing options below'),
+    signOptions: m('Choose how to sign'),
     submit: m('Submit'),
     termsDescription: m<{ organization: string }>(
       'When you submit this survey, the information you provide will be stored and processed in Zetkin by {organization} in order to organize activism and in accordance with the Zetkin privacy policy.'

diff --git a/src/pages/o/[orgId]/surveys/[surveyId]/index.tsx b/src/pages/o/[orgId]/surveys/[surveyId]/index.tsx
@@ -22,12 +22,15 @@ import ZUIAvatar from 'zui/ZUIAvatar';
 import { FC, useState } from 'react';
 
 import {
+  Container,
   FormControlLabel,
+  FormControlLabelProps,
   Link,
   Radio,
   RadioGroup,
   TextField,
   Typography,
+  useRadioGroup,
 } from '@mui/material';
 
 import { Msg, useMessages } from 'core/i18n';
@@ -163,6 +166,31 @@ type PageProps = {
 type FormStatus = 'editing' | 'invalid' | 'error' | 'submitted';
 type SignatureOption = 'authenticated' | 'email' | 'anonymous';
 
+function RadioFormControlLabel(props: FormControlLabelProps) {
+  const radioGroup = useRadioGroup();
+
+  let checked = false;
+
+  if (radioGroup) {
+    checked = radioGroup.value === props.value;
+  }
+
+  if (checked) {
+    return (
+      <FormControlLabel
+        checked={checked}
+        sx={{
+          backgroundColor: '#fbcbd8',
+          borderRadius: '50px',
+        }}
+        {...props}
+      />
+    );
+  }
+
+  return <FormControlLabel checked={checked} {...props} />;
+}
+
 const Page: FC<PageProps> = ({ orgId, status, survey }) => {
   const messages = useMessages(messageIds);
 
@@ -177,7 +205,7 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
   const currentUser = useCurrentUser();
 
   return (
-    <>
+    <Container style={{ height: '100vh' }}>
       <h1>{survey.title}</h1>
 
       {status === 'error' && <ErrorMessage />}
@@ -211,7 +239,15 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
             )}
           </div>
         ))}
-        <Typography>
+        <Typography
+          style={{
+            color: 'black',
+            fontSize: '1.5em',
+            fontWeight: '500',
+            marginBottom: '0.5em',
+            marginTop: '0.5em',
+          }}
+        >
           <Msg id={messageIds.surveyForm.signOptions} />
         </Typography>
 
@@ -220,7 +256,7 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
           onChange={(e) => handleRadioChange(e.target.value as SignatureOption)}
           value={selectedOption}
         >
-          <FormControlLabel
+          <RadioFormControlLabel
             control={<Radio />}
             label={
               <Typography>
@@ -236,7 +272,7 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
             value="authenticated"
           />
 
-          <FormControlLabel
+          <RadioFormControlLabel
             control={<Radio />}
             label={
               <div>
@@ -254,8 +290,9 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
             }
             value="email"
           />
+
           {survey.signature === 'allow_anonymous' && (
-            <FormControlLabel
+            <RadioFormControlLabel
               control={<Radio />}
               label={
                 <Typography>
@@ -273,13 +310,13 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
           label={<Msg id={messageIds.surveyForm.accept} />}
           name="privacy.approval"
         />
-        <Typography>
+        <Typography style={{ fontSize: '0.8em' }}>
           <Msg
             id={messageIds.surveyForm.termsDescription}
             values={{ organization: survey.organization.title ?? '' }}
           />
         </Typography>
-        <Typography>
+        <Typography style={{ fontSize: '0.8em', marginBottom: '0.5em' }}>
           <Link
             href={messages.surveyForm.policy.link()}
             rel="noreferrer"
@@ -292,13 +329,14 @@ const Page: FC<PageProps> = ({ orgId, status, survey }) => {
         <Button
           color="primary"
           data-testid="Survey-submit"
+          style={{ textAlign: 'center', width: '100%' }}
           type="submit"
           variant="contained"
         >
           {messages.surveyForm.submit()}
         </Button>
       </form>
-    </>
+    </Container>
   );
 };