feat(ui): various admin panel styling improvements (#7121)

- 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.
2024-07-12 16:16:27 -04:00
parent 6578b85057
commit c359c34ee8
27 changed files with 103 additions and 160 deletions
--- a/packages/next/src/views/Edit/Default/Auth/index.scss
+++ b/packages/next/src/views/Edit/Default/Auth/index.scss
@@ -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);
  }
 }

--- a/packages/next/src/views/Version/SelectComparison/index.scss
+++ b/packages/next/src/views/Version/SelectComparison/index.scss
@@ -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);
  }

--- a/packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss
+++ b/packages/richtext-lexical/src/features/horizontalRule/plugin/index.scss
@@ -15,6 +15,6 @@
 }

 .LexicalEditorTheme__hr.selected {
-  outline: 2px solid var(--theme-success-500);
+  outline: 2px solid var(--theme-success-250);
  user-select: none;
 }
--- a/packages/richtext-lexical/src/field/Field.tsx
+++ b/packages/richtext-lexical/src/field/Field.tsx
@@ -88,6 +88,7 @@ const _RichText: React.FC<
        width,
      }}
    >
+      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret="left" />
      <FieldLabel
        CustomLabel={CustomLabel}
        label={label}
@@ -95,7 +96,6 @@ const _RichText: React.FC<
        {...(labelProps || {})}
      />
      <div className={`${baseClass}__wrap`}>
-        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
        <ErrorBoundary fallbackRender={fallbackRender} onReset={() => {}}>
          <LexicalProvider
            editorConfig={editorConfig}
--- a/packages/richtext-lexical/src/field/index.scss
+++ b/packages/richtext-lexical/src/field/index.scss
@@ -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;
--- a/packages/ui/src/elements/Banner/index.scss
+++ b/packages/ui/src/elements/Banner/index.scss
@@ -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 {
@@ -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 {
--- a/packages/ui/src/elements/Collapsible/index.scss
+++ b/packages/ui/src/elements/Collapsible/index.scss
@@ -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);
      }
    }
  }
--- a/packages/ui/src/elements/ErrorPill/index.scss
+++ b/packages/ui/src/elements/ErrorPill/index.scss
@@ -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;
@@ -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);
-  }
-}
--- a/packages/ui/src/elements/GenerateConfirmation/index.scss
+++ b/packages/ui/src/elements/GenerateConfirmation/index.scss
@@ -4,6 +4,7 @@
  @include blur-bg;
  display: flex;
  align-items: center;
+  justify-content: center;
  height: 100%;

  &__template {
--- a/packages/ui/src/elements/Pill/index.scss
+++ b/packages/ui/src/elements/Pill/index.scss
@@ -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 {
@@ -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);
-    }
-  }
-}
--- a/packages/ui/src/elements/ReactSelect/index.scss
+++ b/packages/ui/src/elements/ReactSelect/index.scss
@@ -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;
+      }
    }
  }

--- a/packages/ui/src/elements/Status/index.scss
+++ b/packages/ui/src/elements/Status/index.scss
@@ -20,6 +20,7 @@
  &__modal {
    @include blur-bg;
    display: flex;
+    justify-content: center;
    align-items: center;
    height: 100%;

--- a/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss
+++ b/packages/ui/src/elements/WhereBuilder/Condition/Relationship/index.scss
@@ -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);
  }
 }
--- a/packages/ui/src/fields/Checkbox/index.scss
+++ b/packages/ui/src/fields/Checkbox/index.scss
@@ -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;
  }
--- a/packages/ui/src/fields/Checkbox/index.tsx
+++ b/packages/ui/src/fields/Checkbox/index.tsx
@@ -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}
--- a/packages/ui/src/fields/Code/index.scss
+++ b/packages/ui/src/fields/Code/index.scss
@@ -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);
    }
  }
 }
--- a/packages/ui/src/fields/Collapsible/index.scss
+++ b/packages/ui/src/fields/Collapsible/index.scss
@@ -7,8 +7,4 @@
    align-items: center;
    gap: base(0.5);
  }
-
-  &--has-error {
-    border: 1px solid var(--theme-error-500);
-  }
 }
--- a/packages/ui/src/fields/FieldError/index.scss
+++ b/packages/ui/src/fields/FieldError/index.scss
@@ -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);
  }
 }
--- a/packages/ui/src/fields/JSON/index.scss
+++ b/packages/ui/src/fields/JSON/index.scss
@@ -2,34 +2,15 @@

 .json-field {
  position: relative;
-}

