styling update

Author: dev-dist

src/components/ChainSelector/ChainSelector.module.css

@@ -6,6 +6,17 @@
   margin: 0;
 }
 
+/* Label for the dropdown */
+.label {
+  display: block;
+  font-size: 0.875rem;
+  font-style: italic;
+  font-weight: 500;
+  color: var(--gray-500);
+  margin-bottom: 0.5rem;
+  cursor: pointer;
+}
+
 /* Prevent any pseudo-elements from leaking out */
 .container *,
 .container *::before,
@@ -26,8 +37,7 @@
   align-items: center;
   gap: 0.5rem;
   padding: 1rem 1rem;
-  background: white;
-  border: 1px solid var(--color-border-light);
+  background: var(--gray-100);
   cursor: pointer;
   transition: all 0.2s ease;
   position: relative;
@@ -38,7 +48,7 @@
 }
 
 .trigger:hover {
-  background-color: var(--gray-50);
+  background-color: var(--gray-200);
 }
 
 .trigger:focus {

src/components/ChainSelector/ChainSelector.tsx

@@ -141,8 +141,12 @@ export function ChainSelector({
 
   return (
     <div className={styles.container} ref={containerRef}>
+      <label className={styles.label} htmlFor="chain-selector-trigger">
+        Select blockchain:
+      </label>
       <div className={styles.controls}>
         <button
+          id="chain-selector-trigger"
           className={styles.trigger}
           onClick={toggleDropdown}
           aria-expanded={isOpen}