From c606431af11b1ada66924a7ed38275186a508bbf Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 30 Jun 2023 22:54:11 +0100
Subject: [PATCH] network & account popover tweaks

---
 .../header-base/header-base.tsx                 |  1 +
 .../picker-network/picker-network.js            |  2 +-
 .../component-library/popover/popover.tsx       |  2 +-
 .../account-list-menu/account-list-menu.js      | 10 +++++-----
 .../multichain/account-list-menu/index.scss     |  1 -
 .../multichain/network-list-menu/index.scss     |  1 -
 .../network-list-menu/network-list-menu.js      | 17 +++++++----------
 ui/components/ui/popover/popover.component.js   |  2 +-
 8 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/ui/components/component-library/header-base/header-base.tsx b/ui/components/component-library/header-base/header-base.tsx
index f10315e3f..f71bf03b6 100644
--- a/ui/components/component-library/header-base/header-base.tsx
+++ b/ui/components/component-library/header-base/header-base.tsx
@@ -67,6 +67,7 @@ export const HeaderBase: React.FC<HeaderBaseProps> = ({
       display={DISPLAY.FLEX}
       justifyContent={JustifyContent.spaceBetween}
       {...props}
+      padding={1}
     >
       {startAccessory && (
         <Box
diff --git a/ui/components/component-library/picker-network/picker-network.js b/ui/components/component-library/picker-network/picker-network.js
index 2c3adaea9..2e7d52f5f 100644
--- a/ui/components/component-library/picker-network/picker-network.js
+++ b/ui/components/component-library/picker-network/picker-network.js
@@ -27,7 +27,7 @@ export const PickerNetwork = ({
     <Box
       className={classnames('mm-picker-network', className)}
       as="button"
-      backgroundColor={BackgroundColor.backgroundAlternative}
+      backgroundColor={BackgroundColor.backgroundDefault}
       alignItems={AlignItems.center}
       paddingLeft={2}
       paddingRight={4}
diff --git a/ui/components/component-library/popover/popover.tsx b/ui/components/component-library/popover/popover.tsx
index 992f48f75..eb9e6bbe7 100644
--- a/ui/components/component-library/popover/popover.tsx
+++ b/ui/components/component-library/popover/popover.tsx
@@ -91,7 +91,7 @@ export const Popover = ({
       borderColor={BorderColor.borderMuted}
       borderRadius={BorderRadius.LG}
       backgroundColor={BackgroundColor.backgroundDefault}
-      padding={4}
+      padding={2}
       role={role}
       className={classnames(
         'mm-popover',
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.js b/ui/components/multichain/account-list-menu/account-list-menu.js
index ff0f6b236..26cb1baf0 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -123,7 +123,7 @@ export const AccountListMenu = ({ onClose }) => {
       {actionMode === '' ? (
         <Box>
           {/* Search box */}
-          {accounts.length > 1 ? (
+          {accounts.length > 100 ? (
             <Box
               paddingLeft={4}
               paddingRight={4}
@@ -185,7 +185,7 @@ export const AccountListMenu = ({ onClose }) => {
           </Box>
           {/* Add / Import / Hardware */}
           <Box padding={4}>
-            <Box marginBottom={4}>
+            <Box>
               <ButtonLink
                 size={Size.SM}
                 startIconName={IconName.Add}
@@ -205,7 +205,7 @@ export const AccountListMenu = ({ onClose }) => {
                 {t('addAccount')}
               </ButtonLink>
             </Box>
-            <Box marginBottom={4}>
+            <Box>
               <ButtonLink
                 size={Size.SM}
                 startIconName={IconName.Import}
@@ -224,7 +224,7 @@ export const AccountListMenu = ({ onClose }) => {
                 {t('importAccount')}
               </ButtonLink>
             </Box>
-            <Box marginBottom={4}>
+            <Box>
               <ButtonLink
                 size={Size.SM}
                 startIconName={IconName.Hardware}
@@ -253,7 +253,7 @@ export const AccountListMenu = ({ onClose }) => {
             {
               ///: BEGIN:ONLY_INCLUDE_IN(keyring-snaps)
               <>
-                <Box marginTop={4}>
+                <Box>
                   <ButtonLink
                     size={Size.SM}
                     startIconName={IconName.Snaps}
diff --git a/ui/components/multichain/account-list-menu/index.scss b/ui/components/multichain/account-list-menu/index.scss
index bd4f1d909..87d178930 100644
--- a/ui/components/multichain/account-list-menu/index.scss
+++ b/ui/components/multichain/account-list-menu/index.scss
@@ -4,7 +4,6 @@
   }
 
   &__list {
-    max-height: 200px;
     overflow: auto;
   }
 }
diff --git a/ui/components/multichain/network-list-menu/index.scss b/ui/components/multichain/network-list-menu/index.scss
index 19f83c1aa..7b4e70b70 100644
--- a/ui/components/multichain/network-list-menu/index.scss
+++ b/ui/components/multichain/network-list-menu/index.scss
@@ -1,5 +1,4 @@
 .multichain-network-list-menu {
-  max-height: 200px;
   overflow: auto;
 
   /* Overrides the popover's default behavior */
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index bd211d5d7..601cf2f59 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -23,12 +23,9 @@ import ToggleButton from '../../ui/toggle-button';
 import {
   Display,
   JustifyContent,
+  Size,
 } from '../../../helpers/constants/design-system';
-import {
-  BUTTON_SECONDARY_SIZES,
-  ButtonSecondary,
-  Text,
-} from '../../component-library';
+import { Text, ButtonLink, IconName } 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';
@@ -158,10 +155,10 @@ export const NetworkListMenu = ({ onClose }) => {
             }}
           />
         </Box>
-        <Box padding={4}>
-          <ButtonSecondary
-            size={BUTTON_SECONDARY_SIZES.LG}
-            block
+        <Box paddingLeft={4} paddingRight={4} paddingBottom={4}>
+          <ButtonLink
+            size={Size.SM}
+            startIconName={IconName.Add}
             onClick={() => {
               if (isFullScreen) {
                 if (completedOnboarding) {
@@ -182,7 +179,7 @@ export const NetworkListMenu = ({ onClose }) => {
             }}
           >
             {t('addNetwork')}
-          </ButtonSecondary>
+          </ButtonLink>
         </Box>
       </>
     </Popover>
diff --git a/ui/components/ui/popover/popover.component.js b/ui/components/ui/popover/popover.component.js
index 261883c56..c301a0b3d 100644
--- a/ui/components/ui/popover/popover.component.js
+++ b/ui/components/ui/popover/popover.component.js
@@ -85,6 +85,7 @@ const Popover = ({
     <Box
       {...{ ...defaultHeaderProps, ...headerProps }}
       className="popover-header"
+      padding={4}
     >
       <Box
         display={DISPLAY.FLEX}
@@ -93,7 +94,6 @@ const Popover = ({
         className={classnames('popover-header__title', {
           'popover-header__title--center': centerTitle,
         })}
-        marginBottom={2}
       >
         {onBack ? (
           <ButtonIcon