[C-3804 C-3794] Fix native icon colors and size (#7560)

packages/harmony/src/foundations/color/semantic.ts

@@ -17,6 +17,7 @@ const createSemanticTheme = (primitives: PrimitiveColors) => ({
     default: primitives.neutral.neutral,
     subdued: primitives.neutral.n400,
     disabled: primitives.neutral.n150,
+    active: primitives.primary.primary,
     accent: primitives.secondary.s300,
     staticWhite: primitives.static.white,
     warning: primitives.special.orange,

packages/mobile/src/components/core/index.ts

@@ -6,7 +6,6 @@ export * from './EmptyTile'
 export * from './GradientIcon'
 export * from './GradientText'
 export * from './Hyperlink'
-export * from './IconButton'
 export * from './Link'
 export * from './Screen'
 export * from './TextInput'

packages/mobile/src/components/details-tile/DetailsTileActionButtons.tsx

@@ -8,25 +8,28 @@ import { View } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import {
+  IconButton,
   IconKebabHorizontal,
   IconPencil,
   IconRocket,
   IconShare
 } from '@audius/harmony-native'
-import { IconButton } from 'app/components/core'
 import { FavoriteButton } from 'app/components/favorite-button'
 import { RepostButton } from 'app/components/repost-button'
 import { makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
-import { useThemeColors } from 'app/utils/theme'
 
 const { getCollecitonHasHiddenTracks, getIsCollectionEmpty } =
   cacheCollectionsSelectors
 
 const getMessages = (collectionType: 'album' | 'playlist') => ({
   publishButtonEmptyDisabledContent: 'You must add at least 1 track.',
   publishButtonHiddenDisabledContent: `You cannot make a ${collectionType} with hidden tracks public.`,
-  shareButtonDisabledContent: `You can’t share an empty ${collectionType}.`
+  shareButtonDisabledHint: `You can’t share an empty ${collectionType}.`,
+  shareButtonLabel: 'Share Content',
+  overflowButtonLabel: 'More Options',
+  editButtonLabel: 'Edit Content',
+  publishButtonLabel: 'Publish Content'
 })
 
 type DetailsTileActionButtonsProps = {
@@ -85,7 +88,6 @@ export const DetailsTileActionButtons = ({
   onPressShare
 }: DetailsTileActionButtonsProps) => {
   const styles = useStyles()
-  const { neutralLight4 } = useThemeColors()
   const isCollectionEmpty = useSelector((state: CommonState) =>
     getIsCollectionEmpty(state, { id: collectionId })
   )
@@ -125,45 +127,49 @@ export const DetailsTileActionButtons = ({
 
   const shareButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconShare}
-      isDisabled={isCollectionEmpty}
-      disabledPressToastContent={messages.shareButtonDisabledContent}
+      disabled={isCollectionEmpty}
+      disabledHint={messages.shareButtonDisabledHint}
       onPress={onPressShare}
-      styles={{ icon: [styles.actionButton] }}
+      aria-label={messages.shareButtonLabel}
+      size='2xl'
     />
   )
 
   const overflowMenu = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconKebabHorizontal}
       onPress={onPressOverflow}
-      styles={{ icon: styles.actionButton }}
+      aria-label={messages.overflowButtonLabel}
+      size='2xl'
     />
   )
 
   const editButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconPencil}
       onPress={onPressEdit}
-      styles={{ icon: styles.actionButton }}
+      aria-label={messages.editButtonLabel}
+      size='2xl'
     />
   )
 
   const publishButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconRocket}
-      isDisabled={isCollectionEmpty || collectionHasHiddenTracks}
-      disabledPressToastContent={
+      disabled={isCollectionEmpty || collectionHasHiddenTracks}
+      disabledHint={
         collectionHasHiddenTracks
           ? messages.publishButtonHiddenDisabledContent
           : messages.publishButtonEmptyDisabledContent
       }
+      aria-label={messages.publishButtonLabel}
       onPress={onPressPublish}
-      styles={{ icon: styles.actionButton }}
+      size='2xl'
     />
   )
 

packages/mobile/src/components/feed-tip-tile/FeedTipTile.tsx

@@ -12,7 +12,7 @@ import { storeDismissedTipInfo } from 'common/store/tipping/sagas'
 import { View } from 'react-native'
 import { useDispatch, useSelector } from 'react-redux'
 
-import { IconClose } from '@audius/harmony-native'
+import { IconButton, IconClose } from '@audius/harmony-native'
 import { FadeInView, Tile } from 'app/components/core'
 import { make, track } from 'app/services/analytics'
 import { localStorage } from 'app/services/local-storage'
@@ -36,20 +36,14 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     marginHorizontal: spacing(3),
     marginTop: spacing(3),
     paddingHorizontal: spacing(2),
-    paddingVertical: spacing(4)
+    paddingVertical: spacing(3)
   },
   header: {
-    display: 'flex',
     flexDirection: 'row',
     justifyContent: 'space-between'
   },
   skeleton: {
     paddingBottom: 0
-  },
-  iconRemove: {
-    height: spacing(6),
-    width: spacing(6),
-    fill: palette.neutralLight4
   }
 }))
 
