From bdce59722a35994dec13c737b953bd3713903315 Mon Sep 17 00:00:00 2001
From: DanGould <d@ngould.dev>
Date: Mon, 22 Jul 2024 13:29:26 -0400
Subject: [PATCH] Fix WalletLogo in UsedBy

---
 src/components/UsedBy/index.tsx         | 58 ++++++-------------------
 src/components/UsedBy/styles.module.css |  2 +-
 2 files changed, 15 insertions(+), 45 deletions(-)

diff --git a/src/components/UsedBy/index.tsx b/src/components/UsedBy/index.tsx
index 2e4a22c..5e4d0ae 100644
--- a/src/components/UsedBy/index.tsx
+++ b/src/components/UsedBy/index.tsx
@@ -1,61 +1,31 @@
 import Marquee from "react-fast-marquee";
-import "./styles.module.css";
+import styles from"./styles.module.css";
+
+const WalletLogo = ({ href, src, alt }) => (
+  <a href={href}>
+    <img className={styles.logo} src={src} alt={alt} />
+  </a>
+);
 
 export default function WalletsUsingPayjoin() {
   return (
     <section className="flex flex-col justify-center gap-32 min-h-screen mb-40 w-full">
       <div className="flex flex-col items-center gap-8">
         <h1 className="text-6xl">Wallets Using Payjoin</h1>
- 
       </div>
       <Marquee
         className="bg-tertiary w-32 h-[12vh]"
         gradient={true}
         gradientColor="#46192b"
       >
-        <a href="https://www.mutinywallet.com/">
-          <img
-            src="/img/mutiny.svg"
-            alt="Mutinywallet Logo"
-          />
-        </a>
-        <a href="https://bitmask.app">
-          <img
-            src="/img/bitmask.svg"
-            alt="bitmasklogo"
-          />
-        </a>
-        <a href="https://bluewallet.io">
-          <img src="/img/bluewallet.svg" alt="bluewallet logo" />
-        </a>
-        <a href="https://btcpayserver.org">
-          <img src="/img/btcpay.svg" alt="btcpayserver logo" />
-        </a>
-        <a href="https://github.com/JoinMarket-Org/joinmarket-clientserver">
-          <img
-            src="/img/joinmarket.png"
-            alt="joinmarket logo"
-          />
-        </a>
-        <a href="https://sparrowwallet.com">
-          <img
-            src="/img/sparrow.png"
-            alt="sparrow logo"
-          />
-        </a>
-        <a href="https://wasabiwallet.io">
-          <img src="/img/wasabi.svg" alt="wasabi logo" />
-        </a>
+        <WalletLogo href="https://www.mutinywallet.com/" src="/img/mutiny.svg" alt="Mutinywallet Logo" />
+        <WalletLogo href="https://bitmask.app" src="/img/bitmask.svg" alt="bitmasklogo" />
+        <WalletLogo href="https://bluewallet.io" src="/img/bluewallet.svg" alt="bluewallet logo" />
+        <WalletLogo href="https://btcpayserver.org" src="/img/btcpay.svg" alt="btcpayserver logo" />
+        <WalletLogo href="https://github.com/JoinMarket-Org/joinmarket-clientserver" src="/img/joinmarket.png" alt="joinmarket logo" />
+        <WalletLogo href="https://sparrowwallet.com" src="/img/sparrow.png" alt="sparrow logo" />
+        <WalletLogo href="https://wasabiwallet.io" src="/img/wasabi.svg" alt="wasabi logo" />
       </Marquee>
-      {/* <div>
-        <a href="https://payjoindevkit.org/" target="_blank">
-          <button className="font-extrabold  bg-gradient-to-r bg-secondary border-white border-2 border-solid shadow-[0px_0px_10px_10px_rgba(0,0,0,0.3)] shadow-primary hover:scale-105 transition-all p-8 rounded-lg cursor-pointer text-5xl ">
-            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-white">
-              Integrate Payjoin
-            </span>
-          </button>
-        </a>
-      </div> */}
       <div className="flex flex-col gap-2 text-2xl">
         <span>If you are a developer seeking to enhance your wallet with Payjoin, check out</span>
         <a className="font-bold" target="_blank" href="https://payjoindevkit.org">Payjoin Dev kit</a>
diff --git a/src/components/UsedBy/styles.module.css b/src/components/UsedBy/styles.module.css
index fdf935f..2ef24dd 100644
--- a/src/components/UsedBy/styles.module.css
+++ b/src/components/UsedBy/styles.module.css
@@ -1,4 +1,4 @@
-img {
+.logo {
   @apply mx-10;
   height: 8vh;
 }