From ad436cc673187a47cac7c0aa92f6681ddd423f26 Mon Sep 17 00:00:00 2001
From: taffroi <alexandre.tachau@tutamail.com>
Date: Tue, 3 Mar 2026 00:42:48 +0100
Subject: [PATCH] More consistent font & icons for headers of explore, profile
 and search tabs

Font size: 24px for main tabs titles
Icons: 28px for main tabs titles
Search icons are now the same between Explore & Home tab
---
 src/app/(tabs)/explore.tsx       | 73 ++++++++++++++++----------------
 src/app/(tabs)/profile.tsx       |  5 ++-
 src/app/private/search/index.tsx |  4 +-
 3 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/app/(tabs)/explore.tsx b/src/app/(tabs)/explore.tsx
index 355ba45..b40b04e 100644
--- a/src/app/(tabs)/explore.tsx
+++ b/src/app/(tabs)/explore.tsx
@@ -10,7 +10,7 @@ import {
     getExploreTagsFeed,
     postExploreAccountHideSuggestion,
 } from '@/utils/requests';
-import { Feather } from '@expo/vector-icons';
+import { Feather, Ionicons } from '@expo/vector-icons';
 import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'expo-router';
 import React, { useMemo, useState } from 'react';
@@ -72,12 +72,7 @@ interface Video {
 
 // Validation helpers
 const isValidAccount = (account: Account | null | undefined): account is Account => {
-    return !!(
-        account?.id &&
-        account?.username &&
-        account?.avatar &&
-        account?.name
-    );
+    return !!(account?.id && account?.username && account?.avatar && account?.name);
 };
 
 const isValidVideo = (video: Video | null | undefined): video is Video => {
@@ -90,11 +85,7 @@ const isValidVideo = (video: Video | null | undefined): video is Video => {
 };
 
 const isValidTag = (tag: Tag | null | undefined): tag is Tag => {
-    return !!(
-        tag?.id &&
-        tag?.name &&
-        typeof tag?.count === 'number'
-    );
+    return !!(tag?.id && tag?.name && typeof tag?.count === 'number');
 };
 
 export default function ExploreScreen() {
@@ -107,13 +98,21 @@ export default function ExploreScreen() {
     const queryClient = useQueryClient();
     const { colorScheme } = useTheme();
 
-    const { data: tagsData, isLoading: tagsLoading, isError: tagsError } = useQuery({
+    const {
+        data: tagsData,
+        isLoading: tagsLoading,
+        isError: tagsError,
+    } = useQuery({
         queryKey: ['explore', 'tags'],
         queryFn: getExploreTags,
         retry: 2,
     });
 
-    const { data: accountsData, isLoading: accountsLoading, isError: accountsError } = useQuery({
+    const {
+        data: accountsData,
+        isLoading: accountsLoading,
+        isError: accountsError,
+    } = useQuery({
         queryKey: ['accounts', 'suggested'],
         queryFn: getExploreAccounts,
         retry: 2,
@@ -187,9 +186,7 @@ export default function ExploreScreen() {
 
     const allVideos = useMemo(() => {
         if (!videosData?.pages) return [];
-        return videosData.pages
-            .flatMap((page) => page?.data || [])
-            .filter(isValidVideo);
+        return videosData.pages.flatMap((page) => page?.data || []).filter(isValidVideo);
     }, [videosData]);
 
     React.useEffect(() => {
@@ -209,7 +206,7 @@ export default function ExploreScreen() {
     }) => {
         const isFollowing = followingAccountId === item.id;
         const isHiding = hidingAccountId === item.id;
-        
+
         return (
             <View style={tw`mr-3 bg-gray-100 dark:bg-gray-800 rounded-xl overflow-hidden`}>
                 <View style={tw`w-[${ACCOUNT_CARD_WIDTH}px] p-3 items-center`}>
@@ -314,7 +311,10 @@ export default function ExploreScreen() {
                         source={{ uri: item.media.thumbnail }}
                         style={[
                             tw`rounded-lg bg-gray-900`,
-                            { width: VIDEO_THUMBNAIL_WIDTH, height: (VIDEO_THUMBNAIL_WIDTH * 16) / 9 },
+                            {
+                                width: VIDEO_THUMBNAIL_WIDTH,
+                                height: (VIDEO_THUMBNAIL_WIDTH * 16) / 9,
+                            },
                         ]}
                         resizeMode="cover"
                     />
@@ -338,9 +338,7 @@ export default function ExploreScreen() {
 
     const renderEmptyState = (message: string) => (
         <View style={tw`py-10 items-center px-4`}>
-            <Text style={tw`text-gray-500 dark:text-gray-400 text-center`}>
-                {message}
-            </Text>
+            <Text style={tw`text-gray-500 dark:text-gray-400 text-center`}>{message}</Text>
         </View>
     );
 
@@ -348,7 +346,10 @@ export default function ExploreScreen() {
         return (
             <SafeAreaView edges={['top']} style={tw`flex-1 bg-white dark:bg-black`}>
                 <View style={tw`flex-1 items-center justify-center`}>
-                    <ActivityIndicator size="large" color={colorScheme === 'dark' ? '#fff' : '#000'} />
+                    <ActivityIndicator
+                        size="large"
+                        color={colorScheme === 'dark' ? '#fff' : '#000'}
+                    />
                 </View>
             </SafeAreaView>
         );
@@ -373,14 +374,14 @@ export default function ExploreScreen() {
                     }}
                     scrollEventThrottle={16}>
                     <View style={tw`px-4 pt-4 pb-3 flex justify-between items-center flex-row`}>
-                        <Text style={tw`text-black text-4xl font-bold dark:text-white`}>
+                        <Text style={tw`text-black text-24px font-bold dark:text-white`}>
                             Explore
                         </Text>
                         <Pressable onPress={() => router.push('/private/search')}>
-                            <Feather
+                            <Ionicons
                                 name="search"
                                 color={colorScheme === 'dark' ? '#fff' : '#000'}
-                                size={30}
+                                size={28}
                             />
                         </Pressable>
                     </View>
@@ -409,9 +410,10 @@ export default function ExploreScreen() {
                         </View>
                     )}
 
-                    {accountsError && (
-                        renderEmptyState('Unable to load suggested accounts. Please try again later.')
-                    )}
+                    {accountsError &&
+                        renderEmptyState(
+                            'Unable to load suggested accounts. Please try again later.',
+                        )}
 
                     {validTags.length > 0 && (
                         <View style={tw`mb-4`}>
@@ -430,9 +432,8 @@ export default function ExploreScreen() {
                         </View>
                     )}
 
-                    {tagsError && (
-                        renderEmptyState('Unable to load trending tags. Please try again later.')
-                    )}
+                    {tagsError &&
+                        renderEmptyState('Unable to load trending tags. Please try again later.')}
 
                     {videosLoading ? (
                         <View style={tw`py-10 items-center`}>
@@ -454,9 +455,9 @@ export default function ExploreScreen() {
                             </View>
                             {isFetchingNextPage && (
                                 <View style={tw`py-4 items-center`}>
-                                    <ActivityIndicator 
-                                        size="small" 
-                                        color={colorScheme === 'dark' ? '#fff' : '#000'} 
+                                    <ActivityIndicator
+                                        size="small"
+                                        color={colorScheme === 'dark' ? '#fff' : '#000'}
                                     />
                                 </View>
                             )}
@@ -468,4 +469,4 @@ export default function ExploreScreen() {
             </View>
         </SafeAreaView>
     );
-}
\ No newline at end of file
+}
diff --git a/src/app/(tabs)/profile.tsx b/src/app/(tabs)/profile.tsx
index 9019a69..8220f9c 100644
--- a/src/app/(tabs)/profile.tsx
+++ b/src/app/(tabs)/profile.tsx
@@ -226,6 +226,7 @@ export default function ProfileScreen() {
             headerStyle: tw`bg-white dark:bg-black`,
             headerTintColor: colorScheme === 'dark' ? '#fff' : '#000',
             headerTitleStyle: {
+                fontSize: 24,
                 fontWeight: 'bold',
                 color: colorScheme === 'dark' ? '#fff' : '#000',
             },
@@ -237,10 +238,10 @@ export default function ProfileScreen() {
                     accessibilityLabel="Settings"
                     accessibilityRole="button"
                     onPress={handleSettingsPress}
-                    style={tw`mr-3`}>
+                    style={tw`mr-4`}>
                     <Ionicons
                         name="menu"
-                        size={30}
+                        size={28}
                         color={colorScheme === 'dark' ? '#fff' : '#000'}
                     />
                 </PressableHaptics>
diff --git a/src/app/private/search/index.tsx b/src/app/private/search/index.tsx
index 3dc528a..9007815 100644
--- a/src/app/private/search/index.tsx
+++ b/src/app/private/search/index.tsx
@@ -477,7 +477,7 @@ export default function SearchScreen() {
                         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                         <Ionicons
                             name="chevron-back"
-                            size={26}
+                            size={24}
                             color={colorScheme === 'dark' ? 'white' : 'black'}
                         />
                     </TouchableOpacity>
@@ -523,7 +523,7 @@ export default function SearchScreen() {
                         hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                         <Ionicons
                             name="ellipsis-horizontal"
-                            size={26}
+                            size={24}
                             color={colorScheme === 'dark' ? 'white' : 'black'}
                         />
                     </TouchableOpacity>