@@ -104,7 +98,13 @@ export const FeedTipTile = () => {
       <FadeInView>
         <View style={styles.header}>
           <ReceiverDetails receiver={usersMap[tipToDisplay.receiver_id]} />
-          <IconClose {...styles.iconRemove} onPress={handlePressClose} />
+          <IconButton
+            icon={IconClose}
+            style={{ alignSelf: 'flex-start' }}
+            size='m'
+            color='subdued'
+            onPress={handlePressClose}
+          />
         </View>
         <SenderDetails
           senders={[

packages/mobile/src/components/lineup-tile/LineupTileActionButtons.tsx

@@ -5,17 +5,26 @@ import { isContentUSDCPurchaseGated } from '@audius/common/models'
 import type { Nullable } from '@audius/common/utils'
 import { View } from 'react-native'
 
-import { IconKebabHorizontal, IconShare } from '@audius/harmony-native'
-import { IconButton } from 'app/components/core'
+import {
+  IconButton,
+  IconKebabHorizontal,
+  IconShare
+} from '@audius/harmony-native'
 import { FavoriteButton } from 'app/components/favorite-button'
 import { RepostButton } from 'app/components/repost-button'
 import { useIsUSDCEnabled } from 'app/hooks/useIsUSDCEnabled'
 import { flexRowCentered, makeStyles } from 'app/styles'
 import type { GestureResponderHandler } from 'app/types/gesture'
-import { useThemeColors } from 'app/utils/theme'
 
 import { LineupTileAccessStatus } from './LineupTileAccessStatus'
 
+const messages = {
+  shareButtonLabel: 'Share Content',
+  overflowButtonLabel: 'More Options',
+  editButtonLabel: 'Edit Content',
+  publishButtonLabel: 'Publish Content'
+}
+
 type Props = {
   disabled?: boolean
   readonly?: boolean
@@ -43,15 +52,17 @@ const useStyles = makeStyles(({ spacing, palette }) => ({
     minHeight: spacing(8)
   },
   button: {
-    height: spacing(5.5),
-    width: spacing(5.5)
+    height: spacing(6),
+    width: spacing(6),
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   buttonMargin: {
-    marginRight: spacing(8)
+    marginRight: spacing(6)
   },
   leftButtons: {
     ...flexRowCentered(),
-    marginVertical: spacing(2)
+    marginVertical: spacing(1)
   }
 }))
 
@@ -71,7 +82,6 @@ export const LineupTileActionButtons = ({
   onPressSave,
   onPressShare
 }: Props) => {
-  const { neutralLight4 } = useThemeColors()
   const styles = useStyles()
   const isUSDCEnabled = useIsUSDCEnabled()
   const isUSDCPurchase =
@@ -99,21 +109,23 @@ export const LineupTileActionButtons = ({
 
   const shareButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconShare}
-      isDisabled={disabled}
+      disabled={disabled}
       onPress={onPressShare}
-      styles={{ icon: styles.button }}
+      aria-label={messages.shareButtonLabel}
+      size='l'
     />
   )
 
   const moreButton = (
     <IconButton
-      fill={neutralLight4}
+      color='subdued'
       icon={IconKebabHorizontal}
-      isDisabled={disabled}
+      disabled={disabled}
       onPress={onPressOverflow}
-      styles={{ icon: styles.button }}
+      aria-label={messages.overflowButtonLabel}
+      size='l'
     />
   )