fix(GuildPinRewardCard): use custom card

guildxyz · Aug 12, 2024 · dbd21da · dbd21da
1 parent 273b64d
commit dbd21da
Showing 1 changed file with 27 additions and 30 deletions.
diff --git a/src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx b/src/components/[guild]/AccessHub/components/GuildPinRewardCard.tsx
@@ -1,8 +1,9 @@
+import { Avatar, AvatarImage } from "@/components/ui/Avatar"
+import { Card } from "@/components/ui/Card"
 import { useColorModeValue } from "@chakra-ui/react"
 import { useMintGuildPinContext } from "components/[guild]/Requirements/components/GuildCheckout/MintGuildPinContext"
 import useGuild from "components/[guild]/hooks/useGuild"
 import useGuildPermission from "components/[guild]/hooks/useGuildPermission"
-import RewardCard from "components/common/RewardCard"
 import dynamic from "next/dynamic"
 
 const DynamicMintGuildPin = dynamic(
@@ -17,7 +18,6 @@ const DynamicMintFuelGuildPin = dynamic(
 )
 
 const GuildPinRewardCard = () => {
-  const bgColor = useColorModeValue("var(--chakra-colors-gray-100)", "#343439")
   const bgFile = useColorModeValue("bg_light.svg", "bg.svg")
 
   const { isAdmin } = useGuildPermission()
@@ -26,40 +26,37 @@ const GuildPinRewardCard = () => {
   const { isInvalidImage, isTooSmallImage } = useMintGuildPinContext()
 
   return (
-    <RewardCard
-      data-test="guild-pin-reward-card"
-      title="Guild Pin"
-      image="/img/guild-pin-key-3d.svg"
-      colorScheme={!guildPin?.isActive ? "gray" : "GUILD"}
-      borderWidth={0}
-      description={
-        !guildPin?.isActive
-          ? "Mintable badge of membership"
-          : "Onchain badge that shows your support and belonging to this community."
-      }
-      bg={bgColor}
-      _before={{
-        content: '""',
-        position: "absolute",
-        top: 0,
-        bottom: 0,
-        left: 0,
-        right: 0,
-        bg: `linear-gradient(to top right, ${bgColor} 70%, transparent), url('/landing/${bgFile}')`,
-        bgSize: "140%",
-        bgRepeat: "no-repeat",
-        bgPosition: "top 7px right 7px",
-        opacity: "0.07",
-      }}
-      pt={undefined}
-    >
+    <Card className="relative flex flex-col justify-between bg-card-secondary p-5 sm:p-6">
+      <div className="absolute inset-0 bg-[length:140%] bg-[top_7px_right_7px] bg-[url('/landing/bg_light.svg')] bg-no-repeat opacity-[0.07] dark:bg-[url('/landing/bg.svg')]" />
+      <div className="absolute inset-0 bg-gradient-to-tr from-70% from-card-secondary to-transparent" />
+      <div className="relative mb-5 flex items-center gap-3">
+        <div className="flex size-10 shrink-0 items-center justify-center rounded-full bg-image">
+          <Avatar>
+            <AvatarImage
+              src="/img/guild-pin-key-3d.svg"
+              alt="Guild pin"
+              width={40}
+              height={40}
+            />
+          </Avatar>
+        </div>
+
+        <div className="flex flex-col">
+          <span className="font-bold">Guild Pin</span>
+          <span className="text-muted-foreground text-sm">
+            {!guildPin?.isActive
+              ? "Mintable badge of membership"
+              : "Onchain badge that shows your support and belonging to this community."}
+          </span>
+        </div>
+      </div>
       {(!(isInvalidImage || isTooSmallImage) || isAdmin) &&
         (guildPin?.chain !== "FUEL" ? (
           <DynamicMintGuildPin />
         ) : (
           <DynamicMintFuelGuildPin />
         ))}
-    </RewardCard>
+    </Card>
   )
 }