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

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

Hide file tree

Showing 3 changed files with 13 additions and 4 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
@@ -123,10 +123,10 @@ 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%)', zIndex: 4 }}
         >
           +{selectedCountryOption.country.code}
         </Text>
@@ -143,6 +143,10 @@ const PhoneInputBase = forwardRef<HTMLInputElement, PhoneInputProps>((props, ref
               borderTopLeftRadius: '0',
               borderBottomLeftRadius: '0',
               paddingLeft: `${`+${selectedCountryOption.country.code}`.length + 1.5}ch`,
+              position: 'relative',
+              '&:focus': {
+                zIndex: 3,
+              },
             },
             sx,
           ]}