feat: Small styling refinements for feedback (#2809)

theopensystemslab · Feb 22, 2024 · 2ceaa56 · 2ceaa56
1 parent 4484938
commit 2ceaa56
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx b/editor.planx.uk/src/components/Feedback/FeedbackForm.tsx
@@ -65,7 +65,12 @@ const FeedbackForm: React.FC<FormProps> = ({ inputs, handleSubmit }) => {
       <StyledForm>
         <FormInputs inputs={inputs} />
         <FeedbackDisclaimer />
-        <Button type="submit" variant="contained" sx={{ marginTop: 2.5 }}>
+        <Button
+          type="submit"
+          variant="contained"
+          color="prompt"
+          sx={{ marginTop: 2.5 }}
+        >
           Send feedback
         </Button>
       </StyledForm>

diff --git a/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx b/editor.planx.uk/src/components/Feedback/MoreInfoFeedback.tsx
@@ -4,7 +4,6 @@ import Box from "@mui/material/Box";
 import Container from "@mui/material/Container";
 import { styled } from "@mui/material/styles";
 import Typography from "@mui/material/Typography";
-import { contentFlowSpacing } from "@planx/components/shared/Preview/Card";
 import {
   getInternalFeedbackMetadata,
   insertFeedbackMutation,
@@ -23,11 +22,6 @@ const MoreInfoFeedback = styled(Box)(({ theme }) => ({
   },
 }));
 
-const FeedbackBody = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(1, 0),
-  "& form > * + *": contentFlowSpacing(theme),
-}));
-
 const MoreInfoFeedbackComponent: React.FC = () => {
   type View = "yes/no" | "input" | "thanks";
 
@@ -77,7 +71,7 @@ const MoreInfoFeedbackComponent: React.FC = () => {
           <Typography variant="h4" component="h3" gutterBottom>
             Did this help to answer your question?
           </Typography>
-          <FeedbackBody>
+          <Box>
             <FeedbackOption
               onClick={() => handleFeedbackOptionClick("helpful")}
               Icon={CheckCircleIcon}
@@ -90,7 +84,7 @@ const MoreInfoFeedbackComponent: React.FC = () => {
               label="No"
               format="negative"
             />
-          </FeedbackBody>
+          </Box>
         </Container>
       </MoreInfoFeedback>
     );
@@ -110,12 +104,10 @@ const MoreInfoFeedbackComponent: React.FC = () => {
           <Typography variant="h4" component="h3" gutterBottom>
             Please help us to improve this service by sharing feedback
           </Typography>
-          <FeedbackBody>
-            <FeedbackForm
-              inputs={commentFormInputs}
-              handleSubmit={handleFeedbackFormSubmit}
-            />
-          </FeedbackBody>
+          <FeedbackForm
+            inputs={commentFormInputs}
+            handleSubmit={handleFeedbackFormSubmit}
+          />
         </Container>
       </MoreInfoFeedback>
     );
@@ -128,12 +120,10 @@ const MoreInfoFeedbackComponent: React.FC = () => {
           <Typography variant="h4" component="h3" gutterBottom>
             Thank you for your feedback.
           </Typography>
-          <FeedbackBody>
-            <Typography variant="body2">
-              We value the time you’ve taken to share. We’ll use your insights
-              to improve our services.
-            </Typography>
-          </FeedbackBody>
+          <Typography variant="body2" pt={1}>
+            We value the time you’ve taken to share. We’ll use your insights to
+            improve our services.
+          </Typography>
         </Container>
       </MoreInfoFeedback>
     );

diff --git a/editor.planx.uk/src/ui/public/FeedbackOption.tsx b/editor.planx.uk/src/ui/public/FeedbackOption.tsx
@@ -53,8 +53,8 @@ const ArrowButton = styled("span")(({ theme }) => ({
   display: "flex",
   justifyContent: "center",
   alignItems: "center",
-  backgroundColor: theme.palette.primary.main,
-  color: theme.palette.common.white,
+  backgroundColor: theme.palette.prompt.main,
+  color: theme.palette.prompt.contrastText,
   width: "36px",
   height: "36px",
   flexShrink: "0",