Merge pull request #3100 from ONSdigital/EAR-2244-Adjust-the-submissi…

…on-page EAR 2244 adjust the submission page
ONSdigital · Sep 26, 2024 · 46a0ad5 · 46a0ad5
2 parents 086f70d + 31c48a4
commit 46a0ad5
Showing 1 changed file with 12 additions and 18 deletions.
diff --git a/eq-author/src/App/Submission/Preview/SubmissionPreview/index.js b/eq-author/src/App/Submission/Preview/SubmissionPreview/index.js
@@ -3,23 +3,21 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 import { colors } from "constants/theme.js";
 
-import IconText from "components/IconText";
 import PageTitle from "components/preview/elements/PageTitle";
 import { Field, Label } from "components/Forms";
 import Panel from "components-themed/panels";
 import Feedback from "components-themed/Feedback";
 import Error from "components/preview/Error";
 
-import { ReactComponent as WarningIcon } from "assets/icon-warning-round.svg";
-
 const Wrapper = styled.div`
   padding: 2em;
   font-size: 18px;
 `;
 
 const Section = styled.div`
   &:not(:first-child) {
-    margin-top: 1em;
+    margin-top: ${(props) =>
+      props.marginTop ? `${props.marginTop}em` : `0.5em`};
   }
 `;
 
@@ -33,16 +31,8 @@ const TitleWrapper = styled.div`
   margin-top: -0.35em;
 `;
 
-const WarningPanel = styled(IconText)`
-  svg {
-    height: 2em;
-    width: 2em;
-  }
-`;
-
 const WarningPanelText = styled.div`
   font-weight: bold;
-  margin-left: 0.5em;
 `;
 
 const PanelSection = styled.div`
@@ -89,6 +79,8 @@ const BlueUnderlined = styled.span`
   font-weight: ${(props) => props.bold && `bold`};
 `;
 
+const Text = styled.p``;
+
 const SubmissionEditor = ({ submission, questionnaireTitle }) => {
   const { furtherContent, viewPrintAnswers, feedback } = submission;
 
@@ -144,22 +136,24 @@ const SubmissionEditor = ({ submission, questionnaireTitle }) => {
               title={getCopyOfAnswers}
               missingText={missingTitleText}
             />
-            You can&nbsp;
-            <BlueUnderlined>save or print your answers</BlueUnderlined>
-            &nbsp;for your records.
+            <Text>We may contact you to query your answers.</Text>
+            <Text>
+              If you need a copy for your records,&nbsp;
+              <BlueUnderlined>save or print your answers</BlueUnderlined>.
+            </Text>
           </Section>
           <Section>
             <InlineField>
-              <WarningPanel icon={WarningIcon} left bold withMargin>
+              <Panel variant="warning">
                 <WarningPanelText>{answersAvailableToView}</WarningPanelText>
-              </WarningPanel>
+              </Panel>
             </InlineField>
             {feedback && <SectionSeparator />}
           </Section>
         </>
       )}
       {feedback && (
-        <Section>
+        <Section marginTop="1.3">
           <Feedback>
             <PageTitle title={feedbackTitle} missingText={missingTitleText} />
             <FeedbackLabel bold={false}>{commentsImprovements}</FeedbackLabel>