wallet icon indicating copy to clipboard operation
wallet copied to clipboard

chore(points): points activities list redesign

Open bakoushin opened this issue 1 year ago • 1 comments

Description

Implement new points activities list design.

Figma: https://www.figma.com/design/rXBDplfMHHqYmuu6EkgMEo/Gamification-experiments?node-id=1747-6464&t=aOfd2uHuL1gAJfTG-0

Important changes:

  1. Activities are rendered as a list
  2. No more grouping by points amount; the amount is indicated on the card
  3. Activities can have previous amount crossed out
  4. "More coming soon" card dividing incomplete and completed activities
  5. "More coming soon" card has a new icon (rushing clock instead of rocket)

Implementation notes:

  • ActivityCard is refactored as a "dumb" component only relying on its props
  • Added a specific CheckCircle icon instead of a mix of another icon and css styling used previously
New design Previous design
new design prev design

Crossed out previous amount:

Card Bottom sheet
previous amount image

Test plan

  • Tested manually
  • Updated unit tests

Related issues

  • Fixes RET-1103

Backwards compatibility

Y

Network scalability

If a new NetworkId and/or Network are added in the future, the changes in this PR will:

  • [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)

bakoushin avatar Jul 05 '24 10:07 bakoushin

Codecov Report

Attention: Patch coverage is 96.38554% with 3 lines in your changes missing coverage. Please review.

Project coverage is 86.50%. Comparing base (e5e2b3f) to head (f31e4a3).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #5616      +/-   ##
==========================================
+ Coverage   86.49%   86.50%   +0.01%     
==========================================
  Files         772      774       +2     
  Lines       31671    31680       +9     
  Branches     5466     5466              
==========================================
+ Hits        27394    27406      +12     
+ Misses       4043     4040       -3     
  Partials      234      234              
Files Coverage Δ
src/icons/CheckCircle.tsx 100.00% <100.00%> (ø)
src/icons/RushingClock.tsx 100.00% <100.00%> (ø)
src/icons/SwapArrows.tsx 100.00% <100.00%> (ø)
src/points/ActivityCard.tsx 100.00% <100.00%> (ø)
src/points/PointsHome.tsx 100.00% <100.00%> (ø)
src/points/cardDefinitions.tsx 81.48% <100.00%> (-4.63%) :arrow_down:
src/points/cardSort.ts 100.00% <100.00%> (ø)
src/points/selectors.ts 100.00% <100.00%> (+7.14%) :arrow_up:
src/points/slice.ts 64.51% <ø> (ø)
src/points/types.ts 100.00% <100.00%> (ø)
... and 1 more

... and 2 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update e5e2b3f...f31e4a3. Read the comment docs.

codecov[bot] avatar Jul 05 '24 10:07 codecov[bot]