feat: fix icons

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 ? (
-                <ExpoImage
-                  source={planBadgeSource}
-                  style={styles.planBadgeImage}
-                  contentFit="contain"
-                />
-              ) : null}
+              {getPlanBadge(planKey)}
+
             </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%',