From 112e3e32e342c8f0b14eb22804de746564ea3758 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Wed, 18 Sep 2024 13:54:47 +0200
Subject: [PATCH 1/2] chore: tune delete button and dialog

---
 .../DeleteButton/DeleteModel.styled.ts        | 12 +++++++--
 .../ModelView/DeleteButton/DeleteModel.tsx    | 25 ++++++++++++-------
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/features/ModelView/DeleteButton/DeleteModel.styled.ts b/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
index b6c06092..14c9e488 100644
--- a/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
+++ b/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
@@ -1,12 +1,20 @@
 import styled from 'styled-components';
 import { spacings } from '../../../tokens/spacings';
+import { Dialog } from '@equinor/eds-core-react';
 
 export const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: ${spacings.MEDIUM};
+  align-items: flex-start;
+`;
+
+export const DeleteDialog = styled(Dialog)`
+  min-width: 336px;
 
-  > button {
-    width: fit-content;
+  .actions {
+    display: flex;
+    flex-flow: row nowrap;
+    gap: ${spacings.SMALL};
   }
 `;
diff --git a/src/features/ModelView/DeleteButton/DeleteModel.tsx b/src/features/ModelView/DeleteButton/DeleteModel.tsx
index 9332799e..cf04141c 100644
--- a/src/features/ModelView/DeleteButton/DeleteModel.tsx
+++ b/src/features/ModelView/DeleteButton/DeleteModel.tsx
@@ -36,24 +36,31 @@ export const DeleteModel = () => {
       <Typography variant="body_long">
         This will delete the model along with all related cases and results.
       </Typography>
-      <Button onClick={() => setOpen(!open)} color="danger">
-        Delete
+      <Button variant="outlined" onClick={() => setOpen(!open)} color="danger">
+        Delete…
       </Button>
 
-      <Dialog open={open}>
-        <Dialog.Header>DELETE</Dialog.Header>
+      <Styled.DeleteDialog open={open}>
+        <Dialog.Header>Delete model</Dialog.Header>
         <Dialog.Content>
-          <Typography>Are you sure you want to delete the model?</Typography>
+          <Typography>
+            Are you sure you want to delete this model? This action cannot be
+            undone.
+          </Typography>
         </Dialog.Content>
-        <Dialog.Actions>
-          <Button variant="outlined" onClick={() => setOpen(!open)}>
+        <Dialog.Actions className="actions">
+          <Button
+            variant="outlined"
+            color="danger"
+            onClick={() => setOpen(!open)}
+          >
             Cancel
           </Button>
           <Button color="danger" onClick={HandleModelDelete}>
-            Delete
+            Delete forever
           </Button>
         </Dialog.Actions>
-      </Dialog>
+      </Styled.DeleteDialog>
     </Styled.Wrapper>
   );
 };

From 4132867a8c397a67f74cf4542f3bde842d81cc20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=98rjan=20Aare=20J=C3=B8rgensen?= <oajo@equinor.com>
Date: Wed, 18 Sep 2024 13:54:47 +0200
Subject: [PATCH 2/2] chore: tune delete button and dialog

---
 src/features/ModelView/DeleteButton/DeleteModel.styled.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/ModelView/DeleteButton/DeleteModel.styled.ts b/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
index 14c9e488..7b125661 100644
--- a/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
+++ b/src/features/ModelView/DeleteButton/DeleteModel.styled.ts
@@ -15,6 +15,6 @@ export const DeleteDialog = styled(Dialog)`
   .actions {
     display: flex;
     flex-flow: row nowrap;
-    gap: ${spacings.SMALL};
+    column-gap: ${spacings.SMALL};
   }
 `;