Migrate native TextButton to PlainButton and Divider to harmony

packages/mobile/src/components/core/ContextualMenu.tsx

@@ -1,18 +1,18 @@
+import type { ReactNode } from 'react'
 import { useCallback } from 'react'
 
-import type { ViewStyle } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
 import { TouchableOpacity, View } from 'react-native'
 
-import { IconCaretRight } from '@audius/harmony-native'
-import { Divider, Text } from 'app/components/core'
+import { Divider, IconCaretRight } from '@audius/harmony-native'
+import { Text } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import type { StylesProp } from 'app/styles'
 import { makeStyles } from 'app/styles'
 import { spacing } from 'app/styles/spacing'
 import { useThemeColors } from 'app/utils/theme'
 
 import { InputErrorMessage } from './InputErrorMessage'
-import { Pill } from './Pill'
 
 export type ContextualMenuProps = {
   label: string
@@ -29,7 +29,7 @@ export type ContextualMenuProps = {
   renderValue?: (value: any) => JSX.Element | null
 }
 
-const useStyles = makeStyles(({ spacing }) => ({
+const useStyles = makeStyles(({ spacing, palette }) => ({
   content: {
     marginVertical: spacing(4),
     paddingHorizontal: spacing(4)
@@ -51,6 +51,17 @@ const useStyles = makeStyles(({ spacing }) => ({
   pill: {
     marginTop: spacing(2),
     marginRight: spacing(2)
+  },
+  optionPill: {
+    paddingHorizontal: spacing(2),
+    paddingVertical: spacing(1),
+    backgroundColor: palette.neutralLight8,
+    borderWidth: 1,
+    borderColor: palette.neutralLight7,
+    opacity: 0.8,
+    borderRadius: 2,
+    flexDirection: 'row',
+    alignItems: 'center'
   }
 }))
 
@@ -80,11 +91,11 @@ export const ContextualMenu = (props: ContextualMenuProps) => {
     return (
       <View style={styles.optionPills}>
         {values.map((value, i) => (
-          <Pill key={`${value}-${i}`} style={styles.pill}>
+          <SelectedValue key={`${value}-${i}`} style={styles.pill}>
             <Text fontSize='small' weight='demiBold'>
               {value}
             </Text>
-          </Pill>
+          </SelectedValue>
         ))}
       </View>
     )
@@ -123,3 +134,15 @@ export const ContextualMenu = (props: ContextualMenuProps) => {
     </TouchableOpacity>
   )
 }
+
+type SelectedValueProps = {
+  children: ReactNode
+  style?: StyleProp<ViewStyle>
+}
+
+export const SelectedValue = (props: SelectedValueProps) => {
+  const { children, style } = props
+  const styles = useStyles()
+
+  return <View style={[styles.optionPill, style]}>{children}</View>
+}

packages/mobile/src/components/core/TextInput.tsx

@@ -29,7 +29,12 @@ import { TouchableWithoutFeedback } from 'react-native-gesture-handler'
 import type { SvgProps } from 'react-native-svg'
 
 import type { TextColors } from '@audius/harmony-native'
-import { Flex, Text as HarmonyText, IconCloseAlt } from '@audius/harmony-native'
+import {
+  Flex,
+  Text as HarmonyText,
+  IconCloseAlt,
+  PlainButton
+} from '@audius/harmony-native'
 import { usePressScaleAnimation } from 'app/hooks/usePressScaleAnimation'
 import type { StylesProp } from 'app/styles'
 import { makeStyles } from 'app/styles'
@@ -38,8 +43,6 @@ import { convertHexToRGBA } from 'app/utils/convertHexToRGBA'
 import { mergeRefs } from 'app/utils/mergeRefs'
 import { Theme, useThemeColors, useThemeVariant } from 'app/utils/theme'
 
-import { TextButton } from './TextButton'
-
 const messages = {
   done: 'Done'
 }
@@ -461,13 +464,9 @@ export const TextInput = forwardRef<RNTextInput, TextInputProps>(
               blurAmount={20}
               style={styles.inputAccessory}
             >
-              <TextButton
-                variant='secondary'
-                title={messages.done}
-                TextProps={{ fontSize: 'large', weight: 'demiBold' }}
-                style={styles.doneButton}
-                onPress={Keyboard.dismiss}
-              />
+              <PlainButton style={styles.doneButton} onPress={Keyboard.dismiss}>
+                {messages.done}
+              </PlainButton>
             </BlurView>
           </InputAccessoryView>
         )}

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

@@ -11,23 +11,20 @@ export * from './TextInput'
 export * from './SegmentedControl'
 export * from './Switch'
 export * from './Text'
-export * from './TextButton'
 export * from './Tile'
 export * from './VirtualizedScrollView'
 export * from './VirtualizedKeyboardAwareScrollView'
 export * from './SectionList'
 export * from './Pressable'
 export * from './ScrollView'
 export * from './FlatList'
-export * from './Divider'
 export * from './AudioText'
 export * from './Tag'
 export * from './ContextualMenu'
 export * from './RadioButton'
 export * from './LinearProgress'
 export * from './ErrorText'
 export * from './TagInput'
-export * from './Pill'
 export * from './ChainLogo'
 export * from './Shadow'
 export * from './FadeInView'

packages/mobile/src/components/payment-method/PaymentMethod.tsx

@@ -19,9 +19,10 @@ import {
   Flex,
   IconQrCode,
   IconPhantomPlain,
-  IconCaretRight
+  IconCaretRight,
+  Divider
 } from '@audius/harmony-native'
-import { Divider, RadioButton } from 'app/components/core'
+import { RadioButton } from 'app/components/core'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { getPurchaseVendor } from 'app/store/purchase-vendor/selectors'
 import { setPurchaseVendor } from 'app/store/purchase-vendor/slice'

packages/mobile/src/components/share-drawer/ShareToStorySticker.tsx

@@ -3,8 +3,9 @@ import { SquareSizes } from '@audius/common/models'
 import type { StyleProp, ViewStyle } from 'react-native'
 import { View } from 'react-native'
 
+import { Divider } from '@audius/harmony-native'
 import AudiusLogo from 'app/assets/images/audiusLogoHorizontal.svg'
-import { Divider, Text } from 'app/components/core'
+import { Text } from 'app/components/core'
 import UserBadges from 'app/components/user-badges'
 import { makeStyles } from 'app/styles'
 import { useThemeColors } from 'app/utils/theme'
@@ -86,7 +87,7 @@ export const ShareToStorySticker = ({
 }: ShareToStoryStickerProps) => {
   const styles = useStyles()
 
-  const { neutralLight2, staticNeutralLight8 } = useThemeColors()
+  const { neutralLight2 } = useThemeColors()
   return (
     <View style={[styles.container, style]}>
       <View>
@@ -124,7 +125,7 @@ export const ShareToStorySticker = ({
             hideName
           />
         </View>
-        <Divider color={staticNeutralLight8} width={2} />
+        <Divider />
         <View
           style={[
             styles.belowDividerContainer,