Merge branch 'preview'

pdelfan · Nov 1, 2024 · 7c19e51 · 7c19e51
2 parents c4a4279 + 40fc3e0
commit 7c19e51
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git 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>
   );
 }
diff --git 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>
   );