From 331f8d80220e03f0a09b6668c813b2dcb60c3b3e Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Thu, 15 May 2025 21:38:44 +0800
Subject: [PATCH] refactor(mobile): update SearchFeedCard and login components
 for improved styling and loading state

- Changed icon color usage in SearchFeedCard to align with design standards.
- Adjusted layout and spacing in SearchFeedCard for better visual consistency.
- Enhanced login text styling for better emphasis in the Login component.
- Added loading state handling in SocialLogin component to improve user experience during authentication.

These changes enhance the overall UI and UX of the mobile application.

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../discover/search-tabs/SearchFeedCard.tsx   | 63 +++++++++----------
 apps/mobile/src/modules/login/index.tsx       |  2 +-
 apps/mobile/src/modules/login/social.tsx      | 11 +++-
 3 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx b/apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx
index 4147e398f..acb7f0509 100644
--- a/apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx
+++ b/apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx
@@ -14,49 +14,48 @@ type SearchResultItem = Awaited<ReturnType<typeof apiClient.discover.$post>>["da
 
 export const SearchFeedCard = ({ item }: { item: SearchResultItem }) => {
   const isSubscribed = useSubscriptionByFeedId(item.feed?.id ?? "")
-  const iconColor = useColor("text")
+  const iconColor = useColor("secondaryLabel")
 
   return (
-    <FeedSummary item={item} className="py-8 pl-4">
-      <>
-        <View className="mt-4 flex-row items-center gap-6 opacity-60">
-          <View className="flex-row items-center gap-1.5">
-            <User3CuteReIcon width={14} height={14} color={iconColor} />
-            <Text className="text-text text-sm">{item.analytics?.subscriptionCount} followers</Text>
-          </View>
-          <View className="flex-row items-center gap-1.5">
-            {item.analytics?.updatesPerWeek ? (
-              <>
-                <SafetyCertificateCuteReIcon width={14} height={14} color={iconColor} />
-                <Text className="text-text text-sm">
-                  {item.analytics.updatesPerWeek} entries/week
-                </Text>
-              </>
-            ) : item.analytics?.latestEntryPublishedAt ? (
-              <>
-                <SafeAlertCuteReIcon width={14} height={14} color={iconColor} />
-                <Text className="text-text text-sm">Updated</Text>
-                <RelativeDateTime
-                  className="text-text text-sm"
-                  date={new Date(item.analytics.latestEntryPublishedAt)}
-                />
-              </>
-            ) : null}
-          </View>
+    <FeedSummary item={item} className="py-4 pl-4">
+      <View className="mt-4 flex-row items-center gap-6">
+        <View className="flex-row items-center gap-1.5">
+          <User3CuteReIcon width={14} height={14} color={iconColor} />
+          <Text className="text-secondary-label text-sm">
+            {item.analytics?.subscriptionCount} followers
+          </Text>
+        </View>
+        <View className="flex-row items-center gap-1.5">
+          {item.analytics?.updatesPerWeek ? (
+            <>
+              <SafetyCertificateCuteReIcon width={14} height={14} color={iconColor} />
+              <Text className="text-secondary-label text-sm">
+                {item.analytics.updatesPerWeek} entries/week
+              </Text>
+            </>
+          ) : item.analytics?.latestEntryPublishedAt ? (
+            <>
+              <SafeAlertCuteReIcon width={14} height={14} color={iconColor} />
+              <Text className="text-secondary-label text-sm">Updated</Text>
+              <RelativeDateTime
+                className="text-secondary-label text-sm"
+                date={new Date(item.analytics.latestEntryPublishedAt)}
+              />
+            </>
+          ) : null}
         </View>
-        {/* Subscribe */}
         <View className="ml-auto mr-4 mt-1">
           {isSubscribed ? (
-            <View className="bg-gray-5/60 rounded-lg px-3 py-2">
-              <Text className="text-gray-2 text-sm font-bold">Followed</Text>
+            <View className="px-5 py-2">
+              <Text className="text-tertiary-label text-sm font-bold">Followed</Text>
             </View>
           ) : (
-            <View className="bg-accent rounded-lg px-3 py-2">
+            <View className="bg-accent rounded-full px-5 py-2">
               <Text className="text-sm font-bold text-white">Follow</Text>
             </View>
           )}
         </View>
-      </>
+      </View>
     </FeedSummary>
   )
 }
diff --git a/apps/mobile/src/modules/login/index.tsx b/apps/mobile/src/modules/login/index.tsx
index 5854eeef6..a52b60e8d 100644
--- a/apps/mobile/src/modules/login/index.tsx
+++ b/apps/mobile/src/modules/login/index.tsx
@@ -49,7 +49,7 @@ export function Login() {
               lineHeight,
             }}
           >
-            <Text>{`${isRegister ? t("signin.sign_up_to") : t("signin.sign_in_to")} `}</Text>
+            <Text className="font-semibold">{`${isRegister ? t("signin.sign_up_to") : t("signin.sign_in_to")} `}</Text>
             <Text className="font-bold">Folo</Text>
           </Text>
           {isEmail ? (
diff --git a/apps/mobile/src/modules/login/social.tsx b/apps/mobile/src/modules/login/social.tsx
index a27a4bbaf..2b5555e7b 100644
--- a/apps/mobile/src/modules/login/social.tsx
+++ b/apps/mobile/src/modules/login/social.tsx
@@ -5,14 +5,23 @@ import { useTranslation } from "react-i18next"
 import { Text, TouchableOpacity, View } from "react-native"
 
 import { Image } from "@/src/components/ui/image/Image"
+import { PlatformActivityIndicator } from "@/src/components/ui/loading/PlatformActivityIndicator"
 import { signIn, useAuthProviders } from "@/src/lib/auth"
 
 export function SocialLogin({ onPressEmail }: { onPressEmail: () => void }) {
-  const { data: authProviders } = useAuthProviders()
+  const { data: authProviders, isLoading } = useAuthProviders()
   const { colorScheme } = useColorScheme()
   const providers = Object.entries(authProviders || [])
   const { t } = useTranslation()
 
+  if (isLoading) {
+    return (
+      <View className="flex h-[240px] w-screen items-center justify-center">
+        <PlatformActivityIndicator />
+      </View>
+    )
+  }
+
   return (
     <View className="flex w-screen items-center justify-center gap-4 px-6">
       {providers.map(([key, provider]) => {