Page MenuHomePhabricator

[Cashtab] Upgrade antd
ClosedPublic

Authored by bytesofman on Jan 31 2024, 23:27.

Details

Reviewers
emack
Group Reviewers
Restricted Project
Commits
rABC2ef92eb7bbf8: [Cashtab] Upgrade antd
Summary

Upgrade antd and related dependency antd/icons

For the most part, this seems to improve Cashtab look and feel. The h3 and h4 components appear off. Added light css fixes where this upgrade broke existing css.

I was not able to color match the char count on the text input fields of the SignVerifyMsg screen. imo this is not a big deal, still looks about the same.

Background: need to do this in order to upgrade to React 18, which we need to do in order to test localforage in the useWallet hook

Test Plan

npm test
npm start and browse the screens, check at responsiveness. We don't need 100% as-before. Need to make sure everything is usable and nothing conspicuously off (switches, inputs).

Diff Detail

Repository
rABC Bitcoin ABC
Branch
upgrade-antd
Lint
Lint Passed
Unit
No Test Coverage
Build Status
Buildable 26820
Build 53208: Build Diffcashtab-tests
Build 53207: arc lint + arc unit

Event Timeline

bytesofman edited the test plan for this revision. (Show Details)
cashtab/src/components/App.js
2 ↗(On Diff #44818)

importing this was required in antd 4. does not exist in antd

cashtab/src/components/Common/Atoms.js
45 ↗(On Diff #44818)

This caused the wallet header to be wider than the 500px cashtab div. impact from the new css in antd5. Removing fixes.

cashtab/src/components/Common/EnhancedInputs.js
241 ↗(On Diff #44818)

This now lines up at 53px, was off at 55px given new antd css rules

cashtab/src/components/Common/WalletLabel.js
17 ↗(On Diff #44818)

h4 comes with antd mods we dont' want

cashtab/src/components/Send/SendXec.js
102 ↗(On Diff #44818)

matching what was rendered before this upgrade from h3

cashtab/src/index.js
8 ↗(On Diff #44818)

had to import with antd 4. doesn't exist in antd 5

emack requested changes to this revision.Feb 1 2024, 00:05
emack added a subscriber: emack.

When testing on mobile, both iOS and android devices are showing the create token button stretching off to the right of the screen. It's not the case with master.

(via antdtest.netlify.app)

image.png (992×486 px, 148 KB)

Also re: notifs, I know you said it doesn't need to be 100% as before but the icon being squashed against the message here is a bit too noticeable.

before:

image.png (93×402 px, 7 KB)

after:

image.png (111×393 px, 10 KB)

Overall the rounding of dropdowns, buttons, notifs...etc looks great!

This revision now requires changes to proceed.Feb 1 2024, 00:05

reduce logo size, reduce size of create button

When testing on mobile, both iOS and android devices are showing the create token button stretching off to the right of the screen. It's not the case with master.

(via antdtest.netlify.app)

image.png (992×486 px, 148 KB)

Also re: notifs, I know you said it doesn't need to be 100% as before but the icon being squashed against the message here is a bit too noticeable.

before:

image.png (93×402 px, 7 KB)

after:

image.png (111×393 px, 10 KB)

Overall the rounding of dropdowns, buttons, notifs...etc looks great!

good catches

create token issue patched, kinda lazily bc the button imo needs to be changed anyway

image.png (134×482 px, 5 KB)

We really should have a PrimaryButton and SecondaryButton, not from antd, both capable of accepting 'disabled' as a prop which changes their appearance (different bg color, different font color).

As for the notifications, I just made the size smaller and a square. imo good enough for the upgrade, since we are already looking at improving these in general separately.

image.png (131×399 px, 11 KB)

This revision is now accepted and ready to land.Feb 1 2024, 00:40
This revision was automatically updated to reflect the committed changes.