From 6b2957afb4680caaae16d17778a669d88bef8e52 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Thu, 7 Nov 2024 17:54:38 +0000
Subject: [PATCH] style: Feedback component style refinement

---
 .../components/Feedback/Public/Public.tsx     | 37 +++++++++++--------
 .../Feedback/components/FaceBox.tsx           | 16 +++++---
 .../Feedback/components/placeholders.tsx      |  2 +-
 .../src/@planx/components/Feedback/styled.ts  |  1 +
 4 files changed, 34 insertions(+), 22 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
index ec60ec1d03..40b1d72007 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx
@@ -6,13 +6,13 @@ import { CardHeader } from "@planx/components/shared/Preview/CardHeader/CardHead
 import type { PublicProps } from "@planx/components/shared/types";
 import { useFormik } from "formik";
 import React from "react";
-import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
 import TerribleFace from "ui/images/feedback_filled-01.svg";
 import PoorFace from "ui/images/feedback_filled-02.svg";
 import NeutralFace from "ui/images/feedback_filled-03.svg";
 import GoodFace from "ui/images/feedback_filled-04.svg";
 import ExcellentFace from "ui/images/feedback_filled-05.svg";
 import InputLabel from "ui/public/InputLabel";
+import Input from "ui/shared/Input/Input";
 import ReactMarkdownOrHtml from "ui/shared/ReactMarkdownOrHtml/ReactMarkdownOrHtml";
 
 import { getPreviouslySubmittedData, makeData } from "../../shared/utils";
@@ -48,15 +48,17 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
         id={"DESCRIPTION_TEXT"}
         openLinksOnNewTab
       />
-      <Box pt={2} mb={3}>
+      <Box pt={1} mb={2}>
         {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>
             }
           />
         )}
@@ -67,7 +69,7 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
           onChange={handleFeedbackChange}
           aria-label="feedback score"
         >
-          <Grid container columnSpacing={15} component="fieldset">
+          <Grid container columnSpacing={2} sx={{ width: "100%" }} component="fieldset" direction={{ xs: "column", formWrap: "row" }}>
             <FaceBox
               value="1"
               testId="feedback-button-terrible"
@@ -104,22 +106,27 @@ 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>
             }
           />
         )}
-        <RichTextInput
+        <Input
+          type="text"
+          multiline
+          bordered
           name="feedback"
           value={formik.values.feedback}
           placeholder="What did you think?"
           onChange={formik.handleChange}
         />
       </Box>
-      <Typography variant="caption">
+      <Typography variant="body2">
         <ReactMarkdownOrHtml source={props?.disclaimer} id={"DISCLAIMER"} />
       </Typography>
     </Card>
diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx
index a12a1186a9..8aef0305b1 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx
+++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx
@@ -20,28 +20,32 @@ 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,
+          px: 0, textTransform: "none", width: "100%",
+          "&[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),
             border: `2px solid ${theme.palette.border.main} `,
-            width: "120px",
-            maxHeight: "120px",
             display: "flex",
+            gap: theme.spacing(0.25),
             flexDirection: "column",
             justifyContent: "center",
             alignItems: "center",
+            width: "100%",
           })}
         >
-          <img src={icon} width={50} alt={altText} />
+          <img src={icon} width={32} alt={altText} />
           <Typography variant="body2" pt={0.5}>
             {label}
           </Typography>
diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/placeholders.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/placeholders.tsx
index a2a1cab360..6de0e79504 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/components/placeholders.tsx
+++ b/editor.planx.uk/src/@planx/components/Feedback/components/placeholders.tsx
@@ -1,5 +1,5 @@
 export const freeformQuestionPlaceholder =
-  "Please tell us more about your experience.";
+  "Please tell us more about your experience";
 
 export const ratingQuestionPlaceholder =
   "How would you rate your experience with this service?";
diff --git a/editor.planx.uk/src/@planx/components/Feedback/styled.ts b/editor.planx.uk/src/@planx/components/Feedback/styled.ts
index 5439945726..af9081cdd3 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/styled.ts
+++ b/editor.planx.uk/src/@planx/components/Feedback/styled.ts
@@ -5,6 +5,7 @@ import ToggleButtonGroup, {
 
 export const StyledToggleButtonGroup = styled(ToggleButtonGroup)(
   ({ theme }) => ({
+    width: "100%",
     [`& .${toggleButtonGroupClasses.grouped}`]: {
       border: 0,
       padding: 0,