ui improvements

components/AddLinkModal.tsx

@@ -40,7 +40,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
   };
 
   return (
-    <div className="slide-up border-sky-100 border-solid border rounded-md shadow-lg p-5 bg-white flex flex-col gap-3">
+    <div className="slide-up border-sky-100 rounded-md border-solid border rounded-md-md shadow-lg p-5 bg-white flex flex-col gap-3">
       <p className="font-bold text-sky-300 mb-2 text-center">New Link</p>
 
       <div className="flex gap-5 items-center justify-between">
@@ -50,7 +50,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
           onChange={(e) => setNewLink({ ...newLink, name: e.target.value })}
           type="text"
           placeholder="e.g. Example Link"
-          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -61,7 +61,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
           onChange={(e) => setNewLink({ ...newLink, url: e.target.value })}
           type="text"
           placeholder="e.g. http://example.com/"
-          className="w-60 rounded p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
+          className="w-60 rounded-md p-3 border-sky-100 border-solid border text-sm outline-none focus:border-sky-500 duration-100"
         />
       </div>
 
@@ -76,7 +76,7 @@ export default function ({ toggleLinkModal }: { toggleLinkModal: Function }) {
       </div>
 
       <div
-        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
+        className="mx-auto mt-2 bg-sky-500 text-white flex items-center gap-2 py-2 px-5 rounded-md select-none font-bold cursor-pointer duration-100 hover:bg-sky-400"
         onClick={submitLink}
       >
         <FontAwesomeIcon icon={faPlus} className="h-5" />

components/CollectionCard.tsx

@@ -12,7 +12,7 @@ export default function ({ collection }: { collection: Collection }) {
 
   return (
     <Link href={`/collections/${collection.id}`}>
-      <div className="p-5 bg-gray-100 m-2 h-40 w-60 rounded border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
+      <div className="p-5 bg-gray-100 h-40 w-60 rounded-md border-sky-100 border-solid border flex flex-col justify-between cursor-pointer hover:bg-gray-50 duration-100">
         <div className="flex justify-between text-sky-900 items-center">
           <p className="text-lg w-max">{collection.name}</p>
           <FontAwesomeIcon icon={faChevronRight} className="w-3" />

components/Dropdown.tsx

@@ -19,12 +19,12 @@ export default function ({ onClickOutside, className, items }: Props) {
   return (
     <ClickAwayHandler
       onClickOutside={onClickOutside}
-      className={`${className} border border-sky-100 shadow mb-5 bg-gray-50 rounded flex flex-col `}
+      className={`${className} border border-sky-100 shadow-md mb-5 bg-gray-50 rounded-md flex flex-col w-36`}
     >
       {items.map((e, i) => {
         const inner = (
-          <div className="cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
-            <div className="flex items-center gap-2 p-2 rounded hover:opacity-60 duration-100">
+          <div className="cursor-pointer rounded-md hover:bg-white hover:outline outline-sky-100 outline-1 duration-100">
+            <div className="flex items-center gap-2 p-2 rounded-md hover:opacity-60 duration-100">
               {React.cloneElement(e.icon, {
                 className: "text-sky-500 w-5 h-5",
               })}

components/InputSelect/styles.ts

@@ -23,7 +23,7 @@ export const styles: StylesConfig = {
     ...styles,
     width: "15rem",
     border: "1px solid #e0f2fe",
-    borderRadius: "0.25rem",
+    borderRadius: "0.375rem",
     fontSize: "0.875rem",
     lineHeight: "1.25rem",
   }),

components/LinkList.tsx

@@ -35,16 +35,32 @@ export default function ({
   });
 
   return (
-    <div className="border border-sky-100 mb-5 bg-gray-100 p-5 rounded flex items-center gap-5 group/item">
+    <div className="mx-auto border border-sky-100 mb-5 bg-gray-100 p-2 rounded-md flex items-start relative gap-5 group/item">
       <Image
         src={`http://icons.duckduckgo.com/ip3/${shortendURL}.ico`}
-        width={100}
-        height={100}
+        width={32}
+        height={32}
         alt=""
-        className="blur-sm opacity-80 group-hover/item:opacity-100 duration-100"
+        className="opacity-100 duration-100 select-none mt-3"
         draggable="false"
+        onError={(e) => {
+          const target = e.target as HTMLElement;
+          target.style.opacity = "0";
+        }}
       />
-      <div className="flex justify-between gap-5 w-full">
+      <Image
+        src={`http://icons.duckduckgo.com/ip3/${shortendURL}.ico`}
+        width={80}
+        height={80}
+        alt=""
+        className="blur-sm absolute left-0 opacity-50 select-none"
+        draggable="false"
+        onError={(e) => {
+          const target = e.target as HTMLElement;
+          target.style.opacity = "0";
+        }}
+      />
+      <div className="flex justify-between gap-5 w-full z-0">
         <div>
           <div className="flex items-baseline gap-1">
             <p className="text-sm text-sky-300 font-bold">{count + 1}.</p>
@@ -87,7 +103,8 @@ export default function ({
         <div className="flex flex-col justify-between items-end relative">
           <FontAwesomeIcon
             icon={faEllipsis}
-            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"
+            title="More"
+            className="w-6 h-6 text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1"
             onClick={() => setEditDropdown(!editDropdown)}
             id="edit-dropdown"
           />
@@ -153,7 +170,7 @@ export default function ({
                 const target = e.target as HTMLInputElement;
                 if (target.id !== "edit-dropdown") setEditDropdown(false);
               }}
-              className="absolute top-10 right-0"
+              className="absolute top-8 right-0"
             />
           ) : null}
         </div>

components/Navbar.tsx

@@ -65,22 +65,38 @@ export default function () {
   };
 
   return (
-    <div className="flex justify-between items-center p-5 border-solid border-b-sky-100 border border-l-white">
-      <div className="text-sky-900 rounded my-1 flex items-center gap-2 font-bold">
+    <div className="flex justify-between items-center p-2 border-solid border-b-sky-100 border-b">
+      <div className="text-sky-900 rounded-md my-1 flex items-center gap-2 font-bold">
         {pageIcon ? (
           <FontAwesomeIcon icon={pageIcon} className="w-4 text-sky-300" />
         ) : null}
         <p>{pageName}</p>
       </div>
-      <div className="flex items-center gap-3">
+
+      <div className="flex items-center gap-2 justify-between">
+        <div className="flex items-center relative">
+          <label
+            htmlFor="search-box"
+            className="inline-flex w-fit absolute right-0  cursor-pointer"
+            title="Search"
+          >
+            <FontAwesomeIcon
+              icon={faMagnifyingGlass}
+              className="select-none w-5 h-5 rounded-md p-1 text-sky-500 "
+            />
+          </label>
+          <input
+            id="search-box"
+            type="text"
+            placeholder="Search for Links"
+            className="border border-sky-100 rounded-md pr-6 w-6 focus:border-sky-500 focus:w-60 hover:border-sky-500 duration-100 outline-none p-1 text-sm"
+          />
+        </div>
         <FontAwesomeIcon
           icon={faPlus}
           onClick={toggleLinkModal}
-          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
-        />
-        <FontAwesomeIcon
-          icon={faMagnifyingGlass}
-          className="select-none cursor-pointer w-5 h-5 text-white bg-sky-500 p-2 rounded hover:bg-sky-400 duration-100"
+          title="New Link"
+          className="select-none cursor-pointer w-5 h-5 text-sky-500 p-1 rounded-md hover:outline-sky-500 outline duration-100 hover:bg-white outline-sky-100 outline-1"
         />
 
         {linkModal ? (

components/Sidebar/SidebarItem.tsx

@@ -1,4 +1,3 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import React, { ReactElement } from "react";
 
@@ -11,7 +10,7 @@ interface SidebarItemProps {
 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">
+      <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
         {React.cloneElement(icon, {
           className: "w-4 text-sky-300",
         })}

components/Sidebar/index.tsx

@@ -48,10 +48,10 @@ 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="fixed bg-gray-100 top-0 bottom-0 left-0 w-80 p-2 overflow-y-auto hide-scrollbar border-solid border-r-sky-100 border z-10">
       <div className="relative w-fit">
         <div
-          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"
+          className="flex gap-2 items-center mb-5 p-2 w-fit text-gray-600 cursor-pointer hover:outline outline-sky-100 outline-1 hover:bg-gray-50 rounded-md duration-100"
           onClick={() => setProfileDropdown(!profileDropdown)}
           id="profile-dropdown"
         >
@@ -84,27 +84,27 @@ export default function () {
               const target = e.target as HTMLInputElement;
               if (target.id !== "profile-dropdown") setProfileDropdown(false);
             }}
-            className="absolute top-12 left-0"
+            className="absolute top-10 left-0"
           />
         ) : null}
       </div>
 
       <Link href="links">
-        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBookmark} className="w-4 text-sky-300" />
           <p>All Links</p>
         </div>
       </Link>
 
       <Link href="/collections">
-        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded my-1 p-3 cursor-pointer flex items-center gap-2">
+        <div className="hover:bg-gray-50 hover:outline outline-sky-100 outline-1 duration-100 text-sky-900 rounded-md my-1 p-2 cursor-pointer flex items-center gap-2">
           <FontAwesomeIcon icon={faBox} className="w-4 text-sky-300" />
           <p>All Collections</p>
         </div>
       </Link>
 
       <div className="text-gray-500 flex items-center justify-between mt-5">
-        <p className="text-sm p-3">Collections</p>
+        <p className="text-sm p-2">Collections</p>
         {collectionInput ? (
           <ClickAwayHandler
             onClickOutside={toggleCollectionInput}
@@ -113,7 +113,7 @@ export default function () {
             <input
               type="text"
               placeholder="Enter Collection Name"
-              className="w-44 rounded p-2 border-sky-100 border-solid border text-sm outline-none"
+              className="w-44 rounded-md p-1 border-sky-500 border-solid border text-sm outline-none"
               onKeyDown={submitCollection}
               autoFocus
             />
@@ -122,7 +122,8 @@ export default function () {
           <FontAwesomeIcon
             icon={faPlus}
             onClick={toggleCollectionInput}
-            className="select-none cursor-pointer p-2 w-3"
+            title="Add Collection"
+            className="select-none text-gray-500 rounded-md cursor-pointer hover:bg-white hover:outline outline-sky-100 outline-1 duration-100 p-1 w-3"
           />
         )}
       </div>
@@ -139,7 +140,7 @@ export default function () {
         })}
       </div>
       <div className="text-gray-500 flex items-center justify-between mt-5">
-        <p className="text-sm p-3">Tags</p>
+        <p className="text-sm p-2">Tags</p>
       </div>
       <div>
         {tags.map((e, i) => {