From c7f60955d94cf6657f9e9d4337230876dc1aba85 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 05:15:04 +0000
Subject: mobile: Change bookmark cards images to not have any paddings

---
 .../mobile/components/bookmarks/BookmarkCard.tsx   | 18 +++++++++++-------
 .../mobile/components/bookmarks/BookmarkList.tsx   | 22 ++++++++++++----------
 2 files changed, 23 insertions(+), 17 deletions(-)

(limited to 'packages/mobile/components/bookmarks')

diff --git a/packages/mobile/components/bookmarks/BookmarkCard.tsx b/packages/mobile/components/bookmarks/BookmarkCard.tsx
index 9b8b72f8..b6dd0f07 100644
--- a/packages/mobile/components/bookmarks/BookmarkCard.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkCard.tsx
@@ -117,24 +117,28 @@ function LinkCard({ bookmark }: { bookmark: ZBookmark }) {
     throw new Error("Wrong content type rendered");
   }
 
-  const parsedUrl = new URL(bookmark.content.url);
+  const url = bookmark.content.url;
+  const parsedUrl = new URL(url);
 
   const imageComp = bookmark.content.imageUrl ? (
     <Image
       source={{ uri: bookmark.content.imageUrl }}
-      className="h-56 min-h-56 w-full"
+      className="h-56 min-h-56 w-full rounded-t object-cover"
     />
   ) : (
-    <Image source={require("@/assets/blur.jpeg")} className="h-56 w-full" />
+    <Image
+      source={require("@/assets/blur.jpeg")}
+      className="h-56 w-full rounded-t"
+    />
   );
 
   return (
     <View className="flex gap-2">
       {imageComp}
-      <View className="flex gap-2">
+      <View className="flex gap-2 p-2">
         <Text
           className="line-clamp-2 text-xl font-bold"
-          onPress={() => WebBrowser.openBrowserAsync(bookmark.content.url)}
+          onPress={() => WebBrowser.openBrowserAsync(url)}
         >
           {bookmark.content.title || parsedUrl.host}
         </Text>
@@ -153,7 +157,7 @@ function TextCard({ bookmark }: { bookmark: ZBookmark }) {
     throw new Error("Wrong content type rendered");
   }
   return (
-    <View className="flex max-h-96 gap-2">
+    <View className="flex max-h-96 gap-2 p-2">
       <View className="max-h-56 overflow-hidden pb-2">
         <Markdown>{bookmark.content.text}</Markdown>
       </View>
@@ -201,5 +205,5 @@ export default function BookmarkCard({
       break;
   }
 
-  return <View className="rounded bg-white p-4">{comp}</View>;
+  return <View className="rounded bg-white">{comp}</View>;
 }
diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
index 223b1bf4..130c8924 100644
--- a/packages/mobile/components/bookmarks/BookmarkList.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -46,15 +46,17 @@ export default function BookmarkList({
   }
 
   return (
-    <FlatList
-      contentContainerStyle={{
-        marginTop: 10,
-        gap: 10,
-      }}
-      renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
-      data={data.bookmarks}
-      refreshing={refreshing}
-      onRefresh={onRefresh}
-    />
+    <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>
   );
 }
-- 
cgit v1.2.3-70-g09d2