Skip to content

Commit

Permalink
feat(ui): various admin panel styling improvements (#7121)
Browse files Browse the repository at this point in the history 
- Improves color contrast of various components in the admin panel.
- Adjusts placement of field error tooltips for consistency.
- Corrects misaligned modals.
- Fixes issue where `admin.layout: vertical` was not being applied to
`radio` fields.
  • Loading branch information
@tylandavis
tylandavis authored Jul 12, 2024
1 parent 6578b85 commit c359c34
Show file tree
Hide file tree
Showing 27 changed files with 102 additions and 159 deletions.
19 changes: 17 additions & 2 deletions packages/next/src/views/Edit/Default/Auth/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,26 @@

@keyframes highlight {
0% {
background: var(--theme-success-500);
background: var(--theme-success-250);
border: 1px solid var(--theme-success-500);
}

20% {
background: var(--theme-input-bg);
border: 1px solid var(--theme-elevation-250);
color: var(--theme-text);
}

80% {
background: var(--theme-input-bg);
border: 1px solid var(--theme-elevation-250);
color: var(--theme-text);
}

100% {
background: none;
background: var(--theme-elevation-200);
border: 1px solid transparent;
color: var(--theme-elevation-400);
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/next/src/views/Version/SelectComparison/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
border: 1px solid var(--theme-error-500);
min-height: calc(var(--base) * 2);
padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);
background-color: var(--theme-error-500);
background-color: var(--theme-error-100);
color: var(--theme-elevation-0);
}

Expand Down
2 changes: 1 addition & 1 deletion packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@
}

.LexicalEditorTheme__hr.selected {
outline: 2px solid var(--theme-success-500);
outline: 2px solid var(--theme-success-250);
user-select: none;
}
2 changes: 1 addition & 1 deletion packages/richtext-lexical/src/field/Field.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,14 @@ const _RichText: React.FC<
width,
}}
>
<FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret="left" />
<FieldLabel
CustomLabel={CustomLabel}
label={label}
required={required}
{...(labelProps || {})}
/>
<div className={`${baseClass}__wrap`}>
<FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
<ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
<LexicalProvider
editorConfig={editorConfig}
Expand Down
7 changes: 7 additions & 0 deletions packages/richtext-lexical/src/field/index.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
@import '../scss/styles.scss';

