Address divider issues

AudiusProject · Dec 10, 2024 · df9020b · df9020b
1 parent 053d1fe
commit df9020b
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 36 deletions.
diff --git a/packages/mobile/src/components/skeletons/EntitySkeleton.tsx b/packages/mobile/src/components/skeletons/EntitySkeleton.tsx
@@ -3,7 +3,8 @@ import { useMemo, type ReactNode } from 'react'
 import { times, random } from 'lodash'
 import { View } from 'react-native'
 
-import { Tile, Text, Divider } from 'app/components/core'
+import { Divider } from '@audius/harmony-native'
+import { Tile, Text } from 'app/components/core'
 import Skeleton, { StaticSkeleton } from 'app/components/skeleton/Skeleton'
 import { makeStyles } from 'app/styles'
 
@@ -59,10 +60,6 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     height: 25,
     marginHorizontal: spacing(4)
   },
-  divider: {
-    width: '100%',
-    marginVertical: spacing(2)
-  },
   metrics: {
     width: '100%',
     flexDirection: 'row',
@@ -111,6 +108,8 @@ export const EntitySkeleton = (props: EntitySkeletonProps) => {
     []
   )
 
+  const divider = <Divider w='100%' mv='s' />
+
   return (
     <Tile styles={{ root: styles.root, content: styles.content }}>
       <View style={styles.heading}>
@@ -133,7 +132,7 @@ export const EntitySkeleton = (props: EntitySkeletonProps) => {
           <StaticSkeleton style={styles.socialAction} />
           <StaticSkeleton style={styles.socialAction} />
         </View>
-        <Divider style={styles.divider} />
+        {divider}
         <View style={styles.metrics}>
           <StaticSkeleton style={styles.metric} />
           <StaticSkeleton style={styles.metric} />
@@ -147,15 +146,15 @@ export const EntitySkeleton = (props: EntitySkeletonProps) => {
             />
           ))}
         </View>
-        <Divider style={styles.divider} />
+        {divider}
         <View style={styles.metadataSection}>
           <StaticSkeleton style={styles.metadata} />
           <StaticSkeleton style={styles.metadata} />
           <StaticSkeleton style={styles.metadata} />
         </View>
         {children ? (
           <>
-            <Divider style={styles.divider} />
+            {divider}
             {children}
           </>
         ) : null}

diff --git a/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx b/packages/mobile/src/screens/collection-screen/CollectionScreen.tsx
@@ -33,12 +33,11 @@ import { encodeUrlName, removeNullable } from '@audius/common/utils'
 import type { Nullable } from '@audius/common/utils'
 import { useDispatch, useSelector } from 'react-redux'
 
-import type { ImageProps } from '@audius/harmony-native'
+import { Divider, type ImageProps } from '@audius/harmony-native'
 import {
   ScreenContent,
   Screen,
-  VirtualizedScrollView,
-  Divider
+  VirtualizedScrollView
 } from 'app/components/core'
 import { ScreenSecondaryContent } from 'app/components/core/Screen/ScreenSecondaryContent'
 import { CollectionImage } from 'app/components/image/CollectionImage'
@@ -48,7 +47,6 @@ import { useRoute } from 'app/hooks/useRoute'
 import { setVisibility } from 'app/store/drawers/slice'
 import { getIsCollectionMarkedForDownload } from 'app/store/offline-downloads/selectors'
 import { makeStyles } from 'app/styles'
-import { useThemePalette } from 'app/utils/theme'
 
 import { CollectionScreenDetailsTile } from './CollectionScreenDetailsTile'
 import { CollectionScreenSkeleton } from './CollectionScreenSkeleton'
@@ -69,10 +67,6 @@ const getUserId = accountSelectors.getUserId
 const useStyles = makeStyles(({ spacing }) => ({
   root: {
     padding: spacing(3)
-  },
-  divider: {
-    marginTop: spacing(2),
-    marginBottom: spacing(8)
   }
 }))
 
@@ -136,8 +130,6 @@ const CollectionScreenComponent = (props: CollectionScreenComponentProps) => {
   const { onOpen: openEarlyReleaseConfirmation } =
     useEarlyReleaseConfirmationModal()
 
-  const { neutralLight5 } = useThemePalette()
-
   const releaseDate =
     'release_date' in collection ? collection.release_date : created_at
   const url = useMemo(() => {
@@ -315,7 +307,7 @@ const CollectionScreenComponent = (props: CollectionScreenComponentProps) => {
             />
             {isOwner && !is_album && !ddex_app ? (
               <ScreenSecondaryContent>
-                <Divider style={styles.divider} color={neutralLight5} />
+                <Divider mt='s' mb='2xl' />
                 <SuggestedTracks collectionId={playlist_id} />
               </ScreenSecondaryContent>
             ) : null}

diff --git a/packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileSocials.tsx b/packages/mobile/src/screens/profile-screen/ProfileHeader/ProfileSocials.tsx
@@ -5,9 +5,8 @@ import { cacheUsersActions } from '@audius/common/store'
 import { View, Animated } from 'react-native'
 import { useDispatch } from 'react-redux'
 
-import { Divider } from 'app/components/core'
+import { Divider } from '@audius/harmony-native'
 import { makeStyles } from 'app/styles'
-import { spacing } from 'app/styles/spacing'
 
 import { useSelectProfile } from '../selectors'
 
@@ -31,9 +30,6 @@ const useStyles = makeStyles(({ spacing }) => ({
   },
   socialsCentered: {
     justifyContent: 'center'
-  },
-  divider: {
-    marginVertical: spacing(1)
   }
 }))
 
@@ -106,10 +102,8 @@ export const ProfileSocials = () => {
         {index === socialLinks.length - 1 ? null : (
           <Divider
             orientation='vertical'
-            style={[
-              styles.divider,
-              { marginHorizontal: spacing(socialsCount === 2 ? 6 : 4) }
-            ]}
+            mv='xs'
+            mh={socialsCount === 2 ? 's' : 'xs'}
           />
         )}
       </Fragment>

diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx
@@ -17,6 +17,7 @@ import { useDispatch, useSelector } from 'react-redux'
 import type { IconComponent } from '@audius/harmony-native'
 import {
   Box,
+  Divider,
   Flex,
   FollowButton,
   IconNote,
@@ -30,7 +31,6 @@ import {
   useTheme
 } from '@audius/harmony-native'
 import {
-  Divider,
   ProfilePicture,
   UserCoverPhoto,
   UserDisplayName

diff --git a/packages/mobile/src/screens/wallet-connect/components/LinkedWallets.tsx b/packages/mobile/src/screens/wallet-connect/components/LinkedWallets.tsx
@@ -4,8 +4,7 @@ import { tokenDashboardPageSelectors } from '@audius/common/store'
 import { FlatList, View } from 'react-native'
 import { useSelector } from 'react-redux'
 
-import { Flex, Text } from '@audius/harmony-native'
-import { Divider } from 'app/components/core'
+import { Divider, Flex, Text } from '@audius/harmony-native'
 import LoadingSpinner from 'app/components/loading-spinner'
 import { makeStyles } from 'app/styles'
 
@@ -37,9 +36,6 @@ const useStyles = makeStyles(({ spacing }) => ({
   },
   gap: {
     flex: 2
-  },
-  divider: {
-    marginVertical: spacing(3)
   }
 }))
 
@@ -106,7 +102,7 @@ export const LinkedWallets = () => {
         </Text>
         <View style={styles.gap} />
       </View>
-      <Divider style={styles.divider} />
+      <Divider mv='m' />
       {loadingStatus === Status.SUCCESS ? (
         <FlatList
           renderItem={({ item }) => (
@@ -120,7 +116,7 @@ export const LinkedWallets = () => {
             />
           )}
           data={wallets}
-          ItemSeparatorComponent={() => <Divider style={styles.divider} />}
+          ItemSeparatorComponent={() => <Divider mv='m' />}
         />
       ) : loadingStatus === Status.IDLE || loadingStatus === Status.LOADING ? (
         <Flex alignSelf='center'>