Fix confirmation modal style (#1310)

This commit is contained in:
Weiko
2023-08-25 21:26:27 +02:00
committed by GitHub
parent c3d4767ac4
commit 0e5dcd7037

View File

@ -25,14 +25,19 @@ export type ConfirmationModalProps = {
}; };
const StyledConfirmationModal = styled(Modal)` const StyledConfirmationModal = styled(Modal)`
padding: ${({ theme }) => theme.spacing(4)}; border-radius: ${({ theme }) => theme.spacing(1)};
width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)}); padding: ${({ theme }) => theme.spacing(6)};
width: calc(400px - ${({ theme }) => theme.spacing(32)});
`; `;
const StyledCenteredButton = styled(Button)` const StyledCenteredButton = styled(Button)`
justify-content: center; justify-content: center;
`; `;
const StyledCenteredTitle = styled.div`
text-align: center;
`;
export const StyledConfirmationButton = styled(StyledCenteredButton)` export const StyledConfirmationButton = styled(StyledCenteredButton)`
border-color: ${({ theme }) => theme.color.red20}; border-color: ${({ theme }) => theme.color.red20};
box-shadow: none; box-shadow: none;
@ -82,7 +87,9 @@ export function ConfirmationModal({
}} }}
onEnter={onConfirmClick} onEnter={onConfirmClick}
> >
<H1Title title={title} fontColor={H1TitleFontColor.Primary} /> <StyledCenteredTitle>
<H1Title title={title} fontColor={H1TitleFontColor.Primary} />
</StyledCenteredTitle>
<Section <Section
alignment={SectionAlignment.Center} alignment={SectionAlignment.Center}
fontColor={SectionFontColor.Primary} fontColor={SectionFontColor.Primary}