feat: fix icons

src/assets/index.js

@@ -272,3 +272,9 @@ export const subBadges = {
   pro: require('./icons/proBadge.png'),
   premium: require('./icons/premiumBadge.png'),
 }
+
+export const planBadges = {
+  starter: require('./icons/premiumBadge.png'),
+  pro: require('./icons/starterBadge.png'),
+  premium: require('./icons/proBadge.png'),
+}

src/screens/Subscriptions.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { ActivityIndicator, FlatList, Pressable, StyleSheet, Text, View } from 'react-native'
+import { ActivityIndicator, FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native'
 import { useRoute } from '@react-navigation/native'
 import { BlurView } from 'expo-blur'
 import { Image as ExpoImage } from 'expo-image'
@@ -7,7 +7,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import GradientButton from '../components/GradientButton'
 import CreditAmount from '../components/CreditAmount'
 import Page from '../layouts/Page'
-import { background, icons, subBadges } from '../assets'
+import { background, icons, planBadges, subBadges } from '../assets'
 import { Palette, gutters } from '../styles'
 import { FONT_FAMILY } from '../styles/Fonts'
 import { isWeb } from '../hooks/useLayoutType'
@@ -80,6 +80,18 @@ function SubscriptionCard({ plan, selected, onSelect, isAnnual }) {
   const isPopular = details?.popular
 
   const planBadgeKey = planKey
+  const getPlanBadge = (plan) => {
+    switch (plan) {
+      case 'starter':
+        return <Image source={planBadges.starter} style={styles.planBadgeImage} />
+      case 'pro':
+        return <Image source={planBadges.pro} style={styles.planBadgeImage} />
+      case 'premium':
+        return <Image source={planBadges.premium} style={styles.planBadgeImage} />
+      default:
+        return null
+    }
+  }
   const planBadgeSource = planBadgeKey && subBadges[planBadgeKey] ? subBadges[planBadgeKey] : null
   const handleSelect = React.useCallback(() => {
     if (typeof onSelect === 'function' && plan?.priceId) {
@@ -113,13 +125,8 @@ function SubscriptionCard({ plan, selected, onSelect, isAnnual }) {
           <View style={styles.cardHeader}>
             <View style={styles.titleRow}>
               <Text style={styles.planName}>{planName}</Text>
-              {planBadgeSource ? (
+              {getPlanBadge(planKey)}
-                <ExpoImage
+
-                  source={planBadgeSource}
-                  style={styles.planBadgeImage}
-                  contentFit="contain"
-                />
-              ) : null}
             </View>
             {plan?.nickname ? <Text style={styles.cardSubtitle}>{plan.nickname}</Text> : null}
           </View>
@@ -1151,12 +1158,12 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     paddingVertical: 6,
     borderRadius: 999,
-    backgroundColor: Palette.red,
+    backgroundColor: Palette.red + "80",
   },
   annualBadgeText: {
     fontFamily: FONT_FAMILY.InterSemiBold,
     fontSize: 12,
-    color: Palette.white,
+    color: Palette.white + "80",
   },
   actions: {
     width: '100%',

src/screens/cover/components/ShareAndCreditsModal.js

@@ -20,7 +20,7 @@ import { useStripe } from '../../../providers/StripeProvider'
 import CreditAmount from '../../../components/CreditAmount'
 import GradientButton from '../../../components/GradientButton'
 import AppCheckbox from '../../../components/AppCheckbox'
-import { subBadges, icons } from '../../../assets'
+import { subBadges, icons, planBadges } from '../../../assets'
 import { isWeb } from '../../../hooks/useLayoutType'
 import { navigate } from '../../../navigation/NavigationService'
 import { Routes } from '../../../navigation'
@@ -187,7 +187,7 @@ function SubscriptionCard({ plan, selected, onSelect, isAnnual }) {
     const isPopular = details?.popular
 
     const planBadgeKey = planKey
-    const planBadgeSource = planBadgeKey && subBadges[planBadgeKey] ? subBadges[planBadgeKey] : null
+    const planBadgeSource = planBadgeKey && planBadges[planBadgeKey] ? planBadges[planBadgeKey] : null
 
     const handleSelect = React.useCallback(() => {
         if (typeof onSelect === 'function' && plan?.priceId) {
@@ -868,13 +868,13 @@ const styles = StyleSheet.create({
         position: 'absolute',
         top: 10,
         right: 10,
-        backgroundColor: Palette.red,
+        backgroundColor: Palette.red + '80',
         paddingHorizontal: 10,
         paddingVertical: 4,
         borderRadius: 12,
     },
     annualBadgeText: {
-        color: Palette.white,
+        color: Palette.white + '80',
         fontSize: 11,
         fontFamily: FONT_FAMILY.InterBold,
     },