From 60774d4e982418c881dc0c6059b83ee8e7e711bc Mon Sep 17 00:00:00 2001
From: Chloe <44501120+chloezxyy@users.noreply.github.com>
Date: Wed, 7 Feb 2024 08:57:36 +0800
Subject: [PATCH] fix(ui-ux): visual assets card section (#735)

* fix(u9i-ux): caps on visual assets section

* fix(ui-ux): adjust download asset on card

* update translations de and fr
---
 public/locales/de/page-explore-wallets.json   | 28 +++++++++++++++++++
 .../locales/en-US/page-explore-wallets.json   |  2 +-
 public/locales/fr/page-explore-wallets.json   | 28 +++++++++++++++++++
 .../assets/downloadAssets/BTCDFILogo.tsx      |  7 ++++-
 .../icons/assets/downloadAssets/DFI3D.tsx     |  5 +++-
 .../_components/VisualAssetsSection.tsx       | 11 +++-----
 6 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/public/locales/de/page-explore-wallets.json b/public/locales/de/page-explore-wallets.json
index 19e9715b8..006ed613e 100644
--- a/public/locales/de/page-explore-wallets.json
+++ b/public/locales/de/page-explore-wallets.json
@@ -30,6 +30,34 @@
       }
     }
   },
+  "visualAssetsSection": {
+    "sectionTitle": "OPTIMIERE DENINE DEFI-BLOCKCHAIN-ENTWICKLUNG",
+    "title": "Visual Assets",
+    "subtitle": "ie Medieninhalte stehen unter der CCO-Lizenz. \"Keine Rechte vorbehalten\"",
+    "entries": {
+      "DFC": {
+        "title": "DeFiChain logo",
+        "desc": "The official and default logo"
+      },
+      "PowerDFC": {
+        "title": "Unterstützt von DeFiChain",
+        "desc": "Nützlich für Projektarbeiten"
+      },
+      "Jellyfish": {
+        "title": "Das DeFiChain-Quallen-Logo",
+        "desc": "Nützlich, wenn der Platz knapp ist"
+      },
+      "Built": {
+        "title": "Aufgebaut auf Bitcoin",
+        "desc": "3D-Medieninhalte für Illustrationszwecke"
+      },
+      "DFI3D": {
+        "title": "3D-DFI-Coin",
+        "desc": "3D-Medieninhalt für Illustrationszwecke"
+      }
+    },
+    "button": "Herunterladen der Dateien in gezippter Form"
+  },
   "advanceUseSection": {
     "sectionTitle": "FÜR FORTGESCHRITTENEN EINSATZ GEEIGNET",
     "title": "Erweiterte Nutzung von DeFiChain",
diff --git a/public/locales/en-US/page-explore-wallets.json b/public/locales/en-US/page-explore-wallets.json
index 2a6c9935f..922b5b1e7 100644
--- a/public/locales/en-US/page-explore-wallets.json
+++ b/public/locales/en-US/page-explore-wallets.json
@@ -31,7 +31,7 @@
     }
   },
   "visualAssetsSection": {
-    "sectionTitle": "Supercharge your DeFi Blockchain development",
+    "sectionTitle": "SUPERCHARGE YOUR DEFI BLOCKCHAIN DEVELOPMENT",
     "title": "Visual Assets",
     "subtitle": "The media assets are released under CCO license. \"No Rights Reserved\"",
     "entries": {
diff --git a/public/locales/fr/page-explore-wallets.json b/public/locales/fr/page-explore-wallets.json
index b70f24450..f78356505 100644
--- a/public/locales/fr/page-explore-wallets.json
+++ b/public/locales/fr/page-explore-wallets.json
@@ -30,6 +30,34 @@
       }
     }
   },
