From 3ceb83b318bdeb96acf7f4d9897c11d2ceb90c93 Mon Sep 17 00:00:00 2001
From: Andrew <ghobrial.andrew@gmail.com>
Date: Tue, 28 Mar 2023 06:11:21 -0400
Subject: [PATCH] visual tweaks to the preview card and added context in a
 comment regarding dufflepud

---
 packages/app/src/Element/LinkPreview.tsx | 14 ++++++++++----
 packages/app/src/Element/Note.css        | 15 +++++++++++++++
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/packages/app/src/Element/LinkPreview.tsx b/packages/app/src/Element/LinkPreview.tsx
index 0a776e3..384357f 100644
--- a/packages/app/src/Element/LinkPreview.tsx
+++ b/packages/app/src/Element/LinkPreview.tsx
@@ -1,6 +1,10 @@
 import { useEffect, useState } from "react";
 
 async function fetchUrlPreviewInfo(url: string) {
+  // Hardcoded the dufflepud url here only for initial testing by Snort devs,
+  // will be more ideal for Snort to deploy its own instance of Dufflepud
+  // and link to it in an .env to not bombard dufflepud.onrender.com , which is
+  // Coracle's instance. Repo: https://github.com/staab/dufflepud
   const res = await fetch("http://dufflepud.onrender.com/link/preview", {
     method: "POST",
     body: JSON.stringify({ url }),
@@ -31,10 +35,12 @@ const LinkPreview = ({ url }: { url: string }) => {
       .catch(console.error);
   }, [url]);
   return (
-    <a href={url}>
-      <img src={previewImage}></img>
-      <p>{previewtitle}</p>
-    </a>
+    <div className="link-preview-container">
+      <a href={url}>
+        <img src={previewImage} className="link-preview-image"></img>
+        <p className="link-preview-title">{previewtitle}</p>
+      </a>
+    </div>
   );
 };
 
diff --git a/packages/app/src/Element/Note.css b/packages/app/src/Element/Note.css
index cc2845b..27b0017 100644
--- a/packages/app/src/Element/Note.css
+++ b/packages/app/src/Element/Note.css
@@ -231,3 +231,18 @@
 .close-menu-container {
   position: absolute;
 }
+
+.link-preview-container {
+  border: 1px solid #282828;
+  border-radius: 10px;
+}
+
+.link-preview-title {
+  padding-left: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+}
+
+.link-preview-image {
+  margin: 0 0 15px 0 !important;
+}