Custom text/hover colors for burn/mint addresses

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}>

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}
+          />
         )}
       </>
     )}

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>
   );

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}`}
   >