feat: improvements

components/Dropdown.tsx

@@ -19,26 +19,25 @@ export default function ({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} border border-sky-100 shadow mb-5 bg-gray-50 p-4 rounded flex flex-col gap-4`}
+      className={`${className} border border-sky-100 shadow mb-5 bg-gray-50 p-2 rounded flex flex-col gap-1`}
     >
       {items.map((e, i) => {
+        const inner = (
+          <div className="flex items-center gap-2 p-2 rounded cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
+            {React.cloneElement(e.icon, {
+              className: "text-sky-500 w-5 h-5",
+            })}
+            <p className="text-sky-900">{e.name}</p>
+          </div>
+        );
+
         return e.href ? (
           <Link key={i} href={e.href}>
-            <div className="flex items-center gap-2 px-2 cursor-pointer">
+            {inner}
-              {React.cloneElement(e.icon, {
-                className: "text-sky-500 w-5 h-5",
-              })}
-              <p className="text-sky-900">{e.name}</p>
-            </div>
           </Link>
         ) : (
           <div key={i} onClick={e.onClick}>
-            <div className="flex items-center gap-2 px-2 cursor-pointer">
+            {inner}
-              {React.cloneElement(e.icon, {
-                className: "text-sky-500 w-5 h-5",
-              })}
-              <p className="text-sky-900">{e.name}</p>
-            </div>
           </div>
         );
       })}

components/LinkList.tsx

@@ -84,11 +84,11 @@ export default function ({
         <div className="flex flex-col justify-between items-end relative">
           <FontAwesomeIcon
             icon={faEllipsis}
-            className="w-6 h-6 text-gray-500 hover:text-gray-400 duration-100 cursor-pointer"
+            className="w-6 h-6 text-gray-500 rounded cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-2"
             onClick={() => setEditDropdown(!editDropdown)}
           />
           <div>
-            <p className="text-center text-sky-500 text-sm font-bold">
+            <p className="text-center text-sky-400 text-sm font-bold">
               {archiveLabel}
             </p>
 
@@ -145,7 +145,7 @@ export default function ({
                 },
               ]}
               onClickOutside={() => setEditDropdown(!editDropdown)}
-              className="absolute top-8 right-0"
+              className="absolute top-10 right-0"
             />
           ) : null}
         </div>

components/Sidebar/SidebarItem.tsx

@@ -1,11 +1,10 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-import { MouseEventHandler } from "react";
 import Link from "next/link";
+import React, { ReactElement } from "react";
 
 interface SidebarItemProps {
   text: string;
-  icon: IconProp;
+  icon: ReactElement;
   path: string;
 }
 
@@ -13,7 +12,9 @@ export default function ({ text, icon, path }: SidebarItemProps) {
   return (
     <Link href={path}>
       <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
-        <FontAwesomeIcon icon={icon} className="w-4 text-sky-300" />
+        {React.cloneElement(icon, {
+          className: "w-4 text-sky-300",
+        })}
         <p className="text-sky-900">{text}</p>
       </div>
     </Link>

components/Sidebar/index.tsx

@@ -49,14 +49,16 @@ export default function () {
 
   return (
     <div className="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-5 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
-      <div className="flex gap-3 items-center mb-5 p-3 w-fit text-gray-600 relative">
+      <div className="relative w-fit">
-        <FontAwesomeIcon icon={faCircleUser} className="h-8" />
         <div
-          className="flex items-center gap-1 cursor-pointer"
+          className="flex gap-2 items-center mb-5 p-3 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded duration-100"
           onClick={() => setProfileDropdown(!profileDropdown)}
         >
-          <p>{user?.name}</p>
+          <FontAwesomeIcon icon={faCircleUser} className="h-5" />
-          <FontAwesomeIcon icon={faChevronDown} className="h-3" />
+          <div className="flex items-center gap-1">
+            <p className="font-bold">{user?.name}</p>
+            <FontAwesomeIcon icon={faChevronDown} className="h-3" />
+          </div>
         </div>
         {profileDropdown ? (
           <Dropdown
@@ -75,7 +77,7 @@ export default function () {
               },
             ]}
             onClickOutside={() => setProfileDropdown(!profileDropdown)}
-            className="absolute top-14 left-0"
+            className="absolute top-12 left-0"
           />
         ) : null}
       </div>
@@ -123,7 +125,7 @@ export default function () {
             <SidebarItem
               key={i}
               text={e.name}
-              icon={faFolder}
+              icon={<FontAwesomeIcon icon={faFolder} />}
               path={`/collections/${e.id}`}
             />
           );
@@ -138,7 +140,7 @@ export default function () {
             <SidebarItem
               key={i}
               text={e.name}
-              icon={faHashtag}
+              icon={<FontAwesomeIcon icon={faHashtag} />}
               path={`/tags/${e.id}`}
             />
           );