[C-3929] Fix select-artist genres (#7765)

AudiusProject · Mar 1, 2024 · cb9c022 · cb9c022
1 parent 709ff70
commit cb9c022
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 11 deletions.
diff --git a/packages/mobile/src/screens/sign-on-screen/components/layout.tsx b/packages/mobile/src/screens/sign-on-screen/components/layout.tsx
@@ -11,8 +11,15 @@ import type {
   PaperProps,
   ButtonProps
 } from '@audius/harmony-native'
-import { Button, Flex, Paper, Text, useTheme } from '@audius/harmony-native'
-import { KeyboardAvoidingView, HeaderShadow } from 'app/components/core'
+import {
+  Button,
+  Divider,
+  Flex,
+  Paper,
+  Text,
+  useTheme
+} from '@audius/harmony-native'
+import { KeyboardAvoidingView } from 'app/components/core'
 
 const messages = {
   continue: 'Continue'
@@ -36,13 +43,13 @@ export const Page = (props: PageProps) => {
     h: '100%',
     gap: '2xl',
     ph: noGutter ? undefined : gutterSize,
-    pv: '2xl',
+    pv: 'xl',
     backgroundColor: 'white'
   }
 
   return (
     <>
-      <HeaderShadow />
+      <Divider />
       {/* // 1 zIndex is to appear below */}
       <Flex
         {...layoutProps}

diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/TopArtistsCardList.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/TopArtistsCardList.tsx
@@ -3,6 +3,8 @@ import {
   useGetFeaturedArtists
 } from '@audius/common/api'
 import type { QueryHookOptions } from '@audius/common/audius-query'
+import type { Genre } from '@audius/common/utils'
+import { convertGenreLabelToValue } from '@audius/common/utils'
 import { css } from '@emotion/native'
 import { useIsFocused, type RouteProp } from '@react-navigation/native'
 
@@ -28,9 +30,12 @@ export const TopArtistsCardList = (props: Props) => {
   const isFocused = useIsFocused()
   const { spacing } = useTheme()
 
-  const { data: artists } = useGetTopArtists(genre, {
-    disabled: !isFocused
-  })
+  const { data: artists } = useGetTopArtists(
+    convertGenreLabelToValue(genre as Genre),
+    {
+      disabled: !isFocused
+    }
+  )
 
   return (
     <CardList

diff --git a/packages/web/src/components/payment-method/PaymentMethod.tsx b/packages/web/src/components/payment-method/PaymentMethod.tsx
@@ -174,7 +174,9 @@ export const PaymentMethod = ({
                   <Icon color='default' />
                 </Flex>
               ) : null}
-              <Text variant='body' strength='default' size='m'>{label}</Text>
+              <Text variant='body' strength='default' size='m'>
+                {label}
+              </Text>
             </Flex>
             <Text
               variant='body'

diff --git a/packages/web/src/pages/sign-up-page/components/layout.tsx b/packages/web/src/pages/sign-up-page/components/layout.tsx
@@ -10,7 +10,6 @@ import {
 
 import { Maybe } from '@audius/common/utils'
 import {
-  Box,
   BoxProps,
   Button,
   ButtonProps,
@@ -246,14 +245,14 @@ export const ReadOnlyField = (props: ReadOnlyFieldProps) => {
   const { label, value } = props
 
   return (
-    <Box>
+    <Flex direction='column' gap='xs'>
       <Text variant='label' size='xs'>
         {label}
       </Text>
       <Text variant='body' size='m'>
         {value}
       </Text>
-    </Box>
+    </Flex>
   )
 }