Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor Menubar and AccountDetailsDropdown styles #8278

Merged
merged 2 commits into from
Apr 2, 2020

Conversation

whymarrh
Copy link
Contributor

@whymarrh whymarrh commented Apr 1, 2020

Refs #8270 and #8274

This PR refactors the Menubar and AccountDetailsDropdown components and their styles with the goal of getting the positioning to be more good. This change drops the absolute positioning and replaces it with a grid that is always positioned correctly. Note that the padding was previously inconsistent, the connected status indicator was 22px from the left and the icon was 16px from the right.

While I was at it:

  • Moved the AccountDetailsDropdown styles alongside the component
  • Made the account options a button that you can tab to (you can't tab through the menu it opens but, hey, 1 step at a time 🤦‍♂)
  • Moved the account options button tooltip to the left

Screenshots

Screenshot of the grid

Screenshot without indicator

For demonstration purposes, this is the popup without the indicator, also what you'd see in full-screen on a small viewport. (I took the screenshot of the popup with it removed in devtools because it was easier.) As of #8275 we don't render it at all, leaving just two children in the .menu-bar container.

@whymarrh whymarrh force-pushed the menu-bar-grid branch 2 times, most recently from a01ccb2 to 723ecc6 Compare April 1, 2020 21:28
@whymarrh
Copy link
Contributor Author

whymarrh commented Apr 1, 2020

And this works as well with account names that truncate.

Edit: updated screenshots, after be17601

Screen Shot 2020-04-01 at 19 40 09

Screenshot of the full-screen, small viewport without the status indicator Screen Shot 2020-04-01 at 19 40 25

@whymarrh whymarrh marked this pull request as ready for review April 1, 2020 22:23
Copy link
Member

@Gudahtt Gudahtt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@whymarrh whymarrh merged commit 4229892 into MetaMask:develop Apr 2, 2020
@whymarrh whymarrh deleted the menu-bar-grid branch April 2, 2020 02:38
whymarrh added a commit to whymarrh/metamask-extension that referenced this pull request Apr 2, 2020
This change removes the now-unused (as of MetaMask#8278) 3dots.svg icon.
whymarrh added a commit that referenced this pull request Apr 2, 2020
This change removes the now-unused (as of #8278) 3dots.svg icon.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants