From f5282721b56592fbdd826ae2faa59c79dd9dc975 Mon Sep 17 00:00:00 2001
From: chloe <44501120+chloezxyy@users.noreply.github.com>
Date: Thu, 1 Feb 2024 14:16:13 +0800
Subject: [PATCH] feat(ui-ux): hover ux on card

---
 .../locales/en-US/page-explore-wallets.json   |   3 +-
 src/components/commons/Buttons.tsx            |   9 +-
 .../_components/DownloadAssetsCard.tsx        |  82 ++++++------
 .../_components/VisualAssetsSection.tsx       | 123 ++++++++++--------
 4 files changed, 123 insertions(+), 94 deletions(-)

diff --git a/public/locales/en-US/page-explore-wallets.json b/public/locales/en-US/page-explore-wallets.json
index 9ccaa8f00..2a6c9935f 100644
--- a/public/locales/en-US/page-explore-wallets.json
+++ b/public/locales/en-US/page-explore-wallets.json
@@ -55,7 +55,8 @@
         "title": "DFI 3D Coin",
         "desc": "3D asset for illustration purposes"
       }
-    }
+    },
+    "button": "Download .zipped files"
   },
   "advanceUseSection": {
     "sectionTitle": "SUITABLE FOR ADVANCE USAGE",
diff --git a/src/components/commons/Buttons.tsx b/src/components/commons/Buttons.tsx
index a490aa9da..741375464 100644
--- a/src/components/commons/Buttons.tsx
+++ b/src/components/commons/Buttons.tsx
@@ -88,6 +88,8 @@ export function SecondaryButton({
   customSize,
   customClass,
   testID,
+  hasIcon = true,
+  download = false,
 }: {
   text: string;
   className?: string;
@@ -97,6 +99,8 @@ export function SecondaryButton({
   customClass?: string;
   customSize?: number;
   testID: string;
+  hasIcon: boolean;
+  download?: boolean;
 }) {
   const size = customSize ?? 20;
   const customClassName = customClass ?? "ml-[15px]";
@@ -107,6 +111,7 @@ export function SecondaryButton({
       href={href}
       className={classNames("block w-fit", { "pointer-events-none": disabled })}
       data-testid={`secondary-button-${testID}`}
+      download={download}
     >
       <button
         type="button"
@@ -119,7 +124,9 @@ export function SecondaryButton({
         )}
       >
         {text}
-        <FiArrowUpRight size={size} className={customClassName} />
+        {hasIcon ? (
+          <FiArrowUpRight size={size} className={customClassName} />
+        ) : null}
       </button>
     </Link>
   );
diff --git a/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx b/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx
index 79457aa0e..c8d0027d4 100644
--- a/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx
+++ b/src/pages/explore/wallets/_components/DownloadAssetsCard.tsx
@@ -24,49 +24,51 @@ export function DownloadAssetsCard(
     children,
   } = props;
   return (
-    <div
-      data-testid={testid}
-      className={`${customCardStyle} border-[0.5px] border-dark-300 rounded-[15px] bg-dark-00 backdrop-blur bg-opacity-90 lg:p-6 lg:py-8
+    <div className="hover:accent-gradient-1 p-[0.5px] bg-dark-200 rounded-[15px]">
+      <div
+        data-testid={testid}
+        className={`${customCardStyle} border-[0.5px] border-dark-300 rounded-[15px] bg-dark-00 lg:p-6 lg:py-8
       w-full flex lg:flex-row flex-col items-center gap-6`}
-    >
-      <div className="overflow-hidden py-[35px] w-full lg:w-fit rounded-t-[15px] bg-light-900 lg:bg-transparent">
-        {/* Image */}
-        <div className="grow flex lg:w-[151.293px] items-center justify-center w-full">
-          {children}
-        </div>
-      </div>
-      <div className="flex flex-col justify-between	items-start	self-stretch pb-6 px-6 gap-y-4 lg:p-0">
-        <div className="flex flex-col gap-y-1">
-          <h3 className="text-base leading-5 lg:text-lg font-bold lg:leading-6">
-            {title}
-          </h3>
-          <div className="text-sm lg:text-base text-dark-500 font-desc overflow-hidden">
-            {desc}
+      >
+        <div className="overflow-hidden py-[35px] w-full lg:w-fit rounded-t-[15px] bg-light-900 lg:bg-transparent">
+          {/* Image */}
+          <div className="grow flex lg:w-[203px] items-center justify-center w-full">
+            {children}
           </div>
         </div>
-        <div className="flex flex-row gap-x-6">
-          <Link
-            href={svgAssetPath ?? ""}
-            download
-            className="flex flex-row items-center gap-x-1"
-            target="_blank"
-            rel="noopener noreferrer"
-            locale={false}
-          >
-            <MdOutlineFileDownload />
-            <span className="text-sm">SVG</span>
-          </Link>
-          <Link
-            href={pngAssetPath ?? ""}
-            download
-            className="flex flex-row items-center gap-x-1"
-            target="_blank"
-            rel="noopener noreferrer"
-            locale={false}
-          >
-            <MdOutlineFileDownload />
-            <span className="text-sm">PNG</span>
-          </Link>
+        <div className="flex flex-col justify-between	items-start	self-stretch pb-6 px-6 gap-y-4 lg:p-0">
+          <div className="flex flex-col gap-y-1">
+            <h3 className="text-base leading-5 lg:text-lg font-bold lg:leading-6">
+              {title}
+            </h3>
+            <div className="text-sm lg:text-base text-dark-500 font-desc overflow-hidden">
+              {desc}
+            </div>
+          </div>
+          <div className="flex flex-row gap-x-6">
+            <Link
+              href={svgAssetPath ?? ""}
+              download
+              className="flex flex-row items-center gap-x-1"
+              target="_blank"
+              rel="noopener noreferrer"
+              locale={false}
+            >
+              <MdOutlineFileDownload />
+              <span className="text-sm">SVG</span>
+            </Link>
+            <Link
+              href={pngAssetPath ?? ""}
+              download
+              className="flex flex-row items-center gap-x-1"
+              target="_blank"
+              rel="noopener noreferrer"
+              locale={false}
+            >
+              <MdOutlineFileDownload />
+              <span className="text-sm">PNG</span>
+            </Link>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/pages/explore/wallets/_components/VisualAssetsSection.tsx b/src/pages/explore/wallets/_components/VisualAssetsSection.tsx
index 632268282..91d58ca6d 100644
--- a/src/pages/explore/wallets/_components/VisualAssetsSection.tsx
+++ b/src/pages/explore/wallets/_components/VisualAssetsSection.tsx
@@ -7,11 +7,16 @@ import PoweredByDeFiChainLogo from "@components/icons/assets/downloadAssets/Powe
 import DeFiChainAsset from "@components/icons/assets/downloadAssets/DeFiChainAsset";
 import BTCDFILogo from "@components/icons/assets/downloadAssets/BTCDFILogo";
 import DFI3D from "@components/icons/assets/downloadAssets/DFI3D";
+import { SecondaryButton } from "@components/commons/Buttons";
+import { useWindowDimensions } from "@hooks/useWindowDimensions";
 import { DownloadAssetsCard } from "./DownloadAssetsCard";
 
 export function VisualAssetsSection() {
   const { t } = useTranslation(["page-explore-wallets"]);
 
+  const dimension = useWindowDimensions();
+  const mobileView = dimension.width <= 800;
+
   return (
     <Container className="mt-[120px] md:mt-[96px] lg:mt-[240px] lg:mb-[240px] md:mb-[112px] mb-[72px] relative">
       <div className="flex flex-col gap-y-5">
@@ -43,62 +48,76 @@ export function VisualAssetsSection() {
         </p>
       </div>
 
-      <div className="grid md:grid-cols-2 grid-cols-1 md:gap-6 gap-5 md:mt-16 mt-8 items-center justify-center">
-        <DownloadAssetsCard
-          title={t("visualAssetsSection.entries.DFC.title")}
-          desc={t("visualAssetsSection.entries.DFC.desc")}
-          testid="visualAssetsSection.Dfc"
-          svgAssetPath="/downloads/visualAssets/dfi.svg"
-          pngAssetPath="/downloads/visualAssets/dfi.png"
-        >
-          <DeFiChainLogo
-            fill="#FFFFFF"
-            className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
-          />
-        </DownloadAssetsCard>
+      <div className="w-full flex-col flex items-center gap-y-16">
+        {/* Download cards */}
+        <div className="grid md:grid-cols-2 grid-cols-1 md:gap-6 gap-5 md:mt-16 mt-8 items-center w-full">
+          <DownloadAssetsCard
+            title={t("visualAssetsSection.entries.DFC.title")}
+            desc={t("visualAssetsSection.entries.DFC.desc")}
+            testid="visualAssetsSection.Dfc"
+            svgAssetPath="/downloads/visualAssets/dfi.svg"
+            pngAssetPath="/downloads/visualAssets/dfi.png"
+          >
+            <DeFiChainLogo
+              fill="#FFFFFF"
+              className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
+            />
+          </DownloadAssetsCard>
 
-        <DownloadAssetsCard
-          title={t("visualAssetsSection.entries.PowerDFC.title")}
-          desc={t("visualAssetsSection.entries.PowerDFC.desc")}
-          testid="visualAssetsSection.Dfc"
-          svgAssetPath="/downloads/visualAssets/dfi-powered-by.svg"
-          pngAssetPath="/downloads/visualAssets/dfi-powered-by.png"
-        >
-          <PoweredByDeFiChainLogo
-            fill="#FFFFFF"
-            className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
-          />
-        </DownloadAssetsCard>
+          <DownloadAssetsCard
+            title={t("visualAssetsSection.entries.PowerDFC.title")}
+            desc={t("visualAssetsSection.entries.PowerDFC.desc")}
+            testid="visualAssetsSection.Dfc"
+            svgAssetPath="/downloads/visualAssets/dfi-powered-by.svg"
+            pngAssetPath="/downloads/visualAssets/dfi-powered-by.png"
+          >
+            <PoweredByDeFiChainLogo
+              fill="#FFFFFF"
+              className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
+            />
+          </DownloadAssetsCard>
 
-        <DownloadAssetsCard
-          title={t("visualAssetsSection.entries.Jellyfish.title")}
-          desc={t("visualAssetsSection.entries.Jellyfish.desc")}
-          testid="visualAssetsSection.Dfc"
-          svgAssetPath="/downloads/visualAssets/dfi-logo.svg"
-          pngAssetPath="/downloads/visualAssets/dfi-logo.png"
-        >
-          <DeFiChainAsset className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-[48.75px] lg:h-full md:h-[44px]" />
-        </DownloadAssetsCard>
+          <DownloadAssetsCard
+            title={t("visualAssetsSection.entries.Jellyfish.title")}
+            desc={t("visualAssetsSection.entries.Jellyfish.desc")}
+            testid="visualAssetsSection.Dfc"
+            svgAssetPath="/downloads/visualAssets/dfi-logo.svg"
+            pngAssetPath="/downloads/visualAssets/dfi-logo.png"
+          >
+            <DeFiChainAsset className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-[48.75px] lg:h-full md:h-[44px]" />
+          </DownloadAssetsCard>
 
-        <DownloadAssetsCard
-          title={t("visualAssetsSection.entries.Built.title")}
-          desc={t("visualAssetsSection.entries.Built.desc")}
-          testid="visualAssetsSection.Dfc"
-          svgAssetPath="/downloads/visualAssets/dfi-btc-logo.svg"
-          pngAssetPath="/downloads/visualAssets/dfi-btc-logo.png"
-        >
-          <BTCDFILogo />
-        </DownloadAssetsCard>
+          <DownloadAssetsCard
+            title={t("visualAssetsSection.entries.Built.title")}
+            desc={t("visualAssetsSection.entries.Built.desc")}
+            testid="visualAssetsSection.Dfc"
+            svgAssetPath="/downloads/visualAssets/dfi-btc-logo.svg"
+            pngAssetPath="/downloads/visualAssets/dfi-btc-logo.png"
+          >
+            <BTCDFILogo />
+          </DownloadAssetsCard>
 
-        <DownloadAssetsCard
-          title={t("visualAssetsSection.entries.DFI3D.title")}
-          desc={t("visualAssetsSection.entries.DFI3D.desc")}
-          testid="visualAssetsSection.Dfc"
-          svgAssetPath="/downloads/visualAssets/dfi-3d-logo.svg"
-          pngAssetPath="/downloads/visualAssets/dfi-3d-logo.png"
-        >
-          <DFI3D className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]" />
-        </DownloadAssetsCard>
+          <DownloadAssetsCard
+            title={t("visualAssetsSection.entries.DFI3D.title")}
+            desc={t("visualAssetsSection.entries.DFI3D.desc")}
+            testid="visualAssetsSection.Dfc"
+            svgAssetPath="/downloads/visualAssets/dfi-3d-logo.svg"
+            pngAssetPath="/downloads/visualAssets/dfi-3d-logo.png"
+          >
+            <DFI3D />
+          </DownloadAssetsCard>
+        </div>
+
+        <SecondaryButton
+          text={t("visualAssetsSection.button")}
+          className="text-sm mt-9 lg:py-4 py-3 px-[62px] md:px-[56px] lg:text-base"
+          href="/downloads/visualAssets/visualAssets.zip"
+          customSize={mobileView ? 20 : 24}
+          customClass="ml-[8px]"
+          testID="metachain-roadmap-documentation"
+          hasIcon={false}
+          download
+        />
       </div>
 
       <div