[C-3419] Add common sign-up components

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

@@ -21,6 +21,7 @@ export const Box = styled.div<BoxProps>(
     ml,
     mr,
     mb,
+    backgroundColor,
     border,
     borderTop,
     borderRight,
@@ -61,6 +62,8 @@ export const Box = styled.div<BoxProps>(
       marginLeft: marginL && spacing[marginL],
       marginRight: marginR && spacing[marginR],
       marginBottom: marginB && spacing[marginB],
+      backgroundColor:
+        backgroundColor && theme.color.background[backgroundColor],
       border: border && `1px solid ${color.border[border]}`,
       borderTop: borderTop && `1px solid ${color.border[borderTop]}`,
       borderRight: borderRight && `1px solid ${color.border[borderRight]}`,

packages/harmony/src/components/layout/Box/types.ts

@@ -1,6 +1,6 @@
 import type { CSSProperties, ComponentPropsWithoutRef } from 'react'
 
-import type { BorderColors } from 'foundations/color'
+import type { BackgroundColors, BorderColors } from 'foundations/color'
 import type { CornerRadiusOptions } from 'foundations/corner-radius'
 import type { ShadowOptions } from 'foundations/shadows'
 import type { SpacingOptions } from 'foundations/spacing'
@@ -40,7 +40,8 @@ export type BoxProps = {
   mr?: SpacingOptions
   /** Margin Bottom */
   mb?: SpacingOptions
-
+  /** Background Color */
+  backgroundColor?: BackgroundColors
   /** Border */
   border?: BorderColors
   /** Border Top */

packages/harmony/src/components/layout/Paper/types.ts

@@ -1,5 +1,4 @@
 import type {
-  BackgroundColors,
   BorderColors,
   CornerRadiusOptions,
   ShadowOptions
@@ -9,12 +8,6 @@ import type {
  * An elevated container which stands out from the background.
  */
 export type PaperProps = {
-  /**
-   * Background Color
-   * @default white
-   */
-  backgroundColor?: BackgroundColors
-
   /**
    * Border type. If not provided, no border will be used.
    * @default default

packages/web/src/pages/sign-in-page/SignInPage.tsx

@@ -2,7 +2,6 @@ import { useCallback } from 'react'
 
 import {
   Flex,
-  Text,
   IconAudiusLogoHorizontalColor,
   Button,
   IconArrowRight,
@@ -22,6 +21,7 @@ import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordFiel
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
 import PreloadImage from 'components/preload-image/PreloadImage'
 import { useMedia } from 'hooks/useMedia'
+import { Heading } from 'pages/sign-up-page/components/layout'
 import { useSelector } from 'utils/reducer'
 import { SIGN_UP_PAGE } from 'utils/route'
 
@@ -95,15 +95,7 @@ export const SignInPage = () => {
                 />
               )}
             </Box>
-            <Text
-              variant='heading'
-              size={isMobile ? 'm' : 'l'}
-              tag='h1'
-              color='accent'
-              css={{ textAlign: isMobile ? 'center' : undefined }}
-            >
-              {messages.title}
-            </Text>
+            <Heading heading={messages.title} centered={isMobile} />
             <Flex direction='column' gap='l'>
               <HarmonyTextField name='email' label={messages.emailLabel} />
               <HarmonyPasswordField

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

@@ -56,7 +56,7 @@ export const CoverPhotoBanner = ({
           : { backgroundColor: color.neutral.n400 })
       }}
     >
-      {showPhotoIcon && !hasImage ? (
+      {showPhotoIcon ? (
         <IconImage
           css={{ position: 'absolute', right: '16px', top: '16px' }}
           color='staticWhite'

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

@@ -0,0 +1,19 @@
+import { Text } from '@audius/harmony'
+
+const messages = {
+  of: 'of'
+}
+
+type OutOfTextProps = {
+  numerator: number
+  denominator: number
+}
+
+export const OutOfText = (props: OutOfTextProps) => {
+  const { numerator, denominator } = props
+  return (
+    <Text size='s' variant='label' color='subdued'>
+      {numerator} {messages.of} {denominator}
+    </Text>
+  )
+}

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

@@ -0,0 +1,26 @@
+import { Text, TextLink } from '@audius/harmony'
+
+import { PRIVACY_POLICY, TERMS_OF_SERVICE } from 'utils/route'
+
+const messages = {
+  agreeTo:
+    "By clicking continue, you state you have read and agree to Audius' ",
+  termsOfService: 'Terms of Service',
+  and: ' and ',
+  privacyPolicy: 'Privacy Policy.'
+}
+
+export const SignUpAgreementText = () => {
+  return (
+    <Text color='default' size='s' strength='default' variant='body'>
+      {messages.agreeTo}
+      <TextLink href={TERMS_OF_SERVICE} variant='visible' isExternal>
+        {messages.termsOfService}
+      </TextLink>
+      {messages.and}
+      <TextLink href={PRIVACY_POLICY} variant='visible' isExternal>
+        {messages.privacyPolicy}
+      </TextLink>
+    </Text>
+  )
+}