FollowArtistsPage initial layout

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

@@ -6,5 +6,6 @@ import styled from '@emotion/styled'
 export const Divider = styled.div(({ theme }) => ({
   minHeight: 1,
   minWidth: 1,
+  alignSelf: 'stretch',
   backgroundColor: theme.color.border.strong
 }))

packages/harmony/src/foundations/spacing/spacing.css

@@ -47,4 +47,5 @@ root {
   --harmony-spacing-2xl: 32px;
   --harmony-spacing-3xl: 48px;
   --harmony-spacing-4xl: 64px;
+  --harmony-spacing-5xl: 128px;
 }

packages/harmony/src/foundations/theme/index.ts

@@ -1,2 +1,3 @@
 export * from './ThemeProvider'
 export * from './theme'
+export { useTheme } from '@emotion/react'

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

@@ -1,4 +1,4 @@
-import { Box } from '@audius/harmony'
+import { Box, Paper } from '@audius/harmony'
 import { useSelector } from 'react-redux'
 import { Redirect, Route, RouteProps, Switch } from 'react-router-dom'
 
@@ -82,29 +82,31 @@ const determineAllowedRoute = (
  * <Route> wrapper that handles redirecting through the sign up page flow
  */
 export function SignUpRoute({ children, ...rest }: RouteProps) {
-  const existingSignUpState = useSelector((state: AppState) => getSignOn(state))
+  // const existingSignUpState = useSelector((state: AppState) => getSignOn(state))
   return (
     <Route
       {...rest}
       render={({ location }) => {
-        // Check if the route is allowed, if not we redirect accordingly
-        const { isAllowedRoute, correctedRoute } = determineAllowedRoute(
-          existingSignUpState,
-          location.pathname
-        )
-        return isAllowedRoute ? (
-          <>{children}</>
-        ) : (
-          <Redirect to={correctedRoute} />
-        )
+        // TODO: DO NOT MERGE
+        // // Check if the route is allowed, if not we redirect accordingly
+        // const { isAllowedRoute, correctedRoute } = determineAllowedRoute(
+        //   existingSignUpState,
+        //   location.pathname
+        // )
+        // return isAllowedRoute ? (
+        //   <>{children}</>
+        // ) : (
+        //   <Redirect to={correctedRoute} />
+        // )
+        return <>{children}</>
       }}
     />
   )
 }
 
 export const SignUpRootPage = () => {
   return (
-    <Box h='100%'>
+    <Paper h='100%' direction='column' m='4xl'>
       <Switch>
         <SignUpRoute exact path={SIGN_UP_EMAIL_PAGE}>
           <SignUpPage />
@@ -145,6 +147,6 @@ export const SignUpRootPage = () => {
           </Switch>
         </SignUpRoute>
       </Switch>
-    </Box>
+    </Paper>
   )
 }

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

@@ -0,0 +1,86 @@
+import { HTMLProps } from 'react'
+
+import { UserMetadata, imageProfilePicEmpty } from '@audius/common'
+import {
+  Avatar,
+  Box,
+  Divider,
+  Flex,
+  IconNote,
+  IconUser,
+  IconVerified,
+  Paper,
+  Text
+} from '@audius/harmony'
+
+type FollowArtistTileProps = {
+  user: UserMetadata
+} & HTMLProps<HTMLInputElement>
+
+const FollowArtistTile = (props: FollowArtistTileProps) => {
+  const {
+    user: {
+      user_id,
+      name,
+      cover_photo,
+      profile_picture_sizes,
+      is_verified,
+      track_count,
+      follower_count
+    },
+    checked,
+    onChange
+  } = props
+  return (
+    <Paper css={{ minWidth: 200 }}>
+      <Flex w='100%' h='100%' direction='column' alignItems='center'>
+        <Box w='100%' h={68} css={{ backgroundImage: `url(${cover_photo})` }} />
+        <Box w={72} h={72}>
+          <Avatar
+            variant='strong'
+            src={profile_picture_sizes ?? imageProfilePicEmpty}
+          />
+        </Box>
+        <Flex direction='column' alignItems='center' gap='l' p='s'>
+          <Flex direction='column' alignItems='center' gap='s'>
+            <Flex direction='row' gap='xs' alignItems='center'>
+              <Text variant='title' size='s' strength='default'>
+                {name}
+              </Text>
+              {is_verified ? (
+                <IconVerified css={{ width: 12, height: 12 }} />
+              ) : null}
+            </Flex>
+            <Flex direction='row' gap='s' alignItems='center'>
+              <Flex direction='row' gap='xs' alignItems='center'>
+                <IconNote width={16} height={16} color='subdued' />
+                <Text variant='body' size='s' strength='strong'>
+                  {track_count}
+                </Text>
+              </Flex>
+              {/* TODO: Divider height not working */}
+              <Divider />
+              <Flex direction='row' gap='xs' alignItems='center'>
+                <IconUser width={16} height={16} color='subdued' />
+                <Text variant='body' size='s' strength='strong'>
+                  {follower_count}
+                </Text>
+              </Flex>
+            </Flex>
+          </Flex>
+          <label key={user_id}>
+            <input
+              type='checkbox'
+              name={String(user_id)}
+              onChange={onChange}
+              checked={checked}
+            />
+            {name}
+          </label>
+        </Flex>
+      </Flex>
+    </Paper>
+  )
+}
+
+export default FollowArtistTile

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

@@ -6,22 +6,35 @@ import {
   useGetFeaturedArtists,
   useGetTopArtistsInGenre
 } from '@audius/common'
-import { Button } from '@audius/harmony'
+import {
+  Button,
+  Flex,
+  Text,
+  IconArrowRight,
+  PlainButton,
+  PlainButtonType,
+  SelectablePill,
+  Paper
+} from '@audius/harmony'
 import { Form, Formik } from 'formik'
 import { useDispatch } from 'react-redux'
 
 import { addFollowArtists } from 'common/store/pages/signon/actions'
 import { getGenres } from 'common/store/pages/signon/selectors'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 import { useSelector } from 'utils/reducer'
-import { TRENDING_PAGE } from 'utils/route'
+import { SIGN_UP_PASSWORD_PAGE, TRENDING_PAGE } from 'utils/route'
+
+import { ContinueFooter } from '../components/ContinueFooter'
+import FollowArtistTile from '../components/FollowArtistTile'
 
 const messages = {
   header: 'Follow At Least 3 Artists',
   description:
     'Curate your feed with tracks uploaded or reposted by anyone you follow. Click the artist’s photo to preview their music.',
   genresLabel: 'Selected genres',
   continue: 'Continue',
+  goBack: 'Go Back',
   pickArtists: (genre: string) => `Pick ${genre} Artists`
 }
 
@@ -34,7 +47,9 @@ const initialValues: SelectArtistsValues = {
 }
 
 export const SelectArtistsPage = () => {
-  const genres = useSelector((state) => ['Featured', ...getGenres(state)])
+  // TODO: DO NOT MERGE
+  // const genres = useSelector((state) => ['Featured', ...getGenres(state)])
+  const genres = ['electronic', 'acoustic']
   const [currentGenre, setCurrentGenre] = useState('Featured')
   const dispatch = useDispatch()
   const navigate = useNavigateToPage()
@@ -72,61 +87,67 @@ export const SelectArtistsPage = () => {
     Status.LOADING
 
   return (
-    <div>
-      <h1>{messages.header}</h1>
-      <p>{messages.description}</p>
-      <div role='radiogroup' aria-label={messages.genresLabel}>
-        {genres.map((genre) => (
-          <label key={genre}>
-            <input
-              type='radio'
-              value={genre}
-              checked={genre === currentGenre}
-              onChange={handleChangeGenre}
-            />
-            {genre}
-          </label>
-        ))}
-      </div>
-      <Formik initialValues={initialValues} onSubmit={handleSubmit}>
-        {({ values, setValues }) => {
-          const { artists: selectedArtists } = values
-          const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-            const { checked, name } = e.target
-            const userId = parseInt(name, 10)
-            const newArtists = checked
-              ? [userId, ...selectedArtists]
-              : selectedArtists.filter((value) => value !== userId)
-
-            setValues({ artists: newArtists })
-          }
-          return (
-            <Form>
-              <fieldset>
-                <legend>{messages.pickArtists(currentGenre)}</legend>
-                {isLoading
-                  ? null
-                  : artists?.map((user) => {
-                      const { user_id, name } = user
+    <Flex direction='column' gap='2xl'>
+      <Flex direction='column' gap='2xl' mh='5xl'>
+        <Flex direction='column' gap='l'>
+          <Text variant='heading' size='l' strength='default'>
+            {messages.header}
+          </Text>
+          <Text variant='body' size='l' strength='default'>
+            {messages.description}
+          </Text>
+        </Flex>
+        <Flex
+          w='100%'
+          direction='row'
+          gap='s'
+          justifyContent='center'
+          role='radiogroup'
+          aria-label={messages.genresLabel}
+        >
+          {genres.map((genre) => (
+            // TODO: max of 6, kebab overflow
+            <SelectablePill key={genre} label={genre} />
+          ))}
+        </Flex>
+        <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+          {({ values, setValues }) => {
+            const { artists: selectedArtists } = values
+            const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+              const { checked, name } = e.target
+              const userId = parseInt(name, 10)
+              const newArtists = checked
+                ? [userId, ...selectedArtists]
+                : selectedArtists.filter((value) => value !== userId)
 
-                      return (
-                        <label key={user_id}>
-                          <input
-                            type='checkbox'
-                            name={String(user_id)}
-                            onChange={handleChange}
-                            checked={selectedArtists.includes(user_id)}
-                          />
-                          {name}
-                        </label>
-                      )
-                    })}
-              </fieldset>
-              <Button type='submit'>{messages.continue}</Button>
-            </Form>
-          )
-        }}
-      </Formik>
-    </div>
+              setValues({ artists: newArtists })
+            }
+            return (
+              <Form>
+                <fieldset>
+                  <Paper
+                    css={{ background: 'var(--harmony-bg-default)' }}
+                    shadow='none'
+                    p='xl'
+                    direction='row'
+                    gap='m'
+                    rowGap='m'
+                    wrap='wrap'
+                  >
+                    {isLoading
+                      ? null
+                      : artists?.map((user) => {
+                          return (
+                            <FollowArtistTile key={user.user_id} user={user} />
+                          )
+                        })}
+                  </Paper>
+                </fieldset>
+              </Form>
+            )
+          }}
+        </Formik>
+      </Flex>
+    </Flex>
   )
 }