Fix #18916 - UX: Multichain: Network picker design updates (#18962)

* Remove border radius from network menu list

* Provide background color for test network avatars

* Make button size large

* Update ui/components/multichain/network-list-item/network-list-item.js

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

* Fix lint

---------

Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net>

ui/components/multichain/network-list-item/network-list-item.js

@@ -11,6 +11,7 @@ import {
   JustifyContent,
   TextColor,
   BLOCK_SIZES,
+  BackgroundColor,
 } from '../../../helpers/constants/design-system';
 import {
   AvatarNetwork,
@@ -20,9 +21,27 @@ import {
 } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import Tooltip from '../../ui/tooltip/tooltip';
+import {
+  GOERLI_DISPLAY_NAME,
+  LINEA_TESTNET_DISPLAY_NAME,
+  SEPOLIA_DISPLAY_NAME,
+} from '../../../../shared/constants/network';
 
 const MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP = 17;
 
+function getAvatarNetworkColor(name) {
+  switch (name) {
+    case GOERLI_DISPLAY_NAME:
+      return BackgroundColor.goerli;
+    case LINEA_TESTNET_DISPLAY_NAME:
+      return BackgroundColor.lineaTestnet;
+    case SEPOLIA_DISPLAY_NAME:
+      return BackgroundColor.sepolia;
+    default:
+      return undefined;
+  }
+}
+
 export const NetworkListItem = ({
   name,
   iconSrc,
@@ -60,7 +79,11 @@ export const NetworkListItem = ({
           backgroundColor={Color.primaryDefault}
         />
       )}
-      <AvatarNetwork name={name} src={iconSrc} />
+      <AvatarNetwork
+        backgroundColor={getAvatarNetworkColor(name)}
+        name={name}
+        src={iconSrc}
+      />
       <Box className="multichain-network-list-item__network-name">
         <ButtonLink
           onClick={(e) => {

ui/components/multichain/network-list-menu/index.scss

@@ -1,4 +1,9 @@
 .multichain-network-list-menu {
   max-height: 200px;
   overflow: auto;
+
+  /* Overrides the popover's default behavior */
+  &-content-wrapper {
+    border-radius: 0;
+  }
 }

ui/components/multichain/network-list-menu/network-list-menu.js

@@ -26,7 +26,11 @@ import {
   DISPLAY,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import { Button, BUTTON_VARIANT, Text } from '../../component-library';
+import {
+  BUTTON_SECONDARY_SIZES,
+  ButtonSecondary,
+  Text,
+} from '../../component-library';
 import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
@@ -64,7 +68,12 @@ export const NetworkListMenu = ({ onClose }) => {
   }, [showTestNetworks, showTestNetworksRef]);
 
   return (
-    <Popover onClose={onClose} centerTitle title={t('networkMenuHeading')}>
+    <Popover
+      contentClassName="multichain-network-list-menu-content-wrapper"
+      onClose={onClose}
+      centerTitle
+      title={t('networkMenuHeading')}
+    >
       <>
         <Box className="multichain-network-list-menu" ref={networkListRef}>
           {networks.map((network) => {
@@ -158,8 +167,8 @@ export const NetworkListMenu = ({ onClose }) => {
           />
         </Box>
         <Box padding={4}>
-          <Button
-            variant={BUTTON_VARIANT.SECONDARY}
+          <ButtonSecondary
+            size={BUTTON_SECONDARY_SIZES.LG}
             block
             onClick={() => {
               isFullScreen
@@ -175,7 +184,7 @@ export const NetworkListMenu = ({ onClose }) => {
             }}
           >
             {t('addNetwork')}
-          </Button>
+          </ButtonSecondary>
         </Box>
       </>
     </Popover>