fix(clerk-js): Use shadows for card borders and fix PhoneInput zIndices

clerk · Nov 28, 2023 · cb725d8 · cb725d8
1 parent 9a1fe37
commit cb725d8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/.changeset/pink-days-drum.md b/.changeset/pink-days-drum.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui.retheme/elements/Card.tsx b/packages/clerk-js/src/ui.retheme/elements/Card.tsx
@@ -45,7 +45,8 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>((props, ref) =>
               position: 'relative',
               backgroundColor: t.colors.$colorBackground,
               padding: t.space.$8,
-              boxShadow: t.shadows.$sm,
+              boxShadow:
+                '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06), 0px 0px 0px 1px rgba(25, 28, 33, 0.04)',
               width: t.sizes.$100,
               borderRadius: `${t.radii.$xl} ${t.radii.$xl} ${t.radii.$lg} ${t.radii.$lg}`,
             }),
@@ -115,7 +116,9 @@ export const BaseCard = React.forwardRef<HTMLDivElement, BaseCardProps>((props,
           transitionProperty: t.transitionProperty.$common,
           transitionDuration: '200ms',
           borderRadius: t.radii.$xl,
-          boxShadow: t.shadows.$cardDropShadow,
+          boxShadow:
+            '0px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20), 0px 0px 0px 1px rgba(25, 28, 33, 0.06)',
+          backdropFilter: 'blur(10px)',
         }),
         sx,
       ]}

diff --git a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
@@ -5,6 +5,7 @@ import { descriptors, Flex, Icon, Input, Text } from '../../customizables';
 import { Select, SelectButton, SelectOptionList } from '../../elements';
 import { Check } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
+import { common } from '../../styledSystem';
 import { mergeRefs } from '../../utils';
 import type { CountryEntry, CountryIso } from './countryCodeData';
 import { IsoToCountryMap } from './countryCodeData';
@@ -72,8 +73,6 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         position: 'relative',
         borderRadius: theme.radii.$md,
         zIndex: 1,
-        border: theme.borders.$normal,
-        borderColor: theme.colors.$blackAlpha300, // we use this value in the Input primitive
       })}
     >
       <Select
@@ -105,7 +104,12 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
             borderRadius: t.radii.$md, // needs to be specified as we can't use overflow: hidden on the parent, hides the popover
             borderBottomRightRadius: '0',
             borderTopRightRadius: '0',
-            zIndex: 2,
+            ':hover': {
+              zIndex: 2,
+            },
+            ':focus': {
+              zIndex: 2,
+            },
           })}
           isDisabled={rest.isDisabled}
         >
@@ -123,10 +127,15 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
         />
       </Select>
 
-      <Flex sx={{ position: 'relative', width: '100%', marginLeft: 3 /* same as focus ring width */ }}>
+      <Flex
+        sx={{
+          position: 'relative',
+          width: '100%',
+        }}
+      >
         <Text
           variant='smallRegular'
-          sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)' }}
+          sx={{ position: 'absolute', left: '1ch', top: '50%', transform: 'translateY(-50%)', pointerEvents: 'none' }}
         >
           +{selectedCountryOption.country.code}
         </Text>