xiaoxue_admin
/
Folo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Innei 2025-05-15 21:38:44 +08:00
parent 180933b709
commit 331f8d8022
No known key found for this signature in database
GPG Key ID: 0F62D33977F021F7
3 changed files with 42 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
apps/mobile/src/modules/discover/search-tabs/SearchFeedCard.tsx
View File

@ -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>
)
}

2
apps/mobile/src/modules/login/index.tsx
View File

@ -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 ? (

11
apps/mobile/src/modules/login/social.tsx
View File

@ -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]) => {