fix(components): update Dialog padding

MTES-MCT · Mar 18, 2024 · 2cacb4e · 2cacb4e
1 parent decfdf1
commit 2cacb4e
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 18 deletions.
diff --git a/src/components/Dialog/Action.tsx b/src/components/Dialog/Action.tsx
@@ -7,23 +7,11 @@ export const Action = styled.div`
   display: flex;
   flex-direction: column-reverse;
   padding: 8px 8px 8px 8px;
+  gap: 8px;
   @media (min-width: 740px) {
     align-items: center;
     flex-direction: row;
     justify-content: center;
-    padding: 32px 8px 32px 8px;
-  }
-
-  > button {
-    margin-bottom: 2px;
-  }
-  @media (min-width: 740px) {
-    > button {
-      margin-bottom: 0;
-
-      &:first-child {
-        margin-right: 8px;
-      }
-    }
+    padding: 32px 48px 48px 48px;
   }
 `
diff --git a/src/components/Dialog/Body.tsx b/src/components/Dialog/Body.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components'
 
-export const Body = styled.div`
+export const Body = styled.div<{ $color?: string }>`
   background-color: ${p => p.theme.color.white};
   border-top-left-radius: 2px;
   border-top-right-radius: 2px;
@@ -9,12 +9,12 @@ export const Body = styled.div`
   padding: 8px 8px 8px 8px;
   text-align: center;
   @media (min-width: 740px) {
-    padding: 48px 8px 8px 8px;
+    padding: 48px 48px 0px 48px;
     text-align: center;
   }
 
   > p {
-    color: ${p => p.theme.color.slateGray};
+    color: ${p => (p.$color ? p.$color : p.theme.color.slateGray)};
     padding-top: 2px;
   }
 `
diff --git a/stories/components/Dialog.stories.tsx b/stories/components/Dialog.stories.tsx
@@ -37,7 +37,7 @@ export function _Dialog(props: DialogProps) {
       </Dialog.Body>
 
       <Dialog.Action>
-        <Button accent={Accent.TERTIARY} onClick={noop}>
+        <Button accent={Accent.SECONDARY} onClick={noop}>
           Cancel
         </Button>
         <Button accent={Accent.PRIMARY} onClick={noop}>