admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Add confirmation modal when deleting/ regenerating api keys, deleting webhook (#4035)

Browse Source 
* fix: confirmation modal style

* add confirmation modal when delete/ regenerating an api key

* add confirmation modal when deleting webhook

* fix: remove line break

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/webhooks/SettingsDevelopersWebhookDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

* Update packages/twenty-front/src/pages/settings/developers/api-keys/SettingsDevelopersApiKeyDetail.tsx

---------

Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com>
This commit is contained in:
Anoop P
2024-02-21 23:09:37 +05:30
committed by GitHub
parent d4fac2ea70
commit 02e9846282
3 changed files with 71 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/ui/layout/modal/components/ConfirmationModal.tsx
View File

@ -42,6 +42,10 @@ const StyledCenteredTitle = styled.div`
text-align: center;
`;
const StyledSection = styled(Section)`
margin-bottom: ${({ theme }) => theme.spacing(6)};
`;
export const StyledConfirmationButton = styled(StyledCenteredButton)`
border-color: ${({ theme }) => theme.border.color.danger};
box-shadow: none;
@ -94,12 +98,12 @@ export const ConfirmationModal = ({
<StyledCenteredTitle>
<H1Title title={title} fontColor={H1TitleFontColor.Primary} />
</StyledCenteredTitle>
<Section
<StyledSection
alignment={SectionAlignment.Center}
fontColor={SectionFontColor.Primary}
>
{subtitle}
</Section>
</StyledSection>
{confirmationValue && (
<Section>
<TextInput
@ -111,6 +115,12 @@ export const ConfirmationModal = ({
/>
</Section>
)}
<StyledCenteredButton
onClick={() => setIsOpen(false)}
variant="secondary"
title="Cancel"
fullWidth
/>
<StyledCenteredButton
onClick={onConfirmClick}
variant="secondary"
@ -119,12 +129,6 @@ export const ConfirmationModal = ({
disabled={!isValidValue}
fullWidth
/>
<StyledCenteredButton
onClick={() => setIsOpen(false)}
variant="secondary"
title="Cancel"
fullWidth
/>
</StyledConfirmationModal>
</LayoutGroup>
</AnimatePresence>