.rich-text-lexical {
& > .field-error.tooltip {
right: auto;
position: static;
margin-bottom: 0.2em;
max-width: fit-content;
}

.errorBoundary {
pre {
text-wrap: unset;
Expand Down
8 changes: 4 additions & 4 deletions packages/ui/src/elements/Banner/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,10 @@

&--type-error {
background: var(--theme-error-100);
color: var(--theme-error-500);
color: var(--theme-error-600);

svg {
@include color-svg(var(--theme-error-500));
@include color-svg(var(--theme-error-600));
}

&.button--has-action {
Expand All @@ -56,8 +56,8 @@
}

&--type-success {
background: var(--theme-success-500);
color: var(--color-base-800);
background: var(--theme-success-100);
color: var(--theme-success-600);

&.button--has-action {
&:hover {
Expand Down
60 changes: 13 additions & 47 deletions packages/ui/src/elements/Collapsible/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,58 +113,24 @@
padding: var(--gutter-h);
}
}
}

html[data-theme='dark'] {
.collapsible {
&--style-error {
border: 1px solid var(--theme-error-400);
&:hover {
border: 1px solid var(--theme-error-500);
}

> .collapsible__toggle-wrap {
.row-label {
color: var(--theme-error-500);
}
.collapsible__toggle {
background: var(--theme-error-100);
}
}
&.collapsible--hovered {
> .collapsible__toggle-wrap .collapsible__toggle {
background: var(--theme-error-150);
}
}
}
}
}

html[data-theme='light'] {
.collapsible {
&--style-error {
&--style-error {
border: 1px solid var(--theme-error-400);
&:hover {
border: 1px solid var(--theme-error-500);
&:hover {
border: 1px solid var(--theme-error-600);
}
}

> .collapsible__toggle-wrap {
.row-label {
color: var(--theme-error-750);
}
.collapsible__toggle {
background: var(--theme-error-50);
}
> .collapsible__toggle-wrap {
.row-label {
color: var(--theme-error-950);
}
&.collapsible--hovered {
> .collapsible__toggle-wrap .collapsible__toggle {
background: var(--theme-error-100);
}
.collapsible__toggle {
background: var(--theme-error-100);
}
&.error {
& input {
border-color: var(--theme-error-500);
}
}
&.collapsible--hovered {
> .collapsible__toggle-wrap .collapsible__toggle {
background: var(--theme-error-150);
}
}
}
Expand Down
16 changes: 2 additions & 14 deletions packages/ui/src/elements/ErrorPill/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
display: flex;
align-items: center;
justify-content: center;
background: var(--theme-error-300);
color: var(--theme-error-950);

&--fixed-width {
width: 18px;
Expand All @@ -27,17 +29,3 @@
margin-left: 0.5px;
}
}

html[data-theme='light'] {
.error-pill {
background: var(--theme-error-250);
color: var(--theme-error-750);
}
}

html[data-theme='dark'] {
.error-pill {
background: var(--theme-error-500);
color: var(--color-base-1000);
}
}
1 change: 1 addition & 0 deletions packages/ui/src/elements/GenerateConfirmation/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@include blur-bg;
display: flex;
align-items: center;
justify-content: center;
height: 100%;

&__template {
Expand Down
30 changes: 9 additions & 21 deletions packages/ui/src/elements/Pill/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,12 +111,18 @@
}

&--style-warning {
background: var(--theme-warning-500);
background: var(--theme-warning-150);
color: var(--theme-warning-800);
}

&--style-success {
background: var(--theme-success-500);
color: var(--color-base-800);
background: var(--theme-success-150);
color: var(--theme-success-800);
}

&--style-error {
background: var(--theme-error-150);
color: var(--theme-error-800);
}

&--style-dark {
Expand All @@ -138,21 +144,3 @@
}
}
}

html[data-theme='dark'] {
.pill {
&--style-error {
background: var(--theme-error-500);
color: var(--color-base-1000);
}
}
}

html[data-theme='light'] {
.pill {
&--style-error {
background: var(--theme-error-250);
color: var(--theme-error-750);
}
}
}
11 changes: 9 additions & 2 deletions packages/ui/src/elements/ReactSelect/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,16 @@
}
}

&--error {
&--error,
&--error:hover,
&--error:focus-within {
div.rs__control {
background-color: var(--theme-error-100);
background-color: var(--theme-error-50);
border: 1px solid var(--theme-error-500);

& > div.rs__indicator > button.dropdown-indicator[type='button'] {
border: none;
}
}
}

Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/elements/Status/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
&__modal {
@include blur-bg;
display: flex;
justify-content: center;
align-items: center;
height: 100%;

Expand Down
4 changes: 2 additions & 2 deletions packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

.condition-value-relationship {
&__error-loading {
border: 1px solid var(--theme-error-500);
border: 1px solid var(--theme-error-600);
min-height: base(2);
padding: base(0.5) base(0.75);
background-color: var(--theme-error-500);
background-color: var(--theme-error-100);
color: var(--theme-elevation-0);
}
}
3 changes: 2 additions & 1 deletion packages/ui/src/fields/Checkbox/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

.tooltip:not([aria-hidden='true']) {
right: auto;
position: relative;
position: static;
transform: translateY(calc(var(--caret-size) * -1));
margin-bottom: 0.2em;
max-width: fit-content;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui/src/fields/Checkbox/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ const _CheckboxField: React.FC<CheckboxFieldProps> = (props) => {
width,
}}
>
<FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
<FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret="left" />
<CheckboxInput
AfterInput={AfterInput}
BeforeInput={BeforeInput}
Expand Down
24 changes: 3 additions & 21 deletions packages/ui/src/fields/Code/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,9 @@
.code-editor {
border-color: var(--theme-error-500);
}
}
}

html[data-theme='light'] {
.code-field {
&.error {
.monaco-editor-background,
.margin {
background-color: var(--theme-error-50);
}
}
}
}

html[data-theme='dark'] {
.code-field {
&.error {
.monaco-editor-background,
.margin {
background-color: var(--theme-error-100);
}
.monaco-editor-background,
.margin {
background-color: var(--theme-error-50);
}
}
}
4 changes: 0 additions & 4 deletions packages/ui/src/fields/Collapsible/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,4 @@
align-items: center;
gap: base(0.5);
}

&--has-error {
border: 1px solid var(--theme-error-500);
}
}
11 changes: 6 additions & 5 deletions packages/ui/src/fields/FieldError/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@
font-family: var(--font-body);
left: auto;
max-width: 75%;
right: calc(var(--base) * 0.5);
transform: none;
background-color: var(--theme-error-500);
right: 0;
transform: translateY(calc(var(--caret-size) * -1));
color: var(--theme-error-950);
background-color: var(--theme-error-300);

&::after {
border-top-color: var(--theme-error-500);
border-bottom-color: var(--theme-error-500);
border-top-color: var(--theme-error-300);
border-bottom-color: var(--theme-error-300);
}
}
Loading

0 comments on commit c359c34

Please sign in to comment.