From f7ee7aa76ec9ff459f6fe24fc8b6adcd2655d2dd Mon Sep 17 00:00:00 2001 From: Jessica Rynkar Date: Mon, 1 Jun 2026 14:37:18 +0100 Subject: [PATCH 1/3] feat(ui): update account view to v4 design --- .../next/src/views/Account/Settings/index.css | 26 +++ .../src/views/Account/Settings/index.scss | 48 ----- .../next/src/views/Account/Settings/index.tsx | 2 +- .../ui/src/graphics/Account/Default/index.css | 38 ++++ .../src/graphics/Account/Default/index.scss | 64 ------ .../ui/src/graphics/Account/Default/index.tsx | 2 +- packages/ui/src/views/Edit/Auth/APIKey.tsx | 2 +- packages/ui/src/views/Edit/Auth/index.css | 137 ++++++++++++ packages/ui/src/views/Edit/Auth/index.scss | 104 --------- packages/ui/src/views/Edit/Auth/index.tsx | 200 ++++++++++-------- packages/ui/src/views/Edit/index.scss | 1 - test/v4/baseConfig.ts | 6 +- 12 files changed, 318 insertions(+), 312 deletions(-) create mode 100644 packages/next/src/views/Account/Settings/index.css delete mode 100644 packages/next/src/views/Account/Settings/index.scss create mode 100644 packages/ui/src/graphics/Account/Default/index.css delete mode 100644 packages/ui/src/graphics/Account/Default/index.scss create mode 100644 packages/ui/src/views/Edit/Auth/index.css delete mode 100644 packages/ui/src/views/Edit/Auth/index.scss diff --git a/packages/next/src/views/Account/Settings/index.css b/packages/next/src/views/Account/Settings/index.css new file mode 100644 index 00000000000..719e031f9ce --- /dev/null +++ b/packages/next/src/views/Account/Settings/index.css @@ -0,0 +1,26 @@ +@layer payload-default { + .payload-settings { + position: relative; + margin: var(--spacer-3) 0; + padding: var(--spacer-3) 0; + display: flex; + flex-direction: column; + gap: var(--spacer-3); + } + + .payload-settings h3 { + margin: 0; + } + + .payload-settings::before, + .payload-settings::after { + content: ''; + display: block; + height: var(--stroke-width-small); + background: var(--color-border); + width: calc(100% + calc(var(--gutter-h) * 2)); + left: calc(var(--gutter-h) * -1); + top: 0; + position: absolute; + } +} diff --git a/packages/next/src/views/Account/Settings/index.scss b/packages/next/src/views/Account/Settings/index.scss deleted file mode 100644 index b7e01fcc562..00000000000 --- a/packages/next/src/views/Account/Settings/index.scss +++ /dev/null @@ -1,48 +0,0 @@ -@import '~@payloadcms/ui/scss'; - -@layer payload-default { - .payload-settings { - position: relative; - margin-bottom: calc(var(--base) * 2); - - h3 { - margin: 0; - } - - &::before, - &::after { - content: ''; - display: block; - height: 1px; - background: var(--theme-elevation-100); - width: calc(100% + calc(var(--base) * 5)); - left: calc(var(--gutter-h) * -1); - top: 0; - position: absolute; - } - - &::after { - display: none; - bottom: 0; - top: unset; - } - - margin-top: calc(var(--base) * 3); - padding-top: calc(var(--base) * 3); - padding-bottom: calc(var(--base) * 3); - display: flex; - flex-direction: column; - gap: var(--base); - - @include mid-break { - margin-bottom: var(--base); - padding-top: calc(var(--base) * 2); - margin-top: calc(var(--base) * 2); - padding-bottom: calc(var(--base) * 2); - - &::after { - display: block; - } - } - } -} diff --git a/packages/next/src/views/Account/Settings/index.tsx b/packages/next/src/views/Account/Settings/index.tsx index 3228508c53a..d13b8c88cf7 100644 --- a/packages/next/src/views/Account/Settings/index.tsx +++ b/packages/next/src/views/Account/Settings/index.tsx @@ -5,7 +5,7 @@ import { FieldLabel } from '@payloadcms/ui' import React from 'react' import { ResetPreferences } from '../ResetPreferences/index.js' -import './index.scss' +import './index.css' import { ToggleHighContrast } from '../ToggleHighContrast/index.js' import { ToggleTheme } from '../ToggleTheme/index.js' import { LanguageSelector } from './LanguageSelector.js' diff --git a/packages/ui/src/graphics/Account/Default/index.css b/packages/ui/src/graphics/Account/Default/index.css new file mode 100644 index 00000000000..fd763a1857a --- /dev/null +++ b/packages/ui/src/graphics/Account/Default/index.css @@ -0,0 +1,38 @@ +@layer payload-default { + .graphic-account { + vector-effect: non-scaling-stroke; + overflow: visible; + position: relative; + } + + .graphic-account__bg { + fill: var(--color-bg-secondary); + stroke: var(--color-border); + stroke-width: var(--stroke-width-small); + } + + .graphic-account__head, + .graphic-account__body { + fill: var(--color-icon-secondary); + } + + .graphic-account--active .graphic-account__bg { + fill: var(--color-bg-selected); + stroke: var(--color-border-selected); + } + + .graphic-account--active .graphic-account__head, + .graphic-account--active .graphic-account__body { + fill: var(--color-icon-selected); + } + + .graphic-account:hover:not(.graphic-account--active) .graphic-account__bg { + fill: var(--color-bg-hover); + stroke: var(--color-border-strong); + } + + .graphic-account:hover:not(.graphic-account--active) .graphic-account__head, + .graphic-account:hover:not(.graphic-account--active) .graphic-account__body { + fill: var(--color-icon); + } +} diff --git a/packages/ui/src/graphics/Account/Default/index.scss b/packages/ui/src/graphics/Account/Default/index.scss deleted file mode 100644 index 6901e313ea3..00000000000 --- a/packages/ui/src/graphics/Account/Default/index.scss +++ /dev/null @@ -1,64 +0,0 @@ -@layer payload-default { - .graphic-account { - vector-effect: non-scaling-stroke; - overflow: visible; - position: relative; - - &__bg { - fill: var(--theme-elevation-50); - stroke: var(--theme-elevation-200); - stroke-width: 1px; - } - - &__head, - &__body { - fill: var(--theme-elevation-200); - } - - &--active { - .graphic-account { - &__bg { - fill: var(--theme-elevation-500); - stroke: var(--theme-text); - } - - &__head, - &__body { - fill: var(--theme-text); - } - } - } - - &:hover:not(.graphic-account--active) { - .graphic-account { - &__bg { - fill: var(--theme-elevation-200); - stroke: var(--theme-elevation-600); - } - - &__head, - &__body { - fill: var(--theme-elevation-600); - } - } - } - } - - [data-theme='light'] { - .graphic-account { - &--active { - .graphic-account { - &__bg { - fill: var(--theme-elevation-300); - stroke: var(--theme-elevation-600); - } - - &__head, - &__body { - fill: var(--theme-elevation-600); - } - } - } - } - } -} diff --git a/packages/ui/src/graphics/Account/Default/index.tsx b/packages/ui/src/graphics/Account/Default/index.tsx index 814202676e1..cbc8284fb87 100644 --- a/packages/ui/src/graphics/Account/Default/index.tsx +++ b/packages/ui/src/graphics/Account/Default/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -import './index.scss' +import './index.css' const baseClass = 'graphic-account' diff --git a/packages/ui/src/views/Edit/Auth/APIKey.tsx b/packages/ui/src/views/Edit/Auth/APIKey.tsx index a5ca2af66ea..534598953c5 100644 --- a/packages/ui/src/views/Edit/Auth/APIKey.tsx +++ b/packages/ui/src/views/Edit/Auth/APIKey.tsx @@ -134,7 +134,7 @@ export const APIKey: React.FC<{ readonly enabled: boolean; readonly readOnly?: b + )} + {!changingPassword && !requirePassword && !disableLocalStrategy && showPasswordFields && ( + + )} + {!changingPassword && operation === 'update' && hasPermissionToUnlock && ( + + )} + + ) : null + return (
{enableFields && ( - - - {(changingPassword || requirePassword) && (!disableLocalStrategy || !enableFields) && ( -
- - -
- )} -
- {changingPassword && !requirePassword && ( - +
+
+
{t('authentication:account')}
+ {Controls} +
+
+ + {(changingPassword || requirePassword) && (!disableLocalStrategy || !enableFields) && ( +
+ + +
)} - {!changingPassword && - !requirePassword && - !disableLocalStrategy && - showPasswordFields && ( - - )} - {!changingPassword && operation === 'update' && hasPermissionToUnlock && ( - + {useAPIKey && ( +
+ {canReadApiKey && ( + + + + + )} +
)} -
- - )} - {useAPIKey && ( -
- {canReadApiKey && ( - + {verify && isEditing && ( - - - )} + )} +
)} - {verify && isEditing && ( - - )}
) } diff --git a/packages/ui/src/views/Edit/index.scss b/packages/ui/src/views/Edit/index.scss index d0c95c05f53..ff07ff52ef1 100644 --- a/packages/ui/src/views/Edit/index.scss +++ b/packages/ui/src/views/Edit/index.scss @@ -41,7 +41,6 @@ } &__auth { - margin-bottom: base(1.6); border-radius: var(--style-radius-s); } diff --git a/test/v4/baseConfig.ts b/test/v4/baseConfig.ts index e5ae45d490b..65431d3a4aa 100644 --- a/test/v4/baseConfig.ts +++ b/test/v4/baseConfig.ts @@ -92,10 +92,12 @@ export const collections: CollectionConfig[] = [ admin: { useAsTitle: 'email', }, - auth: true, + auth: { + useAPIKey: true, + }, access: { admin: ({ req: { user } }) => { - return Boolean(user?.roles?.includes('admin')) + return Boolean(user && 'roles' in user && user.roles?.includes('admin')) }, }, fields: [ From 4fde1581ca634ec09b535fc67e9bd0de8981db81 Mon Sep 17 00:00:00 2001 From: Jessica Rynkar Date: Mon, 1 Jun 2026 15:04:18 +0100 Subject: [PATCH 2/3] chore: update padding --- packages/ui/src/views/Edit/Auth/index.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui/src/views/Edit/Auth/index.css b/packages/ui/src/views/Edit/Auth/index.css index 8d4fa013300..2d1f47b4a87 100644 --- a/packages/ui/src/views/Edit/Auth/index.css +++ b/packages/ui/src/views/Edit/Auth/index.css @@ -23,7 +23,7 @@ .auth-fields__controls { display: flex; align-items: center; - gap: calc(var(--spacer-2) + calc(var(--spacer-1) / 2)); + gap: calc(var(--spacer-2)); flex-wrap: wrap; } @@ -38,7 +38,7 @@ margin: 0; font-family: var(--text-body-medium-strong-font-family); font-size: var(--text-body-medium-strong-font-size); - font-weight: var(--font-weight-strong, var(--text-body-medium-strong-font-weight)); + font-weight: var(--text-body-medium-strong-font-weight); line-height: var(--text-body-medium-strong-line-height); letter-spacing: var(--text-body-medium-strong-letter-spacing); } @@ -106,7 +106,6 @@ .auth-fields .api-key__toggle-button-wrap { position: absolute; top: 50%; - right: calc(var(--spacer-2) - 5px); display: flex; align-items: center; justify-content: center; From b73e346b5044c21cafc70f97057e7a556affa992 Mon Sep 17 00:00:00 2001 From: Patrik Kozak <35232443+PatrikKozak@users.noreply.github.com> Date: Mon, 1 Jun 2026 14:50:42 -0400 Subject: [PATCH 3/3] fix(ui): render auth card when API-key or verify blocks are shown, not only when local strategy fields are enabled --- packages/ui/src/views/Edit/Auth/index.css | 2 + packages/ui/src/views/Edit/Auth/index.tsx | 109 +++++++++++----------- 2 files changed, 56 insertions(+), 55 deletions(-) diff --git a/packages/ui/src/views/Edit/Auth/index.css b/packages/ui/src/views/Edit/Auth/index.css index 2d1f47b4a87..822e31a3954 100644 --- a/packages/ui/src/views/Edit/Auth/index.css +++ b/packages/ui/src/views/Edit/Auth/index.css @@ -84,6 +84,7 @@ min-height: unset; outline: none; padding: 0 var(--spacer-2); + padding-inline-end: calc(var(--spacer-4) + var(--spacer-3)); appearance: none; -webkit-appearance: none; } @@ -106,6 +107,7 @@ .auth-fields .api-key__toggle-button-wrap { position: absolute; top: 50%; + right: calc(var(--spacer-2) - 5px); /* 8px input padding - 5px icon viewBox internal padding */ display: flex; align-items: center; justify-content: center; diff --git a/packages/ui/src/views/Edit/Auth/index.tsx b/packages/ui/src/views/Edit/Auth/index.tsx index 184e45bae98..4fda293bcb7 100644 --- a/packages/ui/src/views/Edit/Auth/index.tsx +++ b/packages/ui/src/views/Edit/Auth/index.tsx @@ -255,70 +255,69 @@ export const Auth: React.FC = (props) => { return (
- {enableFields && ( -
-
-
{t('authentication:account')}
- {Controls} -
-
- - {(changingPassword || requirePassword) && (!disableLocalStrategy || !enableFields) && ( -
- - -
- )} - {useAPIKey && ( -
- {canReadApiKey && ( - - +
+
{t('authentication:account')}
+ {Controls} +
+
+ {showAuthBlock && ( + + + {(changingPassword || requirePassword) && + (!disableLocalStrategy || !enableFields) && ( +
+ - - + +
)} -
- )} - {verify && isEditing && ( + + )} + {showAPIKeyBlock && ( +
- )} -
+ +
+ )} + {showVerifyBlock && ( + + )}
- )} +
) }