recreated many components

components/Navbar.tsx

@@ -50,16 +50,18 @@ export default function Navbar() {
   };
 
   return (
-    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b h-16">
+    <div className="flex justify-between gap-2 items-center px-5 py-2 border-solid border-b-neutral-content border-b">
       <div
         onClick={toggleSidebar}
-        className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-[0.687rem] text-neutral rounded-md duration-100 hover:bg-neutral-content"
+        className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
       >
         <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
       </div>
       <SearchBar />
       <div className="flex items-center gap-2">
-        <div
+        <ToggleDarkMode className="sm:inline-grid hidden" />
+
+        <button
           onClick={() => {
             setModal({
               modal: "LINK",
@@ -67,36 +69,28 @@ export default function Navbar() {
               method: "CREATE",
             });
           }}
-          className="inline-flex gap-1 relative sm:w-[7.2rem] items-center font-semibold select-none cursor-pointer p-[0.687rem] sm:p-2 sm:px-3 rounded-md sm:rounded-full hover:bg-neutral-content dark:hover:bg-sky-800 sm:dark:hover:bg-sky-600 text-primary sm:text-white sm:bg-sky-700 sm:hover:bg-sky-600 duration-100 group"
+          className="inline-flex sm:gap-1 relative sm:w-[5rem] items-center duration-100 group btn btn-accent text-white btn-sm"
         >
           <FontAwesomeIcon
             icon={faPlus}
-            className="w-5 h-5 sm:group-hover:ml-9 sm:absolute duration-100"
+            className="w-5 h-5 sm:group-hover:ml-5 sm:absolute duration-100 left-2"
           />
           <span className="hidden sm:block group-hover:opacity-0 text-right w-full duration-100">
-            New Link
+            New
           </span>
-        </div>
-
-        <ToggleDarkMode className="sm:flex hidden" />
+        </button>
 
         <div className="relative">
           <div
-            className="flex gap-1 group sm:hover:bg-neutral-content sm:hover:p-1 sm:hover:pr-2 duration-100 h-10 rounded-full items-center w-fit cursor-pointer"
+            className="btn btn-circle btn-ghost"
             onClick={() => setProfileDropdown(!profileDropdown)}
             id="profile-dropdown"
           >
             <ProfilePhoto
               src={account.image ? account.image : undefined}
               priority={true}
-              className="sm:group-hover:h-8 sm:group-hover:w-8 duration-100 border-[3px]"
+              className=""
             />
-            <p
-              id="profile-dropdown"
-              className="leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
-            >
-              {account.name}
-            </p>
           </div>
           {profileDropdown ? (
             <Dropdown