From 18530798811a2ea41d650dbac102be32c503f4ab Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 19 Jul 2021 00:50:32 -0300
Subject: [PATCH] Custom text/hover colors for burn/mint addresses

---
 src/components/AddressLink.tsx          | 11 +++++++++--
 src/components/AddressOrENSName.tsx     | 14 ++++++++++++--
 src/components/DecoratedAddressLink.tsx |  7 ++++---
 src/components/ENSNameLink.tsx          | 11 +++++++++--
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/AddressLink.tsx b/src/components/AddressLink.tsx
index 36acac6..abddf99 100644
--- a/src/components/AddressLink.tsx
+++ b/src/components/AddressLink.tsx
@@ -4,11 +4,18 @@ import { NavLink } from "react-router-dom";
 type AddressLinkProps = {
   address: string;
   text?: string;
+  dontOverrideColors?: boolean;
 };
 
-const AddressLink: React.FC<AddressLinkProps> = ({ address, text }) => (
+const AddressLink: React.FC<AddressLinkProps> = ({
+  address,
+  text,
+  dontOverrideColors,
+}) => (
   <NavLink
-    className="text-link-blue hover:text-link-blue-hover font-address truncate"
+    className={`${
+      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+    } font-address truncate`}
     to={`/address/${address}`}
   >
     <p className="truncate" title={text ?? address}>
diff --git a/src/components/AddressOrENSName.tsx b/src/components/AddressOrENSName.tsx
index 6e871aa..9cb2f9e 100644
--- a/src/components/AddressOrENSName.tsx
+++ b/src/components/AddressOrENSName.tsx
@@ -9,6 +9,7 @@ type AddressOrENSNameProps = {
   ensName?: string;
   selectedAddress?: string;
   text?: string;
+  dontOverrideColors?: boolean;
 };
 
 const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
@@ -16,6 +17,7 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
   ensName,
   selectedAddress,
   text,
+  dontOverrideColors,
 }) => (
   <>
     {address === selectedAddress ? (
@@ -29,9 +31,17 @@ const AddressOrENSName: React.FC<AddressOrENSNameProps> = ({
     ) : (
       <>
         {ensName ? (
-          <ENSNameLink name={ensName} address={address} />
+          <ENSNameLink
+            name={ensName}
+            address={address}
+            dontOverrideColors={dontOverrideColors}
+          />
         ) : (
-          <AddressLink address={address} text={text} />
+          <AddressLink
+            address={address}
+            text={text}
+            dontOverrideColors={dontOverrideColors}
+          />
         )}
       </>
     )}
diff --git a/src/components/DecoratedAddressLink.tsx b/src/components/DecoratedAddressLink.tsx
index 7f897b2..2579848 100644
--- a/src/components/DecoratedAddressLink.tsx
+++ b/src/components/DecoratedAddressLink.tsx
@@ -30,9 +30,9 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
 
   return (
     <div
-      className={`flex items-baseline space-x-1 ${mint ? "italic" : ""} ${
-        burn ? "line-through" : ""
-      }`}
+      className={`flex items-baseline space-x-1 ${
+        mint ? "italic text-green-500 hover:text-green-700" : ""
+      } ${burn ? "line-through text-orange-500 hover:text-orange-700" : ""}`}
     >
       {mint && (
         <span className="text-green-500" title="Mint address">
@@ -54,6 +54,7 @@ const DecoratedAddresssLink: React.FC<DecoratedAddressLinkProps> = ({
         ensName={ensName}
         selectedAddress={selectedAddress}
         text={text}
+        dontOverrideColors={mint || burn}
       />
     </div>
   );
diff --git a/src/components/ENSNameLink.tsx b/src/components/ENSNameLink.tsx
index a111139..ae8f6f8 100644
--- a/src/components/ENSNameLink.tsx
+++ b/src/components/ENSNameLink.tsx
@@ -5,11 +5,18 @@ import ENSLogo from "./ensLogo.svg";
 type ENSNameLinkProps = {
   name: string;
   address: string;
+  dontOverrideColors?: boolean;
 };
 
-const ENSNameLink: React.FC<ENSNameLinkProps> = ({ name, address }) => (
+const ENSNameLink: React.FC<ENSNameLinkProps> = ({
+  name,
+  address,
+  dontOverrideColors,
+}) => (
   <NavLink
-    className="flex items-baseline space-x-1 font-sans text-link-blue hover:text-link-blue-hover truncate"
+    className={`flex items-baseline space-x-1 font-sans ${
+      dontOverrideColors ? "" : "text-link-blue hover:text-link-blue-hover"
+    } truncate`}
     to={`/address/${name}`}
     title={`${name}: ${address}`}
   >