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

fix(ui, next): adjust modal alignment and padding (#7931)

Browse Source 
## Description

Updates styling on modals and auth forms for more consistent spacing and
alignment.

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] Existing test suite passes locally with my changes
- [ ] I have made corresponding changes to the documentation
This commit is contained in:
Tylan Davis
2024-09-06 14:54:39 -04:00
committed by GitHub
parent 6253ec5d1a
commit ead12c8a49
30 changed files with 535 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/next/src/elements/LeaveWithoutSaving/index.scss
View File

@@ -12,14 +12,14 @@
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--base); gap: base(0.8);
padding: base(2); padding: base(2);
} }
&__content { &__content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--base); gap: base(0.4);
> * { > * {
margin: 0; margin: 0;
@@ -28,7 +28,7 @@
&__controls { &__controls {
display: flex; display: flex;
gap: var(--base); gap: base(0.4);
.btn { .btn {
margin: 0; margin: 0;

4
packages/next/src/templates/Minimal/index.scss
View File

@@ -14,14 +14,14 @@
&--width-normal { &--width-normal {
.template-minimal__wrap { .template-minimal__wrap {
max-width: 500px; max-width: base(24);
width: 100%; width: 100%;
} }
} }
&--width-wide { &--width-wide {
.template-minimal__wrap { .template-minimal__wrap {
max-width: 1024px; max-width: base(48);
width: 100%; width: 100%;
} }
} }

10
packages/next/src/views/CreateFirstUser/index.scss
View File

@@ -1,6 +1,16 @@
@import '../../scss/styles.scss';
.create-first-user { .create-first-user {
display: flex;
flex-direction: column;
gap: base(0.4);
> form > .field-type { > form > .field-type {
margin-bottom: var(--base); margin-bottom: var(--base);
& .form-submit {
margin: 0;
}
} }
} }

8
packages/next/src/views/Logout/LogoutClient.tsx
View File

@@ -4,6 +4,10 @@ import { formatAdminURL } from '@payloadcms/ui/shared'
import LinkImport from 'next/link.js' import LinkImport from 'next/link.js'
import React, { Fragment, useEffect } from 'react' import React, { Fragment, useEffect } from 'react'
import './index.scss'
const baseClass = 'logout'
const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
export const LogoutClient: React.FC<{ export const LogoutClient: React.FC<{
@@ -26,7 +30,7 @@ export const LogoutClient: React.FC<{
if (isLoggingOut) { if (isLoggingOut) {
return ( return (
<Fragment> <div className={`${baseClass}__wrap`}>
{inactivity && <h2>{t('authentication:loggedOutInactivity')}</h2>} {inactivity && <h2>{t('authentication:loggedOutInactivity')}</h2>}
{!inactivity && <h2>{t('authentication:loggedOutSuccessfully')}</h2>} {!inactivity && <h2>{t('authentication:loggedOutSuccessfully')}</h2>}
<Button <Button
@@ -43,7 +47,7 @@ export const LogoutClient: React.FC<{
> >
{t('authentication:logBackIn')} {t('authentication:logBackIn')}
</Button> </Button>
</Fragment> </div>
) )
} }

21
packages/next/src/views/Logout/index.scss
View File

@@ -1,19 +1,22 @@
@import '../../scss/styles.scss';
.logout { .logout {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
min-height: 100vh;
&__wrap { &__wrap {
& > *:first-child { z-index: 1;
margin-top: 0; position: relative;
} display: flex;
flex-direction: column;
align-items: flex-start;
gap: base(0.8);
width: 100%;
max-width: base(36);
& > *:last-child { & > * {
margin-bottom: 0;
}
.btn {
margin: 0; margin: 0;
} }
} }

2
packages/next/src/views/Logout/index.tsx
View File

@@ -25,7 +25,7 @@ export const LogoutView: React.FC<
} = initPageResult } = initPageResult
return ( return (
<div className={`${baseClass}__wrap`}> <div className={`${baseClass}`}>
<LogoutClient <LogoutClient
adminRoute={adminRoute} adminRoute={adminRoute}
inactivity={inactivity} inactivity={inactivity}

6
packages/next/src/views/NotFound/index.client.tsx
View File

@@ -38,8 +38,10 @@ export const NotFoundClient: React.FC<{
.join(' ')} .join(' ')}
> >
<Gutter className={`${baseClass}__wrap`}> <Gutter className={`${baseClass}__wrap`}>
<h1>{t('general:nothingFound')}</h1> <div className={`${baseClass}__content`}>
<p>{t('general:sorryNotFound')}</p> <h1>{t('general:nothingFound')}</h1>
<p>{t('general:sorryNotFound')}</p>
</div>
<Button <Button
className={`${baseClass}__button`} className={`${baseClass}__button`}
el="link" el="link"

18
packages/next/src/views/NotFound/index.scss
View File

@@ -13,6 +13,24 @@
} }
} }
&__wrap {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: base(0.8);
max-width: base(36);
}
&__content {
display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
}
}
&__button { &__button {
margin: 0; margin: 0;
} }

32
packages/next/src/views/ResetPassword/index.client.tsx
View File

@@ -75,21 +75,23 @@ export const ResetPasswordClient: React.FC<Args> = ({ token }) => {
method="POST" method="POST"
onSuccess={onSuccess} onSuccess={onSuccess}
> >
<PasswordField <div className={'inputWrap'}>
field={{ <PasswordField
name: 'password', field={{
label: i18n.t('authentication:newPassword'), name: 'password',
required: true, label: i18n.t('authentication:newPassword'),
}} required: true,
/> }}
<ConfirmPasswordField /> />
<HiddenField <ConfirmPasswordField />
field={{ <HiddenField
name: 'token', field={{
}} name: 'token',
forceUsePathFromProps }}
value={token} forceUsePathFromProps
/> value={token}
/>
</div>
<FormSubmit size="large">{i18n.t('authentication:resetPassword')}</FormSubmit> <FormSubmit size="large">{i18n.t('authentication:resetPassword')}</FormSubmit>
</Form> </Form>
) )

30
packages/next/src/views/ResetPassword/index.scss
View File

@@ -1,5 +1,31 @@
@import '../../scss/styles.scss';
.reset-password { .reset-password {
form > .field-type { &__wrap {
margin-bottom: var(--base); z-index: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: base(0.8);
max-width: base(36);
& > form {
width: 100%;
& > .inputWrap {
display: flex;
flex-direction: column;
gap: base(0.8);
> * {
margin: 0;
}
}
}
& > .btn {
margin: 0;
}
} }
} }

66
packages/next/src/views/ResetPassword/index.tsx
View File

@@ -1,11 +1,10 @@
import type { AdminViewProps } from 'payload' import type { AdminViewProps } from 'payload'
import { Button, Translation } from '@payloadcms/ui' import { Button } from '@payloadcms/ui'
import { formatAdminURL } from '@payloadcms/ui/shared' import { formatAdminURL, Translation } from '@payloadcms/ui/shared'
import LinkImport from 'next/link.js' import LinkImport from 'next/link.js'
import React from 'react' import React from 'react'
import { MinimalTemplate } from '../../templates/Minimal/index.js'
import { ResetPasswordClient } from './index.client.js' import { ResetPasswordClient } from './index.client.js'
import './index.scss' import './index.scss'
@@ -37,42 +36,37 @@ export const ResetPassword: React.FC<AdminViewProps> = ({ initPageResult, params
if (user) { if (user) {
return ( return (
<MinimalTemplate className={resetPasswordBaseClass}> <div className={`${resetPasswordBaseClass}__wrap`}>
<div className={`${resetPasswordBaseClass}__wrap`}> <h1>{i18n.t('authentication:alreadyLoggedIn')}</h1>
<h1>{i18n.t('authentication:alreadyLoggedIn')}</h1> <p>
<p> <Translation
<Translation elements={{
elements={{ '0': ({ children }) => (
'0': ({ children }) => ( <Link
<Link href={formatAdminURL({
href={formatAdminURL({ adminRoute,
adminRoute, path: accountRoute,
path: accountRoute, })}
})} >
> {children}
{children} </Link>
</Link> ),
), }}
}} i18nKey="authentication:loggedInChangePassword"
i18nKey="authentication:loggedInChangePassword" t={i18n.t}
t={i18n.t} />
/> </p>
</p> <Button buttonStyle="secondary" el="link" Link={Link} size="large" to={adminRoute}>
<br /> {i18n.t('general:backToDashboard')}
<Button buttonStyle="secondary" el="link" Link={Link} to={adminRoute}> </Button>
{i18n.t('general:backToDashboard')} </div>
</Button>
</div>
</MinimalTemplate>
) )
} }
return ( return (
<MinimalTemplate className={resetPasswordBaseClass}> <div className={`${resetPasswordBaseClass}__wrap`}>
<div className={`${resetPasswordBaseClass}__wrap`}> <h1>{i18n.t('authentication:resetPassword')}</h1>
<h1>{i18n.t('authentication:resetPassword')}</h1> <ResetPasswordClient token={token} />
<ResetPasswordClient token={token} /> </div>
</div>
</MinimalTemplate>
) )
} }

36
packages/next/src/views/Version/Restore/index.scss
View File

@@ -38,24 +38,40 @@
@include blur-bg; @include blur-bg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
&__toggle { &__toggle {
@extend %btn-reset; @extend %btn-reset;
} }
}
.btn { &__wrapper {
[dir='ltr'] & { z-index: 1;
margin-right: var(--base); position: relative;
} display: flex;
[dir='rtl'] & { flex-direction: column;
margin-left: var(--base); gap: base(0.8);
} padding: base(2);
max-width: base(36);
}
&__content {
display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
} }
} }
&__modal-template { &__controls {
position: relative; display: flex;
z-index: 1; gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

34
packages/next/src/views/Version/Restore/index.tsx
View File

@@ -18,7 +18,6 @@ import { toast } from 'sonner'
import type { Props } from './types.js' import type { Props } from './types.js'
import { MinimalTemplate } from '../../../templates/Minimal/index.js'
import './index.scss' import './index.scss'
const baseClass = 'restore-version' const baseClass = 'restore-version'
@@ -123,20 +122,25 @@ const Restore: React.FC<Props> = ({
)} )}
</div> </div>
<Modal className={`${baseClass}__modal`} slug={modalSlug}> <Modal className={`${baseClass}__modal`} slug={modalSlug}>
<MinimalTemplate className={`${baseClass}__modal-template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('version:confirmVersionRestoration')}</h1> <div className={`${baseClass}__content`}>
<p>{restoreMessage}</p> <h1>{t('version:confirmVersionRestoration')}</h1>
<Button <p>{restoreMessage}</p>
buttonStyle="secondary" </div>
onClick={processing ? undefined : () => toggleModal(modalSlug)} <div className={`${baseClass}__controls`}>
type="button" <Button
> buttonStyle="secondary"
{t('general:cancel')} onClick={processing ? undefined : () => toggleModal(modalSlug)}
</Button> size="large"
<Button onClick={processing ? undefined : () => void handleRestore()}> type="button"
{processing ? t('version:restoring') : t('general:confirm')} >
</Button> {t('general:cancel')}
</MinimalTemplate> </Button>
<Button onClick={processing ? undefined : () => void handleRestore()}>
{processing ? t('version:restoring') : t('general:confirm')}
</Button>
</div>
</div>
</Modal> </Modal>
</Fragment> </Fragment>
) )

37
packages/ui/src/elements/DeleteDocument/index.scss
View File

@@ -4,26 +4,39 @@
@include blur-bg; @include blur-bg;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%;
justify-content: center; justify-content: center;
padding: base(2); height: 100%;
&__template {
z-index: 1;
position: relative;
}
&__toggle { &__toggle {
@extend %btn-reset; @extend %btn-reset;
} }
.btn { &__wrapper {
margin: 0; z-index: 1;
position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
max-width: base(36);
} }
&__actions { &__content {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
gap: $baseline; gap: base(0.4);
> * {
margin: 0;
}
}
&__controls {
display: flex;
gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

41
packages/ui/src/elements/DeleteDocument/index.tsx
View File

@@ -129,31 +129,38 @@ export const DeleteDocument: React.FC<Props> = (props) => {
{t('general:delete')} {t('general:delete')}
</PopupList.Button> </PopupList.Button>
<Modal className={baseClass} slug={modalSlug}> <Modal className={baseClass} slug={modalSlug}>
<div className={`${baseClass}__template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('general:confirmDeletion')}</h1> <div className={`${baseClass}__content`}>
<p> <h1>{t('general:confirmDeletion')}</h1>
<Translation <p>
elements={{ <Translation
'1': ({ children }) => <strong>{children}</strong>, elements={{
}} '1': ({ children }) => <strong>{children}</strong>,
i18nKey="general:aboutToDelete" }}
t={t} i18nKey="general:aboutToDelete"
variables={{ t={t}
label: getTranslation(singularLabel, i18n), variables={{
title: titleToRender, label: getTranslation(singularLabel, i18n),
}} title: titleToRender,
/> }}
</p> />
<div className={`${baseClass}__actions`}> </p>
</div>
<div className={`${baseClass}__controls`}>
<Button <Button
buttonStyle="secondary" buttonStyle="secondary"
id="confirm-cancel" id="confirm-cancel"
onClick={deleting ? undefined : () => toggleModal(modalSlug)} onClick={deleting ? undefined : () => toggleModal(modalSlug)}
size="large"
type="button" type="button"
> >
{t('general:cancel')} {t('general:cancel')}
</Button> </Button>
<Button id="confirm-delete" onClick={deleting ? undefined : handleDelete}> <Button
id="confirm-delete"
onClick={deleting ? undefined : handleDelete}
size="large"
>
{deleting ? t('general:deleting') : t('general:confirm')} {deleting ? t('general:deleting') : t('general:confirm')}
</Button> </Button>
</div> </div>

29
packages/ui/src/elements/DeleteMany/index.scss
View File

@@ -4,16 +4,35 @@
@include blur-bg; @include blur-bg;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%;
justify-content: center; justify-content: center;
padding: base(2); height: 100%;
&__template { &__wrapper {
z-index: 1; z-index: 1;
position: relative; position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
max-width: base(36);
} }
.btn { &__content {
margin-right: $baseline; display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
}
}
&__controls {
display: flex;
gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

33
packages/ui/src/elements/DeleteMany/index.tsx
View File

@@ -125,20 +125,25 @@ export const DeleteMany: React.FC<Props> = (props) => {
{t('general:delete')} {t('general:delete')}
</Pill> </Pill>
<Modal className={baseClass} slug={modalSlug}> <Modal className={baseClass} slug={modalSlug}>
<div className={`${baseClass}__template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('general:confirmDeletion')}</h1> <div className={`${baseClass}__content`}>
<p>{t('general:aboutToDeleteCount', { count, label: getTranslation(plural, i18n) })}</p> <h1>{t('general:confirmDeletion')}</h1>
<Button <p>{t('general:aboutToDeleteCount', { count, label: getTranslation(plural, i18n) })}</p>
buttonStyle="secondary" </div>
id="confirm-cancel" <div className={`${baseClass}__controls`}>
onClick={deleting ? undefined : () => toggleModal(modalSlug)} <Button
type="button" buttonStyle="secondary"
> id="confirm-cancel"
{t('general:cancel')} onClick={deleting ? undefined : () => toggleModal(modalSlug)}
</Button> size="large"
<Button id="confirm-delete" onClick={deleting ? undefined : handleDelete}> type="button"
{deleting ? t('general:deleting') : t('general:confirm')} >
</Button> {t('general:cancel')}
</Button>
<Button id="confirm-delete" onClick={deleting ? undefined : handleDelete} size="large">
{deleting ? t('general:deleting') : t('general:confirm')}
</Button>
</div>
</div> </div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>

32
packages/ui/src/elements/DuplicateDocument/index.scss
View File

@@ -5,16 +5,36 @@
@include blur-bg; @include blur-bg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
padding: base(2); }
.btn { &__wrapper {
margin-right: $baseline; z-index: 1;
position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
max-width: base(36);
}
&__content {
display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
} }
} }
&__modal-template { &__controls {
z-index: 1; display: flex;
position: relative; gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

33
packages/ui/src/elements/DuplicateDocument/index.tsx
View File

@@ -118,20 +118,25 @@ export const DuplicateDocument: React.FC<Props> = ({ id, slug, singularLabel })
</PopupList.Button> </PopupList.Button>
{modified && hasClicked && ( {modified && hasClicked && (
<Modal className={`${baseClass}__modal`} slug={modalSlug}> <Modal className={`${baseClass}__modal`} slug={modalSlug}>
<div className={`${baseClass}__modal-template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('general:confirmDuplication')}</h1> <div className={`${baseClass}__content`}>
<p>{t('general:unsavedChangesDuplicate')}</p> <h1>{t('general:confirmDuplication')}</h1>
<Button <p>{t('general:unsavedChangesDuplicate')}</p>
buttonStyle="secondary" </div>
id="confirm-cancel" <div className={`${baseClass}__controls`}>
onClick={() => toggleModal(modalSlug)} <Button
type="button" buttonStyle="secondary"
> id="confirm-cancel"
{t('general:cancel')} onClick={() => toggleModal(modalSlug)}
</Button> size="large"
<Button id="confirm-duplicate" onClick={() => void confirm()}> type="button"
{t('general:duplicateWithoutSaving')} >
</Button> {t('general:cancel')}
</Button>
<Button id="confirm-duplicate" onClick={() => void confirm()} size="large">
{t('general:duplicateWithoutSaving')}
</Button>
</div>
</div> </div>
</Modal> </Modal>
)} )}

