Page MenuHomePhabricator

[Cashtab] Better button sizing, spacing, and hover
ClosedPublic

Authored by bytesofman on Jan 12 2024, 23:14.

Details

Reviewers
Klakurka
Group Reviewers
Restricted Project
Commits
rABC834846433aca: [Cashtab] Better button sizing, spacing, and hover
Summary

T2650

Make button take up all alotted space, so you do not have to click just on the icon. Add hover effect for non-mobile devices.

Ref https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices for why we need the media query (otherwise if you push a button, it gets the hover state on mobile)

Can verify mobile at https://cashtab-local-dev.netlify.app/

Test Plan

npm test, npm start and test hover effect

Diff Detail

Repository
rABC Bitcoin ABC
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

remove unrelated semicolon change

clickable button surface before

image.png (83×489 px, 2 KB)

after

image.png (83×489 px, 2 KB)

also now with hover effect for desktop

image.png (83×489 px, 2 KB)

Note : the white borders in the above screenshot are to show element size, they are not implemented in this diff

Klakurka requested changes to this revision.Jan 12 2024, 23:31
Klakurka added a subscriber: Klakurka.

How about having the submenu (hamburger menu) rows also be magenta on hover like the buttons are? Right now they're the same blue that they are when they're the active page.

This revision now requires changes to proceed.Jan 12 2024, 23:31

match hover color of nav menu to icons

This revision is now accepted and ready to land.Jan 12 2024, 23:56

The submenu is a bit offset so probably want to look into that (either in this diff or another one).

line up menu with right of screen on desktop

Build Bitcoin ABC Diffs / Diff Testing (preview-cashtab) passed.
Preview is available at http://54.39.104.128:41309 for the next 60 minutes.

FYI this is now broken for Cashtab because of the headers, Cashtab won't do anything not over https

Submenu alignment looks good.