tabshift/payloadcms
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix(ui): bulk upload DiscardWithoutSaving modal styles (#11381)

Browse Source 
This PR fixes an issue where the `DiscardWithoutSaving` modal in the
bulk upload process was missing its styles.

The modal now displays correctly with the intended styling.

### Before:
![Screenshot 2025-02-24 at 8 20
52 PM](https://github.com/user-attachments/assets/c83a3119-28ce-4701-bc64-1219adeb2505)

### After:
![Screenshot 2025-02-24 at 8 20
07 PM](https://github.com/user-attachments/assets/62d364c2-b64c-4bd9-bf05-7481d609c6e4)

Fixes #11380
This commit is contained in:
Patrik
2025-02-25 08:56:42 -05:00
committed by GitHub
parent 4410a49132
commit 7bb1c9d3c6
1 changed files with 10 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/ui/src/elements/BulkUpload/DiscardWithoutSaving/index.tsx
View File

@@ -4,12 +4,9 @@ import { useModal } from '@faceless-ui/modal'
import React from 'react' import React from 'react'
import { useTranslation } from '../../../providers/Translation/index.js' import { useTranslation } from '../../../providers/Translation/index.js'
import { Button } from '../../Button/index.js' import { ConfirmationModal } from '../../ConfirmationModal/index.js'
import { FullscreenModal } from '../../FullscreenModal/index.js'
import { useBulkUpload } from '../index.js' import { useBulkUpload } from '../index.js'
export const discardBulkUploadModalSlug = 'bulk-upload--discard-without-saving' export const discardBulkUploadModalSlug = 'bulk-upload--discard-without-saving'
const baseClass = 'leave-without-saving'
export function DiscardWithoutSaving() { export function DiscardWithoutSaving() {
const { t } = useTranslation() const { t } = useTranslation()
@@ -26,21 +23,14 @@ export function DiscardWithoutSaving() {
}, [closeModal, drawerSlug]) }, [closeModal, drawerSlug])
return ( return (
<FullscreenModal className={baseClass} slug={discardBulkUploadModalSlug}> <ConfirmationModal
<div className={`${baseClass}__wrapper`}> body={t('general:changesNotSaved')}
<div className={`${baseClass}__content`}> cancelLabel={t('general:stayOnThisPage')}
<h1>{t('general:leaveWithoutSaving')}</h1> confirmLabel={t('general:leaveAnyway')}
<p>{t('general:changesNotSaved')}</p> heading={t('general:leaveWithoutSaving')}
</div> modalSlug={discardBulkUploadModalSlug}
<div className={`${baseClass}__controls`}> onCancel={onCancel}
<Button buttonStyle="secondary" onClick={onCancel} size="large"> onConfirm={onConfirm}
{t('general:stayOnThisPage')} />
</Button>
<Button onClick={onConfirm} size="large">
{t('general:leaveAnyway')}
</Button>
</div>
</div>
</FullscreenModal>
) )
} }