visual tweaks to the preview card and added context in a comment regarding dufflepud

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}>
+    <div className="link-preview-container">
-      <img src={previewImage}></img>
+      <a href={url}>
-      <p>{previewtitle}</p>
+        <img src={previewImage} className="link-preview-image"></img>
-    </a>
+        <p className="link-preview-title">{previewtitle}</p>
+      </a>
+    </div>
   );
 };
 

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