Skip to content

[PAY-3783] Update UI for Rewards page - #11002

Merged
faridsalau merged 8 commits into
mainfrom
farid/reward-redesign-1
Jan 13, 2025
Merged

[PAY-3783] Update UI for Rewards page#11002
faridsalau merged 8 commits into
mainfrom
farid/reward-redesign-1

Conversation

@faridsalau

@faridsalaufaridsalau commented Jan 9, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Description

This PR refactors the Rewards Panel UI components to move towards the new redesign

Key Changes

  • Refactored RewardPanel component to use Harmony's Flex layout system for better vertical centering
  • Removed fixed heights and manual margins in favor of Flex's gap system
  • Split out ClaimAllPanel into its own component file for better code organization
  • Cleaned up text alignment and spacing between elements
  • Added proper key prop to Fragment in LeftNav component
  • Reorganized rewards components into feature folders (ChallengeRewards and TrendingRewards)

Technical Details

  • Removes redundant style properties that were fighting with the Flex layout
  • Updates imports to reflect new file organization structure

How Has This Been Tested?

  • Verified layout consistency across different reward states (claimable, pending, completed)
  • Tested responsive behavior on mobile and desktop viewports
image

@changeset-bot

changeset-botBot commented Jan 9, 2025•
edited
Loading

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: a84bf5d

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@faridsalaufaridsalau changed the title Farid/reward redesign 1[PAY-3783] Update UI for Achievement Rewards sectionJan 9, 2025
@faridsalau
faridsalau marked this pull request as ready for review January 9, 2025 23:28
@faridsalau
faridsalauforce-pushed the farid/reward-redesign-1 branch from 16fa091 to 615dd12CompareJanuary 10, 2025 00:02
dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ClaimAllPanel.tsx Outdated
import { messages } from '../messages'

