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