From aec3f5e3082b4289e2b8ee412be66f812d4663f2 Mon Sep 17 00:00:00 2001
From: Tylan Davis <89618855+tylandavis@users.noreply.github.com>
Date: Fri, 16 Aug 2024 11:23:08 -0400
Subject: [PATCH] chore: admin panel style updates (#7720)
## Description
Minor admin panel style updates:
- Adjusts document header title spacing.
- Makes toast notifications more apparent.
- Adjusts alignment of create new button.
- Improves chevron icon.
- [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] Chore (non-breaking change which does not add functionality)
## 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
---
.../src/elements/DocumentHeader/index.scss | 7 +++--
packages/next/src/scss/toasts.scss | 29 ++++++++++---------
.../next/src/views/List/Default/index.scss | 4 +--
.../richtext-lexical/src/scss/toasts.scss | 29 ++++++++++---------
packages/richtext-slate/src/scss/toasts.scss | 29 ++++++++++---------
packages/ui/src/elements/IDLabel/index.scss | 5 ++--
.../ui/src/elements/RenderTitle/index.scss | 2 +-
packages/ui/src/icons/Chevron/index.tsx | 2 +-
packages/ui/src/scss/toasts.scss | 29 ++++++++++---------
9 files changed, 72 insertions(+), 64 deletions(-)
diff --git a/packages/next/src/elements/DocumentHeader/index.scss b/packages/next/src/elements/DocumentHeader/index.scss
index c90eb2315..f5b097b71 100644
--- a/packages/next/src/elements/DocumentHeader/index.scss
+++ b/packages/next/src/elements/DocumentHeader/index.scss
@@ -2,8 +2,8 @@
.doc-header {
width: 100%;
- margin-top: base(0.5);
- padding-bottom: calc(var(--base) * 1.5);
+ margin-top: base(0.4);
+ padding-bottom: calc(var(--base) * 1.2);
display: flex;
align-items: center;
position: relative;
@@ -27,6 +27,9 @@
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
+ padding-bottom: base(0.2);
+ line-height: 1;
+ vertical-align: top;
}
@include mid-break {
diff --git a/packages/next/src/scss/toasts.scss b/packages/next/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/next/src/scss/toasts.scss
+++ b/packages/next/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);
diff --git a/packages/next/src/views/List/Default/index.scss b/packages/next/src/views/List/Default/index.scss
index d5a483dda..1a5376f34 100644
--- a/packages/next/src/views/List/Default/index.scss
+++ b/packages/next/src/views/List/Default/index.scss
@@ -13,7 +13,7 @@
&__header {
display: flex;
- align-items: center;
+ align-items: flex-end;
flex-wrap: wrap;
gap: base(0.8);
@@ -27,7 +27,7 @@
.pill {
position: relative;
- margin: 0;
+ margin: 0 0 base(0.2);
}
}
diff --git a/packages/richtext-lexical/src/scss/toasts.scss b/packages/richtext-lexical/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/richtext-lexical/src/scss/toasts.scss
+++ b/packages/richtext-lexical/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);
diff --git a/packages/richtext-slate/src/scss/toasts.scss b/packages/richtext-slate/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/richtext-slate/src/scss/toasts.scss
+++ b/packages/richtext-slate/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);
diff --git a/packages/ui/src/elements/IDLabel/index.scss b/packages/ui/src/elements/IDLabel/index.scss
index a78273927..803ed6bb4 100644
--- a/packages/ui/src/elements/IDLabel/index.scss
+++ b/packages/ui/src/elements/IDLabel/index.scss
@@ -1,11 +1,12 @@
@import '../../scss/styles';
.id-label {
- font-size: base(0.75);
+ font-size: base(0.8);
+ line-height: base(1.2);
font-weight: normal;
color: var(--theme-elevation-600);
background: var(--theme-elevation-100);
- padding: 0 base(0.6);
+ padding: base(0.2) base(0.4);
border-radius: $style-radius-m;
display: inline-flex;
}
diff --git a/packages/ui/src/elements/RenderTitle/index.scss b/packages/ui/src/elements/RenderTitle/index.scss
index 6c1cc92c3..cb6254a4d 100644
--- a/packages/ui/src/elements/RenderTitle/index.scss
+++ b/packages/ui/src/elements/RenderTitle/index.scss
@@ -1,7 +1,7 @@
@import '../../scss/styles.scss';
.render-title {
- display: inline-flex;
+ display: inline-block;
&__id {
vertical-align: middle;
position: relative;
diff --git a/packages/ui/src/icons/Chevron/index.tsx b/packages/ui/src/icons/Chevron/index.tsx
index 6173e5dbb..693f41525 100644
--- a/packages/ui/src/icons/Chevron/index.tsx
+++ b/packages/ui/src/icons/Chevron/index.tsx
@@ -26,6 +26,6 @@ export const ChevronIcon: React.FC<{
width={20}
xmlns="http://www.w3.org/2000/svg"
>
-
+
)
diff --git a/packages/ui/src/scss/toasts.scss b/packages/ui/src/scss/toasts.scss
index da22f1806..116845ac3 100644
--- a/packages/ui/src/scss/toasts.scss
+++ b/packages/ui/src/scss/toasts.scss
@@ -8,7 +8,7 @@
position: absolute;
order: 3;
left: unset;
- inset-inline-end: base(0.5);
+ inset-inline-end: base(0.8);
top: 50%;
transform: translateY(-50%);
color: var(--theme-elevation-600);
@@ -16,8 +16,8 @@
border: none;
svg {
- width: base(0.75);
- height: base(0.75);
+ width: base(0.8);
+ height: base(0.8);
}
&:hover {
@@ -33,10 +33,11 @@
.toast-title {
line-height: base(1);
+ margin-right: base(1);
}
.payload-toast-item {
- padding: base(0.5);
+ padding: base(0.8);
color: var(--theme-elevation-800);
font-style: normal;
font-weight: 600;
@@ -69,8 +70,8 @@
}
.toast-icon {
- width: base(1);
- height: base(1);
+ width: base(0.8);
+ height: base(0.8);
margin: 0;
display: flex;
align-items: center;
@@ -84,8 +85,8 @@
&.toast-warning {
color: var(--theme-warning-800);
- border-color: var(--theme-warning-150);
- background-color: var(--theme-warning-50);
+ border-color: var(--theme-warning-250);
+ background-color: var(--theme-warning-100);
.payload-toast-close-button {
color: var(--theme-warning-600);
@@ -98,8 +99,8 @@
&.toast-error {
color: var(--theme-error-800);
- border-color: var(--theme-error-150);
- background-color: var(--theme-error-50);
+ border-color: var(--theme-error-250);
+ background-color: var(--theme-error-100);
.payload-toast-close-button {
color: var(--theme-error-600);
@@ -112,8 +113,8 @@
&.toast-success {
color: var(--theme-success-800);
- border-color: var(--theme-success-150);
- background-color: var(--theme-success-50);
+ border-color: var(--theme-success-250);
+ background-color: var(--theme-success-100);
.payload-toast-close-button {
color: var(--theme-success-600);
@@ -126,8 +127,8 @@
&.toast-info {
color: var(--theme-elevation-800);
- border-color: var(--theme-elevation-150);
- background-color: var(--theme-elevation-50);
+ border-color: var(--theme-elevation-250);
+ background-color: var(--theme-elevation-100);
.payload-toast-close-button {
color: var(--theme-elevation-600);