From e88ab1ed31f3043b96946484095811abca303e9f Mon Sep 17 00:00:00 2001
From: Leon <leon.morival@gmail.com>
Date: Tue, 3 Mar 2026 12:12:12 +0100
Subject: [PATCH] feat: fix icons

---
 src/assets/index.js                           |  6 ++++
 src/screens/Subscriptions.js                  | 29 ++++++++++++-------
 .../cover/components/ShareAndCreditsModal.js  |  8 ++---
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/assets/index.js b/src/assets/index.js
index 726bba7..e14a0ef 100644
--- a/src/assets/index.js
+++ b/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'),
+}
\ No newline at end of file
diff --git a/src/screens/Subscriptions.js b/src/screens/Subscriptions.js
index 0d3a09e..0e84598 100644
--- a/src/screens/Subscriptions.js
+++ b/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%',
diff --git a/src/screens/cover/components/ShareAndCreditsModal.js b/src/screens/cover/components/ShareAndCreditsModal.js
index 5ed67c4..e0a58b8 100644
--- a/src/screens/cover/components/ShareAndCreditsModal.js
+++ b/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,
     },