ui amends

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

@@ -1,6 +1,6 @@
 @import '../../styles/variables';
 
-$localSpacer: $spacer / 6;
+$localSpacer: $spacer / 8;
 
 .networkListWrapper {
     position: relative;
@@ -13,15 +13,20 @@ $localSpacer: $spacer / 6;
 }
 
 .networkSwitchButton {
+    all: unset;
+    padding: $localSpacer $localSpacer * 2;
     display: inline-block;
     border: 1px solid $brand-grey-lighter;
-    padding: $localSpacer;
     border-radius: $border-radius;
     margin: 0 $localSpacer;
     user-select: none;
     cursor: pointer;
 }
 
+.networkListWrapper.on .networkSwitchButton {
+    border-radius: $border-radius $border-radius 0 0;
+}
+
 .networkSwitchButton:active {
     outline: none;
 }
@@ -31,35 +36,44 @@ $localSpacer: $spacer / 6;
     //border: 1px solid #000;
 }
 
-.networkSwitchButton:after {
+.networkSwitchButton i {
-    content: '';
     display: inline-block;
     width: 0;
     height: 0;
     border: 4px solid transparent;
     border-bottom: none;
     border-top: 4px solid $brand-grey-light;
+    position: relative;
+}
+
+.networkSwitchButton i:before {
+    content: '';
+    border-left: 1px solid $brand-grey-lighter;
+    height: 100%;
+    top: -8px;
+    left: 0 - $spacer / 3; // simulate padding
+    position: absolute;
+    height: 12px;
 }
 
 .networkSwitchButton span {
+    display: inline-block;
     color: $brand-grey-light;
-}
+    text-transform: capitalize;
-
+    min-width: 80px;
-.networkSwitchButton span:after {
+    text-align: left;
-    content: '';
-    border-right: 1px solid $brand-grey-lighter;
-    margin: 0 $localSpacer;
 }
 
 .networkList {
     position: absolute;
+    border-radius: 0 0 $border-radius $border-radius;
     border: 1px solid $brand-grey-lighter;
-    border-radius: $border-radius;
+    border-top: none;
-    max-width: 200px;
     display: none;
     margin: 0;
     padding: 0;
-    width: 100%;
+    left: $localSpacer;
+    right: $localSpacer;
 }
 
 .networkListWrapper.on .networkList {
@@ -69,27 +83,36 @@ $localSpacer: $spacer / 6;
 .networkList li {
     cursor: pointer;
     font-size: $font-size-mini;
-    text-align: left;
+    padding: $localSpacer / 2;
-    padding: $localSpacer;
 }
 
 .listButton {
+    all: unset;
+    color: $brand-black;
+    text-align: left;
     display: block;
     text-transform: capitalize;
     border: none;
-    width: inherit;
+    width: 100%;
+    background: none;
+    cursor: pointer;
+    padding: $localSpacer $localSpacer * 2;
+}
+
+.selected .listButton,
+.networkList li:hover {
+    font-weight: $font-weight-bold;
 }
 
 .networkList li:hover {
-    color: $brand-violet;
+    background-color: $brand-grey-lighter;
-    font-size: $font-size-mini;
+}
+
+.listButton:active,
+.listButton:focus {
+    outline: none;
 }
 
 .networkList li:before {
     display: none;
 }
-
-.selected {
-    color: $brand-violet;
-    font-weight: $font-weight-bold;
-}

client/src/components/molecules/NetworkSwitcher.tsx

@@ -24,27 +24,22 @@ export function NetworkSwitcher() {
     const node: any = useRef()
     const [isToggled, setIsToggled] = useState(false)
 
+    const handleToggle = (e: any) => {
+        if (e.which === 1) {
+            const isClickedInside = node.current.contains(e.target)
+            setIsToggled(isClickedInside)
+        }
+    }
+
     useEffect(() => {
         // Handle click outside to collapse Network switcher dropdown
-        // add listener when mounted
+        // listener when mounted
         document.addEventListener('mousedown', handleToggle)
         // return function when unmounted
         return () => {
             document.removeEventListener('mousedown', handleToggle)
         }
-    }, [])
+    }, [handleToggle])
-    /*  
-    useEffect(() => {
-        if (networkUrlParam !== '') {
-            switchNetwork(networkUrlParam)
-        }
-    }, []) 
-    */
-
-    const handleToggle = (e: any) => {
-        const isClickedInside = node.current.contains(e.target)
-        setIsToggled(isClickedInside)
-    }
 
     const { network, isBurner } = useContext(User)
 
@@ -55,6 +50,7 @@ export function NetworkSwitcher() {
         window.location.href = `${window.location.origin}?network=${networkName}`
         //userContext.switchNetwork(networkName, getNetworkConfig(networkName))
         setIsToggled(false) // for the case without force page refresh
+        return
     }
 
     return !isBurner ? null : (
@@ -68,26 +64,25 @@ export function NetworkSwitcher() {
                 className={styles.networkSwitchButton}
                 onClick={e => handleToggle(e)}
             >
-                <span>Change Network</span>
+                <span>{network ? network : 'fetching ...'}</span>
+                <i />
             </button>
             <ul className={styles.networkList}>
-                {Object.keys(CONNECTIONS).map((networkName, i) => (
+                {Object.keys(CONNECTIONS)
-                    <li
+                    .filter(
-                        key={networkName}
+                        networkName =>
-                        className={
+                            network.toUpperCase() !== networkName.toUpperCase()
-                            network.toUpperCase() === networkName.toUpperCase()
+                    )
-                                ? styles.selected
+                    .map((networkName, i) => (
-                                : ''
+                        <li key={networkName}>
-                        }
+                            <button
-                    >
+                                className={styles.listButton}
-                        <button
+                                onClick={() => switchNetwork(networkName)}
-                            className={styles.listButton}
+                            >
-                            onClick={() => switchNetwork(networkName)}
+                                {networkName}
-                        >
+                            </button>
-                            {networkName}
+                        </li>
-                        </button>
+                    ))}
-                    </li>
-                ))}
             </ul>
         </div>
     )

client/src/components/molecules/VersionNumbers/index.tsx

@@ -158,7 +158,6 @@ export default class VersionNumbers extends PureComponent<
                             href="/about"
                         >
                             v{commons.version}{' '}
-                            {market.network && `(${market.network})`}
                         </a>
                     </p>
                 )}