Removes dynamic tailwind classes as they break tree shaking build (#805)

* Removes dynamic tailwind classes as they break tree shaking build * linting * Removes dynamic classes from <PoweredByCrossmint>
Crossmint · Oct 9, 2024 · 5b6b197 · 5b6b197
1 parent e7b9f38
commit 5b6b197
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 40 deletions.
diff --git a/.changeset/long-bugs-remain.md b/.changeset/long-bugs-remain.md
@@ -0,0 +1,5 @@
+---
+"@crossmint/client-sdk-react-ui": patch
+---
+
+Removes dynamic tailwind classes
diff --git a/packages/client/ui/react-ui/src/components/auth/AuthModal.tsx b/packages/client/ui/react-ui/src/components/auth/AuthModal.tsx
@@ -7,7 +7,6 @@ import type { UIConfig } from "@crossmint/common-sdk-base";
 import type { AuthMaterial } from "@crossmint/common-sdk-auth";
 
 import X from "../../icons/x";
-import { classNames } from "../../utils/classNames";
 
 const authMaterialSchema = z.object({
     oneTimeSecret: z.string(),
@@ -117,14 +116,16 @@ export default function AuthModal({ setModalOpen, apiKey, fetchAuthMaterial, bas
                             src={iframeSrc}
                             onLoad={handleIframeLoaded}
                             title="Authentication Modal"
-                            className={classNames(
-                                "w-full h-[500px] border pt-12 pb-8",
-                                appearance?.colors?.border
-                                    ? `border-[${appearance.colors.border}]`
-                                    : "border-[#D0D5DD]",
-                                appearance?.borderRadius ? `rounded-[${appearance.borderRadius}]` : "rounded-2xl",
-                                appearance?.colors?.background ? `bg-[${appearance.colors.background}]` : "bg-white"
-                            )}
+                            style={{
+                                width: "100%",
+                                height: "500px",
+                                border: "1px solid",
+                                borderColor: appearance?.colors?.border ?? "#D0D5DD",
+                                borderRadius: appearance?.borderRadius ?? "1rem",
+                                backgroundColor: appearance?.colors?.background ?? "white",
+                                paddingTop: "3rem",
+                                paddingBottom: "2rem",
+                            }}
                         />
                     </div>
                 </Transition.Child>

diff --git a/packages/client/ui/react-ui/src/components/auth/PasskeyPrompt.tsx b/packages/client/ui/react-ui/src/components/auth/PasskeyPrompt.tsx
@@ -39,11 +39,19 @@ function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, app
                 />
             </Transition.Child>
             <div
-                className={classNames(
-                    "flex flex-col items-center w-full max-w-[28rem] rounded-2xl shadow-sm z-30 border",
-                    appearance?.colors?.background != null ? `bg-[${appearance.colors.background}]` : "bg-white",
-                    appearance?.colors?.border != null ? `border-[${appearance.colors.border}]` : "border-[#D0D5DD]"
-                )}
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    width: "100%",
+                    maxWidth: "28rem",
+                    borderRadius: "1rem",
+                    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+                    zIndex: 30,
+                    border: "1px solid",
+                    backgroundColor: appearance?.colors?.background || "white",
+                    borderColor: appearance?.colors?.border || "#D0D5DD",
+                }}
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className="pt-12 pb-10 px-8">
@@ -52,24 +60,22 @@ function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, app
                     </div>
                     <div className="flex justify-center">
                         <p
-                            className={classNames(
-                                "text-lg font-bold",
-                                appearance?.colors?.textPrimary != null
-                                    ? `text-[${appearance.colors.textPrimary}]`
-                                    : "text-[#20343E]"
-                            )}
+                            style={{
+                                fontSize: "1.125rem",
+                                lineHeight: "1.75rem",
+                                fontWeight: "bold",
+                                color: appearance?.colors?.textPrimary || "#20343E",
+                            }}
                         >
                             {title}
                         </p>
                     </div>
                     <div className="mt-4 mb-9">
                         <div
-                            className={classNames(
-                                "font-normal",
-                                appearance?.colors?.textSecondary != null
-                                    ? `text-[${appearance.colors.textSecondary}]`
-                                    : "text-[#67797F]"
-                            )}
+                            style={{
+                                fontWeight: "normal",
+                                color: appearance?.colors?.textSecondary || "#67797F",
+                            }}
                         >
                             {content}
                         </div>
@@ -199,15 +205,16 @@ export function PasskeyPrompt({ state, appearance }: PasskeyPromptProps) {
                             href="https://docs.crossmint.com/wallets/smart-wallets/users/troubleshoot"
                             rel="noopener noreferrer"
                             target="_blank"
-                            className={classNames(
-                                "p-3.5 w-full text-center no-underline rounded-lg font-bold",
-                                appearance?.colors?.inputBackground != null
-                                    ? `bg-[${appearance.colors.inputBackground}]`
-                                    : "bg-[#F0F2F4]",
-                                appearance?.colors?.textSecondary != null
-                                    ? `text-[${appearance.colors.textSecondary}]`
-                                    : "text-[#00150D]"
-                            )}
+                            style={{
+                                padding: "0.875rem",
+                                width: "100%",
+                                textAlign: "center",
+                                textDecoration: "none",
+                                borderRadius: "0.5rem",
+                                fontWeight: "bold",
+                                backgroundColor: appearance?.colors?.inputBackground || "#F0F2F4",
+                                color: appearance?.colors?.textSecondary || "#00150D",
+                            }}
                         >
                             Troubleshoot
                         </a>

diff --git a/packages/client/ui/react-ui/src/components/common/PoweredByCrossmint.tsx b/packages/client/ui/react-ui/src/components/common/PoweredByCrossmint.tsx
@@ -1,13 +1,16 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
-import { classNames } from "@/utils/classNames";
 
 export function PoweredByCrossmint({ color }: { color?: string }) {
     return (
         <p
-            className={classNames(
-                "flex text-xs font-normal -tracking-[0.2px] p-2",
-                color ? `text-[${color}]` : "text-[#67797F]"
-            )}
+            style={{
+                display: "flex",
+                fontSize: "0.75rem",
+                fontWeight: "400",
+                letterSpacing: "-0.2px",
+                padding: "0.5rem",
+                color: color || "#67797F",
+            }}
         >
             Powered by
             <span className="flex self-center pl-1 gap-1 items-center font-semibold">