fix(clerk-js): Improve UI on create org component (part 2) (#2620)

* fix(clerk-js): Add disabled state on create orgs button * fix(clerk-js): Input states * fix(clerk-js): Update danger state colors and common focus color
clerk · Jan 18, 2024 · feef515 · feef515
1 parent 7886ba8
commit feef515
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 26 deletions.
diff --git a/.changeset/clever-cups-knock.md b/.changeset/clever-cups-knock.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.changeset/lazy-lizards-tap.md b/.changeset/lazy-lizards-tap.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -189,6 +189,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
           <FormButtonContainer sx={t => ({ marginTop: t.space.$none })}>
             <Form.SubmitButton
               block={false}
+              isDisabled={!canSubmit}
               localizationKey={localizationKeys('createOrganization.formButtonSubmit')}
             />
             {props.onCancel && (

diff --git a/packages/clerk-js/src/ui/foundations/shadows.ts b/packages/clerk-js/src/ui/foundations/shadows.ts
@@ -11,7 +11,7 @@ export const shadows = Object.freeze({
   secondaryButtonShadow: '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(0, 0, 0, 0.02)',
   shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
   sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
-  input: '0px 1px 1px 0px {{color}}',
+  input: '0px 0px 1px 0px {{color}}',
   focusRing: '0px 0px 0px 4px {{color}}',
   badge: '0px 2px 0px -1px rgba(0, 0, 0, 0.04)',
   tableBodyShadow:

diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -78,15 +78,16 @@ const textVariants = (t: InternalTheme) => {
 };
 
 const borderVariants = (t: InternalTheme, props?: any) => {
-  const defaultBoxShadow = t.shadows.$input.replace(
+  const hoverBorderColor = !props?.hasError ? t.colors.$blackAlpha300 : t.colors.$dangerAlpha500;
+  const hoverBoxShadow = t.shadows.$input.replace(
     '{{color}}',
-    !props?.hasError ? t.colors.$blackAlpha100 : t.colors.$danger300,
+    !props?.hasError ? t.colors.$blackAlpha150 : t.colors.$blackAlpha200,
   );
-  const hoverBorderColor = !props?.hasError ? t.colors.$primary300 : t.colors.$danger400;
   const hoverStyles = {
     '&:hover': {
       WebkitTapHighlightColor: 'transparent',
       borderColor: hoverBorderColor,
+      boxShadow: hoverBoxShadow,
     },
   };
   const focusStyles =
@@ -97,17 +98,23 @@ const borderVariants = (t: InternalTheme, props?: any) => {
             borderColor: hoverBorderColor,
             WebkitTapHighlightColor: 'transparent',
             boxShadow: [
-              defaultBoxShadow,
-              t.shadows.$focusRing.replace('{{color}}', props?.hasError ? t.colors.$danger200 : t.colors.$primary50),
+              hoverBoxShadow,
+              t.shadows.$focusRing.replace(
+                '{{color}}',
+                !props?.hasError ? t.colors.$blackAlpha150 : (t.colors.$dangerAlpha200 as string),
+              ),
             ].toString(),
           },
         };
   return {
     normal: {
       borderRadius: t.radii.$md,
       border: t.borders.$normal,
-      borderColor: !props?.hasError ? t.colors.$blackAlpha200 : t.colors.$danger300,
-      boxShadow: defaultBoxShadow,
+      borderColor: !props?.hasError ? t.colors.$blackAlpha150 : t.colors.$dangerAlpha500,
+      boxShadow: t.shadows.$input.replace(
+        '{{color}}',
+        !props?.hasError ? t.colors.$blackAlpha100 : t.colors.$blackAlpha150,
+      ),
       transitionProperty: t.transitionProperty.$common,
       transitionTimingFunction: t.transitionTiming.$common,
       transitionDuration: t.transitionDuration.$focusRing,
@@ -119,7 +126,7 @@ const borderVariants = (t: InternalTheme, props?: any) => {
 
 const borderColor = (t: InternalTheme, props?: any) => {
   return {
-    borderColor: props?.hasError ? t.colors.$danger500 : t.colors.$blackAlpha300,
+    borderColor: props?.hasError ? t.colors.$dangerAlpha500 : t.colors.$blackAlpha150,
   } as const;
 };
 
@@ -128,22 +135,7 @@ const focusRing = (t: InternalTheme) => {
     '&:focus': {
       '&::-moz-focus-inner': { border: '0' },
       WebkitTapHighlightColor: 'transparent',
-      boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$primary50),
-      transitionProperty: t.transitionProperty.$common,
-      transitionTimingFunction: t.transitionTiming.$common,
-      transitionDuration: t.transitionDuration.$focusRing,
-    },
-  } as const;
-};
-
-const focusRingInput = (t: InternalTheme, props?: any) => {
-  return {
-    '&:focus': {
-      WebkitTapHighlightColor: 'transparent',
-      boxShadow: t.shadows.$focusRing.replace(
-        '{{color}}',
-        props?.hasError ? t.colors.$danger400 : t.colors.$primary400,
-      ),
+      boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$blackAlpha200),
       transitionProperty: t.transitionProperty.$common,
       transitionTimingFunction: t.transitionTiming.$common,
       transitionDuration: t.transitionDuration.$focusRing,
@@ -196,7 +188,6 @@ export const common = {
   textVariants,
   borderVariants,
   focusRing,
-  focusRingInput,
   disabled,
   borderColor,
   centeredFlex,