inspirebyte-tech · mohitgauniyal · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026 · Apr 24, 2026
diff --git a/apps/mobile/app.config.js b/apps/mobile/app.config.js
@@ -9,7 +9,7 @@ export default {
     splash: {
       image: "./assets/splash.png",
       resizeMode: "cover",
-      backgroundColor: "#4338ca"
+      backgroundColor: "#2f3e4e"
     },
     ios: {
       supportsTablet: true
@@ -18,7 +18,7 @@ export default {
       googleServicesFile: process.env.GOOGLE_SERVICES_JSON ?? "./google-services.json",
       adaptiveIcon: {
         foregroundImage: "./assets/adaptive-icon.png",
-        backgroundColor: "#4338ca"
+        backgroundColor: "#2f3e4e"
       },
       package: "com.inspirebyte.vaastio",
       edgeToEdgeEnabled: false,

diff --git a/apps/mobile/assets/logo.png b/apps/mobile/assets/logo.png
diff --git a/apps/mobile/src/constants/colors.ts b/apps/mobile/src/constants/colors.ts
@@ -1,5 +1,5 @@
 export const Colors = {
-  primary: '#4338ca',
+  primary: '#2f3e4e',
   background: '#f8fafc',
   surface: '#ffffff',
   text: '#0f172a',

diff --git a/apps/mobile/src/screens/announcements/AnnouncementDetailScreen.tsx b/apps/mobile/src/screens/announcements/AnnouncementDetailScreen.tsx
@@ -27,15 +27,19 @@ import { getApiErrorCode } from '../../services/api'
 import { getErrorMessage } from '../../utils/errorMessages'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'AnnouncementDetail'>
 
-const CATEGORY_ICON: Record<AnnouncementCategory, string> = {
-  GENERAL:     '📢',
-  MAINTENANCE: '🔧',
-  MEETING:     '👥',
-  EMERGENCY:   '🚨',
-  CELEBRATION: '🎉',
+const CATEGORY_ICON: Record<
+  AnnouncementCategory,
+  keyof typeof Ionicons.glyphMap
+> = {
+  GENERAL:     'megaphone-outline',
+  MAINTENANCE: 'construct-outline',
+  MEETING:     'people-outline',
+  EMERGENCY:   'warning-outline',
+  CELEBRATION: 'sparkles-outline',
 }
 
 const CATEGORY_COLORS: Record<AnnouncementCategory, { bg: string; text: string }> = {
@@ -122,7 +126,11 @@ export function AnnouncementDetailScreen({ route, navigation }: Props) {
         {/* Badges row */}
         <View style={styles.badgeRow}>
           <View style={[styles.categoryBadge, { backgroundColor: colors.bg }]}>
-            <Text style={styles.categoryIcon}>{CATEGORY_ICON[announcement.category]}</Text>
+            <Ionicons
+              name={CATEGORY_ICON[announcement.category]}
+              size={20}
+              color={Colors.primary}
+            />
             <Text style={[styles.categoryText, { color: colors.text }]}>
               {announcement.category.charAt(0) + announcement.category.slice(1).toLowerCase()}
             </Text>

diff --git a/apps/mobile/src/screens/announcements/AnnouncementsListScreen.tsx b/apps/mobile/src/screens/announcements/AnnouncementsListScreen.tsx
@@ -20,6 +20,7 @@ import { useAuth } from '../../hooks/useAuth'
 import { listAnnouncements, Announcement, AnnouncementCategory } from '../../services/announcements'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'AnnouncementsList'>
 
@@ -34,13 +35,16 @@ const FILTERS: { label: string; value: CategoryFilter }[] = [
   { label: 'Celebration', value: 'CELEBRATION' },
 ]
 
-const CATEGORY_ICON: Record<AnnouncementCategory, string> = {
-  GENERAL:     '📢',
-  MAINTENANCE: '🔧',
-  MEETING:     '👥',
-  EMERGENCY:   '🚨',
-  CELEBRATION: '🎉',
-}
+const CATEGORY_ICON: Record<
+  AnnouncementCategory,
+  keyof typeof Ionicons.glyphMap
+  > = {
+    GENERAL:     'megaphone-outline',
+    MAINTENANCE: 'construct-outline',
+    MEETING:     'people-outline',
+    EMERGENCY:   'warning-outline',
+    CELEBRATION: 'sparkles-outline',
+  }
 
 const CATEGORY_COLORS: Record<AnnouncementCategory, { bg: string; text: string; icon: string }> = {
   GENERAL:     { bg: '#f3f4f6', text: '#6b7280', icon: '#9ca3af' },
@@ -98,14 +102,24 @@ export function AnnouncementsListScreen({ route, navigation }: Props) {
         style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
       >
         <View style={[styles.rowIcon, { backgroundColor: colors.bg }]}>
-          <Text style={styles.rowIconText}>{CATEGORY_ICON[item.category]}</Text>
+          <Ionicons
+            name={CATEGORY_ICON[item.category]}
+            size={20}
+            color={colors.icon}
+          />
         </View>
         <View style={styles.rowContent}>
           <View style={styles.rowTop}>
             <Text style={styles.rowTitle} numberOfLines={1}>
               {item.title}
             </Text>
-            {item.isPinned ? <Text style={styles.pinIcon}>📌</Text> : null}
+            {item.isPinned ? (
+                <Ionicons
+                  name="pin"
+                  size={14}
+                  color={Colors.subtle}
+                />
+              ) : null}
           </View>
           <Text style={styles.rowBody} numberOfLines={2}>
             {item.body}
@@ -262,7 +276,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
-  rowIconText: { fontSize: 18 },
   rowContent: { flex: 1, gap: 4 },
   rowTop: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   rowTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: Colors.text },

diff --git a/apps/mobile/src/screens/auth/LoginOTPScreen.tsx b/apps/mobile/src/screens/auth/LoginOTPScreen.tsx
@@ -25,7 +25,7 @@ import { Colors } from '../../constants/colors'
 type Props = NativeStackScreenProps<AuthStackParamList, 'LoginOTP'>
 
 const OTP_LENGTH = 6
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 export function LoginOTPScreen({ route, navigation }: Props) {
   const { phone } = route.params
@@ -125,7 +125,7 @@ export function LoginOTPScreen({ route, navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Top: gradient header ── */}

diff --git a/apps/mobile/src/screens/auth/LoginPhoneScreen.tsx b/apps/mobile/src/screens/auth/LoginPhoneScreen.tsx
@@ -24,7 +24,7 @@ import { Colors } from '../../constants/colors'
 
 type Props = NativeStackScreenProps<AuthStackParamList, 'LoginPhone'>
 
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 export function LoginPhoneScreen({ navigation }: Props) {
   const insets = useSafeAreaInsets()
@@ -62,7 +62,7 @@ export function LoginPhoneScreen({ navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Top: gradient header ── */}
@@ -77,7 +77,7 @@ export function LoginPhoneScreen({ navigation }: Props) {
         </Pressable>
 
         <Image
-          source={require('../../../assets/icon.png')}
+          source={require('../../../assets/logo.png')}
           style={styles.logo}
           resizeMode="contain"
         />

diff --git a/apps/mobile/src/screens/auth/SetNameScreen.tsx b/apps/mobile/src/screens/auth/SetNameScreen.tsx
@@ -21,7 +21,7 @@ import { Colors } from '../../constants/colors'
 
 type Props = NativeStackScreenProps<AuthStackParamList, 'SetName'>
 
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 export function SetNameScreen({ route, navigation }: Props) {
   const { requiresOrgSelection, memberships, currentOrgId } = route.params
@@ -70,7 +70,7 @@ export function SetNameScreen({ route, navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Top: gradient header ── */}

diff --git a/apps/mobile/src/screens/auth/WelcomeScreen.tsx b/apps/mobile/src/screens/auth/WelcomeScreen.tsx
@@ -9,7 +9,7 @@ import { AuthStackParamList } from '../../navigation/AuthNavigator'
 
 type Props = NativeStackScreenProps<AuthStackParamList, 'Welcome'>
 
-const BRAND = '#4338ca'
+const BRAND = '#2f3e4e'
 
 const FEATURES: React.ComponentProps<typeof Ionicons>['name'][] = [
   'business-outline',
@@ -26,13 +26,13 @@ export function WelcomeScreen({ navigation }: Props) {
   if (!fontsLoaded) return null
 
   return (
-    <LinearGradient colors={['#4338ca', '#3730a3']} style={styles.root}>
+    <LinearGradient colors={['#2f3e4e', '#3730a3']} style={styles.root}>
       <StatusBar barStyle="light-content" backgroundColor={BRAND} translucent={false} />
 
       {/* ── Brand area ── */}
       <View style={[styles.top, { paddingTop: insets.top + 24 }]}>
         <Image
-          source={require('../../../assets/icon.png')}
+          source={require('../../../assets/logo.png')}
           style={styles.logo}
           resizeMode="contain"
         />
@@ -81,7 +81,6 @@ const styles = StyleSheet.create({
   logo: {
     width: 92,
     height: 116,
-    tintColor: '#fff',
     marginBottom: 4,
   },
   appName: {

diff --git a/apps/mobile/src/screens/complaints/ComplaintDetailScreen.tsx b/apps/mobile/src/screens/complaints/ComplaintDetailScreen.tsx
@@ -25,6 +25,7 @@ import { getApiErrorCode } from '../../services/api'
 import { getErrorMessage } from '../../utils/errorMessages'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'ComplaintDetail'>
 
@@ -168,14 +169,32 @@ export function ComplaintDetailScreen({ route }: Props) {
         {/* Category + Visibility tags */}
         <View style={styles.tagsRow}>
           <View style={styles.tag}>
-            <Text style={styles.tagText}>
-              {CATEGORY_ICON[complaint.category]}{'  '}{CATEGORY_LABEL[complaint.category]}
-            </Text>
+            <View style={styles.tagRow}>
+              <Ionicons
+                name={CATEGORY_ICON[complaint.category] ?? 'document-text-outline'}
+                size={16}
+                color={Colors.primary}
+                style={{ marginRight: 6 }}
+              />
+              <Text style={styles.tagText}>
+                {CATEGORY_LABEL[complaint.category]}
+              </Text>
+            </View>
           </View>
           <View style={styles.tag}>
-            <Text style={styles.tagText}>
-              {complaint.visibility === 'PUBLIC' ? '🌐  Public' : '🔒  Private'}
-            </Text>
+            <View style={styles.tagRow}>
+              <Ionicons
+                name={complaint.visibility === 'PUBLIC'
+                  ? 'globe-outline'
+                  : 'lock-closed-outline'}
+                size={16}
+                color={Colors.primary}
+                style={{ marginRight: 6 }}
+              />
+              <Text style={styles.tagText}>
+                {complaint.visibility === 'PUBLIC' ? 'Public' : 'Private'}
+              </Text>
+            </View>
           </View>
         </View>
 

diff --git a/apps/mobile/src/screens/complaints/ComplaintListScreen.tsx b/apps/mobile/src/screens/complaints/ComplaintListScreen.tsx
@@ -21,6 +21,7 @@ import { listComplaints, ComplaintListItem, ComplaintStatus } from '../../servic
 import { CATEGORY_LABEL, CATEGORY_ICON, STATUS_LABEL, STATUS_COLORS } from '../../utils/complaintMeta'
 import { Colors } from '../../constants/colors'
 import { Spacing } from '../../constants/spacing'
+import { Ionicons } from '@expo/vector-icons'
 
 type Props = NativeStackScreenProps<AppStackParamList, 'ComplaintList'>
 
@@ -146,7 +147,11 @@ export function ComplaintListScreen({ route, navigation }: Props) {
         style={({ pressed }) => [styles.row, pressed && styles.rowPressed]}
       >
         <View style={styles.rowIcon}>
-          <Text style={styles.rowIconText}>{CATEGORY_ICON[c.category] ?? '📋'}</Text>
+          <Ionicons
+            name={CATEGORY_ICON[c.category] ?? 'document-text-outline'}
+            size={20}
+            color={Colors.primary}
+          />
         </View>
         <View style={styles.rowContent}>
           <View style={styles.rowTop}>
@@ -365,7 +370,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexShrink: 0,
   },
-  rowIconText: { fontSize: 18 },
   rowContent: { flex: 1, gap: 4 },
   rowTop: { flexDirection: 'row', alignItems: 'center', gap: 8 },
   rowTitle: { flex: 1, fontSize: 15, fontWeight: '600', color: Colors.text },