small improvements

components/LinkList.tsx

@@ -107,10 +107,10 @@ export default function ({ link, count }: Props) {
               <div className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100">
                 <FontAwesomeIcon
                   icon={faFolder}
-                  className="w-4 h-4 mt-1"
+                  className="w-4 h-4 mt-1 drop-shadow"
-                  style={{ color: collection.color }}
+                  style={{ color: collection?.color }}
                 />
-                <p className="text-sky-900">{collection.name}</p>
+                <p className="text-sky-900">{collection?.name}</p>
               </div>
             </Link>
 

components/Modal/LinkModal.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { LinkIncludingCollectionAndTags } from "@/types/global";
 import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";

components/Navbar.tsx

@@ -80,20 +80,30 @@ export default function () {
                 src={account.profilePic}
                 className="h-10 w-10 shadow pointer-events-none rounded-full border-[3px] border-sky-500 group-hover:border-sky-400 duration-100"
                 alt=""
+                id="profile-dropdown"
               />
             ) : (
               <FontAwesomeIcon
                 icon={faCircleUser}
+                id="profile-dropdown"
                 className="h-10 w-10 pointer-events-none text-sky-500 group-hover:text-sky-400 duration-100"
               />
             )}
-            <div className="pointer-events-none hidden sm:block text-sky-500 group-hover:text-sky-400 duration-100">
+            <div
-              <div className="flex item-center gap-1">
+              id="profile-dropdown"
-                <p className="font-bold leading-3 hidden sm:block">
+              className="text-sky-500 group-hover:text-sky-400 duration-100 hidden sm:flex item-center gap-1 max-w-[8rem]"
+            >
+              <p
+                id="profile-dropdown"
+                className="font-bold leading-3 hidden sm:block select-none truncate"
+              >
                 {account.name}
               </p>
-                <FontAwesomeIcon icon={faChevronDown} className="h-3 w-3" />
+              <FontAwesomeIcon
-              </div>
+                id="profile-dropdown"
+                icon={faChevronDown}
+                className="h-3 w-3"
+              />
             </div>
           </div>
           {profileDropdown ? (

pages/collections/index.tsx

@@ -84,7 +84,7 @@ export default function () {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faBox}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
                 All Collections

pages/dashboard.tsx

@@ -39,7 +39,7 @@ export default function () {
           <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faChartSimple}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
             />
             <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
               Dashboard

pages/links.tsx

@@ -55,7 +55,7 @@ export default function Links() {
           <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faBookmark}
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
             />
             <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
               All Links

pages/search/[query].tsx

@@ -74,7 +74,7 @@ export default function Links() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
                 Search Results

pages/search/index.tsx

@@ -74,7 +74,7 @@ export default function Links() {
             <div className="flex gap-2">
               <FontAwesomeIcon
                 icon={faSearch}
-                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500"
+                className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 drop-shadow"
               />
               <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
                 Search Results