chore(points): points activities list redesign
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:
- Activities are rendered as a list
- No more grouping by points amount; the amount is indicated on the card
- Activities can have previous amount crossed out
- "More coming soon" card dividing incomplete and completed activities
- "More coming soon" card has a new icon (rushing clock instead of rocket)
Implementation notes:
-
ActivityCardis refactored as a "dumb" component only relying on its props - Added a specific
CheckCircleicon instead of a mix of another icon and css styling used previously
| New design | Previous design |
|---|---|
Crossed out previous amount:
| Card | Bottom sheet |
|---|---|
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)
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
@@ 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 dataPowered by Codecov. Last update e5e2b3f...f31e4a3. Read the comment docs.