From 4229892fcaffc71392e4571340de2331690ab0a5 Mon Sep 17 00:00:00 2001
From: Whymarrh Whitby <whymarrh.whitby@gmail.com>
Date: Thu, 2 Apr 2020 00:08:45 -0230
Subject: [PATCH] Refactor Menubar and AccountDetailsDropdown styles (#8278)

---
 test/e2e/metamask-responsive-ui.spec.js       |  2 +-
 .../app/connected-status-indicator/index.scss |  3 +-
 .../account-details-dropdown/index.scss       |  6 +++
 ui/app/components/app/index.scss              |  4 +-
 ui/app/components/app/menu-bar/index.scss     | 45 ++++++-------------
 .../app/menu-bar/menu-bar.component.js        | 16 +++----
 .../app/menu-bar/tests/menu-bar.test.js       |  2 +-
 .../app/selected-account/index.scss           |  8 +++-
 .../selected-account.component.js             |  1 +
 .../components/account-details-dropdown.scss  |  7 ---
 ui/app/css/itcss/components/index.scss        |  2 -
 11 files changed, 41 insertions(+), 55 deletions(-)
 create mode 100644 ui/app/components/app/dropdowns/account-details-dropdown/index.scss
 delete mode 100644 ui/app/css/itcss/components/account-details-dropdown.scss

diff --git a/test/e2e/metamask-responsive-ui.spec.js b/test/e2e/metamask-responsive-ui.spec.js
index 97b1ca6fe..c0c816984 100644
--- a/test/e2e/metamask-responsive-ui.spec.js
+++ b/test/e2e/metamask-responsive-ui.spec.js
@@ -117,7 +117,7 @@ describe('MetaMask', function () {
 
   describe('Show account information', function () {
     it('show account details dropdown menu', async function () {
-      await driver.clickElement(By.css('div.menu-bar__open-in-browser'))
+      await driver.clickElement(By.css('button.menu-bar__account-options'))
       const options = await driver.findElements(By.css('div.menu.account-details-dropdown div.menu__item'))
       assert.equal(options.length, 4) // HD Wallet type does not have to show the Remove Account option
       await driver.delay(regularDelayMs)
diff --git a/ui/app/components/app/connected-status-indicator/index.scss b/ui/app/components/app/connected-status-indicator/index.scss
index 6238b284a..4f063cfad 100644
--- a/ui/app/components/app/connected-status-indicator/index.scss
+++ b/ui/app/components/app/connected-status-indicator/index.scss
@@ -1,8 +1,7 @@
 .connected-status-indicator {
   display:flex;
   align-items: center;
-  position: absolute;
-  left: 22px;
+  place-self: center start;
 
   &__green-circle, &__yellow-circle, &__grey-circle {
     border-radius: 4px;
diff --git a/ui/app/components/app/dropdowns/account-details-dropdown/index.scss b/ui/app/components/app/dropdowns/account-details-dropdown/index.scss
new file mode 100644
index 000000000..ae906e568
--- /dev/null
+++ b/ui/app/components/app/dropdowns/account-details-dropdown/index.scss
@@ -0,0 +1,6 @@
+.account-details-dropdown {
+  position: absolute;
+  top: 120px;
+  right: 24px;
+  z-index: 1;
+}
diff --git a/ui/app/components/app/index.scss b/ui/app/components/app/index.scss
index 13a5a66ac..d0f3f4dc7 100644
--- a/ui/app/components/app/index.scss
+++ b/ui/app/components/app/index.scss
@@ -92,4 +92,6 @@
 
 @import '../ui/alert-circle-icon/index';
 
-@import './connected-status-indicator/index'
+@import './connected-status-indicator/index';
+
+@import './dropdowns/account-details-dropdown/index';
diff --git a/ui/app/components/app/menu-bar/index.scss b/ui/app/components/app/menu-bar/index.scss
index 5cd7a68f1..3357776ca 100644
--- a/ui/app/components/app/menu-bar/index.scss
+++ b/ui/app/components/app/menu-bar/index.scss
@@ -1,40 +1,23 @@
 .menu-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 auto;
-  margin-bottom: 16px;
-  padding: 0 22px;
+  display: grid;
+  grid-template-columns: 30% minmax(30%, 1fr) 30%;
+  column-gap: 5px;
+
+  margin-bottom: 24px;
+  padding: 0 24px;
   border-bottom: 1px solid $Grey-100;
-  position: relative;
 
-  &__sidebar-button {
-    width: 20px;
-    height: 20px;
-    background-image: url(/images/icons/hamburger.svg);
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    cursor: pointer;
-  }
+  .menu-bar__account-options {
+    background: none;
+    font-size: inherit;
+    padding: 0 0 0 5px;
 
-  &__open-in-browser {
-    width: 20px;
-    height: 20px;
-    background-image: url(/images/icons/3dots.svg);
-    background-repeat: no-repeat;
-    background-size: contain;
-    background-position: center;
-    cursor: pointer;
-    display: flex;
-    justify-content: center;
-    position: absolute;
-    right: 16px;
-    transform: rotate(90deg);
+    position: relative; // to allow the dropdown to position itself absolutely
+    place-self: center end;
   }
 
   .selected-account {
-    flex: none;
+    grid-column: 2 / span 1;
+    place-self: center stretch;
   }
 }
diff --git a/ui/app/components/app/menu-bar/menu-bar.component.js b/ui/app/components/app/menu-bar/menu-bar.component.js
index c2a1ae581..fdbdfd5e4 100644
--- a/ui/app/components/app/menu-bar/menu-bar.component.js
+++ b/ui/app/components/app/menu-bar/menu-bar.component.js
@@ -29,12 +29,10 @@ export default class MenuBar extends PureComponent {
 
         <SelectedAccount />
 
-        <Tooltip
-          title={t('accountOptions')}
-          position="bottom"
-        >
-          <div
-            className="menu-bar__open-in-browser"
+        <Tooltip title={t('accountOptions')} position="left">
+          <button
+            className="fas fa-ellipsis-v menu-bar__account-options"
+            title={t('accountOptions')}
             onClick={() => {
               this.context.metricsEvent({
                 eventOpts: {
@@ -43,10 +41,12 @@ export default class MenuBar extends PureComponent {
                   name: 'Opened Account Options',
                 },
               })
-              this.setState({ accountDetailsMenuOpen: true })
+              this.setState((prevState) => ({
+                accountDetailsMenuOpen: !prevState.accountDetailsMenuOpen,
+              }))
             }}
           >
-          </div>
+          </button>
         </Tooltip>
 
         {
diff --git a/ui/app/components/app/menu-bar/tests/menu-bar.test.js b/ui/app/components/app/menu-bar/tests/menu-bar.test.js
index 424111af2..4f88e5b65 100644
--- a/ui/app/components/app/menu-bar/tests/menu-bar.test.js
+++ b/ui/app/components/app/menu-bar/tests/menu-bar.test.js
@@ -36,7 +36,7 @@ describe('MenuBar', function () {
         <MenuBar />
       </Provider>
     )
-    const accountOptions = wrapper.find('.menu-bar__open-in-browser')
+    const accountOptions = wrapper.find('.menu-bar__account-options')
     accountOptions.simulate('click')
     assert.equal(wrapper.find('MenuBar').instance().state.accountDetailsMenuOpen, true)
   })
diff --git a/ui/app/components/app/selected-account/index.scss b/ui/app/components/app/selected-account/index.scss
index fa3079d77..0fee55500 100644
--- a/ui/app/components/app/selected-account/index.scss
+++ b/ui/app/components/app/selected-account/index.scss
@@ -5,8 +5,12 @@
   align-items: center;
   flex: 1;
 
+  &__tooltip-wrapper {
+    width: 100%;
+  }
+
   &__name {
-    max-width: 200px;
+    width: 100%;
     font-size: 1rem;
     font-weight: 500;
     line-height: 19px;
@@ -30,7 +34,7 @@
     align-items: center;
     justify-content: center;
     margin: 4px 0;
-    padding: 6px 15px;
+    padding: 6px 1px;
     border-radius: 10px;
     cursor: pointer;
 
diff --git a/ui/app/components/app/selected-account/selected-account.component.js b/ui/app/components/app/selected-account/selected-account.component.js
index d5c1d982d..536e77572 100644
--- a/ui/app/components/app/selected-account/selected-account.component.js
+++ b/ui/app/components/app/selected-account/selected-account.component.js
@@ -27,6 +27,7 @@ class SelectedAccount extends Component {
     return (
       <div className="selected-account">
         <Tooltip
+          wrapperClassName="selected-account__tooltip-wrapper"
           position="bottom"
           title={this.state.copied ? t('copiedExclamation') : t('copyToClipboard')}
         >
diff --git a/ui/app/css/itcss/components/account-details-dropdown.scss b/ui/app/css/itcss/components/account-details-dropdown.scss
deleted file mode 100644
index a5990000e..000000000
--- a/ui/app/css/itcss/components/account-details-dropdown.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.account-details-dropdown {
-	width: 60%;
-	position: absolute;
-  top: 40px;
-	right: 15px;
-	z-index: 2000;
-}
\ No newline at end of file
diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss
index 36a703813..a6285b270 100644
--- a/ui/app/css/itcss/components/index.scss
+++ b/ui/app/css/itcss/components/index.scss
@@ -44,8 +44,6 @@
 
 @import './request-decrypt-message.scss';
 
-@import './account-details-dropdown.scss';
-
 @import './editable-label.scss';
 
 @import './pages/index.scss';