diff options
Diffstat (limited to 'apps/mobile/app/dashboard/(tabs)')
| -rw-r--r-- | apps/mobile/app/dashboard/(tabs)/_layout.tsx | 3 | ||||
| -rw-r--r-- | apps/mobile/app/dashboard/(tabs)/index.tsx | 9 | ||||
| -rw-r--r-- | apps/mobile/app/dashboard/(tabs)/lists.tsx | 34 | ||||
| -rw-r--r-- | apps/mobile/app/dashboard/(tabs)/settings.tsx | 45 |
4 files changed, 47 insertions, 44 deletions
diff --git a/apps/mobile/app/dashboard/(tabs)/_layout.tsx b/apps/mobile/app/dashboard/(tabs)/_layout.tsx index f1d90ee4..7419c348 100644 --- a/apps/mobile/app/dashboard/(tabs)/_layout.tsx +++ b/apps/mobile/app/dashboard/(tabs)/_layout.tsx @@ -1,9 +1,11 @@ import React, { useLayoutEffect } from "react"; import { Tabs, useNavigation } from "expo-router"; import { StyledTabs } from "@/components/navigation/tabs"; +import { useColorScheme } from "@/lib/useColorScheme"; import { ClipboardList, Home, Settings } from "lucide-react-native"; export default function TabLayout() { + const { colors } = useColorScheme(); const navigation = useNavigation(); // Hide the header on the parent screen useLayoutEffect(() => { @@ -18,6 +20,7 @@ export default function TabLayout() { sceneClassName="bg-gray-100 dark:bg-background" screenOptions={{ headerShown: false, + tabBarActiveTintColor: colors.foreground, }} > <Tabs.Screen diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx index f70474a9..0a51b817 100644 --- a/apps/mobile/app/dashboard/(tabs)/index.tsx +++ b/apps/mobile/app/dashboard/(tabs)/index.tsx @@ -1,4 +1,4 @@ -import { Platform, Pressable, Text, View } from "react-native"; +import { Platform, Pressable, View } from "react-native"; import * as Haptics from "expo-haptics"; import * as ImagePicker from "expo-image-picker"; import { router } from "expo-router"; @@ -6,6 +6,7 @@ import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList"; import { TailwindResolver } from "@/components/TailwindResolver"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import PageTitle from "@/components/ui/PageTitle"; +import { Text } from "@/components/ui/Text"; import { useToast } from "@/components/ui/Toast"; import useAppSettings from "@/lib/settings"; import { useUploadAsset } from "@/lib/upload"; @@ -89,16 +90,16 @@ export default function Home() { /> </View> <Pressable - className="flex flex-row items-center gap-1 rounded-lg border border-input bg-background px-4 py-2.5" + className="flex flex-row items-center gap-1 rounded-lg border border-input bg-card px-4 py-1" onPress={() => router.push("/dashboard/search")} > <TailwindResolver - className="text-muted-foreground" + className="text-muted" comp={(styles) => ( <Search size={16} color={styles?.color?.toString()} /> )} /> - <Text className="text-muted-foreground">Search</Text> + <Text className="text-muted">Search</Text> </Pressable> </View> } diff --git a/apps/mobile/app/dashboard/(tabs)/lists.tsx b/apps/mobile/app/dashboard/(tabs)/lists.tsx index 218c1de4..a2301c36 100644 --- a/apps/mobile/app/dashboard/(tabs)/lists.tsx +++ b/apps/mobile/app/dashboard/(tabs)/lists.tsx @@ -1,15 +1,17 @@ import { useEffect, useState } from "react"; -import { FlatList, Pressable, Text, View } from "react-native"; +import { FlatList, Pressable, View } from "react-native"; import * as Haptics from "expo-haptics"; import { Link, router } from "expo-router"; import FullPageError from "@/components/FullPageError"; -import { TailwindResolver } from "@/components/TailwindResolver"; +import ChevronRight from "@/components/ui/ChevronRight"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import FullPageSpinner from "@/components/ui/FullPageSpinner"; import PageTitle from "@/components/ui/PageTitle"; +import { Text } from "@/components/ui/Text"; import { api } from "@/lib/trpc"; +import { useColorScheme } from "@/lib/useColorScheme"; import { condProps } from "@/lib/utils"; -import { ChevronRight, Plus } from "lucide-react-native"; +import { Plus } from "lucide-react-native"; import { useBookmarkLists } from "@karakeep/shared-react/hooks/lists"; import { ZBookmarkListTreeNode } from "@karakeep/shared/utils/listUtils"; @@ -65,6 +67,7 @@ function traverseTree( } export default function Lists() { + const { colors } = useColorScheme(); const [refreshing, setRefreshing] = useState(false); const { data: lists, isPending, error, refetch } = useBookmarkLists(); const [showChildrenOf, setShowChildrenOf] = useState<Record<string, boolean>>( @@ -130,7 +133,7 @@ export default function Lists() { }} renderItem={(l) => ( <View - className="mx-2 flex flex-row items-center rounded-xl border border-input bg-white px-4 py-2 dark:bg-accent" + className="mx-2 flex flex-row items-center rounded-xl border border-input bg-card px-4 py-2" style={condProps({ condition: l.item.level > 0, props: { marginLeft: l.item.level * 20 }, @@ -146,28 +149,23 @@ export default function Lists() { })); }} > - <TailwindResolver - className="text-foreground" - comp={(style) => ( - <ChevronRight - color={style?.color?.toString()} - style={{ - transform: [ - { rotate: l.item.collapsed ? "0deg" : "90deg" }, - ], - }} - /> - )} + <ChevronRight + color={colors.foreground} + style={{ + transform: [ + { rotate: l.item.collapsed ? "0deg" : "90deg" }, + ], + }} /> </Pressable> )} <Link asChild key={l.item.id} href={l.item.href} className="flex-1"> <Pressable className="flex flex-row justify-between"> - <Text className="text-lg text-accent-foreground"> + <Text> {l.item.logo} {l.item.name} </Text> - <ChevronRight color="rgb(0, 122, 255)" /> + <ChevronRight /> </Pressable> </Link> </View> diff --git a/apps/mobile/app/dashboard/(tabs)/settings.tsx b/apps/mobile/app/dashboard/(tabs)/settings.tsx index 7b3dab4f..6d76308d 100644 --- a/apps/mobile/app/dashboard/(tabs)/settings.tsx +++ b/apps/mobile/app/dashboard/(tabs)/settings.tsx @@ -1,16 +1,17 @@ import { useEffect } from "react"; -import { ActivityIndicator, Pressable, Text, View } from "react-native"; +import { ActivityIndicator, Pressable, View } from "react-native"; import { Slider } from "react-native-awesome-slider"; import { useSharedValue } from "react-native-reanimated"; import { Link } from "expo-router"; import { Button } from "@/components/ui/Button"; +import ChevronRight from "@/components/ui/ChevronRight"; import CustomSafeAreaView from "@/components/ui/CustomSafeAreaView"; import { Divider } from "@/components/ui/Divider"; import PageTitle from "@/components/ui/PageTitle"; +import { Text } from "@/components/ui/Text"; import { useSession } from "@/lib/session"; import useAppSettings from "@/lib/settings"; import { api } from "@/lib/trpc"; -import { ChevronRight } from "lucide-react-native"; export default function Dashboard() { const { logout } = useSession(); @@ -38,56 +39,50 @@ export default function Dashboard() { <CustomSafeAreaView> <PageTitle title="Settings" /> <View className="flex h-full w-full items-center gap-3 px-4 py-2"> - <View className="flex w-full gap-3 rounded-lg bg-white px-4 py-2 dark:bg-accent"> - <Text className="text-lg text-accent-foreground"> - {isSettingsLoading ? "Loading ..." : settings.address} - </Text> + <View className="flex w-full gap-3 rounded-lg bg-card px-4 py-2"> + <Text>{isSettingsLoading ? "Loading ..." : settings.address}</Text> <Divider orientation="horizontal" /> - <Text className="text-lg text-accent-foreground"> - {isLoading ? "Loading ..." : data?.email} - </Text> + <Text>{isLoading ? "Loading ..." : data?.email}</Text> </View> <Text className="w-full p-1 text-2xl font-bold text-foreground"> App Settings </Text> - <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent"> + <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2"> <Link asChild href="/dashboard/settings/theme" className="flex-1"> <Pressable className="flex flex-row justify-between"> - <Text className="text-lg text-accent-foreground">Theme</Text> + <Text>Theme</Text> <View className="flex flex-row items-center gap-2"> - <Text className="text-lg text-muted-foreground"> + <Text className="text-muted-foreground"> { { light: "Light", dark: "Dark", system: "System" }[ settings.theme ] } </Text> - <ChevronRight color="rgb(0, 122, 255)" /> + <ChevronRight /> </View> </Pressable> </Link> </View> - <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent"> + <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2"> <Link asChild href="/dashboard/settings/bookmark-default-view" className="flex-1" > <Pressable className="flex flex-row justify-between"> - <Text className="text-lg text-accent-foreground"> - Default Bookmark View - </Text> + <Text>Default Bookmark View</Text> <View className="flex flex-row items-center gap-2"> {isSettingsLoading ? ( <ActivityIndicator size="small" /> ) : ( - <Text className="text-lg text-muted-foreground"> + <Text className="text-muted-foreground"> {settings.defaultBookmarkView === "reader" ? "Reader" : "Browser"} </Text> )} - <ChevronRight color="rgb(0, 122, 255)" /> + <ChevronRight /> </View> </Pressable> </Link> @@ -95,8 +90,8 @@ export default function Dashboard() { <Text className="w-full p-1 text-2xl font-bold text-foreground"> Upload Settings </Text> - <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-white px-4 py-2 dark:bg-accent"> - <Text className="text-lg text-accent-foreground">Image Quality</Text> + <View className="flex w-full flex-row items-center justify-between gap-8 rounded-lg bg-card px-4 py-2"> + <Text>Image Quality</Text> <View className="flex flex-1 flex-row items-center justify-center gap-2"> <Text className="text-foreground"> {Math.round(settings.imageQuality * 100)}% @@ -115,7 +110,13 @@ export default function Dashboard() { </View> </View> <Divider orientation="horizontal" /> - <Button className="w-full" label="Log Out" onPress={logout} /> + <Button + androidRootClassName="w-full" + onPress={logout} + variant="destructive" + > + <Text>Log Out</Text> + </Button> </View> </CustomSafeAreaView> ); |