Merge branch 'main' into chore/refactor-model-page-styles-and-microcopy

equinor · Sep 19, 2024 · c4e1d79 · c4e1d79
2 parents 579b039 + 0d4daf0
commit c4e1d79
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 11 deletions.
diff --git 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;
+    column-gap: ${spacings.SMALL};
   }
 `;
diff --git 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>
   );
 };