Skip to content

Commit ee01f9a

Browse files
DIYgodDIYgod
committed
feat(mobile): optimize discover styles
1 parent ec8f0a9 commit ee01f9a

File tree

4 files changed

+52
-43
lines changed

4 files changed

+52
-43
lines changed

‎apps/mobile/src/components/ui/tabview/TabBar.tsx

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -147,12 +147,12 @@ export const TabBar = forwardRef<ScrollView, TabBarProps>(
147147
const { width, x } = event.nativeEvent.layout
148148
setTabWidths((prev) => {
149149
const newWidths = [...prev]
150-
newWidths[index] = width
150+
newWidths[index] = width - 16
151151
return newWidths
152152
})
153153
setTabPositions((prev) => {
154154
const newPositions = [...prev]
155-
newPositions[index] = x
155+
newPositions[index] = x + 12
156156
return newPositions
157157
})
158158
}, [])
@@ -197,17 +197,19 @@ export const TabBar = forwardRef<ScrollView, TabBarProps>(
197197
contentContainerStyle={styles.tabScroller}
198198
style={[styles.root, tabbarStyle]}
199199
>
200-
{tabs.map((tab, index) => (
201-
<TarBarItem
202-
TabItem={TabItem}
203-
key={tab.value}
204-
index={index}
205-
onTabItemPress={handleChangeTabIndex}
206-
onLayout={handleTabItemLayout}
207-
isSelected={currentTab === index}
208-
tab={tab}
209-
/>
210-
))}
200+
<View className="flex-row gap-x-3">
201+
{tabs.map((tab, index) => (
202+
<TarBarItem
203+
TabItem={TabItem}
204+
key={tab.value}
205+
index={index}
206+
onTabItemPress={handleChangeTabIndex}
207+
onLayout={handleTabItemLayout}
208+
isSelected={currentTab === index}
209+
tab={tab}
210+
/>
211+
))}
212+
</View>
211213

212214
<Animated.View style={[styles.indicator, indicatorStyle]} />
213215
</ScrollView>
@@ -234,8 +236,11 @@ const styles = StyleSheet.create({
234236
const TabItemInner = ({ tab, isSelected }: { tab: Tab; isSelected: boolean }) => {
235237
const gray = useColor("gray")
236238
return (
237-
<View className="p-2">
238-
<Text style={{ color: isSelected ? accentColor : gray }} className="text-[15px] leading-none">
239+
<View className="px-3 py-2">
240+
<Text
241+
style={{ color: isSelected ? accentColor : gray }}
242+
className={cn("text-[15px] leading-none", isSelected ? "font-bold" : "font-medium")}
243+
>
239244
{tab.name}
240245
</Text>
241246
</View>

‎apps/mobile/src/modules/discover/RecommendationListItem.tsx

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -42,8 +42,23 @@ export const RecommendationListItem: FC<{
4242
<View className="mt-1.5 flex-row self-start overflow-hidden rounded-lg">
4343
<FeedIcon siteUrl={`https://${data.url}`} size={28} />
4444
</View>
45-
<View className="ml-2 flex-1">
46-
<Text className="text-text text-base font-medium">{data.name}</Text>
45+
<View className="ml-3 flex-1">
46+
<View className="flex-row items-center justify-between gap-4">
47+
<Text className="text-text text-lg font-medium">{data.name}</Text>
48+
{/* Tags */}
49+
<View className="shrink flex-row items-center">
50+
{categories.map((c) => (
51+
<View
52+
className="bg-gray-6 mr-1 items-center justify-center overflow-hidden rounded-full px-3 py-1"
53+
key={c}
54+
>
55+
<Text className="text-text/60 text-xs" numberOfLines={1}>
56+
{RSSHubCategoryCopyMap[c as keyof typeof RSSHubCategoryCopyMap]}
57+
</Text>
58+
</View>
59+
))}
60+
</View>
61+
</View>
4762
{/* Maintainers */}
4863
<View className="mb-1 flex-row flex-wrap items-center">
4964
{maintainers.map((m) => (
@@ -91,23 +106,10 @@ export const RecommendationListItem: FC<{
91106
</ContextMenu.Root>
92107
))}
93108
</View>
94-
{/* Tags */}
95-
<View className="mt-0.5 flex-row items-center">
96-
{categories.map((c) => (
97-
<View
98-
className="bg-gray-5 mr-1 items-center justify-center overflow-hidden rounded-lg px-2 py-1"
99-
key={c}
100-
>
101-
<Text className="text-text/60 text-sm leading-none">
102-
{RSSHubCategoryCopyMap[c as keyof typeof RSSHubCategoryCopyMap]}
103-
</Text>
104-
</View>
105-
))}
106-
</View>
107109

108110
{/* Items */}
109111

110-
<Grid columns={2} gap={8} className="mt-2">
112+
<Grid columns={2} gap={8} className="mt-1">
111113
{Object.keys(data.routes).map((route) => (
112114
<View className="relative" key={route}>
113115
<TouchableOpacity
@@ -121,10 +123,14 @@ export const RecommendationListItem: FC<{
121123
},
122124
})
123125
}}
124-
className="bg-gray-5 h-10 flex-row items-center justify-center overflow-hidden rounded px-2"
126+
className="bg-gray-6 h-10 flex-row items-center justify-center overflow-hidden rounded-xl px-2"
125127
/>
126128
<View className="absolute inset-2 items-center justify-center" pointerEvents="none">
127-
<Text ellipsizeMode="middle" numberOfLines={1} className="text-text whitespace-pre">
129+
<Text
130+
ellipsizeMode="middle"
131+
numberOfLines={1}
132+
className="text-text whitespace-pre font-medium"
133+
>
128134
{data.routes[route]!.name}
129135
</Text>
130136
</View>

‎apps/mobile/src/modules/discover/Recommendations.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -225,8 +225,8 @@ const ItemRenderer = ({
225225
if (typeof item === "string") {
226226
// Rendering header
227227
return (
228-
<View className="border-b-opaque-separator border-b-hairline mx-6 mb-1 mt-2 pb-1">
229-
<Text className="text-secondary-label text-base">{item}</Text>
228+
<View className="border-b-opaque-separator mx-6 mb-1 mt-6 pb-1">
229+
<Text className="text-label text-xl font-semibold">{item}</Text>
230230
</View>
231231
)
232232
} else {

‎apps/mobile/src/modules/discover/search.tsx

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import Animated, {
1414
} from "react-native-reanimated"
1515
import { useSafeAreaFrame, useSafeAreaInsets } from "react-native-safe-area-context"
1616

17-
import { BlurEffect } from "@/src/components/common/BlurEffect"
1817
import { TabBar } from "@/src/components/ui/tabview/TabBar"
1918
import { Search2CuteReIcon } from "@/src/icons/search_2_cute_re"
2019
import { accentColor, useColor } from "@/src/theme/colors"
@@ -39,7 +38,6 @@ export const SearchHeader: FC<{
3938
className="relative"
4039
onLayout={onLayout}
4140
>
42-
<BlurEffect />
4341
<View style={styles.header}>
4442
<ComposeSearchBar />
4543
</View>
@@ -58,16 +56,16 @@ const DiscoverHeaderImpl = () => {
5856
const { animatedX, currentTabAtom, headerHeightAtom } = useContext(DiscoverContext)
5957
const setCurrentTab = useSetAtom(currentTabAtom)
6058
const setHeaderHeight = useSetAtom(headerHeightAtom)
59+
const bgColor = useColor("systemBackground")
6160

6261
return (
6362
<View
64-
style={{ minHeight: headerHeight, paddingTop: insets.top }}
63+
style={{ minHeight: headerHeight, paddingTop: insets.top, backgroundColor: bgColor }}
6564
className="relative"
6665
onLayout={(e) => {
6766
setHeaderHeight(e.nativeEvent.layout.height)
6867
}}
6968
>
70-
<BlurEffect />
7169
<View style={[styles.header, styles.discoverHeader]}>
7270
<PlaceholerSearchBar />
7371

@@ -86,6 +84,7 @@ const DiscoverHeaderImpl = () => {
8684
onTabItemPress={(index) => {
8785
setCurrentTab(index)
8886
}}
87+
tabbarClassName="border-b border-b-quaternary-system-fill"
8988
/>
9089
</View>
9190
)
@@ -133,7 +132,7 @@ const ComposeSearchBar = () => {
133132
}
134133
}}
135134
>
136-
<Text className="ml-2 text-accent">Cancel</Text>
135+
<Text className="ml-3 text-lg font-medium text-accent">Cancel</Text>
137136
</TouchableOpacity>
138137
</>
139138
)
@@ -251,9 +250,8 @@ const styles = StyleSheet.create({
251250
header: {
252251
flex: 1,
253252
alignItems: "center",
254-
marginTop: -3,
255253
flexDirection: "row",
256-
marginBottom: 6,
254+
marginBottom: 14,
257255
marginHorizontal: 16,
258256
position: "relative",
259257
},
@@ -269,7 +267,7 @@ const styles = StyleSheet.create({
269267
alignItems: "center",
270268
justifyContent: "center",
271269
borderRadius: 50,
272-
height: 32,
270+
height: 40,
273271
position: "relative",
274272
},
275273
searchInput: {

0 commit comments

Comments
 (0)