visual changes improvements

components/CollectionCard.tsx

@@ -21,7 +21,7 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
     <Link href={`/collections/${collection.id}`}>
       <div className="p-5 bg-gray-100 min-h-[10rem] w-72 rounded-md border-sky-100 border-solid border flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
         <div>
-          <div className="flex justify-between text-sky-900 items-center">
+          <div className="flex justify-between text-sky-600 items-center">
             <p className="text-lg w-max font-bold">{collection.name}</p>
             <FontAwesomeIcon
               icon={faChevronRight}

components/Dashboard/CollectionItem.tsx

@@ -18,10 +18,10 @@ export default function ({ collection }: { collection: ExtendedCollection }) {
   });
 
   return (
-    <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-white rounded-md flex flex-col gap-2 justify-between cursor-pointer hover:bg-gray-50 duration-100">
+    <Link href={`/collections/${collection.id}`} className="bg-white">
+      <div className="p-5 rounded-md flex border border-sky-100 flex-col gap-2 justify-between cursor-pointer hover:opacity-60 duration-100">
         <div>
-          <div className="flex justify-between text-sky-900 items-center">
+          <div className="flex justify-between text-sky-600 items-center">
             <div className="flex items-baseline gap-1">
               <p className="text-lg w-max font-bold">{collection.name}</p>
               <p className="text-sky-400">{collection.description}</p>

components/Dashboard/LinkItem.tsx

@@ -21,8 +21,6 @@ export default function ({
   link: ExtendedLink;
   count: number;
 }) {
-  const [editModal, setEditModal] = useState(false);
-
   const url = new URL(link.url);
   const formattedDate = new Date(link.createdAt).toLocaleString("en-US", {
     year: "numeric",
@@ -31,7 +29,7 @@ export default function ({
   });
 
   return (
-    <div className="bg-white p-5 rounded-md flex items-start relative gap-5 sm:gap-14 group/item">
+    <div className="bg-white p-5 rounded-md flex items-start border border-sky-100 relative gap-5 lg:gap-10 group/item">
       <Image
         src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
         width={32}
@@ -49,7 +47,7 @@ export default function ({
         width={80}
         height={80}
         alt=""
-        className="blur-sm absolute left-2 opacity-40 select-none hidden sm:block"
+        className="blur-sm absolute left-2 opacity-40 select-none hidden lg:block"
         draggable="false"
         onError={(e) => {
           const target = e.target as HTMLElement;

components/Sidebar/index.tsx

@@ -18,7 +18,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-export default function () {
+export default function ({ className }: { className?: string }) {
   const { collections } = useCollectionStore();
   const { tags } = useTagStore();
 
@@ -31,7 +31,9 @@ export default function () {
   }, [router]);
 
   return (
-    <div className="bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20">
+    <div
+      className={`bg-gray-100 h-screen w-64 xl:w-80 p-2 overflow-y-auto border-solid border-r-sky-100 border z-20 ${className}`}
+    >
       <p className="p-2 text-sky-500 font-bold text-xl mb-5 leading-4">
         Linkwarden
       </p>