From 2b361779fc4927174192ed242e2d565019d68943 Mon Sep 17 00:00:00 2001
From: Ian Jones <hello@ianjo.uk>
Date: Fri, 15 Mar 2024 16:59:13 +0000
Subject: [PATCH] refactor: Update confirmation dialog text and styling

---
 .../components/shared/Preview/SummaryList.tsx | 19 ++++++++++++-------
 .../src/components/ConfirmationDialog.tsx     | 10 +++++++---
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
index 2f5338895f..630192dad7 100644
--- a/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
+++ b/editor.planx.uk/src/@planx/components/shared/Preview/SummaryList.tsx
@@ -272,17 +272,22 @@ function SummaryList(props: SummaryListProps) {
       <ConfirmationDialog
         open={isDialogOpen}
         onClose={handleCloseDialog}
-        title="Confirm"
+        title="Do you want to continue?"
         confirmText="Yes"
         cancelText="No"
       >
         <Typography>
-          If you change this answer, you’ll need to confirm all the other
-          answers after it. This is because a changed answer might mean we have
-          new or different questions to ask.
-          <br />
-          <br />
-          Are you sure you want to change your answer?
+          Changing this answer means you will need to confirm any other answers
+          after it. This is because:
+          <ul>
+            <li>
+              a different answer might mean the service asks new questions
+            </li>
+            <li>
+              your planning officer needs the right information to assess your
+              application
+            </li>
+          </ul>
         </Typography>
       </ConfirmationDialog>
     </>
diff --git a/editor.planx.uk/src/components/ConfirmationDialog.tsx b/editor.planx.uk/src/components/ConfirmationDialog.tsx
index 9cc0daa9d1..955baf2c07 100644
--- a/editor.planx.uk/src/components/ConfirmationDialog.tsx
+++ b/editor.planx.uk/src/components/ConfirmationDialog.tsx
@@ -43,11 +43,15 @@ export const ConfirmationDialog: React.FC<
       maxWidth="xl"
       open={open}
     >
-      <DialogTitle>{title}</DialogTitle>
+      <DialogTitle variant="h4">{title}</DialogTitle>
       <DialogContent dividers>{children}</DialogContent>
       <DialogActions>
-        <Button onClick={onCancel}>{cancelText}</Button>
-        <Button onClick={onConfirm}>{confirmText}</Button>
+        <Button onClick={onCancel} variant="contained" color="secondary">
+          {cancelText}
+        </Button>
+        <Button onClick={onConfirm} variant="contained" color="prompt">
+          {confirmText}
+        </Button>
       </DialogActions>
     </Dialog>
   );