diff --git a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx index 514eeca133..88b1f54b5d 100644 --- a/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx +++ b/editor.planx.uk/src/@planx/components/Question/Public/Question.tsx @@ -88,7 +88,7 @@ const QuestionComponent: React.FC = (props) => { > {props.responses?.map((response) => { @@ -116,16 +116,16 @@ const QuestionComponent: React.FC = (props) => { ); case QuestionLayout.Descriptions: return ( - - - + + + + + ); case QuestionLayout.Images: return ( diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx index 55a9a7606b..42271ca227 100644 --- a/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Radio/BasicRadio.tsx @@ -1,6 +1,7 @@ import FormControlLabel, { FormControlLabelProps, } from "@mui/material/FormControlLabel"; +import { formControlLabelClasses } from "@mui/material/FormControlLabel"; import Radio from "@mui/material/Radio"; import React from "react"; @@ -23,7 +24,13 @@ const BasicRadio: React.FC = ({ onChange={onChange} control={} label={title} - sx={variant === "default" ? { pb: 1 } : {}} + sx={(theme) => ({ + mb: variant === "default" ? 1 : 0, + alignItems: "flex-start", + [`& .${formControlLabelClasses.label}`]: { + paddingTop: theme.spacing(0.95), + }, + })} /> ); diff --git a/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx index 5798bd4ea0..f6ad7847bb 100644 --- a/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx +++ b/editor.planx.uk/src/@planx/components/shared/Radio/DescriptionRadio.tsx @@ -1,7 +1,6 @@ import Box from "@mui/material/Box"; import FormLabel from "@mui/material/FormLabel"; import Radio, { RadioProps } from "@mui/material/Radio"; -import { useRadioGroup } from "@mui/material/RadioGroup"; import { styled } from "@mui/material/styles"; import Typography from "@mui/material/Typography"; import React from "react"; @@ -13,25 +12,10 @@ export interface Props { onChange: RadioProps["onChange"]; } -interface StyledFormLabelProps { - isSelected: boolean; -} - -const StyledFormLabel = styled(FormLabel, { - shouldForwardProp: (prop) => prop !== "isSelected", -})(({ theme, isSelected }) => ({ - border: "2px solid", - borderColor: isSelected - ? theme.palette.primary.main - : theme.palette.border.main, - padding: theme.spacing(1.5), +const StyledFormLabel = styled(FormLabel)(({ theme }) => ({ + display: "flex", + marginBottom: theme.spacing(1), cursor: "pointer", - display: "block", - height: "100%", - color: theme.palette.text.primary, - "& > p": { - color: theme.palette.text.secondary, - }, })); const DescriptionRadio: React.FC = ({ @@ -40,16 +24,17 @@ const DescriptionRadio: React.FC = ({ onChange, id, }) => { - const radioGroupState = useRadioGroup(); - const isSelected = radioGroupState?.value === id; - return ( - - - - {title} + + + + + {title} + + + {description} + - {description} ); };