Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

FixedDialog component styles #119

Merged
merged 5 commits into from
Apr 27, 2021
Merged

FixedDialog component styles #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d7310f5
FixedDialog styles
alongoni Apr 22, 2021
25ff8d0
footer confrimation styles
alongoni Apr 22, 2021
8c7bb9e
Update test snapshot
Apr 23, 2021
0343c30
Merge branch 'development' into issue#118/FixedDialog
Apr 23, 2021
b5eaae6
Merge branch 'development' into issue#118/FixedDialog
Apr 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/dataDisplay/FixedDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = {
Expand Down
14 changes: 12 additions & 2 deletions src/utils/modals/utils.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -25,7 +31,11 @@ export const ModalFooterConfirmation = ({
}: Props): React.ReactElement => {
return (
<FooterWrapper>
<Button size="md" color="secondary" onClick={handleCancel}>
<Button
size="md"
color="primary"
variant="outlined"
onClick={handleCancel}>
{cancelText}
</Button>
<Button
Expand Down
117 changes: 79 additions & 38 deletions tests/__snapshots__/storybook.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1573,13 +1573,13 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
background-color: rgba(232,231,230,0.8);
}

.c1 {
width: 400px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 1px 2px 10px 0 rgba(40,54,61,0.18);
}

.c1 '&:focus': {
Expand All @@ -1591,26 +1591,28 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
background-color: #ffffff;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 16px 24px;
border-bottom: 2px solid #E8E7E6;
height: 74px;
box-sizing: border-box;
}

.c4 {
max-height: 460px;
background-color: #ffffff;
overflow-y: auto;
padding: 16px 24px;
}

.c5 {
background-color: #ffffff;
border-top: 2px solid #E8E7E6;
padding: 16px 24px;
}

.c3 {
Expand All @@ -1623,9 +1625,8 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `

.c7.c7 {
height: 36px;
color: #ffffff;
background-color: #001428;
box-shadow: 1px 2px 10px rgba(40,54,61,0.18);
color: #008C73;
background-color: transparent;
}

.c7.c7.MuiButton-root {
Expand Down Expand Up @@ -1655,15 +1656,20 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `
}

.c7.c7 path.icon-color {
color: #ffffff;
fill: #008C73;
}

.c7.c7.Mui-disabled {
color: #008C73;
}

.c7.c7:hover {
background-color: #5D6D74;
color: #005546;
background-color: #F7F5F5;
}

.c7.c7:hover path.icon-color {
color: #ffffff;
fill: #005546;
}

.c8.c8 {
Expand Down Expand Up @@ -1708,10 +1714,19 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-around;
-webkit-justify-content: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 84px;
}

.c6 button:first-child {
margin-right: 16px;
}

<div
Expand Down Expand Up @@ -1743,7 +1758,7 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `
className="c6"
>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-text c7 secondary contained"
className="MuiButtonBase-root MuiButton-root MuiButton-text c7 primary outlined"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -15139,9 +15154,8 @@ exports[`Storyshots Utils/Modals/ManageList Simple Modal 1`] = `
exports[`Storyshots Utils/Modals/utils/FooterConfirmation Modal Footer 1`] = `
.c1.c1 {
height: 36px;
color: #ffffff;
background-color: #001428;
box-shadow: 1px 2px 10px rgba(40,54,61,0.18);
color: #008C73;
background-color: transparent;
}

.c1.c1.MuiButton-root {
Expand Down Expand Up @@ -15171,15 +15185,20 @@ exports[`Storyshots Utils/Modals/utils/FooterConfirmation Modal Footer 1`] = `
}

.c1.c1 path.icon-color {
color: #ffffff;
fill: #008C73;
}

.c1.c1.Mui-disabled {
color: #008C73;
}

.c1.c1:hover {
background-color: #5D6D74;
color: #005546;
background-color: #F7F5F5;
}

.c1.c1:hover path.icon-color {
color: #ffffff;
fill: #005546;
}

.c2.c2 {
Expand Down Expand Up @@ -15224,17 +15243,26 @@ exports[`Storyshots Utils/Modals/utils/FooterConfirmation Modal Footer 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-around;
-webkit-justify-content: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 84px;
}

.c0 button:first-child {
margin-right: 16px;
}

<div
className="c0"
>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-text c1 secondary contained"
className="MuiButtonBase-root MuiButton-root MuiButton-text c1 primary outlined"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down Expand Up @@ -15287,9 +15315,8 @@ exports[`Storyshots Utils/Modals/utils/FooterConfirmation Modal Footer 1`] = `
exports[`Storyshots Utils/Modals/utils/FooterConfirmation Ok Disabled 1`] = `
.c1.c1 {
height: 36px;
color: #ffffff;
background-color: #001428;
box-shadow: 1px 2px 10px rgba(40,54,61,0.18);
color: #008C73;
background-color: transparent;
}

.c1.c1.MuiButton-root {
Expand Down Expand Up @@ -15319,15 +15346,20 @@ exports[`Storyshots Utils/Modals/utils/FooterConfirmation Ok Disabled 1`] = `
}

.c1.c1 path.icon-color {
color: #ffffff;
fill: #008C73;
}

.c1.c1.Mui-disabled {
color: #008C73;
}

.c1.c1:hover {
background-color: #5D6D74;
color: #005546;
background-color: #F7F5F5;
}

.c1.c1:hover path.icon-color {
color: #ffffff;
fill: #005546;
}

.c2.c2 {
Expand Down Expand Up @@ -15372,17 +15404,26 @@ exports[`Storyshots Utils/Modals/utils/FooterConfirmation Ok Disabled 1`] = `
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: space-around;
-webkit-justify-content: space-around;
-ms-flex-pack: space-around;
justify-content: space-around;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 84px;
}

.c0 button:first-child {
margin-right: 16px;
}

<div
className="c0"
>
<button
className="MuiButtonBase-root MuiButton-root MuiButton-text c1 secondary contained"
className="MuiButtonBase-root MuiButton-root MuiButton-text c1 primary outlined"
disabled={false}
onBlur={[Function]}
onClick={[Function]}
Expand Down