Merge branch 'jonathan/follow-up-ui-fixes-demo' into jonathan/follow-…

…up-ui-fixes
Crossmint · Oct 29, 2024 · 35da25e · 35da25e
2 parents 09d6a28 + 4497119
commit 35da25e
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx b/packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx
@@ -13,7 +13,7 @@ export default function AuthFormDialog({ open }: { open: boolean }) {
                 onOpenAutoFocus={(e) => e.preventDefault()}
                 closeButtonColor={appearance?.colors?.textPrimary}
                 closeButtonRingColor={appearance?.colors?.accent}
-                className="responsive-border-radius-auth-dialog"
+                className="cm-responsive-border-radius-auth-dialog"
                 style={{
                     borderRadius: appearance?.borderRadius,
                     backgroundColor: appearance?.colors?.background,

diff --git a/packages/client/ui/react-ui/src/components/common/Dialog.tsx b/packages/client/ui/react-ui/src/components/common/Dialog.tsx
@@ -42,10 +42,10 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
                     "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
                     "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
                     // Regular viewport styles (centered modal)
-                    "xs:inset-auto !xs:p-10 !xs:pb-8 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
-                    "xs:max-w-[448px] xs:rounded-xl",
-                    "xs:data-[state=closed]:animate-fade-out xs:data-[state=closed]:animate-zoom-out-95",
-                    "xs:data-[state=open]:animate-fade-in xs:data-[state=open]:animate-zoom-in-95",
+                    "min-[480px]:inset-auto !min-[480px]:p-10 !min-[480px]:pb-8 min-[480px]:left-[50%] min-[480px]:top-[50%] min-[480px]:translate-x-[-50%] min-[480px]:translate-y-[-50%]",
+                    "min-[480px]:max-w-[448px] min-[480px]:rounded-xl",
+                    "min-[480px]:data-[state=closed]:animate-fade-out min-[480px]:data-[state=closed]:animate-zoom-out-95",
+                    "min-[480px]:data-[state=open]:animate-fade-in min-[480px]:data-[state=open]:animate-zoom-in-95",
                     // Duration for animations
                     "data-[state=closed]:duration-300 data-[state=open]:duration-500",
                     className
@@ -58,7 +58,7 @@ const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.C
                         className={classNames(
                             "absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100",
                             "focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
-                            "right-4 top-4 !xs:right-6 !xs:top-6"
+                            "right-4 top-4 !min-[480px]:right-6 !min-[480px]:top-6"
                         )}
                         style={{ color: closeButtonColor ?? "#00150D" }}
                     >

diff --git a/packages/client/ui/react-ui/src/twind.config.ts b/packages/client/ui/react-ui/src/twind.config.ts
@@ -4,9 +4,6 @@ import presetTailwind from "@twind/preset-tailwind";
 export default defineConfig({
     presets: [presetTailwind()],
     theme: {
-        screens: {
-            xs: "480px",
-        },
         extend: {
             colors: {
                 // Crossmint colors (cm- prefix)
@@ -102,7 +99,7 @@ export default defineConfig({
     },
     rules: [
         [
-            "responsive-border-radius-auth-dialog",
+            "cm-responsive-border-radius-auth-dialog",
             {
                 "@media (max-width: 479px)": {
                     "border-bottom-left-radius": "0 !important",