From d7310f5c1e6c460a31e731d5b254caf0ab77ea33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Thu, 22 Apr 2021 16:21:55 -0300 Subject: [PATCH 1/3] FixedDialog styles --- src/dataDisplay/FixedDialog/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/dataDisplay/FixedDialog/index.tsx b/src/dataDisplay/FixedDialog/index.tsx index e341b8f6..e5a7ab53 100644 --- a/src/dataDisplay/FixedDialog/index.tsx +++ b/src/dataDisplay/FixedDialog/index.tsx @@ -9,13 +9,14 @@ const Container = styled.div` display: flex; align-items: center; justify-content: center; - background-color: ${({ theme }) => fade(theme.colors.overlay.color, 0.8)}; `; const Wrapper = styled.div` width: 400px; background-color: ${({ theme }) => theme.colors.white}; border-radius: 8px; + box-shadow: 1px 2px 10px 0 + ${({ theme }) => fade(theme.colors.shadow.color, 0.18)}; '&:focus': { outline: 'none'; @@ -24,24 +25,23 @@ const Wrapper = styled.div` const TitleSection = styled.div` display: flex; - background-color: ${({ theme }) => theme.colors.white}; justify-content: space-between; + align-items: center; padding: 16px 24px; border-bottom: 2px solid ${({ theme }) => theme.colors.separator}; + height: 74px; + box-sizing: border-box; `; const BodySection = styled.div<{ withoutBodyPadding?: boolean }>` max-height: 460px; - background-color: ${({ theme }) => theme.colors.white}; overflow-y: auto; padding: ${({ withoutBodyPadding }) => withoutBodyPadding ? '0' : '16px 24px'}; `; const FooterSection = styled.div` - background-color: ${({ theme }) => theme.colors.white}; border-top: 2px solid ${({ theme }) => theme.colors.separator}; - padding: 16px 24px; `; type Props = { From 25ff8d0450de0c6ba30990751f80cfc3220bd209 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= Date: Thu, 22 Apr 2021 16:22:24 -0300 Subject: [PATCH 2/3] footer confrimation styles --- src/utils/modals/utils.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/utils/modals/utils.tsx b/src/utils/modals/utils.tsx index 70a8c3ed..2b72bc60 100644 --- a/src/utils/modals/utils.tsx +++ b/src/utils/modals/utils.tsx @@ -5,7 +5,13 @@ import { Button } from '../../index'; const FooterWrapper = styled.div` display: flex; - justify-content: space-around; + justify-content: center; + align-items: center; + height: 84px; + + button:first-child { + margin-right: 16px; + } `; type Props = { @@ -25,7 +31,11 @@ export const ModalFooterConfirmation = ({ }: Props): React.ReactElement => { return ( -
  • ,
    ,
    ,
    ,
    ,
    , @@ -6242,10 +6480,10 @@ Array [ exports[`Storyshots Inputs/Button Disabled Button 1`] = `
    ,