aboutsummaryrefslogtreecommitdiffstats
path: root/apps/mobile/components
diff options
context:
space:
mode:
Diffstat (limited to 'apps/mobile/components')
-rw-r--r--apps/mobile/components/TailwindResolver.tsx16
-rw-r--r--apps/mobile/components/bookmarks/BookmarkCard.tsx41
-rw-r--r--apps/mobile/components/bookmarks/BookmarkList.tsx2
-rw-r--r--apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx4
-rw-r--r--apps/mobile/components/navigation/stack.tsx27
-rw-r--r--apps/mobile/components/navigation/tabs.tsx25
-rw-r--r--apps/mobile/components/ui/Divider.tsx5
-rw-r--r--apps/mobile/components/ui/FullPageSpinner.tsx2
-rw-r--r--apps/mobile/components/ui/Input.tsx21
-rw-r--r--apps/mobile/components/ui/PageTitle.tsx4
10 files changed, 123 insertions, 24 deletions
diff --git a/apps/mobile/components/TailwindResolver.tsx b/apps/mobile/components/TailwindResolver.tsx
new file mode 100644
index 00000000..d5e084cd
--- /dev/null
+++ b/apps/mobile/components/TailwindResolver.tsx
@@ -0,0 +1,16 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { cssInterop } from "nativewind";
+
+function TailwindResolverImpl({
+ comp,
+ style,
+}: {
+ comp: (style?: ViewStyle & TextStyle) => React.ReactNode;
+ style?: ViewStyle & TextStyle;
+}) {
+ return comp(style);
+}
+
+export const TailwindResolver = cssInterop(TailwindResolverImpl, {
+ className: "style",
+});
diff --git a/apps/mobile/components/bookmarks/BookmarkCard.tsx b/apps/mobile/components/bookmarks/BookmarkCard.tsx
index 76a05aef..9e5febe3 100644
--- a/apps/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkCard.tsx
@@ -22,6 +22,7 @@ import {
useUpdateBookmark,
} from "@hoarder/shared-react/hooks/bookmarks";
+import { TailwindResolver } from "../TailwindResolver";
import { Divider } from "../ui/Divider";
import { Skeleton } from "../ui/Skeleton";
import { useToast } from "../ui/Toast";
@@ -162,9 +163,11 @@ function TagList({ bookmark }: { bookmark: ZBookmark }) {
{tags.map((t) => (
<View
key={t.id}
- className="rounded-full border border-gray-200 px-2.5 py-0.5 text-xs font-semibold"
+ className="rounded-full border border-accent px-2.5 py-0.5 text-xs font-semibold"
>
- <Link href={`dashboard/tags/${t.id}`}>{t.name}</Link>
+ <Link className="text-foreground" href={`dashboard/tags/${t.id}`}>
+ {t.name}
+ </Link>
</View>
))}
</View>
@@ -198,7 +201,7 @@ function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
{imageComp}
<View className="flex gap-2 p-2">
<Text
- className="line-clamp-2 text-xl font-bold"
+ className="line-clamp-2 text-xl font-bold text-foreground"
onPress={() => WebBrowser.openBrowserAsync(url)}
>
{bookmark.title ?? bookmark.content.title ?? parsedUrl.host}
@@ -206,7 +209,9 @@ function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
<TagList bookmark={bookmark} />
<Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
<View className="mt-2 flex flex-row justify-between px-2 pb-2">
- <Text className="my-auto line-clamp-1">{parsedUrl.host}</Text>
+ <Text className="my-auto line-clamp-1 text-foreground">
+ {parsedUrl.host}
+ </Text>
<ActionBar bookmark={bookmark} />
</View>
</View>
@@ -218,13 +223,29 @@ function TextCard({ bookmark }: { bookmark: ZBookmark }) {
if (bookmark.content.type !== "text") {
throw new Error("Wrong content type rendered");
}
+ const content = bookmark.content.text;
return (
<View className="flex max-h-96 gap-2 p-2">
{bookmark.title && (
- <Text className="line-clamp-2 text-xl font-bold">{bookmark.title}</Text>
+ <Text className="line-clamp-2 text-xl font-bold text-foreground">
+ {bookmark.title}
+ </Text>
)}
- <View className="max-h-56 overflow-hidden p-2">
- <Markdown>{bookmark.content.text}</Markdown>
+ <View className="max-h-56 overflow-hidden p-2 text-foreground">
+ <TailwindResolver
+ className="text-foreground"
+ comp={(styles) => (
+ <Markdown
+ style={{
+ text: {
+ color: styles?.color?.toString(),
+ },
+ }}
+ >
+ {content}
+ </Markdown>
+ )}
+ />
</View>
<TagList bookmark={bookmark} />
<Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
@@ -256,7 +277,9 @@ function AssetCard({ bookmark }: { bookmark: ZBookmark }) {
/>
<View className="flex gap-2 p-2">
{title && (
- <Text className="line-clamp-2 text-xl font-bold">{title}</Text>
+ <Text className="line-clamp-2 text-xl font-bold text-foreground">
+ {title}
+ </Text>
)}
<TagList bookmark={bookmark} />
<Divider orientation="vertical" className="mt-2 h-0.5 w-full" />
@@ -307,5 +330,5 @@ export default function BookmarkCard({
break;
}
- return <View className="border-b border-gray-300 bg-white">{comp}</View>;
+ return <View className="border-b border-accent bg-background">{comp}</View>;
}
diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
index 7477992d..3ad23072 100644
--- a/apps/mobile/components/bookmarks/BookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -37,7 +37,7 @@ export default function BookmarkList({
renderItem={(b) => <BookmarkCard bookmark={b.item} />}
ListEmptyComponent={
<View className="items-center justify-center pt-4">
- <Text className="text-xl">No Bookmarks</Text>
+ <Text className="text-xl text-foreground">No Bookmarks</Text>
</View>
}
data={bookmarks}
diff --git a/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
index 8495ee22..efc0d5e7 100644
--- a/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
@@ -4,7 +4,7 @@ import { api } from "@/lib/trpc";
import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
import FullPageSpinner from "../ui/FullPageSpinner";
-import BookmarkList2 from "./BookmarkList";
+import BookmarkList from "./BookmarkList";
export default function UpdatingBookmarkList({
query,
@@ -40,7 +40,7 @@ export default function UpdatingBookmarkList({
};
return (
- <BookmarkList2
+ <BookmarkList
bookmarks={data.pages.flatMap((p) => p.bookmarks)}
header={header}
onRefresh={onRefresh}
diff --git a/apps/mobile/components/navigation/stack.tsx b/apps/mobile/components/navigation/stack.tsx
new file mode 100644
index 00000000..f53b3652
--- /dev/null
+++ b/apps/mobile/components/navigation/stack.tsx
@@ -0,0 +1,27 @@
+import { TextStyle, ViewStyle } from "react-native";
+import { Stack } from "expo-router/stack";
+import { cssInterop } from "nativewind";
+
+interface StackProps extends React.ComponentProps<typeof Stack> {
+ contentStyle?: ViewStyle;
+ headerStyle?: TextStyle;
+}
+
+function StackImpl({ contentStyle, headerStyle, ...props }: StackProps) {
+ props.screenOptions = {
+ ...props.screenOptions,
+ contentStyle,
+ headerStyle: {
+ backgroundColor: headerStyle?.backgroundColor?.toString(),
+ },
+ navigationBarColor: contentStyle?.backgroundColor?.toString(),
+ headerTintColor: headerStyle?.color?.toString(),
+ };
+ return <Stack {...props} />;
+}
+
+// Changing this requires reloading the app
+export const StyledStack = cssInterop(StackImpl, {
+ contentClassName: "contentStyle",
+ headerClassName: "headerStyle",
+});
diff --git a/apps/mobile/components/navigation/tabs.tsx b/apps/mobile/components/navigation/tabs.tsx
new file mode 100644
index 00000000..976731bc
--- /dev/null
+++ b/apps/mobile/components/navigation/tabs.tsx
@@ -0,0 +1,25 @@
+import { ViewStyle } from "react-native";
+import { Tabs } from "expo-router";
+import { cssInterop } from "nativewind";
+
+function StyledTabsImpl({
+ tabBarStyle,
+ headerStyle,
+ ...props
+}: React.ComponentProps<typeof Tabs> & {
+ tabBarStyle?: ViewStyle;
+ headerStyle?: ViewStyle;
+}) {
+ props.screenOptions = {
+ ...props.screenOptions,
+ tabBarStyle,
+ headerStyle,
+ };
+ return <Tabs {...props} />;
+}
+
+export const StyledTabs = cssInterop(StyledTabsImpl, {
+ tabBarClassName: "tabBarStyle",
+ headerClassName: "headerStyle",
+ sceneContainerClassName: "sceneContainerStyle",
+});
diff --git a/apps/mobile/components/ui/Divider.tsx b/apps/mobile/components/ui/Divider.tsx
index cf1b4624..fbc5cf64 100644
--- a/apps/mobile/components/ui/Divider.tsx
+++ b/apps/mobile/components/ui/Divider.tsx
@@ -2,7 +2,6 @@ import { View } from "react-native";
import { cn } from "@/lib/utils";
function Divider({
- color = "#DFE4EA",
className,
orientation,
...props
@@ -10,15 +9,13 @@ function Divider({
color?: string;
orientation: "horizontal" | "vertical";
} & React.ComponentPropsWithoutRef<typeof View>) {
- const dividerStyles = [{ backgroundColor: color }];
-
return (
<View
className={cn(
+ "bg-accent",
orientation === "horizontal" ? "h-0.5" : "w-0.5",
className,
)}
- style={dividerStyles}
{...props}
/>
);
diff --git a/apps/mobile/components/ui/FullPageSpinner.tsx b/apps/mobile/components/ui/FullPageSpinner.tsx
index 89b66090..5436937a 100644
--- a/apps/mobile/components/ui/FullPageSpinner.tsx
+++ b/apps/mobile/components/ui/FullPageSpinner.tsx
@@ -2,7 +2,7 @@ import { ActivityIndicator, View } from "react-native";
export default function FullPageSpinner() {
return (
- <View className="h-full w-full items-center justify-center">
+ <View className="h-full w-full items-center justify-center bg-gray-100 dark:bg-background">
<ActivityIndicator />
</View>
);
diff --git a/apps/mobile/components/ui/Input.tsx b/apps/mobile/components/ui/Input.tsx
index 01c9fb2f..57d16f5d 100644
--- a/apps/mobile/components/ui/Input.tsx
+++ b/apps/mobile/components/ui/Input.tsx
@@ -2,6 +2,8 @@ import { forwardRef } from "react";
import { Text, TextInput, View } from "react-native";
import { cn } from "@/lib/utils";
+import { TailwindResolver } from "../TailwindResolver";
+
export interface InputProps
extends React.ComponentPropsWithoutRef<typeof TextInput> {
label?: string;
@@ -13,13 +15,20 @@ const Input = forwardRef<React.ElementRef<typeof TextInput>, InputProps>(
({ className, label, labelClasses, inputClasses, ...props }, ref) => (
<View className={cn("flex flex-col gap-1.5", className)}>
{label && <Text className={cn("text-base", labelClasses)}>{label}</Text>}
- <TextInput
- ref={ref}
- className={cn(
- inputClasses,
- "rounded-lg border border-input px-4 py-2.5",
+ <TailwindResolver
+ className="text-gray-400"
+ comp={(styles) => (
+ <TextInput
+ placeholderTextColor={styles?.color?.toString()}
+ ref={ref}
+ className={cn(
+ "bg-background text-foreground",
+ inputClasses,
+ "rounded-lg border border-input px-4 py-2.5",
+ )}
+ {...props}
+ />
)}
- {...props}
/>
</View>
),
diff --git a/apps/mobile/components/ui/PageTitle.tsx b/apps/mobile/components/ui/PageTitle.tsx
index 57b19e7d..1c1543ce 100644
--- a/apps/mobile/components/ui/PageTitle.tsx
+++ b/apps/mobile/components/ui/PageTitle.tsx
@@ -1,5 +1,7 @@
import { Text } from "react-native";
export default function PageTitle({ title }: { title: string }) {
- return <Text className="p-4 text-4xl font-bold">{title}</Text>;
+ return (
+ <Text className="p-4 text-4xl font-bold text-foreground">{title}</Text>
+ );
}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2026-01-29 15:22:06 +0000