From 7e56a65be014b3aae2322218b39df93410613af5 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 8 Nov 2024 09:35:38 +0000
Subject: [PATCH] import classes, update defualtContent

---
 .../components/Feedback/Public/Public.tsx     | 32 ++++++++-----------
 .../Feedback/components/FaceBox.tsx           |  4 +--
 .../Feedback/components/defaultContent.tsx    |  6 ++--
 3 files changed, 20 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 9e40414145..156ce4d5ba 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx
+++ b/editor.planx.uk/src/@planx/components/Feedback/Public/Public.tsx
@@ -88,13 +88,11 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
         {props.ratingQuestion && (
           <InputLabel
             label={
-              <Typography component="span" fontWeight="700">
-                <ReactMarkdownOrHtml
-                  source={props.ratingQuestion}
-                  id={"RATING_QUESTION"}
-                  openLinksOnNewTab
-                />
-              </Typography>
+              <ReactMarkdownOrHtml
+                source={props.ratingQuestion}
+                id={"RATING_QUESTION"}
+                openLinksOnNewTab
+              />
             }
           />
         )}
@@ -105,10 +103,10 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
           onChange={handleFeedbackChange}
           aria-label="feedback score"
         >
-          <Grid 
-            container 
-            columnSpacing={2} 
-            component="fieldset" 
+          <Grid
+            container
+            columnSpacing={2}
+            component="fieldset"
             direction={{ xs: "column", formWrap: "row" }}
           >
             <FaceBox
@@ -147,13 +145,11 @@ const FeedbackComponent = (props: PublicProps<Feedback>): FCReturn => {
         {props.freeformQuestion && (
           <InputLabel
             label={
-              <Typography component="span" fontWeight="700">
-                <ReactMarkdownOrHtml
-                  source={props.freeformQuestion}
-                  id={"RATING_QUESTION"}
-                  openLinksOnNewTab
-                />
-              </Typography>
+              <ReactMarkdownOrHtml
+                source={props.freeformQuestion}
+                id={"RATING_QUESTION"}
+                openLinksOnNewTab
+              />
             }
           />
         )}
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 18b72fe2aa..5369b529c6 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx
+++ b/editor.planx.uk/src/@planx/components/Feedback/components/FaceBox.tsx
@@ -1,6 +1,6 @@
 import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
-import ToggleButton from "@mui/material/ToggleButton";
+import ToggleButton, { toggleButtonClasses } from "@mui/material/ToggleButton";
 import Typography from "@mui/material/Typography";
 import React, { ReactElement } from "react";
 
@@ -28,7 +28,7 @@ export const FaceBox = ({
           px: 0,
           width: "100%",
           textTransform: "none",
-          "&[aria-pressed='true'] > div": {
+          [`&.${toggleButtonClasses.selected}`]: {
             borderColor: (theme) => theme.palette.primary.dark,
             background: (theme) => theme.palette.background.paper,
           },
diff --git a/editor.planx.uk/src/@planx/components/Feedback/components/defaultContent.tsx b/editor.planx.uk/src/@planx/components/Feedback/components/defaultContent.tsx
index ef13444943..715d48c254 100644
--- a/editor.planx.uk/src/@planx/components/Feedback/components/defaultContent.tsx
+++ b/editor.planx.uk/src/@planx/components/Feedback/components/defaultContent.tsx
@@ -2,9 +2,11 @@ import { Feedback } from "../model";
 
 export const defaultContent: Feedback = {
   title: "Tell us what you think",
-  freeformQuestion: "Please tell us more about your experience.",
+  freeformQuestion:
+    "<strong>Please tell us more about your experience.</strong>",
 
-  ratingQuestion: "How would you rate your experience with this service?",
+  ratingQuestion:
+    "<strong>How would you rate your experience with this service?</strong>",
 
   description: `This service is a work in progress, any feedback you share about your experience will help us to improve it.
 <br>