feat: update network controller style (#306)

Synthetixio · Jun 14, 2024 · 85970e2 · 85970e2
1 parent 5684029
commit 85970e2
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/liquidity/components/icons/EthereumIcon/EthereumIcon.tsx b/liquidity/components/icons/EthereumIcon/EthereumIcon.tsx
@@ -1,8 +1,13 @@
 import { Icon, IconProps } from '@chakra-ui/react';
 
-export const EthereumIcon = ({ width = '24px', height = '24px', fill = `#627EEA` }: IconProps) => {
+export const EthereumIcon = ({
+  width = '24px',
+  height = '24px',
+  fill = `#627EEA`,
+  ...props
+}: IconProps) => {
   return (
-    <Icon width={width} height={height} viewBox="0 0 30 30" fill="none">
+    <Icon width={width} height={height} viewBox="0 0 30 30" fill="none" {...props}>
       <path
         d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15Z"
         fill={fill as string}

diff --git a/liquidity/ui/src/layouts/Default/NetworkController.tsx b/liquidity/ui/src/layouts/Default/NetworkController.tsx
@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import {
   Badge,
   Button,
+  Divider,
   Flex,
   IconButton,
   Link,
@@ -114,17 +115,23 @@ export function NetworkController() {
           data-cy="account-menu-button"
           px={3}
         >
-          <NetworkIcon networkId={notConnected ? 8453 : notSupported ? 0 : activeNetwork?.id} />
+          <NetworkIcon
+            filter={activeNetwork?.isTestnet ? 'grayscale(1)' : ''}
+            networkId={notConnected ? 8453 : notSupported ? 0 : activeNetwork?.id}
+          />
         </MenuButton>
-        <MenuList>
-          {mainnets.concat(showTestnets ? testnets : []).map(({ id, preset, label }) => (
+        <MenuList border="1px" borderColor="gray.900">
+          {mainnets.map(({ id, preset, label }) => (
             <MenuItem key={`${id}-${preset}`} onClick={() => setNetwork(id)}>
-              <NetworkIcon networkId={id} />
+              <NetworkIcon networkId={id} size="20px" />
               <Text variant="nav" ml={2}>
                 {label}
               </Text>
             </MenuItem>
           ))}
+
+          {showTestnets && <Divider color="gray.900" />}
+
           <MenuOptionGroup>
             <Flex py={4} px={3} alignItems="center" justifyContent="space-between">
               <Text fontSize="14px" fontFamily="heading" lineHeight="20px">
@@ -140,6 +147,15 @@ export function NetworkController() {
               />
             </Flex>
           </MenuOptionGroup>
+
+          {(showTestnets ? testnets : []).map(({ id, preset, label }) => (
+            <MenuItem key={`${id}-${preset}`} onClick={() => setNetwork(id)}>
+              <NetworkIcon filter="grayscale(1)" networkId={id} size="20px" />
+              <Text variant="nav" ml={2}>
+                {label}
+              </Text>
+            </MenuItem>
+          ))}
         </MenuList>
       </Menu>
       {activeWallet ? (