[C-3419] Add common sign-up components #6809

dylanjeffers · 2023-11-29T20:43:40Z

Description

Adds common sign-up components to simplify each page
Reduces each page implementation + complexity by a solid amount!
We should use the same type of components in native

NOTE: largely avoiding select-artist-page since that one is quite complex

audius-infra · 2023-11-29T20:52:56Z

Preview this change https://demo.audius.co/dj-c-3419-common-components

audius-infra · 2023-11-29T21:34:56Z

Preview this change https://demo.audius.co/dj-c-3419-common-components

dylanjeffers

@DejayJD testing slack alerts

dylanjeffers · 2023-11-29T22:58:33Z

packages/harmony/src/components/layout/Box/Box.tsx

@@ -61,6 +62,8 @@ export const Box = styled.div<BoxProps>(
      marginLeft: marginL && spacing[marginL],
      marginRight: marginR && spacing[marginR],
      marginBottom: marginB && spacing[marginB],
+      backgroundColor:


realizing its a common enough pattern to apply background color to a flex/box, not just a paper. @dharit-tan also cause i know you've wanted this too.

amendelsohn

Love this! Looking so much cleaner now 👌

amendelsohn · 2023-11-29T23:06:26Z

packages/web/src/pages/sign-up-page/components/layout.tsx

Generally prefer one exported component per file just to make things easier to find, but these are small enough and related, so I don't hate it

yeah i totally agree... i was talking to jd, and he'll handle this on the native side, and if he feels inclined to do separate files, lets update this to have same pattern basically.

Honestly maybe its just me and how I navigate code but I personally actually kind of like the "one-file" pattern here just because I mainly navigate by file-name and with more generically named things like Heading, I can easily get into the wrong file 🤷 .
e.g.

Since all the components here are very sign-on specific anyways, it's kinda nice to keep them tucked away.
Maybe its just me tho, I do admit its a bit unconventional to not separate the files 🤔

amendelsohn · 2023-11-29T23:12:27Z

packages/web/src/pages/sign-up-page/components/layout.tsx

  const { isMobile } = useMedia()
+
+  const childrenArray = Children.toArray(children)
+  const footer = childrenArray.pop()


Hmm. This is very clever, but feels a bit hacky to make assumptions about children. What about props.footer or

<Page> <Page.Content></...> <Page.Footer></...> </Page>

yeah it is pretty hacky, agreed... i didnt want it as props.footer for the preception that it needs to be in formik context, but we can ensure that pretty easily

amendelsohn · 2023-11-29T23:14:59Z

packages/web/src/pages/sign-up-page/components/layout.tsx

 export const PageFooter = (props: PageFooterProps) => {
-  const { prefix, postfix, buttonProps } = props
+  const { prefix, postfix, buttonProps, centered, ...other } = props
+  const { isMobile } = useMedia()

  return (
-    <ContinueFooter>
+    <ContinueFooter {...other}>


should these just be one component? Do we use ContinueFooter outside of PageFooter?

great call, meant to clean this up after they all got updated

amendelsohn · 2023-11-29T23:16:03Z

packages/web/src/pages/sign-up-page/pages/CreateLoginDetails.tsx

+          <Flex direction='column' h='100%' gap='l'>
+            <Flex direction='column' gap='l'>
+              <HarmonyTextField
+                name='email'
+                autoComplete='email'
+                label={messages.emailLabel}
+              />
+              <PasswordField name='password' label={messages.passwordLabel} />
+              <PasswordField
+                name='confirmPassword'
+                label={messages.confirmPasswordLabel}
+              />
+              <CompletionChecklist />


so much nicer 👏

thanks! yeah it made things 3x easier to read imo

DejayJD

A little late to the party but I just wanted to say I really like these new components. I'm defo stealing for native

DejayJD · 2023-11-30T00:27:48Z

packages/web/src/pages/sign-up-page/pages/FinishProfilePage.tsx

-                  alignItems={isMobile ? 'flex-start' : 'center'}
-                  direction='column'
-                  flex={1}
+        <Page as={Form} centered>


So much less <Flex>. Love it ❤️

and like 100 less lines 🥇

DejayJD · 2023-11-30T00:37:00Z

packages/web/src/pages/sign-up-page/components/layout.tsx

Honestly maybe its just me and how I navigate code but I personally actually kind of like the "one-file" pattern here just because I mainly navigate by file-name and with more generically named things like Heading, I can easily get into the wrong file 🤷 .
e.g.

Since all the components here are very sign-on specific anyways, it's kinda nice to keep them tucked away.
Maybe its just me tho, I do admit its a bit unconventional to not separate the files 🤔

[97ee16b] Fix routing for legacy sign-on (#6834) Dylan Jeffers [c5f150f] [C-3374] Fix play/pause on trending mobile (#6833) Dylan Jeffers [3612090] [C-3417] Cover photos default to blurred profile photo if unset (#6811) Andrew Mendelsohn [fb74614] [PROTO-1458] Expose postgres upgrade logs in mediorum (#6830) Theo Ilie [6deaeab] [C-2591] Fix Follow All button on mobile (#6831) Andrew Mendelsohn [d952d16] [C-3453] Replace edit collection form with new fields (#6829) Andrew Mendelsohn [3ed1747] Make mobile buy buttons stick to bottom (#6827) Reed [4d02605] [PAY-2209] Use single modal for purchase and transfer (#6810) Reed [f84f24e] [PAY-2227] Set min-width for NavPopupMenu (#6826) Reed [17ca613] Auto-hide scheduled releases and index as utc (#6824) Isaac Solo [3d8fbaa] [C-3421] Add email-in-use hint (#6825) Dylan Jeffers [b88999f] [PAY-2215] Play full purchased tracks from mobile library (#6821) Reed [46c953e] Bump version to 0.5.29 audius-infra [1d688a2] Track number of blobs served from mediorum and expose metric endpoint (#6816) Michelle Brier [958ff2b] Fix merchant id (#6822) Raymond Jacobson [d168c29] [C-3403] Fix sign-up e2e (#6815) Dylan Jeffers [534a405] [PAY-2228] Add coinflow merchant id (#6820) Raymond Jacobson [fe57135] Fix analytics after vite migration (#6819) Raymond Jacobson [16fc48c] [C-3399] Fix trending links and twitter embed (#6818) Dylan Jeffers [6517400] [C-3414] Update password reset modals to use harmony components (#6817) Kyle Shanks [7f37ee2] Fix embed player playlist styles (#6813) Raymond Jacobson [1e66d4f] Bump version to 0.5.28 audius-infra [f519ae2] [PAY-2213] Fix closing Add Funds modal (#6814) Raymond Jacobson [28d7f35] Set up test jail doc & skip current flaky tests (#6774) JD Francis [0ca4675] Make DN a thin container when running locally, add createSender on DN start (#6335) Marcus Pasell [8df08b3] trending: use aggregate tables (#6806) Steve Perkins [16e2d08] [C-3389] Native harmony layout components (#6808) JD Francis [e863af4] [C-3419] Add common sign-up components (#6809) Dylan Jeffers [53772e6] [C-3415] Add confirm handle page (#6797) Dylan Jeffers [3e82b69] Negative error codes for allowing (#6807) Isaac Solo [1b7c76f] add arm builds for uptime (#6805) alecsavvy [eadeadb] Update payment router readme (#6804) Saliou Diallo [fc28641] [PAY-2208] Make payment router test e2e (#6803) Raymond Jacobson [19eed3f] Bump version to 0.5.27 audius-infra [d786864] [C-3391] Update native harmony Text component to use harmony theme values (#6798) Kyle Shanks [40c3e18] [PAY-2211] Remove borders around withdraw/purchase tab empty states (#6796) Reed [30a6674] Improve harmony font consistency (#6802) Raymond Jacobson [8c377a4] Protocol dashboard entrypoint (#6776) Michelle Brier [81ae2a1] [PAY-2219] Address Embed QA (#6801) Raymond Jacobson [a5e5d56] Fix FixedDecimal.toShorthand() for numbers less than a tenth (#6742) Marcus Pasell [00b0d25] Add Solana Relay to Discovery (#6782) Marcus Pasell [f2a8150] Fix redirect protocol (#6800) Raymond Jacobson [9ddbf19] [PAY-2220] Use slot_diff in user_bank health (#6799) Reed [12f39f1] fix: Update welcome modal cover photo to use saved cover photos (#6781) JD Francis [0c70996] [PAY-2216] DN health_check 500's if index user bank unhealthy (#6795) Reed [7f35a50] Bump version to 0.5.26 audius-infra [d8cf15c] require push-uptime to deploy (#6794) Michelle Brier [76de38b] [C-3354, C-3396, C-3397] Sign up QA (#6780) Dylan Jeffers [051c6c2] [PAY-2212] Don't grow fullWidth buttons (#6791) Reed [5fe1c83] Fix uptime ts errors (#6793) Michelle Brier [1124ae5] Fix dashboard prod deploy (#6787) Michelle Brier [2fefdad] Enable embed ci workflow on main (#6792) Raymond Jacobson [9b00279] [PROTO-1449] Make mediorum query eth directly for service providers (#6788) Theo Ilie [5bc0a23] [PAY-2176] Implement remote config hooks via context (#6778) Randy Schott [d734058] Default retry for verified user bot (#6783) Isaac Solo [d58dbb4] [PAY-2210] Change crpyto transfer modal button to secondary (#6790) Reed [9624aaa] Fix user bank indexing (#6789) Raymond Jacobson [8448c37] [PAY-2214] Change require to import in AnimatedIconbutton (#6786) Reed [26f89a8] Fix web lint (#6784) Reed [22a34b1] [PAY-2066] Buy Crypto via SOL recovery flow (#6598) Marcus Pasell [b47402a] Connect social to finish profile page, fix account header z index C-3384 (#6779) nicoback2 [d4d6b71] Bump version to 0.5.25 audius-infra [c846f7a] d contracts interface (#6767) Michelle Brier

dylanjeffers added 2 commits November 28, 2023 00:05

[C-3415] Add confirm handle page

3ad8af6

[C-3419] Add common sign-up components

ad7d237

pull-request-size bot added the size/XXL label Nov 29, 2023

dylanjeffers requested review from a team and DejayJD and removed request for a team November 29, 2023 20:43

Merge branch 'main' into dj-c-3419-common-components

bb160e4

dylanjeffers commented Nov 29, 2023

View reviewed changes

amendelsohn approved these changes Nov 29, 2023

View reviewed changes

Improve continue footer

7de7221

dylanjeffers merged commit e863af4 into main Nov 30, 2023
3 of 5 checks passed

dylanjeffers deleted the dj-c-3419-common-components branch November 30, 2023 00:19

DejayJD reviewed Nov 30, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-3419] Add common sign-up components #6809

[C-3419] Add common sign-up components #6809

dylanjeffers commented Nov 29, 2023 •

edited

Loading

audius-infra commented Nov 29, 2023

audius-infra commented Nov 29, 2023

dylanjeffers left a comment

dylanjeffers Nov 29, 2023

amendelsohn left a comment

amendelsohn Nov 29, 2023

dylanjeffers Nov 29, 2023

DejayJD Nov 30, 2023

amendelsohn Nov 29, 2023

dylanjeffers Nov 29, 2023

amendelsohn Nov 29, 2023

dylanjeffers Nov 29, 2023

amendelsohn Nov 29, 2023

dylanjeffers Nov 29, 2023

DejayJD left a comment

DejayJD Nov 30, 2023

DejayJD Nov 30, 2023

DejayJD Nov 30, 2023

[C-3419] Add common sign-up components #6809

[C-3419] Add common sign-up components #6809

Conversation

dylanjeffers commented Nov 29, 2023 • edited Loading

Description

audius-infra commented Nov 29, 2023

audius-infra commented Nov 29, 2023

dylanjeffers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amendelsohn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DejayJD left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dylanjeffers commented Nov 29, 2023 •

edited

Loading