style: Feedback component style refinement

theopensystemslab · Nov 7, 2024 · 991998f · 991998f
1 parent 0fd922b
commit 991998f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 26 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx b/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx
@@ -1,5 +1,6 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 import { Disclaimer } from "@planx/components/shared/Disclaimer";
 import Card from "@planx/components/shared/Preview/Card";
 import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHeader";
@@ -83,15 +84,17 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
         id={"DESCRIPTION_TEXT"}
         openLinksOnNewTab
       />
-      <Box pt={2} mb={3}>
+      <Box my={4}>
         {props.ratingQuestion && (
           <InputLabel
             label={
-              <ReactMarkdownOrHtml
-                source={props.ratingQuestion}
-                id={"RATING_QUESTION"}
-                openLinksOnNewTab
-              />
+              <Typography component="span" fontWeight="700">
+                <ReactMarkdownOrHtml
+                  source={props.ratingQuestion}
+                  id={"RATING_QUESTION"}
+                  openLinksOnNewTab
+                />
+              </Typography>
             }
           />
         )}
@@ -102,7 +105,12 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
           onChange={handleFeedbackChange}
           aria-label="feedback score"
         >
-          <Grid container columnSpacing={15} component="fieldset">
+          <Grid 
+            container 
+            columnSpacing={2} 
+            component="fieldset" 
+            direction={{ xs: "column", formWrap: "row" }}
+          >
             <FaceBox
               value="1"
               testId="feedback-button-terrible"
@@ -139,18 +147,19 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
         {props.freeformQuestion && (
           <InputLabel
             label={
-              <ReactMarkdownOrHtml
-                source={props.freeformQuestion}
-                id={"RATING_QUESTION"}
-                openLinksOnNewTab
-              />
+              <Typography component="span" fontWeight="700">
+                <ReactMarkdownOrHtml
+                  source={props.freeformQuestion}
+                  id={"RATING_QUESTION"}
+                  openLinksOnNewTab
+                />
+              </Typography>
             }
           />
         )}
-
         <Input
           multiline={true}
-          rows={5}
+          rows={3}
           name="feedback"
           value={formik.values.feedback}
           bordered

diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx
@@ -20,36 +20,37 @@ export const FaceBox = ({
   value,
 }: FaceBoxProps): ReactElement => {
   return (
-    <Grid item xs={2} key={label}>
+    <Grid item xs={2.4} key={label}>
       <ToggleButton
         value={value}
         data-testid={testId}
         sx={{
           px: 0,
+          width: "100%",
+          textTransform: "none",
+          "&[aria-pressed='true'] > div": {
+            borderColor: (theme) => theme.palette.primary.dark,
+            background: (theme) => theme.palette.background.paper,
+          },
         }}
         disableRipple
       >
         <Box
           sx={(theme) => ({
-            p: theme.spacing(2),
+            p: theme.spacing(2, 1),
+            width: "100%",
             border: `2px solid ${theme.palette.border.main} `,
-            width: "120px",
-            maxHeight: "120px",
             display: "flex",
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
+            gap: theme.spacing(0.5),
           })}
         >
-          <img src={icon} width={50} alt={altText} />
+          <img src={icon} width={32} alt={altText} />
           <Typography
             variant="body2"
-            pt={1}
             sx={(theme) => ({
-              textTransform: "lowercase",
-              "&::first-letter": {
-                textTransform: "uppercase",
-              },
               color: theme.palette.text.primary,
             })}
           >

diff --git a/editor.planx.uk/src/@planx/components/Feedback/styled.ts b/editor.planx.uk/src/@planx/components/Feedback/styled.ts
@@ -5,11 +5,12 @@ import ToggleButtonGroup, {
 
 export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(
   ({ theme }) => ({
+    width: "100%",
     [`& .${toggleButtonGroupClasses.grouped}`]: {
       border: 0,
       padding: 0,
       marginTop: theme.spacing(1),
     },
-    paddingBottom: theme.spacing(3.5),
+    paddingBottom: theme.spacing(2.5),
   }),
 );
diff --git a/editor.planx.uk/src/@planx/components/shared/Disclaimer.tsx b/editor.planx.uk/src/@planx/components/shared/Disclaimer.tsx
@@ -7,7 +7,7 @@ import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHt
 export const Disclaimer = ({ text }: { text: string }) => (
   <WarningContainer>
     <ErrorOutline />
-    <Typography variant="body1" component="div" ml={2} mb={1}>
+    <Typography variant="body2" component="div" ml={2} sx={{ "& p:first-of-type": { marginTop: 0, } }}>
       <ReactMarkdownOrHtml source={text} openLinksOnNewTab />
     </Typography>
   </WarningContainer>