diff --git a/src/features/ModelView/DeleteButton/DeleteModel.styled.ts b/src/features/ModelView/DeleteButton/DeleteModel.styled.ts index b6c0609..7b12566 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; + column-gap: ${spacings.SMALL}; } `; diff --git a/src/features/ModelView/DeleteButton/DeleteModel.tsx b/src/features/ModelView/DeleteButton/DeleteModel.tsx index 9332799..cf04141 100644 --- a/src/features/ModelView/DeleteButton/DeleteModel.tsx +++ b/src/features/ModelView/DeleteButton/DeleteModel.tsx @@ -36,24 +36,31 @@ export const DeleteModel = () => { This will delete the model along with all related cases and results. - - - DELETE + + Delete model - Are you sure you want to delete the model? + + Are you sure you want to delete this model? This action cannot be + undone. + - - - + ); };