fix: dark mode visibility across all components

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>

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

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

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"

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">({token.symbol})</span>
+          {token.name}{" "}
+          <span className="text-gray-500 dark:text-gray-400">
+            ({token.symbol})
+          </span>
         </span>
       </div>
     </TableCell>
@@ -942,15 +945,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 +979,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"