fix: search bar width, font-mono inputs, dark mode placeholder color (#61)

Author: pthmas

frontend/src/components/ContractTab.tsx

@@ -11,9 +11,9 @@ import {
 } from '../constants/contractVerification';
 
 const themedInputClassName =
-  'w-full bg-dark-700/80 backdrop-blur border border-dark-500 px-3 py-2 text-sm text-fg placeholder-gray-500 rounded-xl shadow-md shadow-black/20 focus:outline-none focus:border-accent-primary focus:ring-2 focus:ring-accent-primary/40 transition';
+  'w-full bg-dark-700/80 backdrop-blur border border-dark-500 px-3 py-2 text-sm text-fg placeholder-gray-500 rounded-xl shadow-md shadow-black/20 focus:outline-none focus:border-accent-primary focus:ring-2 focus:ring-accent-primary/40 transition font-mono';
 
-const themedMonoInputClassName = `${themedInputClassName} font-mono`;
+const themedMonoInputClassName = themedInputClassName;
 
 interface Props {
   address: string;

frontend/src/components/Layout.tsx

@@ -211,7 +211,7 @@ export default function Layout() {
       {!isHome && (
         <div className="bg-dark-800/40">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-center">
-            <div className="w-full md:w-96">
+            <div className="w-full md:w-[560px]">
               <SearchBar />
             </div>
           </div>

frontend/src/components/SearchBar.tsx

@@ -191,8 +191,8 @@ export default function SearchBar() {
         value={query}
         onChange={(e) => setQuery(e.target.value)}
         onKeyDown={onKeyDown}
-        placeholder="Search Address / Tx Hash / Block / Token / NFT"
-        className="search-input w-full bg-dark-700/80 backdrop-blur border border-dark-500 px-4 py-2 pl-10 text-sm rounded-full shadow-md shadow-black/20 focus:outline-none focus:border-accent-primary focus:ring-2 focus:ring-accent-primary/40 transition"
+        placeholder="Search Address/Tx Hash/Block/Token/NFT"
+        className="search-input w-full bg-dark-700/80 backdrop-blur border border-dark-500 px-4 py-2 pl-10 text-sm rounded-full shadow-md shadow-black/20 focus:outline-none focus:border-accent-primary focus:ring-2 focus:ring-accent-primary/40 transition font-mono"
       />
       <svg
         className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500"

frontend/src/index.css

@@ -66,6 +66,12 @@
   :root:not([data-theme='light']) .text-gray-700 {
     color: rgb(248 250 252 / var(--tw-text-opacity, 1));
   }
+
+  /* Match form input placeholder brightness to search bar in dark mode. */
+  :root:not([data-theme='light']) input::placeholder,
+  :root:not([data-theme='light']) textarea::placeholder {
+    color: rgb(255 255 255 / 0.72);
+  }
 }
 
 @layer components {