removed preflight styles, updated powered by

Crossmint · Oct 29, 2024 · 41a75d5 · 41a75d5
1 parent 35da25e
commit 41a75d5
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 21 deletions.
diff --git a/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx b/packages/client/ui/react-ui/src/components/auth/AuthForm.tsx
@@ -43,7 +43,10 @@ export function AuthForm({ className }: { className?: string }) {
             ) : null}
 
             {step === "initial" || step === "otp" ? (
-                <PoweredByCrossmint className="justify-center" color={appearance?.colors?.textSecondary ?? "#A4AFB2"} />
+                <PoweredByCrossmint
+                    className="mt-5 justify-center"
+                    color={appearance?.colors?.textSecondary ?? "#A4AFB2"}
+                />
             ) : null}
         </div>
     );

diff --git a/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/farcaster/FarcasterSignIn.tsx
@@ -32,7 +32,7 @@ export function FarcasterSignIn() {
                         className="font-medium"
                         style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
                     >
-                        Sing in with Farcaster
+                        Sign in with Farcaster
                     </span>
                     <span className="sr-only">Sign in with Farcaster</span>
                 </button>

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,7 +42,7 @@ 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)
-                    "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]: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-[-52%]",
                     "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",

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,16 +1,10 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
 import { classNames } from "@/utils/classNames";
 
-export function PoweredByCrossmint({ color, className }: { color?: string; className?: string }) {
+export function PoweredByCrossmint({ color = "#A4AFB2", className }: { color?: string; className?: string }) {
     return (
-        <p
-            className={classNames("flex text-[13px] mt-4 font-semibold items-center", className)}
-            style={{ color: color || "#A4AFB2" }}
-        >
-            <span className="flex self-center pr-1.5 gap-1 items-center font-semibold">
-                <PoweredByLeaf color={color ?? "#A4AFB2"} />
-            </span>
-            Powered by Crossmint
+        <p className={classNames("flex", className)}>
+            <PoweredByLeaf color={color} />
         </p>
     );
 }