From 03cb95b4b316770ee636ec850cdb4e832ca7618e Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Fri, 14 Mar 2025 15:27:13 +0100
Subject: [PATCH] Refactor gift registry UI to use InfoCard component

Simplified the gift registry section by replacing custom JSX with the reusable InfoCard component. This improves code maintainability and consistency in the UI while retaining the existing styles and functionality. Updated InfoCard styling to ensure compatibility with the new use case.
---
 .../src/app/(public)/invite/[slug]/page.tsx   | 76 +++++--------------
 frontend/src/components/info-card.tsx         |  3 +-
 2 files changed, 23 insertions(+), 56 deletions(-)

diff --git a/frontend/src/app/(public)/invite/[slug]/page.tsx b/frontend/src/app/(public)/invite/[slug]/page.tsx
index 86251cf..288175f 100644
--- a/frontend/src/app/(public)/invite/[slug]/page.tsx
+++ b/frontend/src/app/(public)/invite/[slug]/page.tsx
@@ -252,61 +252,27 @@ const InvitationPage = () => {
         )}
         {/* Gift Registry with Lion */}
         {event.gift_registry_enabled && (
-          <div className="mb-10 flex flex-col items-center md:flex-row md:items-center md:space-x-6">
-            <div>
-              <div
-                className="flex h-24 w-24 items-center justify-center rounded-full border-2 md:h-28 md:w-28"
-                style={{ borderColor: colors.accent3 }}
-              >
-                {getAssetUrl("lion") ? (
-                  <div className="relative h-20 w-20 md:h-24 md:w-24">
-                    <Image
-                      src={getAssetUrl("lion") || ""}
-                      alt="Lion"
-                      fill
-                      className="object-contain"
-                    />
-                  </div>
-                ) : (
-                  <p className="text-center text-sm">Lion</p>
-                )}
-              </div>
-            </div>
-            <Card
-              className="mt-4 flex-1 p-6 md:mt-0"
-              style={{
-                backgroundColor: "rgba(240, 233, 214, 0.7)",
-                borderColor: colors.accent3,
-                boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
-              }}
-            >
-              <h3
-                className="mb-2 text-center text-2xl font-bold md:text-left"
-                style={headingStyle}
-              >
-                Gift Registry
-              </h3>
-              <p
-                style={{ color: colors.text }}
-                className="text-center md:text-left"
-              >
-                View Emma's Wishes
-              </p>
-              <div className="mt-4 text-center md:text-left">
-                <Link href={`/gifts/${event.slug}`}>
-                  <Button
-                    className="rounded-full"
-                    style={{
-                      backgroundColor: colors.accent3,
-                      color: "white",
-                    }}
-                  >
-                    View Gifts
-                  </Button>
-                </Link>
-              </div>
-            </Card>
-          </div>
+          <InfoCard
+            imageSrc={getAssetUrl("lion")}
+            imageAlt="Lion"
+            imagePosition="right"
+            borderColor={colors.accent3}
+            backgroundColor="rgba(240, 233, 214, 0.7)"
+            boxShadow="0 2px 4px rgba(0, 0, 0, 0.05)"
+            headingText="Gift Registry"
+            headingStyle={{
+              fontFamily: eventTheme?.fonts?.heading || "sans-serif",
+              color: colors.text,
+            }}
+            bodyText="View Emma's Wishes"
+            bodyTextColor={colors.text}
+            buttonProps={{
+              text: "View Gifts",
+              href: `/gifts/${event.slug}`,
+              backgroundColor: colors.accent3,
+              textColor: "#ffffff",
+            }}
+          />
         )}
         {/* View Map Button */}
         {event.location_url && (
diff --git a/frontend/src/components/info-card.tsx b/frontend/src/components/info-card.tsx
index af74b42..3b204c0 100644
--- a/frontend/src/components/info-card.tsx
+++ b/frontend/src/components/info-card.tsx
@@ -75,12 +75,13 @@ const InfoCard: React.FC<InfoCardProps> = ({
         imagePosition === "right"
           ? "md:flex-row-reverse md:space-x-reverse"
           : "md:flex-row",
+        "w-full",
       )}
     >
       {imageElement}
 
       <Card
-        className="flex-1 relative overflow-hidden p-6"
+        className="flex-1 relative overflow-hidden p-6 w-full"
         style={{ backgroundColor, borderColor, boxShadow }}
       >
         {imageSrc && (