[C-3222] Finish Profile Page (web) by DejayJD · Pull Request #6751 · AudiusProject/apps

DejayJD · 2023-11-20T22:08:22Z

Description

Logic and UI for mobile/desktop web "Finish Profile" page
Modify the existing AccountHeader component used on select genres page to fit for edit usage
Modified the Avatar component in Harmony to support a use case where there is no image so it instead just shows a gray background

https://www.loom.com/share/dcdbb0e570a94fa8b4351d652f17b017

How Has This Been Tested?

Running locally and poking around it

audius-infra · 2023-11-20T22:24:42Z

Preview this change https://demo.audius.co/jd/sign-up-finish-profile

Kyle-Shanks

neat 👍

amendelsohn

🌊 🪨 🔥 🌀
Looks fantastic!

Great job, and thanks for the augments to Avatar!
🌊 🪨 🔥 🌀

amendelsohn · 2023-11-20T22:23:34Z

+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: src !== undefined ? 'unset' : '#C2C0CC',


We also have a placeholder profile image. Wondering if we should have an option to show that instead

Yeah I thought about that as well. That's part of why I added this functionality into the base Avatar component rather than make a variant of the component; since that functionality is pretty similar.
But I didnt want to take on that scope since it won't be used for a bit

amendelsohn · 2023-11-20T22:30:57Z

+ {isEditing && !imageUrl ? (
+ <IconCamera size='l' color='staticWhite' />
+ ) : null}


wow I didn't realize I allowed children on Avatar, but looks useful here!

amendelsohn · 2023-11-20T22:31:43Z

+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',


would wrapping the children in a Flex work? or Flex as Avatar? no big preference though. Might end up more verbose since you're already using the css prop here

amendelsohn · 2023-11-20T22:45:14Z

+ </Flex>
+ </Flex>
+ <ContinueFooter>
+ <Button type='submit'> {messages.continue} </Button>


remove extra spaces around {}

…jd/sign-up-finish-profile # Conflicts: # packages/harmony/src/components/avatar/Avatar.tsx # packages/web/src/components/welcome-modal/WelcomeModal.tsx # packages/web/src/pages/sign-up-page/components/AccountHeader.tsx # packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx

audius-infra · 2023-11-20T23:15:48Z

Preview this change https://demo.audius.co/jd/sign-up-finish-profile

audius-infra · 2023-11-21T18:39:43Z

Preview this change https://demo.audius.co/jd/sign-up-finish-profile

audius-infra · 2023-11-21T19:37:49Z

Preview this change https://demo.audius.co/jd/sign-up-finish-profile

audius-infra · 2023-11-21T20:18:41Z

Preview this change https://demo.audius.co/jd/sign-up-finish-profile

