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

style(mobile): rebalance typography sizes (#4848)

This commit is contained in:
DIYgod 2026-02-14 21:20:28 +08:00 committed by GitHub
parent 50ed7aae10
commit 4f80c47250
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 64 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
apps/mobile/src/components/ui/grouped/GroupedList.tsx
View File

@ -37,7 +37,7 @@ interface BaseCellClassNames {
export const GroupedOutlineDescription: FC<{
description: string
}> = ({ description }) => {
return <Text className="mx-9 mt-2 text-sm text-secondary-label">{description}</Text>
return <Text className="mx-9 mt-2 text-xs text-secondary-label">{description}</Text>
}
export const GroupedInsetListCard: FC<
PropsWithChildren & ViewProps & GroupedInsetListCardProps
@ -116,7 +116,7 @@ export const GroupedInsetListSectionHeader: FC<{
marginBottom: GROUPED_SECTION_BOTTOM_MARGIN,
}}
>
<Text className="text-secondary-label" ellipsizeMode="tail" numberOfLines={1}>
<Text className="text-sm text-secondary-label" ellipsizeMode="tail" numberOfLines={1}>
{label}
</Text>
</View>
@ -163,7 +163,7 @@ export const GroupedInsetListNavigationLink: FC<
<View className={cn("flex-1 flex-row items-center justify-between", leftClassName)}>
<View className="flex-row items-center">
{icon}
<Text className={"text-label"}>{label}</Text>
<Text className={"text-sm text-label"}>{label}</Text>
</View>
<View className={cn("-mr-2 ml-4 flex-row", rightClassName)}>
{postfix}
@ -214,10 +214,10 @@ export const GroupedInsetListCell: FC<
<View className={cn("flex-1 gap-1", leftClassName)}>
<View className="flex-row items-center gap-2">
{!!icon && <SymbolView name={icon} size={20} tintColor="black" />}
<Text className="text-label">{titleCase(label)}</Text>
<Text className="text-sm text-label">{titleCase(label)}</Text>
</View>
{!!description && (
<Text className="text-sm leading-tight text-secondary-label">{description}</Text>
<Text className="text-xs leading-tight text-secondary-label">{description}</Text>
)}
</View>
@ -239,9 +239,9 @@ export const GroupedInsetListActionCellRadio: FC<{
className={cn(pressed ? "bg-system-fill" : undefined, disabled && "opacity-40")}
>
<View className="flex-1">
<Text className="text-label">{label}</Text>
<Text className="text-sm text-label">{label}</Text>
{!!description && (
<Text className="text-sm leading-tight text-secondary-label">{description}</Text>
<Text className="text-xs leading-tight text-secondary-label">{description}</Text>
)}
</View>
@ -299,10 +299,10 @@ export const GroupedInsetListActionCell: FC<{
<View className="flex-1">
<View className="flex-row items-center gap-2">
{!!icon && <SymbolView name={icon} size={20} tintColor="black" />}
<Text className="text-label">{label}</Text>
<Text className="text-sm text-label">{label}</Text>
</View>
{!!description && (
<Text className="text-sm leading-tight text-secondary-label">{description}</Text>
<Text className="text-xs leading-tight text-secondary-label">{description}</Text>
)}
</View>
@ -327,7 +327,7 @@ export const GroupedInsetButtonCell: FC<{
className={cn(pressed ? "bg-system-fill" : undefined, disabled && "opacity-40")}
>
<View className="flex-1 items-center justify-center">
<Text className={`${style === "destructive" ? "text-red" : "text-label"}`}>
<Text className={`text-sm ${style === "destructive" ? "text-red" : "text-label"}`}>
{label}
</Text>
</View>
@ -355,9 +355,9 @@ export const GroupedInformationCell: FC<{
{icon}
</View>
)}
<Text className="text-3xl font-bold text-label">{title}</Text>
<Text className="text-2xl font-bold text-label">{title}</Text>
{!!description && (
<Text className="mt-3 text-balance text-center text-base leading-tight text-label">
<Text className="mt-3 text-balance text-center text-sm leading-tight text-label">
{description}
</Text>
)}
@ -373,7 +373,7 @@ export const GroupedPlainButtonCell: FC<
> = ({ label, textClassName, ...props }) => {
return (
<GroupedInsetListBaseCell as={OverlayInterectionPressable} {...(props as any)}>
<Text className={cn("text-center text-accent", textClassName)}>{label}</Text>
<Text className={cn("text-center text-sm text-accent", textClassName)}>{label}</Text>
</GroupedInsetListBaseCell>
)
}

4
apps/mobile/src/modules/discover/Category.tsx
View File

@ -26,7 +26,7 @@ export const Category = () => {
<View className="mt-4 flex-row items-center justify-between pb-1 pl-6 pr-5 pt-4">
<View className="flex-row items-center gap-2">
<Grid2CuteReIcon width={24} height={24} color={label} />
<Text className="pb-2 text-2xl font-bold leading-[1.1] text-label">
<Text className="pb-2 text-xl font-bold leading-[1.1] text-label">
{t("words.categories")}
</Text>
</View>
@ -82,7 +82,7 @@ const CategoryItem = memo(({ category }: { category: RSSHubCategory }) => {
>
<View className="flex-1">
<Text className="absolute right-2 top-2 text-4xl">{CategoryMap[category].emoji}</Text>
<Text className="absolute bottom-0 left-2 text-xl font-bold text-white">{name}</Text>
<Text className="absolute bottom-0 left-2 text-lg font-bold text-white">{name}</Text>
</View>
</LinearGradient>
</Pressable>

6
apps/mobile/src/modules/discover/FeedSummary.tsx
View File

@ -98,17 +98,17 @@ export const FeedSummary = ({
/>
</View>
<View className="flex-1">
<Text className="text-lg font-semibold text-text" numberOfLines={1}>
<Text className="text-base font-semibold text-text" numberOfLines={1}>
{feed.title}
</Text>
<Text className="text-sm leading-tight text-text opacity-60" numberOfLines={1}>
<Text className="text-xs leading-tight text-text opacity-60" numberOfLines={1}>
{feed.url}
</Text>
</View>
</View>
{!simple && !!feed.description && (
<Text
className="mt-3 pl-[39] pr-2 text-sm text-text"
className="mt-3 pl-[39] pr-2 text-subheadline text-text"
ellipsizeMode="tail"
numberOfLines={2}
>

4
apps/mobile/src/modules/discover/RecommendationListItem.tsx
View File

@ -36,7 +36,7 @@ export const RecommendationListItem: FC<{
<View className="mt-1.5 flex-row justify-between overflow-hidden px-6">
<View className="flex-row items-center gap-3">
<FeedIcon siteUrl={`https://${data.url}`} size={24} />
<Text className="text-lg font-medium text-text">{data.name}</Text>
<Text className="text-base font-medium text-text">{data.name}</Text>
</View>
<View className="flex-row items-center justify-between gap-4">
{/* Tags */}
@ -76,7 +76,7 @@ export const RecommendationListItem: FC<{
<Text
ellipsizeMode="middle"
numberOfLines={1}
className="whitespace-pre text-sm text-text/70"
className="whitespace-pre text-xs text-text/70"
>
{data.routes[route]!.heat}
</Text>

4
apps/mobile/src/modules/discover/Trending.tsx
View File

@ -46,7 +46,7 @@ export const Trending = ({
<View className={cn("flex-row items-center justify-between pb-1 pt-4", itemClassName)}>
<View className="flex-row items-center gap-2">
<TrendingUpCuteReIcon width={24} height={24} color={label} />
<Text className="pb-2 text-2xl font-bold leading-[1.1] text-label">
<Text className="pb-2 text-xl font-bold leading-[1.1] text-label">
{t("words.trending")}
</Text>
</View>
@ -97,7 +97,7 @@ export const Trending = ({
>
<View className="flex flex-row items-center gap-1 opacity-60">
<User3CuteReIcon width={13} height={13} color={label} />
<Text className="text-sm text-text">
<Text className="text-xs text-text">
{formatNumber(item.analytics.subscriptionCount || 0)}
</Text>
</View>

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

@ -23,7 +23,7 @@ export const SearchFeedCard = ({ item }: { item: TrendingFeedItem | DiscoveryIte
<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-sm text-secondary-label">
<Text className="text-xs text-secondary-label">
{formatNumber(followerCount)} {t("feed.follower_other")}
</Text>
</View>
@ -31,16 +31,16 @@ export const SearchFeedCard = ({ item }: { item: TrendingFeedItem | DiscoveryIte
{item.analytics?.updatesPerWeek ? (
<>
<SafetyCertificateCuteReIcon width={14} height={14} color={iconColor} />
<Text className="text-sm text-secondary-label">
<Text className="text-xs text-secondary-label">
{t("feed.entry_week_other", { count: item.analytics.updatesPerWeek })}
</Text>
</>
) : item.analytics?.latestEntryPublishedAt ? (
<>
<SafeAlertCuteReIcon width={14} height={14} color={iconColor} />
<Text className="text-sm text-secondary-label">{t("feed.updated_at")}</Text>
<Text className="text-xs text-secondary-label">{t("feed.updated_at")}</Text>
<RelativeDateTime
className="text-sm text-secondary-label"
className="text-xs text-secondary-label"
date={new Date(item.analytics.latestEntryPublishedAt)}
/>
</>

6
apps/mobile/src/modules/discover/search-tabs/SearchList.tsx
View File

@ -98,14 +98,14 @@ const SearchListCard = memo(({ item }: { item: SearchResultItem }) => {
</View>
<View className="flex-1">
<Text
className="text-lg font-semibold text-text"
className="text-base font-semibold text-text"
ellipsizeMode="middle"
numberOfLines={1}
>
{item.list?.title}
</Text>
{!!item.list?.description && (
<Text className="text-text/60" ellipsizeMode="tail" numberOfLines={1}>
<Text className="text-sm text-text/60" ellipsizeMode="tail" numberOfLines={1}>
{item.list?.description}
</Text>
)}
@ -134,7 +134,7 @@ const SearchListCard = memo(({ item }: { item: SearchResultItem }) => {
<View className="mt-4 flex-row items-center gap-6 pl-4 opacity-60">
<View className="flex-row items-center gap-2">
<User3CuteReIcon width={16} height={16} color={iconColor} />
<Text className="text-text">
<Text className="text-sm text-text">
{formatNumber(followerCount)} {t("feed.follower_other")}
</Text>
</View>

6
apps/mobile/src/modules/entry-content/EntryGridFooter.tsx
View File

@ -45,7 +45,7 @@ export const EntryGridFooter = ({
<EntryTranslation
numberOfLines={2}
className={cn(
"shrink text-sm font-medium text-label",
"shrink text-xs font-medium text-label",
view === FeedViewType.Videos && "min-h-10",
descriptionClassName,
)}
@ -58,10 +58,10 @@ export const EntryGridFooter = ({
</View>
<View className="flex-row items-center gap-1.5">
<FeedIcon fallback feed={feed} size={14} />
<Text numberOfLines={1} className="shrink text-xs font-medium text-label">
<Text numberOfLines={1} className="shrink text-xs font-medium text-secondary-label">
{feed?.title}
</Text>
<RelativeDateTime className="text-xs text-secondary-label" date={entry.publishedAt} />
<RelativeDateTime className="text-xs text-tertiary-label" date={entry.publishedAt} />
</View>
</View>
)

4
apps/mobile/src/modules/entry-content/EntryTitle.tsx
View File

@ -32,7 +32,7 @@ export const EntryTitle = ({ title, entryId }: { title: string; entryId: string
}}
>
<EntryTranslation
className="px-5 text-title1 font-bold leading-snug text-label"
className="px-5 text-title2 font-bold leading-snug text-label"
source={title}
target={translation?.title}
bilingual
@ -56,7 +56,7 @@ export const EntrySocialTitle = ({ entryId }: { entryId: string }) => {
) : (
feed && <FeedIcon feed={feed} size={28} />
)}
<Text className="text-[16px] font-semibold text-label">
<Text className="text-[15px] font-semibold text-label">
{entry?.author || feed?.title || ""}
</Text>
</View>

14
apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx
View File

@ -102,35 +102,35 @@ export const EntryNormalItem = memo(
<View
className={cn(
"absolute left-2 size-2 rounded-full bg-red",
view === FeedViewType.Notifications ? "top-[35]" : "top-[43]",
view === FeedViewType.Notifications ? "top-[32]" : "top-[40]",
)}
/>
)}
<View className="flex-1 space-y-2 self-start">
<View className="mb-1 flex-row items-center gap-1.5 pr-2">
<FeedIcon fallback feed={feed} size={view === FeedViewType.Notifications ? 14 : 16} />
<Text numberOfLines={1} className="shrink text-sm font-medium text-secondary-label">
<Text numberOfLines={1} className="shrink text-xs font-medium text-secondary-label">
{feed?.title || from || "Unknown feed"}
</Text>
<Text className="text-xs font-medium text-secondary-label">·</Text>
<Text className="text-xs font-medium text-tertiary-label">·</Text>
{estimatedMins ? (
<>
<Text className="text-xs font-medium text-secondary-label">
{formatEstimatedMins(estimatedMins)}
</Text>
<Text className="text-xs font-medium text-secondary-label">·</Text>
<Text className="text-xs font-medium text-tertiary-label">·</Text>
</>
) : null}
<RelativeDateTime
date={entry.publishedAt}
className="text-xs font-medium text-secondary-label"
className="text-xs font-medium text-tertiary-label"
/>
</View>
{!!entry.title && (
<EntryTranslation
numberOfLines={2}
className={cn(
view === FeedViewType.Notifications ? "text-base" : "text-lg",
view === FeedViewType.Notifications ? "text-sm" : "text-base",
"font-semibold text-label",
)}
source={entry.title}
@ -142,7 +142,7 @@ export const EntryNormalItem = memo(
{view !== FeedViewType.Notifications && !!entry.description && (
<EntryTranslation
numberOfLines={2}
className="my-0 text-sm text-secondary-label"
className="my-0 text-subheadline text-secondary-label"
source={entry.description}
target={translation?.description}
showTranslation={!!entry.translation}

8
apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsx
View File

@ -137,19 +137,19 @@ export const EntrySocialItem = memo(
<View className="flex-1 flex-row items-center gap-1.5">
<NativePressable hitSlop={10} onPress={navigationToFeedEntryList}>
<Text numberOfLines={1} className="shrink text-base font-semibold text-label">
<Text numberOfLines={1} className="shrink text-sm font-semibold text-label">
{entry.author || feed?.title}
</Text>
</NativePressable>
<Text className="text-secondary-label">·</Text>
<RelativeDateTime date={publishedAt} className="text-[14px] text-secondary-label" />
<Text className="text-xs text-tertiary-label">·</Text>
<RelativeDateTime date={publishedAt} className="text-xs text-tertiary-label" />
</View>
</View>
<View className="relative -mt-4">
<EntryTranslation
numberOfLines={autoExpandLongSocialMedia ? undefined : 7}
className="ml-12 text-base text-label"
className="ml-12 text-[15px] leading-[22px] text-label"
source={description}
target={translation?.description}
showTranslation={!!entry?.translation}

17
apps/mobile/src/modules/settings/UserHeaderBanner.tsx
View File

@ -237,14 +237,14 @@ export const UserHeaderBanner = ({
<Text
numberOfLines={1}
className={cn(
"px-8 text-2xl font-bold",
"px-8 text-xl font-bold",
gradientLight ? "text-black" : "text-white/95",
)}
>
{user.name}
</Text>
) : (
<Text className="text-2xl font-bold text-text">Folo Account</Text>
<Text className="text-xl font-bold text-text">Folo Account</Text>
)}
{!!role && serverConfigs?.REFERRAL_ENABLED && (
@ -267,7 +267,7 @@ export const UserHeaderBanner = ({
? "text-black/70"
: "text-white/70"
: "text-accent",
"font-semibold",
"text-sm font-semibold",
)}
>
{UserRoleName[role]}
@ -276,7 +276,7 @@ export const UserHeaderBanner = ({
)}
{user?.handle ? (
<Text className={cn(gradientLight ? "text-black/70" : "text-white/70")}>
<Text className={cn("text-sm", gradientLight ? "text-black/70" : "text-white/70")}>
@{user.handle}
</Text>
) : !user ? (
@ -284,7 +284,7 @@ export const UserHeaderBanner = ({
className="mx-auto"
onPress={() => navigation.presentControllerView(LoginScreen)}
>
<Text className="m-[6] text-[16px] text-accent">Sign in to your account</Text>
<Text className="m-[6] text-sm text-accent">Sign in to your account</Text>
</TouchableOpacity>
) : null}
</View>
@ -292,7 +292,7 @@ export const UserHeaderBanner = ({
<Text
numberOfLines={3}
className={cn(
"mt-2 px-8 text-center",
"mt-2 px-8 text-center text-sm",
gradientLight ? "text-black/80" : "text-white/80",
)}
>
@ -311,7 +311,10 @@ export const UserHeaderBanner = ({
color={gradientLight ? "rgba(0,0,0,0.7)" : "rgba(255,255,255,0.7)"}
/>
<Text
className={cn("font-semibold", gradientLight ? "text-black/70" : "text-white/70")}
className={cn(
"text-sm font-semibold",
gradientLight ? "text-black/70" : "text-white/70",
)}
>
{user.website.replace(/^(https?:\/\/)?(www\.)?/, "")}
</Text>

2
apps/mobile/src/modules/subscription/CategoryGrouped.tsx
View File

@ -87,7 +87,7 @@ export const CategoryGrouped = memo(
<RightCuteFiIcon color={secondaryLabelColor} height={14} width={14} />
</Animated.View>
</NativePressable>
<Text className="ml-4 font-medium text-text">{category}</Text>
<Text className="ml-4 text-sm font-medium text-text">{category}</Text>
<UnreadCount unread={unreadCounts} className="ml-auto text-xs text-secondary-label" />
</ItemPressable>
</SubscriptionFeedCategoryContextMenu>

2
apps/mobile/src/modules/subscription/items/InboxItem.tsx
View File

@ -60,7 +60,7 @@ export const InboxItem = memo(({ id, isFirst, isLast }: SubscriptionItemBaseProp
</View>
<Text
className="font-medium text-label"
className="text-sm font-medium text-label"
style={{
marginLeft: GROUPED_ICON_TEXT_GAP,
}}

2
apps/mobile/src/modules/subscription/items/ListSubscriptionItem.tsx
View File

@ -79,7 +79,7 @@ export const ListSubscriptionItem = memo(({ id, isFirst, isLast }: ListSubscript
<View className="flex-1 flex-row items-center gap-2">
<Text
numberOfLines={1}
className="shrink font-medium text-text"
className="shrink text-sm font-medium text-text"
style={{
marginLeft: GROUPED_ICON_TEXT_GAP,
}}

2
apps/mobile/src/modules/subscription/items/SubscriptionItem.tsx
View File

@ -81,7 +81,7 @@ export const SubscriptionItem = memo(
<View className="flex-1 flex-row items-center gap-2">
<Text
numberOfLines={1}
className={cn("shrink font-medium text-text", feed.errorAt && "text-red")}
className={cn("shrink text-sm font-medium text-text", feed.errorAt && "text-red")}
style={{
marginLeft: GROUPED_ICON_TEXT_GAP,
}}

2
apps/mobile/src/screens/(stack)/(tabs)/settings.tsx
View File

@ -94,7 +94,7 @@ const EditProfileButton = () => {
onPress={() => navigation.pushControllerView(EditProfileScreen)}
>
<BlurEffect />
<Text className="text-sm font-medium text-label">{t("words.edit")}</Text>
<Text className="text-xs font-medium text-label">{t("words.edit")}</Text>
</TouchableOpacity>
)
}

8
apps/mobile/src/screens/(stack)/entries/[entryId]/EntryDetailScreen.tsx
View File

@ -207,7 +207,7 @@ const EntryInfo = ({ entryId }: { entryId: string }) => {
{feed && (
<View className="flex shrink flex-row items-center gap-2">
<FeedIcon feed={feed} />
<Text className="shrink text-sm font-medium leading-tight text-label" numberOfLines={1}>
<Text className="shrink text-xs font-medium leading-tight text-label" numberOfLines={1}>
{feed.title?.trim()}
</Text>
</View>
@ -216,13 +216,13 @@ const EntryInfo = ({ entryId }: { entryId: string }) => {
<CalendarTimeAddCuteReIcon width={16} height={16} color={secondaryLabelColor} />
<RelativeDateTime
date={publishedAt}
className="text-sm leading-tight text-secondary-label"
className="text-xs leading-tight text-secondary-label"
/>
</View>
{!hideRecentReader && (
<View className="flex flex-row items-center gap-1">
<Eye2CuteReIcon width={16} height={16} color={secondaryLabelColor} />
<Text className="text-sm leading-tight text-secondary-label">{readCount}</Text>
<Text className="text-xs leading-tight text-secondary-label">{readCount}</Text>
</View>
)}
</View>
@ -235,7 +235,7 @@ const EntryInfoSocial = ({ entryId }: { entryId: string }) => {
if (!entry) return null
return (
<View className="mt-3 px-4">
<Text className="text-secondary-label">
<Text className="text-sm text-secondary-label">
{entry.publishedAt.toLocaleString("en-US", {
dateStyle: "medium",
timeStyle: "short",