feat: new style for back dialog

City-of-Helsinki · Oct 11, 2023 · c054187 · c054187
1 parent 196af97
commit c054187
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 13 deletions.
diff --git a/frontend/benefit/handler/public/locales/en/common.json b/frontend/benefit/handler/public/locales/en/common.json
@@ -240,9 +240,10 @@
       "continueToService": "Jatka palveluun",
       "pauseAndExit": "Keskeytä ja poistu",
       "addNote": "Lisää muistiinpano",
-      "backWithoutSaving": "Palaa takaisin tallentamatta",
-      "backWithoutSavingConfirm": "Haluatko varmasti palata takaisin tallentamatta?",
-      "backWithoutSavingDescription": "Tehdyt muutokset eivät tallennu.",
+      "backWithoutSaving": "Poistu tallentamatta",
+      "backWithoutBack": "Peruuta",
+      "backWithoutSavingConfirm": "Tallentamattomia muutoksia",
+      "backWithoutSavingDescription": "Olet muokannut sivua. Jos poistut sivulta, menetät tehdyt muutokset. Oletko varma, että haluat poistua tallentamatta?",
       "handleAsRejected": "Käsittele kielteisenä"
     },
     "sections": {

diff --git a/frontend/benefit/handler/public/locales/fi/common.json b/frontend/benefit/handler/public/locales/fi/common.json
@@ -240,9 +240,10 @@
       "continueToService": "Jatka palveluun",
       "pauseAndExit": "Keskeytä ja poistu",
       "addNote": "Lisää muistiinpano",
-      "backWithoutSaving": "Palaa takaisin tallentamatta",
-      "backWithoutSavingConfirm": "Haluatko varmasti palata takaisin tallentamatta?",
-      "backWithoutSavingDescription": "Tehdyt muutokset eivät tallennu.",
+      "backWithoutSaving": "Poistu tallentamatta",
+      "backWithoutBack": "Peruuta",
+      "backWithoutSavingConfirm": "Tallentamattomia muutoksia",
+      "backWithoutSavingDescription": "Olet muokannut sivua. Jos poistut sivulta, menetät tehdyt muutokset. Oletko varma, että haluat poistua tallentamatta?",
       "handleAsRejected": "Käsittele kielteisenä"
     },
     "sections": {

diff --git a/frontend/benefit/handler/public/locales/sv/common.json b/frontend/benefit/handler/public/locales/sv/common.json
@@ -240,9 +240,10 @@
       "continueToService": "Jatka palveluun",
       "pauseAndExit": "Keskeytä ja poistu",
       "addNote": "Lisää muistiinpano",
-      "backWithoutSaving": "Palaa takaisin tallentamatta",
-      "backWithoutSavingConfirm": "Haluatko varmasti palata takaisin tallentamatta?",
-      "backWithoutSavingDescription": "Tehdyt muutokset eivät tallennu.",
+      "backWithoutSaving": "Poistu tallentamatta",
+      "backWithoutBack": "Peruuta",
+      "backWithoutSavingConfirm": "Tallentamattomia muutoksia",
+      "backWithoutSavingDescription": "Olet muokannut sivua. Jos poistut sivulta, menetät tehdyt muutokset. Oletko varma, että haluat poistua tallentamatta?",
       "handleAsRejected": "Käsittele kielteisenä"
     },
     "sections": {

diff --git a/frontend/benefit/handler/src/components/newApplication/ApplicationForm.tsx b/frontend/benefit/handler/src/components/newApplication/ApplicationForm.tsx
@@ -1,6 +1,7 @@
 import {
   Button,
   Dialog,
+  IconAlertCircle,
   IconAngleLeft,
   LoadingSpinner,
   Stepper,
@@ -149,27 +150,29 @@ const ApplicationForm: React.FC = () => {
           isOpen={isConfirmationModalOpen}
           close={() => setIsConfirmationModalOpen(false)}
           closeButtonLabelText={t(`${translationsBase}.close`)}
-          variant="danger"
+          variant="primary"
+          theme={{ '--accent-line-color': 'var(--color-coat-of-arms)' }}
         >
           <Dialog.Header
             title={t(`${translationsBase}.backWithoutSavingConfirm`)}
             id="back-dialog-header"
+            iconLeft={<IconAlertCircle aria-hidden="true" />}
           />
           <Dialog.Content>
             {t(`${translationsBase}.backWithoutSavingDescription`)}
           </Dialog.Content>
           <Dialog.ActionButtons>
             <Button
-              theme="black"
+              theme="coat"
               variant="secondary"
               onClick={() => setIsConfirmationModalOpen(false)}
               data-testid="modalCancel"
             >
-              {t(`${translationsBase}.close`)}
+              {t(`${translationsBase}.backWithoutBack`)}
             </Button>
             <Button
               theme="coat"
-              variant="danger"
+              variant="primary"
               onClick={() => router.push('/')}
               data-testid="modalBack"
             >