29
packages/ui/src/elements/GenerateConfirmation/index.scss
View File

@@ -6,14 +6,33 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
padding: base(2);
&__template { &__wrapper {
position: relative;
z-index: 1; z-index: 1;
position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
max-width: base(36);
} }
.btn { &__content {
margin-right: $baseline; display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
}
}
&__controls {
display: flex;
gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

46
packages/ui/src/elements/GenerateConfirmation/index.tsx
View File

@@ -44,28 +44,32 @@ export const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props)
{t('authentication:generateNewAPIKey')} {t('authentication:generateNewAPIKey')}
</Button> </Button>
<Modal className={baseClass} slug={modalSlug}> <Modal className={baseClass} slug={modalSlug}>
<div className={`${baseClass}__template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('authentication:confirmGeneration')}</h1> <div className={`${baseClass}__content`}>
<p> <h1>{t('authentication:confirmGeneration')}</h1>
<Translation <p>
elements={{ <Translation
1: ({ children }) => <strong>{children}</strong>, elements={{
1: ({ children }) => <strong>{children}</strong>,
}}
i18nKey="authentication:generatingNewAPIKeyWillInvalidate"
t={t}
/>
</p>
</div>
<div className={`${baseClass}__controls`}>
<Button
buttonStyle="secondary"
onClick={() => {
toggleModal(modalSlug)
}} }}
i18nKey="authentication:generatingNewAPIKeyWillInvalidate" size="large"
t={t} type="button"
/> >
</p> {t('general:cancel')}
</Button>
<Button <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>
buttonStyle="secondary" </div>
onClick={() => {
toggleModal(modalSlug)
}}
type="button"
>
{t('general:cancel')}
</Button>
<Button onClick={handleGenerate}>{t('authentication:generate')}</Button>
</div> </div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>

27
packages/ui/src/elements/PublishMany/index.scss
View File

@@ -4,15 +4,34 @@
@include blur-bg; @include blur-bg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
padding: base(2);
&__template { &__wrapper {
z-index: 1; z-index: 1;
position: relative; position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
} }
.btn { &__content {
margin-right: $baseline; display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
}
}
&__controls {
display: flex;
gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

37
packages/ui/src/elements/PublishMany/index.tsx
View File

@@ -127,20 +127,29 @@ export const PublishMany: React.FC<PublishManyProps> = (props) => {
{t('version:publish')} {t('version:publish')}
</Pill> </Pill>
<Modal className={baseClass} slug={modalSlug}> <Modal className={baseClass} slug={modalSlug}>
<div className={`${baseClass}__template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('version:confirmPublish')}</h1> <div className={`${baseClass}__content`}>
<p>{t('version:aboutToPublishSelection', { label: getTranslation(plural, i18n) })}</p> <h1>{t('version:confirmPublish')}</h1>
<Button <p>{t('version:aboutToPublishSelection', { label: getTranslation(plural, i18n) })}</p>
buttonStyle="secondary" </div>
id="confirm-cancel" <div className={`${baseClass}__controls`}>
onClick={submitted ? undefined : () => toggleModal(modalSlug)} <Button
type="button" buttonStyle="secondary"
> id="confirm-cancel"
{t('general:cancel')} onClick={submitted ? undefined : () => toggleModal(modalSlug)}
</Button> size="large"
<Button id="confirm-publish" onClick={submitted ? undefined : handlePublish}> type="button"
{submitted ? t('version:publishing') : t('general:confirm')} >
</Button> {t('general:cancel')}
</Button>
<Button
id="confirm-publish"
onClick={submitted ? undefined : handlePublish}
size="large"
>
{submitted ? t('version:publishing') : t('general:confirm')}
</Button>
</div>
</div> </div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>

