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

tylandavis · web-flow · commit c359c34ee8d6 · 2024-07-12T20:16:27.000Z
- 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.
diff --git 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);
   }
 }
 
diff --git 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);
   }
 
diff --git 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;
 }
diff --git a/packages/richtext-lexical/src/field/Field.tsx b/packages/richtext-lexical/src/field/Field.tsx
@@ -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}
diff --git 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;
diff --git 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 {
diff --git 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);
       }
     }
   }
diff --git 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);
-  }
-}
diff --git 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 {
diff --git 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);
-    }
-  }
-}
diff --git 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;
+      }
     }
   }
 
diff --git 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%;
 
diff --git 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);
   }
 }
diff --git 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;
   }
diff --git 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}
diff --git 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);
     }
   }
 }
diff --git 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);
-  }
 }
diff --git 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);
   }
 }
diff --git a/packages/ui/src/fields/JSON/index.scss b/packages/ui/src/fields/JSON/index.scss
diff --git a/packages/ui/src/fields/JSON/index.tsx b/packages/ui/src/fields/JSON/index.tsx
diff --git a/packages/ui/src/fields/Point/index.scss b/packages/ui/src/fields/Point/index.scss
diff --git a/packages/ui/src/fields/Point/index.tsx b/packages/ui/src/fields/Point/index.tsx
diff --git a/packages/ui/src/fields/RadioGroup/index.scss b/packages/ui/src/fields/RadioGroup/index.scss
diff --git a/packages/ui/src/fields/RadioGroup/index.tsx b/packages/ui/src/fields/RadioGroup/index.tsx
diff --git a/packages/ui/src/fields/Relationship/index.scss b/packages/ui/src/fields/Relationship/index.scss
diff --git a/packages/ui/src/fields/Select/Input.tsx b/packages/ui/src/fields/Select/Input.tsx
diff --git a/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx b/packages/ui/src/providers/ComponentMap/buildComponentMap/fields.tsx

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	`border: 1px solid var(--theme-error-500);`
`4`	`4`	`min-height: calc(var(--base) * 2);`
`5`	`5`	`padding: calc(var(--base) * 0.5) calc(var(--base) * 0.75);`
`6`		`- background-color: var(--theme-error-500);`
	`6`	`+ background-color: var(--theme-error-100);`
`7`	`7`	`color: var(--theme-elevation-0);`
`8`	`8`	`}`
`9`	`9`
Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,6 @@`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.LexicalEditorTheme__hr.selected {`
`18`		`- outline: 2px solid var(--theme-success-500);`
	`18`	`+ outline: 2px solid var(--theme-success-250);`
`19`	`19`	`user-select: none;`
`20`	`20`	`}`