mobile: Add borders and padding to the cards

2 files changed, 18 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}
+    />
   );
 }