mobile: Add borders and padding to the cards

3 files changed, 46 insertions, 15 deletions

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 };