yearn / yearn-finance-v3

Yearn Finance Web App v3
https://yearn.finance
123 stars 138 forks source link

feat: `AmountInput` UI, disabled and error states #730

Closed karelianpie closed 2 years ago

karelianpie commented 2 years ago

Description

Amount input component:

Motivation and Context

Match designs

How Has This Been Tested?

Ran locally and observed the changes, refer to screenshots below

Screenshots (if appropriate):

yearn_finance yearn_finance yearn_finance
karelianpie commented 2 years ago

@xgambitox did the style changes we've discussed yesterday (https://github.com/yearn/yearn-finance-v3/pull/730/commits/a288711cb3767b951ea9b518eb66a9cf5588ecd5) also noticed that in Figma when disabled the max button is not displayed (https://github.com/yearn/yearn-finance-v3/pull/730/commits/edd26d6d9b53cc93399683112ca17d21ce477910) see below.

Finally also added cursor: not-allowed; to make it clear it's disabled (https://github.com/yearn/yearn-finance-v3/pull/730/commits/8deff5478e955971e5d157387d7d0d1892017f9c).

Light theme

Enabled amount input

Screen Shot 2022-07-13 at 10 27 32 am

Disabled amount input

Screenshot_13_7_22__10_09_am

Dark theme

Enabled amount input

Screen Shot 2022-07-13 at 10 30 21 am

Disabled amount input

Screen Shot 2022-07-13 at 10 30 43 am