feat: card alignment - switch to grid

examples/ui-demo/src/components/modals/MFA/MFAModal.tsx

@@ -218,6 +218,7 @@ export function MFAModal({
     <>
       {isMfaActive ? (
         <Button
+          className="mt-auto"
           onClick={handleRemoveMFA}
           disabled={
             removeMFA.isPending || getMFAFactors.isPending || isLoadingClient
@@ -229,6 +230,7 @@ export function MFAModal({
         </Button>
       ) : (
         <Button
+          className="mt-auto"
           onClick={handleInitMFASetup}
           disabled={isLoadingClient || isLoading}
         >

examples/ui-demo/src/components/preview/PreviewWrapper.tsx

@@ -13,7 +13,7 @@ export function PreviewWrapper({ showCode }: { showCode: boolean }) {
       {/* Don't unmount when showing code preview so that the auth card retains its state */}
       <div
         className={cn(
-          "flex flex-col flex-1 overflow-y-auto scrollbar-none relative p-3 lg:p-6",
+          "flex flex-col flex-1 overflow-y-auto scrollbar-none relative p-3 lg:p-6 pt-0",
           showCode && "hidden"
         )}
       >

examples/ui-demo/src/components/small-cards/Card.tsx

@@ -6,13 +6,14 @@ export function Card({
   badgeSlot,
 }: {
   imageSlot: React.ReactNode;
-  heading: string;
+  heading: string | React.ReactNode;
   content: React.ReactNode;
   buttons: React.ReactNode;
   badgeSlot?: React.ReactNode;
 }) {
+  const isStringHeading = typeof heading === "string";
   return (
-    <div className="bg-bg-surface-default rounded-lg p-4 w-full xl:p-6 xl:w-[326px] xl:h-[570px] flex flex-col border hover:border-fg-tertiary mb-5 xl:mb-0 min-h-[220px]">
+    <div className="bg-bg-surface-default rounded-lg p-4 w-full xl:p-6 xl:h-[570px] flex flex-col border hover:border-fg-tertiary min-h-[220px]">
       <div className="flex xl:flex-col gap-4 relative">
         <div className="absolute top-[-6px] left-[-6px] sm:top-1 sm:left-1 xl:left-auto xl:right-3 xl:top-3 z-10">
           {badgeSlot}
@@ -21,9 +22,13 @@ export function Card({
           {imageSlot}
         </div>
         <div className="w-full mb-3">
-          <h3 className="text-fg-primary xl:text-xl font-semibold mb-2 xl:mb-3">
-            {heading}
-          </h3>
+          {isStringHeading ? (
+            <h3 className="text-fg-primary xl:text-xl font-semibold mb-2 xl:mb-3">
+              {heading}
+            </h3>
+          ) : (
+            heading
+          )}
           {content}
         </div>
       </div>

examples/ui-demo/src/components/small-cards/MFACard.tsx

@@ -1,7 +1,8 @@
 import { useEffect, useState, useRef } from "react";
 import { ThreeStarsIcon } from "../icons/three-stars";
 import { MFAModal } from "../modals/MFA/MFAModal";
 import { useMFA } from "@account-kit/react";
+import { Card } from "./Card";
 
 export function MFACard() {
   const [isMfaActive, setIsMfaActive] = useState(false);
@@ -21,39 +22,44 @@
   }, [isReady]);
 
   return (
-    <div className="bg-bg-surface-default rounded-lg p-4 xl:p-6 w-full xl:w-[326px] xl:h-[500px] flex flex-col justify-between shadow-smallCard min-h-[220px]">
-      <div className="flex xl:flex-col gap-4">
-        <div className="flex-shrink-0 bg-[#DCE9FF] rounded-xl sm:mb-3 xl:mb-0 flex justify-center items-center relative h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
+    <Card
+      imageSlot={
+        <div className="w-full h-full bg-[#DCE9FF] flex justify-center items-center">
           <ThreeStarsIcon className="h-9 w-9 sm:h-[74px] sm:w-[74px] xl:h-[94px] xl:w-[94px]" />
-          <p className="absolute top-[-6px] left-[-6px] sm:top-1 sm:left-1 xl:left-auto xl:right-4 xl:top-4 px-2 py-1 font-semibold rounded-md text-xs text-[#7c3AED] bg-[#F3F3FF]">
-            New!
-          </p>
         </div>
-        <div className="w-full mb-3">
-          <div className="flex items-center justify-between sm:gap-2 mb-1 flex-col sm:flex-row">
-            <h3 className="text-fg-primary xl:text-xl font-semibold self-start">
-              Multi-factor <br />
-              Authentication
-            </h3>
-            {isMfaActive && (
-              <span className="text-sm font-medium self-start sm:px-2 sm:py-0.5 rounded-full flex items-center gap-1 font-inter leading-[21px] tracking-normal">
-                <div className="h-3 w-3 rounded-full bg-green-500"></div>
-                Active
-              </span>
-            )}
-          </div>
-          <p className="text-fg-primary text-sm">
-            Lock down your account with MFA. This requires downloading an auth
-            app like Google Authenticator.
-          </p>
+      }
+      badgeSlot={
+        <p className="px-2 py-1 font-semibold rounded-md text-xs text-[#7c3AED] bg-[#F3F3FF]">
+          New!
+        </p>
+      }
+      heading={
+        <div className="flex items-center justify-between flex-col sm:flex-row">
+          <h3 className="text-fg-primary xl:text-xl font-semibold mb-2 xl:mb-3 self-start">
+            Multi-factor <br />
+            Authentication
+          </h3>
+          {isMfaActive && (
+            <span className="text-sm font-medium self-start sm:px-2 sm:py-0.5 rounded-full flex items-center gap-1 font-inter leading-[21px] tracking-normal">
+              <div className="h-3 w-3 rounded-full bg-green-500"></div>
+              Active
+            </span>
+          )}
         </div>
-      </div>
-      <MFAModal
-        isMfaActive={isMfaActive}
-        onMfaEnabled={() => setIsMfaActive(true)}
-        onMfaRemoved={() => setIsMfaActive(false)}
-        isLoadingClient={!isReady || getMFAFactors.isPending}
-      />
-    </div>
+      }
+      content={
+        <p className="text-fg-primary text-sm">
+          Lock down your account with MFA. This requires downloading an auth app
+          like Google Authenticator.
+        </p>
+      }
+      buttons={
+        <MFAModal
+          isMfaActive={isMfaActive}
+          onMfaEnabled={() => setIsMfaActive(true)}
+          onMfaRemoved={() => setIsMfaActive(false)}
+        />
+      }
+    />
   );
 }

examples/ui-demo/src/components/small-cards/MintCard.tsx

@@ -91,7 +91,7 @@ export const MintCard = ({ accountMode }: { accountMode: AccountMode }) => {
       }
       buttons={
         <Button
-          className="w-full mt-auto"
+          className="mt-auto"
           onClick={handleCollectNFT}
           disabled={isLoading}
         >

examples/ui-demo/src/components/small-cards/SolanaCard.tsx

@@ -98,7 +98,7 @@ export const SolanaCard = () => {
   });
 
   const imageSlot = (
-    <div className="flex-shrink-0 bg-[#DCFCE7] rounded-xl flex justify-center items-center relative h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
+    <div className="w-full h-full bg-[#DCFCE7] flex justify-center items-center relative">
       <Image
         className="h-9 w-9 sm:h-[74px] sm:w-[74px] xl:h-[94px] xl:w-[94px]"
         src="https://static.alchemyapi.io/images/emblems/solana-mainnet.svg"

examples/ui-demo/src/components/small-cards/TransactionsCard.tsx

@@ -63,15 +63,15 @@ export const TransactionsCard = ({
     <Card
       badgeSlot={<Badge text="New!" className="text-[#7c3AED] bg-[#F3F3FF]" />}
       imageSlot={
-        <div className="flex-shrink-0 bg-[#EAEBFE] rounded-xl flex justify-center items-center relative h-[67px] w-[60px] sm:h-[154px] sm:w-[140px] xl:h-[222px] xl:w-full">
+        <div className="w-full h-full bg-[#EAEBFE] flex justify-center items-center">
           <Key className="h-9 w-9 sm:h-[74px] sm:w-[74px] xl:h-[94px] xl:w-[94px]" />
         </div>
       }
       heading="Recurring transactions"
       content={content}
       buttons={
         <Button
-          className="mt-auto w-full"
+          className="mt-auto"
           onClick={handleTransactions}
           disabled={
             isLoadingClient || cardStatus === "setup" || cardStatus === "active"

examples/ui-demo/src/components/small-cards/Wrapper.tsx

@@ -7,7 +7,7 @@ import { MFACard } from "./MFACard";
 export const SmallCardsWrapper = () => {
   const { accountMode } = useConfigStore();
   return (
-    <div className="flex flex-col xl:flex-row gap-6 lg:mt-6 items-center w-full justify-center max-w-screen-sm xl:max-w-none">
+    <div className="grid grid-cols-1 xl:grid-cols-3 gap-6 mt-3 lg:mt-0 items-center w-full">
       <MintCard accountMode={accountMode} key={`mint-card-${accountMode}`} />
       <TransactionsCard
         accountMode={accountMode}