From 71ac317a0731097dd297621371d1095cf7e46f15 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Fri, 1 Nov 2024 10:40:40 -0700
Subject: [PATCH 1/2] Add description to link card when available

---
 src/components/inputs/editor/LinkCard.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/inputs/editor/LinkCard.tsx b/src/components/inputs/editor/LinkCard.tsx
index cab5a876..154c698c 100644
--- a/src/components/inputs/editor/LinkCard.tsx
+++ b/src/components/inputs/editor/LinkCard.tsx
@@ -35,9 +35,10 @@ export default function LinkCard(props: Props) {
     return (
       <article className="border-skin-base relative animate-pulse rounded-2xl border">
         <div className="bg-skin-muted relative h-44 w-full rounded-t-2xl" />
-        <div className="flex grow flex-col gap-3 p-3">
-          <div className="bg-skin-muted h-5 w-2/5" />
-          <div className="bg-skin-muted h-5 w-full" />
+        <div className="flex grow flex-col gap-1 p-3">
+          <div className="bg-skin-muted h-3 w-2/5" />
+          <div className="bg-skin-muted h-4 w-1/2" />
+          <div className="bg-skin-muted h-3 w-3/4" />
         </div>
       </article>
     );
@@ -99,6 +100,11 @@ export default function LinkCard(props: Props) {
             {data.title}
           </span>
         )}
+        {data?.description && (
+          <span className="text-skin-secondary text-sm line-clamp-2">
+            {data.description}
+          </span>
+        )}
       </div>
     </article>
   );

From 40fc3e0082d0a04d01f7b5e6b2066f29f7df8042 Mon Sep 17 00:00:00 2001
From: Pouria Delfanazari <pdelfan@gmail.com>
Date: Fri, 1 Nov 2024 10:50:48 -0700
Subject: [PATCH 2/2] Make the entire post hider clickable

---
 .../dataDisplay/postHider/PostHider.tsx       | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/dataDisplay/postHider/PostHider.tsx b/src/components/dataDisplay/postHider/PostHider.tsx
index 9ba952df..ed46f236 100644
--- a/src/components/dataDisplay/postHider/PostHider.tsx
+++ b/src/components/dataDisplay/postHider/PostHider.tsx
@@ -1,5 +1,5 @@
 import Button from "@/components/actions/button/Button";
-import { MdOutlineVisibilityOff } from "react-icons/md";
+import { MdOutlineVisibilityOff, MdOutlineVisibility } from "react-icons/md";
 import { Dispatch, SetStateAction } from "react";
 
 interface Props {
@@ -13,22 +13,24 @@ export default function PostHider(props: Props) {
   const { message, hidden, onToggleVisibility, showToggle } = props;
 
   return (
-    <div className="text-skin-base bg-skin-tertiary flex items-center justify-between gap-2 rounded-lg p-3 font-medium">
+    <Button
+      onClick={(e) => {
+        e.stopPropagation();
+        onToggleVisibility(hidden ? false : true);
+      }}
+      className="text-skin-base bg-skin-tertiary flex items-center justify-between gap-2 rounded-lg p-3 font-medium w-full border border-skin-base hover:bg-skin-muted"
+    >
       <div className="flex items-center gap-2">
-        <MdOutlineVisibilityOff className="text-skin-icon-base shrink-0 text-2xl" />
+        {hidden ? (
+          <MdOutlineVisibilityOff className="text-skin-icon-base shrink-0 text-2xl" />
+        ) : (
+          <MdOutlineVisibility className="text-skin-icon-base shrink-0 text-2xl" />
+        )}
         <span>{message}</span>
       </div>
       {showToggle && (
-        <Button
-          onClick={(e) => {
-            e.stopPropagation();
-            onToggleVisibility(hidden ? false : true);
-          }}
-          className="bg-skin-base border-skin-base rounded-lg border px-2 py-1 hover:brightness-95"
-        >
-          {hidden ? "Show" : "Hide"}
-        </Button>
+        <span className="text-skin-base">{hidden ? "Show" : "Hide"}</span>
       )}
-    </div>
+    </Button>
   );
 }