Refactor Menubar and AccountDetailsDropdown styles (#8278)

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)

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;

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;
+}

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';

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;
   }
 }

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>
 
         {

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)
   })

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;
 

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')}
         >

ui/app/css/itcss/components/account-details-dropdown.scss

@@ -1,7 +0,0 @@
-.account-details-dropdown {
-	width: 60%;
-	position: absolute;
-  top: 40px;
-	right: 15px;
-	z-index: 2000;
-}

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';