Merge pull request #371 from alichherawalla/change-pro-banner-ui

feat(pro): redesign Pro detail screen and settings banner

Author: dishit-wednesday

ios/OffgridMobile/Info.plist

@@ -57,6 +57,23 @@
 	<array>
 		<string>Feather.ttf</string>
 		<string>MaterialIcons.ttf</string>
+		<string>MaterialCommunityIcons.ttf</string>
+		<string>Fontisto.ttf</string>
+		<string>Octicons.ttf</string>
+		<string>FontAwesome6_Regular.ttf</string>
+		<string>Entypo.ttf</string>
+		<string>FontAwesome5_Brands.ttf</string>
+		<string>AntDesign.ttf</string>
+		<string>Foundation.ttf</string>
+		<string>Ionicons.ttf</string>
+		<string>FontAwesome5_Solid.ttf</string>
+		<string>FontAwesome5_Regular.ttf</string>
+		<string>FontAwesome.ttf</string>
+		<string>Zocial.ttf</string>
+		<string>EvilIcons.ttf</string>
+		<string>FontAwesome6_Solid.ttf</string>
+		<string>SimpleLineIcons.ttf</string>
+		<string>FontAwesome6_Brands.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>

src/screens/HomeScreen/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View, Text, ScrollView } from 'react-native';
+import { View, Text, ScrollView, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { Button, Card, CustomAlert, hideAlert } from '../../components';
 import { AnimatedEntry } from '../../components/AnimatedEntry';
@@ -9,6 +9,7 @@ import { PulsatingIcon } from '../../components/onboarding/PulsatingIcon';
 import { useOnboardingSheet } from '../../components/onboarding/useOnboardingSheet';
 import { useFocusTrigger } from '../../hooks/useFocusTrigger';
 import Icon from 'react-native-vector-icons/Feather';
+import IconMC from 'react-native-vector-icons/MaterialCommunityIcons';
 import { useThemedStyles, useTheme } from '../../theme';
 import { createStyles } from './styles';
 import { useHomeScreen, HomeScreenNavigationProp } from './hooks/useHomeScreen';
@@ -77,8 +78,13 @@ export const HomeScreen: React.FC<HomeScreenProps> = ({ navigation }) => {
       <View testID="home-screen" style={styles.scrollView}>
         <ScrollView style={styles.scrollView} contentContainerStyle={styles.content}>
           <View style={styles.header}>
-            <Text style={styles.title}>Off Grid</Text>
-            {showIcon && <PulsatingIcon onPress={openSheet} />}
+            <View style={styles.headerLeft}>
+              <Text style={styles.title}>Off Grid</Text>
+              {showIcon && <PulsatingIcon onPress={openSheet} />}
+            </View>
+            <TouchableOpacity onPress={() => navigation.navigate('ProDetail')} hitSlop={8} style={styles.crownButton}>
+              <IconMC name="crown" size={16} color={colors.primary} />
+            </TouchableOpacity>
           </View>
 
           {/* Active Models Section */}

src/screens/HomeScreen/styles.ts

@@ -15,8 +15,23 @@ const createLayoutStyles = (colors: ThemeColors) => ({
   header: {
     flexDirection: 'row' as const,
     alignItems: 'center' as const,
+    justifyContent: 'space-between' as const,
     marginBottom: 20,
   },
+  headerLeft: {
+    flexDirection: 'row' as const,
+    alignItems: 'center' as const,
+    gap: 8,
+  },
+  crownButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    borderWidth: 1,
+    borderColor: colors.primary,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
+  },
   title: {
     ...TYPOGRAPHY.h2,
     color: colors.text,