refactor: Update confirmation dialog text and styling

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>
     </>

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>
   );