+  "visualAssetsSection": {
+    "sectionTitle": "BOOSTEZ VOTRE DÉVELOPPEMENT DE LA BLOCKCHAIN DANS LE DOMAINE DEFI",
+    "title": "Ressources visuelles",
+    "subtitle": "es ressources médiatiques sont diffusées sous licence CCO. \"Aucun droit réservé\"",
+    "entries": {
+      "DFC": {
+        "title": "Logo DeFiChain",
+        "desc": "Le logo officiel et par défaut"
+      },
+      "PowerDFC": {
+        "title": "Propulsé par DeFiChain",
+        "desc": "Utile pour les projets"
+      },
+      "Jellyfish": {
+        "title": "Le logo méduse de DeFiChain",
+        "desc": "Utile lorsque l'espace est limité"
+      },
+      "Built": {
+        "title": "onstruit sur Bitcoin",
+        "desc": "Ressources 3D à des fins d'illustration"
+      },
+      "DFI3D": {
+        "title": "DFI 3D Coin",
+        "desc": "3D asset for illustration purposes"
+      }
+    },
+    "button": "Téléchargez les fichiers .zippés"
+  },
   "advanceUseSection": {
     "sectionTitle": "ADAPTÉS À UNE UTILISATION AVANCÉE",
     "title": "Utilisation avancée de DeFiChain",
diff --git a/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx b/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx
index 176329d09..d55a865e6 100644
--- a/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx
+++ b/src/components/icons/assets/downloadAssets/BTCDFILogo.tsx
@@ -1,4 +1,8 @@
-export default function BTCDFILogo(): JSX.Element {
+import { SVGProps } from "react";
+
+export default function BTCDFILogo(
+  props: SVGProps<SVGSVGElement>,
+): JSX.Element {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -6,6 +10,7 @@ export default function BTCDFILogo(): JSX.Element {
       height="51"
       viewBox="0 0 71 51"
       fill="none"
+      {...props}
     >
       <path
         fillRule="evenodd"
diff --git a/src/components/icons/assets/downloadAssets/DFI3D.tsx b/src/components/icons/assets/downloadAssets/DFI3D.tsx
index 565314c58..5d080d699 100644
--- a/src/components/icons/assets/downloadAssets/DFI3D.tsx
+++ b/src/components/icons/assets/downloadAssets/DFI3D.tsx
@@ -1,4 +1,6 @@
-export default function DFI3D(): JSX.Element {
+import { SVGProps } from "react";
+
+export default function DFI3D(props: SVGProps<SVGSVGElement>): JSX.Element {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -6,6 +8,7 @@ export default function DFI3D(): JSX.Element {
       height="51"
       viewBox="0 0 63 51"
       fill="none"
+      {...props}
     >
       <path
         d="M14.8834 4.31469C15.8792 4.03475 16.8886 3.80586 17.9078 3.62891M32.8849 6.17861C34.2275 6.44787 35.5545 6.78979 36.8601 7.20286C49.455 11.1829 57.6343 20.8472 55.1293 28.7901C54.0323 32.2653 51.074 34.8348 47.0364 36.2931"
diff --git a/src/pages/explore/wallets/_components/VisualAssetsSection.tsx b/src/pages/explore/wallets/_components/VisualAssetsSection.tsx
index 91d58ca6d..b6d0cb646 100644
--- a/src/pages/explore/wallets/_components/VisualAssetsSection.tsx
+++ b/src/pages/explore/wallets/_components/VisualAssetsSection.tsx
@@ -60,7 +60,7 @@ export function VisualAssetsSection() {
           >
             <DeFiChainLogo
               fill="#FFFFFF"
-              className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]"
+              className="w-[159px] h-9 lg:block lg:h-full md:h-[44px]"
             />
           </DownloadAssetsCard>
 
@@ -71,10 +71,7 @@ export function VisualAssetsSection() {
             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]"
-            />
+            <PoweredByDeFiChainLogo className="w-[159px] h-9 md:w-[194.33px] lg:block lg:w-40 lg:h-full md:h-[44px]" />
           </DownloadAssetsCard>
 
           <DownloadAssetsCard
@@ -94,7 +91,7 @@ export function VisualAssetsSection() {
             svgAssetPath="/downloads/visualAssets/dfi-btc-logo.svg"
             pngAssetPath="/downloads/visualAssets/dfi-btc-logo.png"
           >
-            <BTCDFILogo />
+            <BTCDFILogo className="w-[159px] h-9 md:w-[68.703px] lg:block lg:h-full md:h-[48.754px]" />
           </DownloadAssetsCard>
 
           <DownloadAssetsCard
@@ -104,7 +101,7 @@ export function VisualAssetsSection() {
             svgAssetPath="/downloads/visualAssets/dfi-3d-logo.svg"
             pngAssetPath="/downloads/visualAssets/dfi-3d-logo.png"
           >
-            <DFI3D />
+            <DFI3D className="w-[61.391px] h-9 lg:block lg:h-full md:h-[44px]" />
           </DownloadAssetsCard>
         </div>