mobile: Add borders and padding to the cards

5 files changed, 51 insertions, 24 deletions

diff --git a/packages/mobile/app/dashboard/(tabs)/index.tsx b/packages/mobile/app/dashboard/(tabs)/index.tsx
index 28fa39de..07516f3b 100644
--- a/packages/mobile/app/dashboard/(tabs)/index.tsx
+++ b/packages/mobile/app/dashboard/(tabs)/index.tsx
@@ -1,11 +1,5 @@
-import { View } from "react-native";
-
 import BookmarkList from "@/components/bookmarks/BookmarkList";
 
 export default function Home() {
-  return (
-    <View>
-      <BookmarkList archived={false} />
-    </View>
-  );
+  return <BookmarkList archived={false} />;
 }
diff --git a/packages/mobile/app/dashboard/(tabs)/search.tsx b/packages/mobile/app/dashboard/(tabs)/search.tsx
index 0cc16716..980cab36 100644
--- a/packages/mobile/app/dashboard/(tabs)/search.tsx
+++ b/packages/mobile/app/dashboard/(tabs)/search.tsx
@@ -4,6 +4,7 @@ import { View } from "react-native";
 import { useDebounce } from "use-debounce";
 
 import BookmarkList from "@/components/bookmarks/BookmarkList";
+import { Divider } from "@/components/ui/Divider";
 import { Input } from "@/components/ui/Input";
 import { api } from "@/lib/trpc";
 
@@ -18,15 +19,16 @@ export default function Search() {
   );
 
   return (
-    <View className="flex gap-2 p-2">
+    <View>
       <Input
         placeholder="Search"
-        className="bg-white"
+        className="mx-4 mt-4 bg-white"
         value={search}
         onChangeText={setSearch}
         autoFocus
         autoCapitalize="none"
       />
+      <Divider orientation="horizontal" className="mb-1 mt-4 w-full" />
       {data && <BookmarkList ids={data.bookmarks.map((b) => b.id)} />}
     </View>
   );
diff --git a/packages/mobile/components/bookmarks/BookmarkCard.tsx b/packages/mobile/components/bookmarks/BookmarkCard.tsx
index b6dd0f07..ae0d8a33 100644
--- a/packages/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkCard.tsx
@@ -123,12 +123,12 @@ function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
   const imageComp = bookmark.content.imageUrl ? (
     <Image
       source={{ uri: bookmark.content.imageUrl }}
-      className="h-56 min-h-56 w-full rounded-t object-cover"
+      className="h-56 min-h-56 w-full rounded-t-lg object-cover"
     />
   ) : (
     <Image
       source={require("@/assets/blur.jpeg")}
-      className="h-56 w-full rounded-t"
+      className="h-56 w-full rounded-t-lg"
     />
   );
 
@@ -205,5 +205,9 @@ export default function BookmarkCard({
       break;
   }
 
-  return <View className="rounded bg-white">{comp}</View>;
+  return (
+    <View className="w-96 rounded-lg border border-gray-300 bg-white shadow-sm">
+      {comp}
+    </View>
+  );
 }
diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
index 130c8924..519ec47c 100644
--- a/packages/mobile/components/bookmarks/BookmarkList.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -46,17 +46,16 @@ export default function BookmarkList({
   }
 
   return (
-    <View className="px-3">
-      <FlatList
-        contentContainerStyle={{
-          marginTop: 10,
-          gap: 10,
-        }}
-        renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
-        data={data.bookmarks}
-        refreshing={refreshing}
-        onRefresh={onRefresh}
-      />
-    </View>
+    <FlatList
+      contentContainerStyle={{
+        gap: 15,
+        marginVertical: 15,
+        alignItems: "center",
+      }}
+      renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
+      data={data.bookmarks}
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+    />
   );
 }
diff --git a/packages/mobile/components/ui/Divider.tsx b/packages/mobile/components/ui/Divider.tsx
new file mode 100644
index 00000000..1da0a71e
--- /dev/null
+++ b/packages/mobile/components/ui/Divider.tsx
@@ -0,0 +1,28 @@
+import { View } from "react-native";
+
+import { cn } from "@/lib/utils";
+
+function Divider({
+  color = "#DFE4EA",
+  className,
+  orientation,
+  ...props
+}: {
+  color?: string;
+  orientation: "horizontal" | "vertical";
+} & React.ComponentPropsWithoutRef<typeof View>) {
+  const dividerStyles = [{ backgroundColor: color }];
+
+  return (
+    <View
+      className={cn(
+        orientation === "horizontal" ? "h-0.5" : "w-0.5",
+        className,
+      )}
+      style={dividerStyles}
+      {...props}
+    />
+  );
+}
+
+export { Divider };