-html[data-theme='light'] {
-  .json-field {
-    &.error {
-      .code-editor {
-        border-color: var(--theme-error-500);
-      }
+  &.error {
+    .code-editor {
+      border-color: var(--theme-error-500);
+    }

-      .monaco-editor-background,
-      .margin {
-        background-color: var(--theme-error-50);
-      }
-    }
-  }
-}
-
-html[data-theme='dark'] {
-  .json-field {
-    &.error {
-      .code-editor {
-        border-color: var(--theme-error-500);
-      }
-
-      .monaco-editor-background,
-      .margin {
-        background-color: var(--theme-error-100);
-      }
+    .monaco-editor-background,
+    .margin {
+      background-color: var(--theme-error-50);
    }
  }
 }
--- a/packages/ui/src/fields/JSON/index.tsx
+++ b/packages/ui/src/fields/JSON/index.tsx
@@ -138,7 +138,6 @@ const _JSONField: React.FC<JSONFieldProps> = (props) => {
        required={required}
        {...(labelProps || {})}
      />
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
      <div className={`${fieldBaseClass}__wrap`}>
        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
        {BeforeInput}
--- a/packages/ui/src/fields/Point/index.scss
+++ b/packages/ui/src/fields/Point/index.scss
@@ -3,6 +3,10 @@
 .point {
  position: relative;

+  & .input-wrapper {
+    position: relative;
+  }
+
  &__wrap {
    display: flex;
    width: calc(100% + #{base(1)});
--- a/packages/ui/src/fields/Point/index.tsx
+++ b/packages/ui/src/fields/Point/index.tsx
@@ -113,7 +113,6 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
        width,
      }}
    >
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
      <ul className={`${baseClass}__wrap`}>
        <li>
          {CustomLabel !== undefined ? (
@@ -143,6 +142,7 @@ export const _PointField: React.FC<PointFieldProps> = (props) => {
            <FieldLabel {...getCoordinateFieldLabel('latitude')} />
          )}
          <div className="input-wrapper">
+            <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
            {BeforeInput}
            <input
              disabled={readOnly}
--- a/packages/ui/src/fields/RadioGroup/index.scss
+++ b/packages/ui/src/fields/RadioGroup/index.scss
@@ -1,6 +1,13 @@
@import '../../scss/styles.scss';

 .radio-group {
+  .tooltip:not([aria-hidden='true']) {
+    right: auto;
+    position: static;
+    margin-bottom: 0.2em;
+    max-width: fit-content;
+  }
+
  &--layout-horizontal {
    ul {
      display: flex;
--- a/packages/ui/src/fields/RadioGroup/index.tsx
+++ b/packages/ui/src/fields/RadioGroup/index.tsx
@@ -100,6 +100,7 @@ const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
        width,
      }}
    >
+      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} alignCaret="left" />
      <FieldLabel
        CustomLabel={CustomLabel}
        label={label}
@@ -107,8 +108,6 @@ const _RadioGroupField: React.FC<RadioFieldProps> = (props) => {
        {...(labelProps || {})}
      />
      <div className={`${fieldBaseClass}__wrap`}>
-        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
-
        <ul className={`${baseClass}--group`} id={`field-${path.replace(/\./g, '__')}`}>
          {options.map((option) => {
            let optionValue = ''
--- a/packages/ui/src/fields/Relationship/index.scss
+++ b/packages/ui/src/fields/Relationship/index.scss
@@ -33,7 +33,7 @@ html[data-theme='light'] {
        }
      }

-      button {
+      button.relationship-add-new__add-button {
        @include lightInputError;
      }
    }
@@ -49,7 +49,7 @@ html[data-theme='dark'] {
        }
      }

-      button {
+      button.relationship-add-new__add-button {
        @include darkInputError;
      }
    }
--- a/packages/ui/src/fields/Select/Input.tsx
+++ b/packages/ui/src/fields/Select/Input.tsx
@@ -105,7 +105,6 @@ export const SelectInput: React.FC<SelectInputProps> = (props) => {
        required={required}
        {...(labelProps || {})}
      />
-      <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
      <div className={`${fieldBaseClass}__wrap`}>
        <FieldError CustomError={CustomError} path={path} {...(errorProps || {})} />
        {BeforeInput}
--- a/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx
+++ b/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx
@@ -561,6 +561,7 @@ export const mapFields = (args: {
              name: field.name,
              className: field.admin?.className,
              disabled: field.admin?.disabled,
+              layout: field.admin?.layout,
              options: fieldOptions,
              readOnly: field.admin?.readOnly,
              required: field.required,