From ba3f86400c35e3c9afc22604fe414f21f8546e23 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Tue, 20 Jun 2023 08:38:24 -0500
Subject: [PATCH] Fix #19609 - Prevent rounded corners in account menu (#19615)

---
 test/e2e/tests/add-account.spec.js                       | 6 +++---
 test/e2e/user-actions-benchmark.js                       | 2 +-
 .../multichain/account-list-menu/account-list-menu.js    | 9 +++++----
 .../account-list-menu/account-list-menu.test.js          | 2 +-
 ui/components/multichain/account-list-menu/index.scss    | 6 +++++-
 5 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/test/e2e/tests/add-account.spec.js b/test/e2e/tests/add-account.spec.js
index cf544bb38..5c04094a3 100644
--- a/test/e2e/tests/add-account.spec.js
+++ b/test/e2e/tests/add-account.spec.js
@@ -42,7 +42,7 @@ describe('Add account', function () {
 
         await driver.clickElement('[data-testid="account-menu-icon"]');
         await driver.clickElement(
-          '[data-testid="multichain-account-menu-add-account"]',
+          '[data-testid="multichain-account-menu-popover-add-account"]',
         );
 
         await driver.fill('[placeholder="Account 2"]', '2nd account');
@@ -84,7 +84,7 @@ describe('Add account', function () {
         // Create 2nd account
         await driver.clickElement('[data-testid="account-menu-icon"]');
         await driver.clickElement(
-          '[data-testid="multichain-account-menu-add-account"]',
+          '[data-testid="multichain-account-menu-popover-add-account"]',
         );
         await driver.fill('[placeholder="Account 2"]', '2nd account');
         await driver.clickElement({ text: 'Create', tag: 'button' });
@@ -188,7 +188,7 @@ describe('Add account', function () {
         await driver.clickElement('[data-testid="account-menu-icon"]');
 
         await driver.clickElement(
-          '[data-testid="multichain-account-menu-add-account"]',
+          '[data-testid="multichain-account-menu-popover-add-account"]',
         );
         await driver.fill('[placeholder="Account 2"]', '2nd account');
         await driver.clickElement({ text: 'Create', tag: 'button' });
diff --git a/test/e2e/user-actions-benchmark.js b/test/e2e/user-actions-benchmark.js
index 00a53c8d0..07843ecdf 100644
--- a/test/e2e/user-actions-benchmark.js
+++ b/test/e2e/user-actions-benchmark.js
@@ -36,7 +36,7 @@ async function loadNewAccount() {
       await driver.clickElement('[data-testid="account-menu-icon"]');
       const timestampBeforeAction = new Date();
       await driver.clickElement(
-        '[data-testid="multichain-account-menu-add-account"]',
+        '[data-testid="multichain-account-menu-popover-add-account"]',
       );
       await driver.fill('[placeholder="Account 2"]', '2nd account');
       await driver.clickElement({ text: 'Create', tag: 'button' });
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 823e1d679..1461c8a83 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.js
@@ -101,6 +101,7 @@ export const AccountListMenu = ({ onClose }) => {
       centerTitle
       onClose={onClose}
       onBack={actionMode === '' ? null : () => setActionMode('')}
+      className="multichain-account-menu-popover"
     >
       {actionMode === 'add' ? (
         <Box paddingLeft={4} paddingRight={4} paddingBottom={4} paddingTop={0}>
@@ -129,7 +130,7 @@ export const AccountListMenu = ({ onClose }) => {
         </Box>
       ) : null}
       {actionMode === '' ? (
-        <Box className="multichain-account-menu">
+        <Box>
           {/* Search box */}
           {accounts.length > 1 ? (
             <Box
@@ -152,13 +153,13 @@ export const AccountListMenu = ({ onClose }) => {
             </Box>
           ) : null}
           {/* Account list block */}
-          <Box className="multichain-account-menu__list">
+          <Box className="multichain-account-menu-popover__list">
             {searchResults.length === 0 && searchQuery !== '' ? (
               <Text
                 paddingLeft={4}
                 paddingRight={4}
                 color={TextColor.textMuted}
-                data-testid="multichain-account-menu-no-results"
+                data-testid="multichain-account-menu-popover-no-results"
               >
                 {t('noAccountsFound')}
               </Text>
@@ -208,7 +209,7 @@ export const AccountListMenu = ({ onClose }) => {
                   });
                   setActionMode('add');
                 }}
-                data-testid="multichain-account-menu-add-account"
+                data-testid="multichain-account-menu-popover-add-account"
               >
                 {t('addAccount')}
               </ButtonLink>
diff --git a/ui/components/multichain/account-list-menu/account-list-menu.test.js b/ui/components/multichain/account-list-menu/account-list-menu.test.js
index 9c5ed96cc..8e4637f93 100644
--- a/ui/components/multichain/account-list-menu/account-list-menu.test.js
+++ b/ui/components/multichain/account-list-menu/account-list-menu.test.js
@@ -101,7 +101,7 @@ describe('AccountListMenu', () => {
     );
     expect(filteredListItems).toHaveLength(0);
     expect(
-      getByTestId('multichain-account-menu-no-results'),
+      getByTestId('multichain-account-menu-popover-no-results'),
     ).toBeInTheDocument();
   });
 
diff --git a/ui/components/multichain/account-list-menu/index.scss b/ui/components/multichain/account-list-menu/index.scss
index 5bbb6f0f1..bd4f1d909 100644
--- a/ui/components/multichain/account-list-menu/index.scss
+++ b/ui/components/multichain/account-list-menu/index.scss
@@ -1,4 +1,8 @@
-.multichain-account-menu {
+.multichain-account-menu-popover {
+  .popover-content {
+    border-radius: 0;
+  }
+
   &__list {
     max-height: 200px;
     overflow: auto;