33
packages/ui/src/elements/Status/index.scss
View File

@@ -20,22 +20,41 @@
&__modal { &__modal {
@include blur-bg; @include blur-bg;
display: flex; display: flex;
justify-content: center;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
padding: base(2);
&__toggle { &__toggle {
@extend %btn-reset; @extend %btn-reset;
} }
}
.btn { &__wrapper {
margin-right: $baseline; z-index: 1;
position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
max-width: base(36);
}
&__content {
display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
} }
} }
&__modal-template { &__controls {
position: relative; display: flex;
z-index: 1; gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

72
packages/ui/src/elements/Status/index.tsx
View File

@@ -152,19 +152,27 @@ export const Status: React.FC = () => {
{t('version:unpublish')} {t('version:unpublish')}
</Button> </Button>
<Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}> <Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}>
<div className={`${baseClass}__modal-template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('version:confirmUnpublish')}</h1> <div className={`${baseClass}__content`}>
<p>{t('version:aboutToUnpublish')}</p> <h1>{t('version:confirmUnpublish')}</h1>
<Button <p>{t('version:aboutToUnpublish')}</p>
buttonStyle="secondary" </div>
onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)} <div className={`${baseClass}__controls`}>
type="button" <Button
> buttonStyle="secondary"
{t('general:cancel')} onClick={processing ? undefined : () => toggleModal(unPublishModalSlug)}
</Button> size="large"
<Button onClick={processing ? undefined : () => performAction('unpublish')}> type="button"
{t(processing ? 'version:unpublishing' : 'general:confirm')} >
</Button> {t('general:cancel')}
</Button>
<Button
onClick={processing ? undefined : () => performAction('unpublish')}
size="large"
>
{t(processing ? 'version:unpublishing' : 'general:confirm')}
</Button>
</div>
</div> </div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>
@@ -181,22 +189,28 @@ export const Status: React.FC = () => {
{t('version:revertToPublished')} {t('version:revertToPublished')}
</Button> </Button>
<Modal className={`${baseClass}__modal`} slug={revertModalSlug}> <Modal className={`${baseClass}__modal`} slug={revertModalSlug}>
<div className={`${baseClass}__modal-template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('version:confirmRevertToSaved')}</h1> <div className={`${baseClass}__content`}>
<p>{t('version:aboutToRevertToPublished')}</p> <h1>{t('version:confirmRevertToSaved')}</h1>
<Button <p>{t('version:aboutToRevertToPublished')}</p>
buttonStyle="secondary" </div>
onClick={processing ? undefined : () => toggleModal(revertModalSlug)} <div className={`${baseClass}__controls`}>
type="button" <Button
> buttonStyle="secondary"
{t('general:cancel')} onClick={processing ? undefined : () => toggleModal(revertModalSlug)}
</Button> size="large"
<Button type="button"
id="action-revert-to-published-confirm" >
onClick={processing ? undefined : () => performAction('revert')} {t('general:cancel')}
> </Button>
{t(processing ? 'version:reverting' : 'general:confirm')} <Button
</Button> id="action-revert-to-published-confirm"
onClick={processing ? undefined : () => performAction('revert')}
size="large"
>
{t(processing ? 'version:reverting' : 'general:confirm')}
</Button>
</div>
</div> </div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>

1
packages/ui/src/elements/Translation/index.tsx
View File

@@ -1,4 +1,3 @@
'use client'
import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations' import type { ClientTranslationKeys, TFunction } from '@payloadcms/translations'
import * as React from 'react' import * as React from 'react'

27
packages/ui/src/elements/UnpublishMany/index.scss
View File

@@ -4,15 +4,34 @@
@include blur-bg; @include blur-bg;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;
height: 100%; height: 100%;
padding: base(2);
&__template { &__wrapper {
z-index: 1; z-index: 1;
position: relative; position: relative;
display: flex;
flex-direction: column;
gap: base(0.8);
padding: base(2);
} }
.btn { &__content {
margin-right: $baseline; display: flex;
flex-direction: column;
gap: base(0.4);
> * {
margin: 0;
}
}
&__controls {
display: flex;
gap: base(0.4);
.btn {
margin: 0;
}
} }
} }