[a2feaf5] Bump version to 0.5.24 audius-infra [a450086] Bump version to 0.5.23 audius-infra [482e382] [C-3371] FollowArtistTile Play Track Preview (#6769) Andrew Mendelsohn [fdc7966] [C-3351] Add pagination to mobile profile reposts screen (#6773) Kyle Shanks [51c70bc] Fix mobile init (#6775) Sebastian Klingler [52cdf0d] [C-3390] Add Harmony ThemeProvider and theme to mobile (#6772) Kyle Shanks [6c46f0c] Bump version to 0.5.22 audius-infra [d58ab70] Try to fix Turbo cache? (#6771) nicoback2 [62d7177] Fix embed build (#6770) Raymond Jacobson [ff6436a] Email + pw page for social sign up flow, cleanup, C-3395 (#6759) nicoback2 [fbaed99] [PAY-2131] Implement premium content in embed player (#6768) Raymond Jacobson [0071b67] Add tailwind and network overview chart to /d (#6713) Michelle Brier [29abb47] Revert "[C-3388] Improve sign-on root (#6753)" (#6764) Andrew Mendelsohn [591a153] Fix mobile web purchase drawer UI (#6763) Reed [c9b7b71] [C-3270] Fix SignUp/SignIn cypress tests (#6729) JD Francis [811624f] Return null in USDCBalanceFetcher (#6762) Reed [7998be2] [PAY-2183] Fetch USDC balance on web app load (#6761) Reed [d91d176] [C-3222] Finish Profile Page (web) (#6751) JD Francis [935348e] [PAY-2184] Move embed player to @audius/fetch-nft (#6757) Raymond Jacobson [cca3fe1] [PAY-2160] Make total summary collapsible (#6756) Marcus Pasell [22a5d34] [PAY-2192] Dedupe USDC balance polling and use FixedDecimal formatting (#6760) Reed [d38a0f8] [PAY-2191] Bring crypto transfer drawer and address tile up to spec (#6758) Raymond Jacobson [e08a76f] Bump version to 0.5.21 audius-infra [ee8b4fa] [C-3388] Improve sign-on root (#6753) Dylan Jeffers [128c35f] Display 24h uptime in protocol dashboard (#6700) Michelle Brier [bddbcd3] [PAY-2189] Mobile pay extra pills on single row (#6755) Reed [f9fdbb7] [PAY-2185] Purchase content from manual transfer modal (#6754) Reed [65a711b] [PAY-2174] Fix various table routing issues (#6752) Raymond Jacobson [c1324fa] [PAY-2186] Hide mobile payment method options (#6750) Raymond Jacobson [5a29144] [PAY-2188][PAY-2186] Fix radiodots and filters on web (#6749) Raymond Jacobson [8e26762] Cleanup for PR #6734 (mobile purchase flow) (#6748) Reed [27c2bcb] [PAY-2153][PAY-2155][PAY-2157] Update Purchase flow UI cross-platform and introduce Add Funds flow on mobile (#6734) Saliou Diallo [db88ed2] Fix electron w/ vite (#6747) Sebastian Klingler [eaa9be4] [C-3365] Update SelectArtistsPage to handle mobile web view (#6745) Kyle Shanks [5c06dcd] Fix background and spacing for signup container (#6746) Andrew Mendelsohn [ca493ec] [PAY-2182] Fix <p> descendent of <p> warnings in SummaryTable (#6744) Reed [5f1e1a8] Block developer app from user creation (#6743) Isaac Solo [8c603d9] Sign in with MetaMask cleanup (#6741) nicoback2 [e85efe0] Bump version to 0.5.20 audius-infra [3c9cfd5] [C-3379, C-3382] FollowArtistTile images, follow button, form layout (#6727) Andrew Mendelsohn [9799013] [C-3191] Sign-up/sign-on root ux (#6723) Dylan Jeffers [4d84186] [Signup redesign] Implement social media sign-up C-3346 (#6722) nicoback2

DejayJD added 3 commits November 20, 2023 12:04

working mobile layout & form logic
41d378f

tweak header positioning
d83857c

add icon into the header
ef03b42

pull-request-sizeBot added the size/L label Nov 20, 2023

update error tet
bcb190c

DejayJD requested a review from dylanjeffers November 20, 2023 22:09

DejayJD added 2 commits November 20, 2023 16:10

remove log
defc15b

fix lint/ts
39c0bdb

Kyle-Shanks reviewed Nov 20, 2023
View reviewed changes

Comment threadpackages/harmony/src/components/avatar/Avatar.tsx Outdated

Kyle-Shanks reviewed Nov 20, 2023
View reviewed changes

Comment threadpackages/web/src/common/store/pages/signon/selectors.ts Outdated

Kyle-Shanks reviewed Nov 20, 2023
View reviewed changes

Comment threadpackages/web/src/pages/sign-up-page/components/AccountHeader.tsx Outdated

Kyle-Shanks approved these changes Nov 20, 2023
View reviewed changes

amendelsohn approved these changes Nov 20, 2023
View reviewed changes

DejayJD added 4 commits November 20, 2023 16:55

fix TS
857992d

update selectors
9e80fd1

lint
2b9aa6c

DejayJD added 3 commits November 20, 2023 17:53

avatar & PR feedback
1b9125b

fix how pics are saved, add account header overlay
0a29bf9

use profile image as cover photo when not provided
4e8287c

pull-request-sizeBot added size/XL and removed size/L labels Nov 21, 2023

DejayJD added 3 commits November 21, 2023 13:14

fix old flow regression
d902ef4

undo testing routing
e72bd33

minor comment & unused cleanup
cb98dbe

clean up bad avatar merge
61bc83c

DejayJD merged commit d91d176 into mainNov 21, 2023

DejayJD deleted the jd/sign-up-finish-profile branch November 21, 2023 20:51

Uh oh!

Conversation

DejayJD commented Nov 20, 2023• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How Has This Been Tested?

Uh oh!

Uh oh!

audius-infra commented Nov 20, 2023

Uh oh!

Uh oh!

Uh oh!

Kyle-Shanks left a comment

Choose a reason for hiding this comment

Uh oh!

amendelsohn left a comment

Choose a reason for hiding this comment

Uh oh!

amendelsohnNov 20, 2023

Choose a reason for hiding this comment

Uh oh!

DejayJDNov 21, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

amendelsohnNov 20, 2023

Choose a reason for hiding this comment

Uh oh!

amendelsohnNov 20, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

amendelsohnNov 20, 2023

Choose a reason for hiding this comment

Uh oh!

Uh oh!

audius-infra commented Nov 20, 2023

Uh oh!

audius-infra commented Nov 21, 2023

Uh oh!

audius-infra commented Nov 21, 2023

Uh oh!

audius-infra commented Nov 21, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

DejayJD commented Nov 20, 2023•
edited
Loading