From 312ae58808dc1ddd99aac2e32c8da9da25844a1a Mon Sep 17 00:00:00 2001
From: drew <drew@users.noreply.github.com>
Date: Sat, 7 Feb 2026 08:32:03 -0700
Subject: [PATCH 1/2] fix: dark mode visibility across all components

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 components/DiscordBanner.tsx   |  2 +-
 components/DiscordButton.tsx   |  2 +-
 components/ExpandableImage.tsx |  6 +++---
 components/HelpDiscordBtn.tsx  |  2 +-
 components/TokenContracts.tsx  | 10 +++++-----
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/DiscordBanner.tsx b/components/DiscordBanner.tsx
index 18e4dd17..664997b8 100644
--- a/components/DiscordBanner.tsx
+++ b/components/DiscordBanner.tsx
@@ -18,7 +18,7 @@ const DiscordBanner = () => {
           </svg>
           <div>
             <h2 className="text-lg font-semibold text-white">Need Help?</h2>
-            <p className="text-sm max-w-72 text-gray-400">
+            <p className="text-sm max-w-72 text-gray-400 dark:text-gray-300">
               Ask questions, get to know the project and community in Discord.
             </p>
           </div>
diff --git a/components/DiscordButton.tsx b/components/DiscordButton.tsx
index 62a30a91..bf834ff3 100644
--- a/components/DiscordButton.tsx
+++ b/components/DiscordButton.tsx
@@ -4,7 +4,7 @@ const DiscordButton: React.FC = () => {
   return (
     <a
       href="https://discord.com/invite/cv8EfJu3Tn"
-      className="flex items-center px-6 py-2 text-sm font-medium text-gray-800 bg-white border border-gray-300 rounded-lg shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+      className="flex items-center px-6 py-2 text-sm font-medium text-gray-800 bg-white border border-gray-300 rounded-lg shadow-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700"
       aria-label="Join Discord"
     >
       <div className="flex items-center justify-center">
diff --git a/components/ExpandableImage.tsx b/components/ExpandableImage.tsx
index af55ec74..6b37baca 100644
--- a/components/ExpandableImage.tsx
+++ b/components/ExpandableImage.tsx
@@ -124,21 +124,21 @@ const ExpandableImage: React.FC<ExpandableImageProps> = ({
               <div className="absolute flex space-x-2 bottom-4 right-4">
                 <button
                   onClick={handleZoomIn}
-                  className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75"
+                  className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-75"
                   aria-label="Zoom in"
                 >
                   <FiZoomIn size={24} />
                 </button>
                 <button
                   onClick={handleZoomOut}
-                  className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75"
+                  className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-75"
                   aria-label="Zoom out"
                 >
                   <FiZoomOut size={24} />
                 </button>
                 <button
                   onClick={resetZoom}
-                  className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75"
+                  className="p-2 transition-colors bg-white bg-opacity-50 rounded-full hover:bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-75"
                   aria-label="Reset zoom"
                 >
                   <FiRefreshCw size={24} />
diff --git a/components/HelpDiscordBtn.tsx b/components/HelpDiscordBtn.tsx
index 6b413a49..e89c2299 100644
--- a/components/HelpDiscordBtn.tsx
+++ b/components/HelpDiscordBtn.tsx
@@ -4,7 +4,7 @@ const HelpDiscordBtn: React.FC<{ className?: string }> = ({ className }) => {
   return (
     <a href="https://discord.com/invite/cv8EfJu3Tn" className={className}>
       <div className="flex items-center justify-center">
-        <button className="flex items-center px-3 py-1 text-sm font-medium text-gray-800 bg-white border border-gray-300 rounded-md shadow-md h-7 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+        <button className="flex items-center px-3 py-1 text-sm font-medium text-gray-800 bg-white border border-gray-300 rounded-md shadow-md h-7 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-800 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-700">
           <svg
             className="w-6 h-5 mr-0 lg:mr-2"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/components/TokenContracts.tsx b/components/TokenContracts.tsx
index 564d7637..24f41e65 100644
--- a/components/TokenContracts.tsx
+++ b/components/TokenContracts.tsx
@@ -850,7 +850,7 @@ const TokenRow = memo(({ token }: { token: Token }) => (
           fetchPriority="high"
         />
         <span className="font-medium">
-          {token.name} <span className="text-gray-500">({token.symbol})</span>
+          {token.name} <span className="text-gray-500 dark:text-gray-400">({token.symbol})</span>
         </span>
       </div>
     </TableCell>
@@ -942,15 +942,15 @@ export const TokenContracts = () => {
           type="text"
           placeholder="Search tokens..."
           onChange={handleSearch}
-          className="flex-1 max-w-sm px-4 py-2 bg-white border border-gray-200 rounded-lg dark:border-gray-800 dark:bg-gray-900"
+          className="flex-1 max-w-sm px-4 py-2 bg-white border border-gray-200 rounded-lg dark:border-gray-800 dark:bg-gray-900 dark:text-white dark:placeholder-gray-400"
         />
         <div className="relative">
           <select
             value={selectedChain}
             onChange={(e) => setSelectedChain(e.target.value)}
-            className="h-10 w-[180px] appearance-none rounded-lg border border-gray-200 bg-white pl-10 pr-10 text-sm 
+            className="h-10 w-[180px] appearance-none rounded-lg border border-gray-200 bg-white pl-10 pr-10 text-sm
             hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500
-            dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700"
+            dark:border-gray-800 dark:bg-gray-900 dark:hover:border-gray-700 dark:text-white"
           >
             <option value="">All Chains</option>
             {CHAIN_OPTIONS.map((chain) => (
@@ -976,7 +976,7 @@ export const TokenContracts = () => {
               />
             ) : (
               <svg
-                className="w-4 h-4 text-gray-500"
+                className="w-4 h-4 text-gray-500 dark:text-gray-400"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"

From e37771dba8244bf8158e3f8b891721d3f4d6399f Mon Sep 17 00:00:00 2001
From: Drew Stone <drew@tangle.tools>
Date: Sat, 7 Feb 2026 09:13:52 -0700
Subject: [PATCH 2/2] style: fix prettier formatting

---
 components/TokenContracts.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/TokenContracts.tsx b/components/TokenContracts.tsx
index 24f41e65..1e578b9b 100644
--- a/components/TokenContracts.tsx
+++ b/components/TokenContracts.tsx
@@ -850,7 +850,10 @@ const TokenRow = memo(({ token }: { token: Token }) => (
           fetchPriority="high"
         />
         <span className="font-medium">
-          {token.name} <span className="text-gray-500 dark:text-gray-400">({token.symbol})</span>
+          {token.name}{" "}
+          <span className="text-gray-500 dark:text-gray-400">
+            ({token.symbol})
+          </span>
         </span>
       </div>
     </TableCell>