change interactive elements to button

client/src/components/molecules/NetworkSwitcher.module.scss

@@ -6,16 +6,30 @@
     font-size: $font-size-mini;
 }
 
-.networkListWrapper em {
+.networkSwitchButton {
+    color: #fff;
+}
+
+.networkSwitchButton {
     display: inline-block;
     border: 1px solid $brand-grey-lighter;
     padding: 4px;
     border-radius: $border-radius;
     margin: 0 4px;
     user-select: none;
+    cursor: pointer;
 }
 
-.networkListWrapper em:after {
+.networkSwitchButton:active {
+    outline: none;
+}
+
+.networkSwitchButton:focus {
+    outline: none;
+    //border: 1px solid #000;
+}
+
+.networkSwitchButton:after {
     content: '';
     display: inline-block;
     width: 0;
@@ -25,6 +39,16 @@
     border-top: 4px solid $brand-grey-light;
 }
 
+.networkSwitchButton span {
+    color: $brand-grey-light;
+}
+
+.networkSwitchButton span:after {
+    content: '';
+    border-right: 1px solid $brand-grey-lighter;
+    margin: 0 4px;
+}
+
 .networkList {
     position: absolute;
     border: 1px solid $brand-grey-lighter;
@@ -36,17 +60,6 @@
     width: 100%;
 }
 
-.networkListWrapper em {
-    display: block;
-    border: 1px solid $brand-grey-lighter;
-}
-
-.networkListWrapper em span:after {
-    content: '';
-    border-right: 1px solid $brand-grey-lighter;
-    margin: 0 4px;
-}
-
 .networkListWrapper.on .networkList {
     display: block;
 }
@@ -58,14 +71,16 @@
     padding: 4px;
 }
 
-.networkList li span {
+.listButton {
+    display: block;
     text-transform: capitalize;
+    border: none;
+    width: inherit;
 }
 
 .networkList li:hover {
     color: $brand-violet;
     font-size: $font-size-mini;
-    background-color: $brand-grey-lighter;
 }
 
 .networkList li:before {

client/src/components/molecules/NetworkSwitcher.tsx

@@ -27,10 +27,10 @@ export function NetworkSwitcher() {
     useEffect(() => {
         // Handle click outside to collapse Network switcher dropdown
         // add listener when mounted
-        document.addEventListener('mousedown', handleTogle)
+        document.addEventListener('mousedown', handleToggle)
         // return function when unmounted
         return () => {
-            document.removeEventListener('mousedown', handleTogle)
+            document.removeEventListener('mousedown', handleToggle)
         }
     }, [])
     /*  
@@ -41,7 +41,7 @@ export function NetworkSwitcher() {
     }, []) 
     */
 
-    const handleTogle = (e: any) => {
+    const handleToggle = (e: any) => {
         const isClickedInside = node.current.contains(e.target)
         setIsToggled(isClickedInside)
     }
@@ -64,21 +64,28 @@ export function NetworkSwitcher() {
                 isToggled ? styles.on : ''
             }`}
         >
-            <em onClick={e => handleTogle(e)}>
+            <button
+                className={styles.networkSwitchButton}
+                onClick={e => handleToggle(e)}
+            >
                 <span>Change Network</span>
-            </em>
+            </button>
             <ul className={styles.networkList}>
                 {Object.keys(CONNECTIONS).map((networkName, i) => (
                     <li
                         key={i}
-                        onClick={() => switchNetwork(networkName)}
                         className={
                             network.toUpperCase() === networkName.toUpperCase()
                                 ? styles.selected
                                 : ''
                         }
                     >
-                        <span>{networkName}</span>
+                        <button
+                            className={styles.listButton}
+                            onClick={() => switchNetwork(networkName)}
+                        >
+                            {networkName}
+                        </button>
                     </li>
                 ))}
             </ul>