37
packages/ui/src/elements/UnpublishMany/index.tsx
View File

@@ -124,20 +124,29 @@ export const UnpublishMany: React.FC<UnpublishManyProps> = (props) => {
{t('version:unpublish')} {t('version:unpublish')}
</Pill> </Pill>
<Modal className={baseClass} slug={modalSlug}> <Modal className={baseClass} slug={modalSlug}>
<div className={`${baseClass}__template`}> <div className={`${baseClass}__wrapper`}>
<h1>{t('version:confirmUnpublish')}</h1> <div className={`${baseClass}__content`}>
<p>{t('version:aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}</p> <h1>{t('version:confirmUnpublish')}</h1>
<Button <p>{t('version:aboutToUnpublishSelection', { label: getTranslation(plural, i18n) })}</p>
buttonStyle="secondary" </div>
id="confirm-cancel" <div className={`${baseClass}__controls`}>
onClick={submitted ? undefined : () => toggleModal(modalSlug)} <Button
type="button" buttonStyle="secondary"
> id="confirm-cancel"
{t('general:cancel')} onClick={submitted ? undefined : () => toggleModal(modalSlug)}
</Button> size="large"
<Button id="confirm-unpublish" onClick={submitted ? undefined : handleUnpublish}> type="button"
{submitted ? t('version:unpublishing') : t('general:confirm')} >
</Button> {t('general:cancel')}
</Button>
<Button
id="confirm-unpublish"
onClick={submitted ? undefined : handleUnpublish}
size="large"
>
{submitted ? t('version:unpublishing') : t('general:confirm')}
</Button>
</div>
</div> </div>
</Modal> </Modal>
</React.Fragment> </React.Fragment>

1
packages/ui/src/exports/shared/index.ts
View File

@@ -1,4 +1,5 @@
// IMPORTANT: the shared.ts file CANNOT contain any Server Components _that import client components_. // IMPORTANT: the shared.ts file CANNOT contain any Server Components _that import client components_.
export { Translation } from '../../elements/Translation/index.js'
export { withMergedProps } from '../../elements/withMergedProps/index.js' // cannot be within a 'use client', thus we export this from shared export { withMergedProps } from '../../elements/withMergedProps/index.js' // cannot be within a 'use client', thus we export this from shared
export { WithServerSideProps } from '../../elements/WithServerSideProps/index.js' export { WithServerSideProps } from '../../elements/WithServerSideProps/index.js'
export { PayloadIcon } from '../../graphics/Icon/index.js' export { PayloadIcon } from '../../graphics/Icon/index.js'

25
test/databaseAdapter.ts
View File

@@ -1,16 +1,13 @@
// DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts
// DO NOT MODIFY. This file is automatically generated in initDevAndTest.ts import { mongooseAdapter } from '@payloadcms/db-mongodb'
export const databaseAdapter = mongooseAdapter({
import { mongooseAdapter } from '@payloadcms/db-mongodb' url:
process.env.MONGODB_MEMORY_SERVER_URI ||
export const databaseAdapter = mongooseAdapter({ process.env.DATABASE_URI ||
url: 'mongodb://127.0.0.1/payloadtests',
process.env.MONGODB_MEMORY_SERVER_URI || collation: {
process.env.DATABASE_URI || strength: 1,
'mongodb://127.0.0.1/payloadtests', },
collation: { })
strength: 1,
},
})