export const ClaimAllPanel = () => {
const isMobile = useIsMobile() || window.innerWidth < 1080

@dharit-tandharit-tanJan 10, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what is this? scared of 1080 hardcoded value + is this a new pattern we should adopt?

@faridsalaufaridsalauJan 10, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i just split some components that were in a single file out to their own files for better readability, this has existed in the codebase for sometime

dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ClaimAllPanel.tsx Outdated
dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/RewardPanel.tsx
dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/RewardPanel.tsx Outdated
dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/RewardPanel.tsx Outdated
dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/RewardPanel.tsx
dharit-tan
dharit-tan reviewed Jan 10, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/StatusPill.tsx
@faridsalaufaridsalau changed the title [PAY-3783] Update UI for Achievement Rewards section[PAY-3783] Update UI for Rewards pageJan 11, 2025
dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/components/nav/desktop/LeftNav.tsx
dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ChallengeRewards/ChallengeRewardsTile.tsx
<Flex direction='column' gap='l'>
{!shouldHideCumulativeRewards ? <ClaimAllPanel /> : null}
<Tile className={wm(styles.rewardsTile, className)}>
<Text variant='display' size='s' className={wm(styles.title)}>

@dharit-tandharit-tanJan 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we get rid of the className entirely? low-pri

dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ChallengeRewards/RewardPanel.tsx Outdated
dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ChallengeRewards/RewardPanel.tsx Outdated
shadow='flat'
border='strong'
css={{
minWidth: '336px',

@dharit-tandharit-tanJan 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here

dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ChallengeRewards/RewardPanel.tsx
{title}
</Text>
</Box>
<Box css={{ textAlign: 'left' }}>

@dharit-tandharit-tanJan 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use alignSelf on the text instead of this?

@faridsalaufaridsalauJan 13, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nah tried, wasn't working, so had to do this

dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ChallengeRewards/RewardPanel.tsx Outdated
dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ClaimAllPanel.tsx
<Flex direction='column' alignItems='start' w='100%'>
<Flex gap='s' alignItems='center'>
{claimable ? (
<IconTokenGold

@dharit-tandharit-tanJan 13, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: i'm changing these IconTokenGold|Silver|etc components to accept 'l' as string height prop on mobile. low-pri but could do the same.

dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ClaimAllPanel.tsx Outdated
dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ClaimAllPanel.tsx Outdated
dharit-tan
dharit-tan approved these changes Jan 13, 2025
View reviewed changes

@dharit-tandharit-tan left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this looks good. one thing i'm noticing from figma is the "new" pill has a sparkly icon and is not uppercase fyi.

dharit-tan
dharit-tan reviewed Jan 13, 2025
View reviewed changes
Comment threadpackages/web/src/pages/rewards-page/components/ClaimAllPanel.tsx
@faridsalau
faridsalau merged commit e12f274 into mainJan 13, 2025
@faridsalau
faridsalau deleted the farid/reward-redesign-1 branch January 13, 2025 16:14
audius-infra pushed a commit that referenced this pull request Jan 18, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.118
7b56c1a
[661a932] Clean up account fetch ordering (#11081) Raymond Jacobson
[c3f8251] Version Packages (#10361) github-actions[bot]
[0f0084d] Fix listen streak challenge (#11089) Reed
[9854cf5] Fix external inline links on web DMs (#11090) Reed
[fdeb236] One shot reward UI + notif (#10788) Isaac Solo
[b5f5a46] Fix spacing on follows you indicator (#11084) Raymond Jacobson
[c7fb4fa] Tweak mobile amplitude config (#11082) JD Francis
[bec2090] Remove `added_timestamps` usage from client (#11080) Randy Schott
[78e56a9] [C-5676] Fix desktop search bar (#11077) Dylan Jeffers
[11c13e6] [PAY-3824] Fix navigation loop bug (#11078) Farid Salau
[c243c3a] [C-5504] Fix mobile track replace reseting the upload form (#11073) Kyle Shanks
[8bf5600] Revert "[PAY-3593] Revert "[PAY-3592] Always mark chat as read (temp … (#11075) Reed
[4c04c6d] [QA-1898] Fix reposts lineup disappearing on play (#11071) JD Francis
[f0e7ed6] [PAY-2997] Consolidate hashid usage (#11005) Raymond Jacobson
[45eaef8] Go back on exit key press (#11069) Farid Salau
[12ab23e] Make wallet fields for tip analytics events optional (#11064) Randy Schott
[9c2837c] Fix restriction (#11065) Farid Salau
[c0a83bc] [PAY-3548] Split account metadata out of user metadata (#10989) Randy Schott
[8ccd105] [QA-1917] Conditional render for dashboard button (#11063) Farid Salau
[3e53d5a] Update dapp-store build artifacts audius-infra
[fe9c82a] Refactor route matching logic and fix logged out disable state (#11060) Farid Salau
[a8f08eb] Add analytics on nav link clicks (#11061) Farid Salau
[1d52c62] [PAY-3808] Add proper spacing for sub item (#11058) Farid Salau
[323281a] [PAY-3803] Fix web nav item hover/active states (#11055) Reed
[0a7d724] [PAY-3812] Fix balance display in nav (#11057) Raymond Jacobson
[407d609] [PAY-3807] Show folder kebab when open (#11053) Raymond Jacobson
[3b33979] [PAY-3806] Show NowPlaying indicator on left nav items (#11052) Raymond Jacobson
[47c0d40] Use PNG icons on web left nav (#11049) Reed
[dd3cfda] [PAY-3809] Fix bad claim all format on mobile web (#11051) Raymond Jacobson
[e05b63b] Address navbar nits (#11046) Farid Salau
[c0024ed] Upgrade react native amplitude SDK (#11044) JD Francis
[addd350] [PAY-3801] Update coinflow on mobile (#11045) Randy Schott
[2cfbdaf] Add revelator and clean up ddex-entrypoint (#11040) Raymond Jacobson
[9a8575c] [PAY-3792] Persist upload state between navigations (#11042) Raymond Jacobson
[9402210] Update to solana 1.98.0 (#11026) Randy Schott
[3b253ce] Add back new privacy policy banner (#11018) Raymond Jacobson
[a3190df] More mobile left nav drawer UI tweaks (#11037) Reed
[1debf83] [C-5542] Fix play counting bug on web track edits (#11039) Kyle Shanks
[cd88ad8] [PAY-3799] Re-add playlist update dot (#11036) Farid Salau
[49f0707] [PAY-3794] New mobile rewards UI (#11024) Reed
[2deb213] Remove z-index on edit form button row to not block the profile complete tooltip (#11031) Kyle Shanks
[f57404f] Guest checkout QA fixes (#10959) Isaac Solo
[a46e54d] Update amplitude key on staging & revert change to use gain2 (#11032) JD Francis
[6f3aab8] Fix playback in unauthenticated state (#11030) Raymond Jacobson
[9fbd646] [PAY-3796] Update nav top (#11027) Farid Salau
[b9c3101] [PAY-3793] Use png for badge tier icons (#11013) Reed
[4d8d83a] Rename to ClaimAllRewardsTile + fix padding (#11023) Reed
[97adbf5] Mobile left nav drawer not scrollable (#11014) Reed
[3185272] Address bugbash comments (#11021) Farid Salau
[e12f274] [PAY-3783] Update UI for Rewards page (#11002) Farid Salau
[6690e63] [PAY-3694] Update coinflow on web (#11012) Randy Schott
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer
@dharit-tandharit-tandharit-tan approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

size/XXL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dharit-tan