From 10e8f3c70980a35adce5eaa18cc430bff4d7a5e9 Mon Sep 17 00:00:00 2001
From: George Desipris <73396808+desiprisg@users.noreply.github.com>
Date: Tue, 28 Nov 2023 16:57:07 +0200
Subject: [PATCH] fix(clerk-js): Use shadows for card borders and fix
 PhoneInput zIndices (#2221)

---
 .changeset/pink-days-drum.md                   |  2 ++
 .../clerk-js/src/ui.retheme/elements/Card.tsx  |  7 +++++--
 .../elements/PhoneInput/PhoneInput.tsx         | 18 +++++++++++++-----
 3 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/pink-days-drum.md

diff --git a/.changeset/pink-days-drum.md b/.changeset/pink-days-drum.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ 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
index 39c2e849de..721e04678b 100644
--- 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
index 4b0320cda5..a20b0dcf81 100644
--- a/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
+++ b/packages/clerk-js/src/ui.retheme/elements/PhoneInput/PhoneInput.tsx
@@ -72,8 +72,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 +103,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 +126,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>