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

Author: chloezxyy

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",

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": {

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",

src/components/icons/assets/downloadAssets/BTCDFILogo.tsx

@@ -1,11 +1,16 @@
-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"
       width="71"
       height="51"
       viewBox="0 0 71 51"
       fill="none"
+      {...props}
     >
       <path
         fillRule="evenodd"

src/components/icons/assets/downloadAssets/DFI3D.tsx

@@ -1,11 +1,14 @@
-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"
       width="63"
       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"

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>