ethereum-org-website icon indicating copy to clipboard operation
ethereum-org-website copied to clipboard

Product table refactor

Open corwintines opened this issue 1 year ago • 24 comments

Description

  • Refactor out the FindWallets table to a reusable ProductTable that can be used in other use cases (networks coming up, dapps in the future)

corwintines avatar Sep 05 '24 19:09 corwintines

Deploy Preview for ethereumorg ready!

Name Link
Latest commit ba803defe10514f9de98fc8019970e59143c59d9
Latest deploy log https://app.netlify.com/sites/ethereumorg/deploys/671874210a22ce0008bd7c4d
Deploy Preview https://deploy-preview-13807--ethereumorg.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

Lighthouse
7 paths audited
Performance: 46 (🔴 down 7 from production)
Accessibility: 92 (🔴 down 1 from production)
Best Practices: 89 (🔴 down 9 from production)
SEO: 99 (🟢 up 7 from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] avatar Sep 05 '24 19:09 netlify[bot]

Screenshot 2024-09-23 at 17 46 35

@corwintines these seem to work as multi select, but use radio component leading user to think there is only at a time possible, should switch to checkbox

konopkja avatar Sep 23 '24 15:09 konopkja

Screenshot 2024-09-23 at 17 49 41

the subtext should be grey - body medium rather than white by default, turns white on selected

konopkja avatar Sep 23 '24 15:09 konopkja

Screenshot 2024-09-24 at 12 26 10

the paragraph text is supposed to be body medium

konopkja avatar Sep 24 '24 10:09 konopkja

Screenshot 2024-09-24 at 12 27 35

the text for languages is i think smaller than currently we have in prod?

konopkja avatar Sep 24 '24 10:09 konopkja

Screenshot 2024-09-24 at 12 28 35

there is supposed to be sticky header with wallet counter and reset button that is missing in preview

konopkja avatar Sep 24 '24 10:09 konopkja

Screenshot 2024-09-24 at 12 29 34

missing mouse over effect in preview (screenshot from prod)

konopkja avatar Sep 24 '24 10:09 konopkja

Screenshot 2024-10-01 at 17 04 24 Screenshot 2024-10-01 at 17 05 00

when selected persona, the description should turn white, there is also small animation in the prod i think that would be nice to keep

konopkja avatar Oct 01 '24 15:10 konopkja

when there is subset of wallets bcs of active filter, it should indicate the amount from total that is visible (see prod) Screenshot 2024-10-01 at 17 07 30

Screenshot 2024-10-01 at 17 07 28

konopkja avatar Oct 01 '24 15:10 konopkja

Screenshot 2024-10-01 at 17 10 49

this is a new thing so can be deprioritized, but when selecting a filter from sidebar the change is instantaneous and if the filter isnt very restricting it doesnt feel like anything has been updated in the list - to indicate the change - we could introduce some smooth quick refresh animation for the listings such as a quick fade out and fade in

konopkja avatar Oct 01 '24 15:10 konopkja

IMG_46911AD66630-1

testing mobile i had issues clicking on persona in the filter modal, several times and it didnt select. (more looked like just mouse over triggered instead of selection)

konopkja avatar Oct 01 '24 15:10 konopkja

IMG_46911AD66630-1

testing mobile i had issues clicking on persona in the filter modal, several times and it didnt select. (more looked like just mouse over triggered instead of selection)

maybe issue with clickable area?

konopkja avatar Oct 01 '24 15:10 konopkja

Screenshot 2024-10-01 at 17 17 34

  1. sidebar breaks when scrolling
  2. when i scroll down and scroll up again and then try scrolling back down it stops working
  3. missing "x" close button on top (see production, there is sticky x)

konopkja avatar Oct 01 '24 15:10 konopkja

IMG_853108AA93B2-1

is there a way to fix this issue?

konopkja avatar Oct 01 '24 15:10 konopkja

IMG_853108AA93B2-1

is there a way to fix this issue?

this gap should not be there

konopkja avatar Oct 01 '24 15:10 konopkja

IMG_B43D3C26BC7D-1

somehow on mobile im missing wallet links

konopkja avatar Oct 01 '24 15:10 konopkja

Screenshot 2024-10-01 at 17 23 49

above screen shows few issues on mobile in terms of how the design should be structured

bellow screen shows current production - how it should look

Screenshot 2024-10-01 at 17 24 00

konopkja avatar Oct 01 '24 15:10 konopkja

@corwintines the line is broken on mobile (brave on macOS) Screen Shot 2024-10-18 01 56 33 PM

nloureiro avatar Oct 18 '24 12:10 nloureiro

I am not sure if it's a bug, but if we aim for feature parity to production the button on tablet size it's not 100% width just on mobile Screen Shot 2024-10-18 01 58 31 PM

nloureiro avatar Oct 18 '24 13:10 nloureiro

we are missing some spacing on the list Screen Shot 2024-10-18 02 05 40 PM

nloureiro avatar Oct 18 '24 13:10 nloureiro

When the product doesn´t have a tag, it needs spacing Screen Shot 2024-10-18 02 09 08 PM

nloureiro avatar Oct 18 '24 13:10 nloureiro

small miss alignment on the social links Screen Shot 2024-10-18 02 10 53 PM

nloureiro avatar Oct 18 '24 13:10 nloureiro

The head of the table has a different label. On the PR is way simpler. Was it on purpose? Screen Shot 2024-10-18 02 16 31 PM

nloureiro avatar Oct 18 '24 13:10 nloureiro

What is this bar on the top of the mobile filters? We don´t have it on production

Screen Shot 2024-10-18 02 21 42 PM

nloureiro avatar Oct 18 '24 13:10 nloureiro

What is this bar on the top of the mobile filters? We don´t have it on production

Screen Shot 2024-10-18 02 21 42 PM

This was part of the drawer component, removed it for now but just saying where it came from

corwintines avatar Oct 21 '24 14:10 corwintines

The head of the table has a different label. On the PR is way simpler. Was it on purpose? Screen Shot 2024-10-18 02 16 31 PM

I could update this if needed, but I generalized it in the abstraction of this component

corwintines avatar Oct 21 '24 14:10 corwintines

Screenshot 2024-10-21 at 18 43 18

the tooltips position @wackerow pls check it

konopkja avatar Oct 21 '24 16:10 konopkja

the tooltips position @wackerow pls check it

  • #14207

wackerow avatar Oct 21 '24 19:10 wackerow

Approved from dev side. cc: @nloureiro and/or @konopkja for approval from design side 🙏, then can pull this in (ideally before this weeks release if no critical blockers)

wackerow avatar Oct 21 '24 20:10 wackerow

lgtm! last two things i found:

  1. reset button should be centered with see wallets button (vertically)
  2. this modal window has oval corners on top, should be straihgt instead Screenshot 2024-10-22 at 11 31 06

konopkja avatar Oct 22 '24 09:10 konopkja