Merge pull request #347 from linkwarden/bootstrap-icons

Bootstrap icons

components/AccentSubmitButton.tsx

@@ -1,9 +1,5 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
 type Props = {
   onClick?: Function;
-  icon?: IconProp;
   label: string;
   loading?: boolean;
   className?: string;
@@ -12,7 +8,6 @@ type Props = {
 
 export default function AccentSubmitButton({
   onClick,
-  icon,
   label,
   loading,
   className,
@@ -28,7 +23,6 @@ export default function AccentSubmitButton({
         if (loading !== undefined && !loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
       <p className="font-bold">{label}</p>
     </button>
   );

components/AnnouncementBar.tsx

@@ -1,5 +1,3 @@
-import { faClose } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Link from "next/link";
 import React, { MouseEventHandler } from "react";
 
@@ -24,10 +22,12 @@ export default function AnnouncementBar({ toggleAnnouncementBar }: Props) {
         </div>
 
         <button
-          className="fixed top-3 right-3 hover:opacity-50 duration-100"
+          className="fixed right-3 hover:opacity-50 duration-100"
           onClick={toggleAnnouncementBar}
         >
-          <FontAwesomeIcon icon={faClose} className="w-4 h-4" />
+          <i
+            className="bi-x text-neutral text-2xl"
+          ></i>
         </button>
       </div>
     </div>

components/Checkbox.tsx

@@ -1,5 +1,3 @@
-import { faSquare, faSquareCheck } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEventHandler } from "react";
 
 type Props = {

components/CollectionCard.tsx

@@ -1,10 +1,7 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis, faGlobe, faLink } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import ProfilePhoto from "./ProfilePhoto";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 import usePermissions from "@/hooks/usePermissions";
 import useLocalSettingsStore from "@/store/localSettings";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -71,9 +68,10 @@ export default function CollectionCard({ collection, className }: Props) {
           role="button"
           className="btn btn-ghost btn-sm btn-square text-neutral"
         >
-          <FontAwesomeIcon icon={faEllipsis} title="More" className="w-5 h-5" />
+          <i className="bi-three-dots text-xl" title="More"></i>
         </div>
-        <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
+        <ul
+          className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
           {permissions === true ? (
             <li>
               <div
@@ -168,21 +166,17 @@ export default function CollectionCard({ collection, className }: Props) {
             <div className="text-right">
               <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
-                  <FontAwesomeIcon
+                  <i className="bi-globe-americas drop-shadow text-neutral"
-                    icon={faGlobe}
+                     title="This collection is being shared publicly."></i>
-                    title="This collection is being shared publicly."
-                    className="w-4 h-4 drop-shadow text-neutral"
-                  />
                 ) : undefined}
-                <FontAwesomeIcon
+                <i className="bi-link-45deg text-lg text-neutral"
-                  icon={faLink}
+                   title="This collection is being shared publicly."></i>
-                  className="w-5 h-5 text-neutral"
-                />
                 {collection._count && collection._count.links}
               </div>
               <div className="flex items-center justify-end gap-1 text-neutral">
                 <p className="font-bold text-xs flex gap-1 items-center">
-                  <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />{" "}
+                  <i className="bi-calendar3 text-neutral"
+                     title="This collection is being shared publicly."></i>
                   {formattedDate}
                 </p>
               </div>

components/DashboardItem.tsx

@@ -1,21 +1,20 @@
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
+export default function dashboardItem({
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+  name,
-
+  value,
-type Props = {
+  icon,
+}: {
   name: string;
   value: number;
-  icon: IconProp;
+  icon: string;
-};
+}) {
-
-export default function dashboardItem({ name, value, icon }: Props) {
   return (
-    <div className="flex gap-4 items-end">
+    <div className="flex items-center">
-      <div className="p-4 bg-primary/20 rounded-xl select-none">
+      <div className="w-20 aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
-        <FontAwesomeIcon icon={icon} className="w-8 h-8 text-primary" />
+        <i className={`${icon} text-primary text-4xl drop-shadow`}></i>
       </div>
-      <div className="flex flex-col justify-center">
+      <div className="ml-4 flex flex-col justify-center">
-        <p className="text-neutral text-sm tracking-wider">{name}</p>
+        <p className="text-neutral text-xs tracking-wider">{name}</p>
-        <p className="font-thin text-6xl text-primary mt-2">{value}</p>
+        <p className="font-thin text-6xl text-primary mt-0.5">{value}</p>
       </div>
     </div>
   );

components/FilterSearchDropdown.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   setSearchFilter: Function;
@@ -24,11 +22,9 @@ export default function FilterSearchDropdown({
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <FontAwesomeIcon
+        <i
-          icon={faFilter}
+          className="bi-funnel text-neutral text-2xl"
-          id="sort-dropdown"
+        ></i>
-          className="w-5 h-5 text-neutral"
-        />
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mt-1">
         <li>

components/LinkPreview.tsx

@@ -1,110 +0,0 @@
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import Image from "next/image";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import A from "next/link";
-import unescapeString from "@/lib/client/unescapeString";
-import { Link } from "@prisma/client";
-
-type Props = {
-  link?: Partial<Link>;
-  className?: string;
-  settings: {
-    blurredFavicons: boolean;
-    displayLinkIcons: boolean;
-  };
-};
-
-export default function LinkPreview({ link, className, settings }: Props) {
-  if (!link) {
-    link = {
-      name: "Linkwarden",
-      url: "https://linkwarden.app",
-      createdAt: Date.now() as unknown as Date,
-    };
-  }
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url as string).host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  const url = isValidUrl(link.url as string)
-    ? new URL(link.url as string)
-    : undefined;
-
-  const formattedDate = new Date(link.createdAt as Date).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    }
-  );
-
-  return (
-    <>
-      <div
-        className={`h-fit border border-solid border-neutral-content bg-base-200 shadow hover:shadow-none duration-100 rounded-2xl relative group ${
-          className || ""
-        }`}
-      >
-        <div className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5">
-          {url && settings?.displayLinkIcons && (
-            <Image
-              src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
-              width={64}
-              height={64}
-              alt=""
-              className={`${
-                settings.blurredFavicons ? "blur-sm " : ""
-              }absolute w-16 group-hover:opacity-80 duration-100 rounded-2xl bottom-5 right-5 opacity-60 select-none`}
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          )}
-
-          <div className="flex justify-between gap-5 w-full h-full z-0">
-            <div className="flex flex-col justify-between w-full">
-              <div className="flex items-baseline gap-1">
-                <p className="text-sm text-neutral">{1}</p>
-                <p className="text-lg truncate capitalize w-full pr-8">
-                  {unescapeString(link.name as string)}
-                </p>
-              </div>
-              <div className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100">
-                <FontAwesomeIcon
-                  icon={faFolder}
-                  className="w-4 h-4 mt-1 drop-shadow text-primary"
-                />
-                <p className="truncate capitalize w-full">Landing Pages ⚡️</p>
-              </div>
-              <A
-                href={link.url as string}
-                target="_blank"
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-                className="flex items-center gap-1 max-w-full w-fit text-neutral hover:opacity-70 duration-100"
-              >
-                <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
-                <p className="truncate w-full">{shortendURL}</p>
-              </A>
-              <div className="flex items-center gap-1 text-neutral">
-                <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
-                <p>{formattedDate}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </>
-  );
-}

components/LinkSidebar.tsx

@@ -1,129 +0,0 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faPen,
-  faBoxesStacked,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
-import useModalStore from "@/store/modals";
-import useLinkStore from "@/store/links";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-
-type Props = {
-  className?: string;
-  onClick?: Function;
-};
-
-export default function LinkSidebar({ className, onClick }: Props) {
-  const session = useSession();
-  const userId = session.data?.user.id;
-
-  const { setModal } = useModalStore();
-
-  const { links, removeLink } = useLinkStore();
-  const { collections } = useCollectionStore();
-
-  const [linkCollection, setLinkCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
-  const router = useRouter();
-
-  useEffect(() => {
-    if (links) setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
-  useEffect(() => {
-    if (link)
-      setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
-  }, [link]);
-
-  return (
-    <div
-      className={`bg-base-100 h-full w-64 overflow-y-auto border-solid border border-base-100 border-r-neutral-content p-5 z-20 flex flex-col gap-5 justify-between ${
-        className || ""
-      }`}
-    >
-      <div className="flex flex-col gap-5">
-        {link?.collection.ownerId === userId ||
-        linkCollection?.members.some(
-          (e) => e.userId === userId && e.canUpdate
-        ) ? (
-          <div
-            title="Edit"
-            onClick={() => {
-              link
-                ? setModal({
-                    modal: "LINK",
-                    state: true,
-                    active: link,
-                    method: "UPDATE",
-                  })
-                : undefined;
-              onClick && onClick();
-            }}
-            className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
-          >
-            <FontAwesomeIcon icon={faPen} className="w-6 h-6 text-neutral" />
-
-            <p className="truncate w-full lg:hidden">Edit</p>
-          </div>
-        ) : undefined}
-
-        <div
-          onClick={() => {
-            link
-              ? setModal({
-                  modal: "LINK",
-                  state: true,
-                  active: link,
-                  method: "FORMATS",
-                })
-              : undefined;
-            onClick && onClick();
-          }}
-          title="Preserved Formats"
-          className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
-        >
-          <FontAwesomeIcon
-            icon={faBoxesStacked}
-            className="w-6 h-6 text-neutral"
-          />
-
-          <p className="truncate w-full lg:hidden">Preserved Formats</p>
-        </div>
-
-        {link?.collection.ownerId === userId ||
-        linkCollection?.members.some(
-          (e) => e.userId === userId && e.canDelete
-        ) ? (
-          <div
-            onClick={() => {
-              if (link?.id) {
-                removeLink(link.id);
-                router.back();
-                onClick && onClick();
-              }
-            }}
-            title="Delete"
-            className={`hover:opacity-60 duration-100 py-2 px-2 cursor-pointer flex items-center gap-4 w-full rounded-md h-8`}
-          >
-            <FontAwesomeIcon
-              icon={faTrashCan}
-              className="w-6 h-6 text-neutral"
-            />
-
-            <p className="truncate w-full lg:hidden">Delete</p>
-          </div>
-        ) : undefined}
-      </div>
-    </div>
-  );
-}

components/LinkViews/GridView.tsx

@@ -1,5 +1,5 @@
 import LinkCardGrid from "@/components/LinkViews/LinkComponents/LinkCardGrid";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {LinkIncludingShortenedCollectionAndTags} from "@/types/global";
 
 export default function CompactGridView({
   links,
@@ -10,8 +10,8 @@ export default function CompactGridView({
     <div className="columns-1 xl:columns-2 2xl:columns-3 gap-5">
       {links.map((e, i) => {
         return (
-          <div className="break-inside-avoid mb-5">
+          <div key={i} className="break-inside-avoid mb-5">
-            <LinkCardGrid key={i} link={e} count={i} />
+            <LinkCardGrid link={e} count={i}/>
           </div>
         );
       })}

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -4,8 +4,6 @@ import {
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
 import usePermissions from "@/hooks/usePermissions";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
 import EditLinkModal from "@/components/ModalContent/EditLinkModal";
 import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
 import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
@@ -13,15 +11,13 @@ import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import useAccountStore from "@/store/account";
 
-export default function LinkActions({
+type Props = {
-  link,
-  collection,
-  position,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
   collection: CollectionIncludingMembersAndLinkCount;
   position?: string;
-}) {
+}
+
+export default function LinkActions({ link, collection, position }: Props) {
   const permissions = usePermissions(link.collection.id as number);
 
   const [editLinkModal, setEditLinkModal] = useState(false);
@@ -46,7 +42,7 @@ export default function LinkActions({
     toast.dismiss(load);
 
     response.ok &&
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
+    toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
   };
 
   const deleteLink = async () => {
@@ -74,14 +70,10 @@ export default function LinkActions({
             role="button"
             className="btn btn-ghost btn-sm btn-square text-neutral"
           >
-            <FontAwesomeIcon
+            <i id={"expand-dropdown" + collection.id} title="More" className="bi-three-dots text-xl"/>
-              icon={faEllipsis}
-              title="More"
-              className="w-5 h-5"
-              id={"expand-dropdown" + collection.id}
-            />
           </div>
-          <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+          <ul
+            className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
             {permissions === true ? (
               <li>
                 <div

components/LinkViews/LinkComponents/LinkCard.tsx

@@ -2,9 +2,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
+import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -62,7 +60,7 @@ export default function LinkCard({ link, count, className }: Props) {
         className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
       >
         <div className="absolute bottom-3 right-3">
-          <LinkIcon link={link} />
+          <LinkIcon link={link}/>
         </div>
 
         <div className="flex items-baseline gap-1">
@@ -74,19 +72,19 @@ export default function LinkCard({ link, count, className }: Props) {
 
         {link.url ? (
           <div className="flex items-center gap-1 max-w-full w-fit text-neutral">
-            <FontAwesomeIcon icon={faLink} className="mt-1 w-4 h-4" />
+            <i className="bi-link-45deg"/>
             <p className="truncate w-full">{shortendURL}</p>
           </div>
         ) : (
           <div className="badge badge-primary badge-sm my-1">{link.type}</div>
         )}
 
-        <LinkCollection link={link} collection={collection} />
+        <LinkCollection link={link} collection={collection}/>
 
-        <LinkDate link={link} />
+        <LinkDate link={link}/>
       </div>
 
-      <LinkActions link={link} collection={collection} />
+      <LinkActions link={link} collection={collection}/>
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -2,9 +2,8 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/router";
+import React from "react";
 
 export default function LinkCollection({
   link,
@@ -23,11 +22,10 @@ export default function LinkCollection({
       }}
       className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
     >
-      <FontAwesomeIcon
+      <i
-        icon={faFolder}
+        className="bi-folder-fill text-lg drop-shadow"
-        className="w-4 h-4 shadow"
         style={{ color: collection?.color }}
-      />
+      ></i>
       <p className="truncate capitalize">{collection?.name}</p>
     </div>
   );

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -1,10 +1,7 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
-import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
 
-export default function LinkDate({
+export default function LinkDate({ link }: {
-  link,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
 }) {
   const formattedDate = new Date(link.createdAt as string).toLocaleString(
@@ -18,7 +15,7 @@ export default function LinkDate({
 
   return (
     <div className="flex items-center gap-1 text-neutral">
-      <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+      <i className="bi-calendar3 text-lg"></i>
       <p>{formattedDate}</p>
     </div>
   );

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -1,13 +1,9 @@
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import Image from "next/image";
 import isValidUrl from "@/lib/shared/isValidUrl";
+import React from "react";
 
-export default function LinkIcon({
+export default function LinkIcon({ link, width }: {
-  link,
-  width,
-}: {
   link: LinkIncludingShortenedCollectionAndTags;
   width?: string;
 }) {
@@ -35,9 +31,9 @@ export default function LinkIcon({
           }}
         />
       ) : link.type === "pdf" ? (
-        <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
+        <i className={`bi-file-earmark-pdf ${iconClasses}`}></i>
       ) : link.type === "image" ? (
-        <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
+        <i className={`bi-file-earmark-image ${iconClasses}`}></i>
       ) : undefined}
     </div>
   );

components/Modal.tsx

@@ -1,7 +1,5 @@
-import { MouseEventHandler, ReactNode, useEffect } from "react";
+import React, { MouseEventHandler, ReactNode } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faClose } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   toggleModal: Function;
@@ -21,9 +19,11 @@ export default function Modal({ toggleModal, className, children }: Props) {
         <div className="slide-up mt-auto sm:m-auto relative border-neutral-content rounded-t-2xl sm:rounded-2xl border-t sm:border shadow-2xl p-5 bg-base-100">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
-            className="absolute top-3 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
+            className="absolute top-4 right-3 btn btn-sm outline-none btn-circle btn-ghost z-10"
           >
-            <FontAwesomeIcon icon={faClose} className="w-4 h-4 text-neutral" />
+            <i
+              className="bi-x text-neutral text-2xl"
+            ></i>
           </div>
           {children}
         </div>

components/Modal/Collection/CollectionInfo.tsx

@@ -1,14 +1,8 @@
 import { Dispatch, SetStateAction, useState } from "react";
-import {
-  faFolder,
-  faPenToSquare,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import SubmitButton from "@/components/SubmitButton";
 import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 
@@ -73,10 +67,7 @@ export default function CollectionInfo({
               <div className="flex flex-col justify-between items-center w-32">
                 <p className="w-full mb-2">Color</p>
                 <div style={{ color: collection.color }}>
-                  <FontAwesomeIcon
+                  <i className={"bi-folder-fill"}></i>
-                    icon={faFolder}
-                    className="w-12 h-12 drop-shadow"
-                  />
                 </div>
                 <div
                   className="btn btn-ghost btn-xs"
@@ -115,7 +106,6 @@ export default function CollectionInfo({
         onClick={submit}
         loading={submitLoader}
         label={method === "CREATE" ? "Add" : "Save"}
-        icon={method === "CREATE" ? faPlus : faPenToSquare}
         className="mx-auto mt-2"
       />
     </div>

components/Modal/Collection/DeleteCollection.tsx

@@ -1,9 +1,4 @@
 import React, { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faRightFromBracket,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
@@ -111,10 +106,7 @@ export default function DeleteCollection({
         }`}
         onClick={submit}
       >
-        <FontAwesomeIcon
+        <i className={`${ permissions === true ? 'bi-trash' : 'bi-arrow-right'}`}></i>
-          icon={permissions === true ? faTrashCan : faRightFromBracket}
-          className="h-5"
-        />
         {permissions === true ? "Delete" : "Leave"} Collection
       </div>
     </div>

components/Modal/Collection/TeamManagement.tsx

@@ -1,12 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClose,
-  faCrown,
-  faPenToSquare,
-  faPlus,
-  faUserPlus,
-} from "@fortawesome/free-solid-svg-icons";
 import useCollectionStore from "@/store/collections";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import addMemberToCollection from "@/lib/client/addMemberToCollection";
@@ -173,7 +165,7 @@ export default function TeamManagement({
               }
               className="flex items-center justify-center bg-sky-700 hover:bg-sky-600 duration-100 text-white w-10 h-10 p-2 rounded-md cursor-pointer"
             >
-              <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
+              <i className="bi-person-add text-xl"></i>
             </div>
           </div>
         </>
@@ -194,9 +186,8 @@ export default function TeamManagement({
                     className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {permissions === true && (
-                      <FontAwesomeIcon
+                      <i
-                        icon={faClose}
+                        className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
-                        className="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                         title="Remove Member"
                         onClick={() => {
                           const updatedMembers = collection.members.filter(
@@ -402,10 +393,6 @@ export default function TeamManagement({
           <div>
             <div className="flex items-center gap-1">
               <p className="text-sm font-bold">{collectionOwner.name}</p>
-              <FontAwesomeIcon
-                icon={faCrown}
-                className="w-3 h-3 text-yellow-500"
-              />
             </div>
             <p className="text-neutral">@{collectionOwner.username}</p>
           </div>
@@ -422,7 +409,6 @@ export default function TeamManagement({
           onClick={submit}
           loading={submitLoader}
           label={method === "CREATE" ? "Add" : "Save"}
-          icon={method === "CREATE" ? faPlus : faPenToSquare}
           className="mx-auto mt-2"
         />
       )}

components/Modal/Collection/ViewTeam.tsx

@@ -1,6 +1,4 @@
 import { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCrown } from "@fortawesome/free-solid-svg-icons";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import getPublicUserData from "@/lib/client/getPublicUserData";
@@ -45,10 +43,6 @@ export default function ViewTeam({ collection }: Props) {
             <div className="flex items-center gap-1 w-full justify-between">
               <p className="text-sm font-bold">{collectionOwner.name}</p>
               <div className="flex text-xs gap-1 items-center">
-                <FontAwesomeIcon
-                  icon={faCrown}
-                  className="w-3 h-3 text-yellow-500"
-                />
                 Admin
               </div>
             </div>

components/Modal/Link/AddOrEditLink.tsx

@@ -2,9 +2,7 @@ import React, { useEffect, useState } from "react";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
-import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
-import { faLink, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { useSession } from "next-auth/react";
 import useCollectionStore from "@/store/collections";
 import { useRouter } from "next/router";
@@ -13,7 +11,6 @@ import { toast } from "react-hot-toast";
 import Link from "next/link";
 import TextInput from "@/components/TextInput";
 import unescapeString from "@/lib/client/unescapeString";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 type Props =
   | {
@@ -142,7 +139,7 @@ export default function AddOrEditLink({
           className="text-neutral break-all w-full flex gap-2"
           title={link.url || ""}
         >
-          <FontAwesomeIcon icon={faLink} className="w-6 h-6" />
+          <i className={"bi-link-45deg"}></i>
           <Link href={link.url || ""} target="_blank" className="w-full">
             {link.url}
           </Link>
@@ -264,7 +261,6 @@ export default function AddOrEditLink({
         <SubmitButton
           onClick={submit}
           label={method === "CREATE" ? "Add" : "Save"}
-          icon={method === "CREATE" ? faPlus : faPenToSquare}
           loading={submitLoader}
           className={`${method === "CREATE" ? "" : "mx-auto"}`}
         />

components/Modal/Link/PreservedFormats.tsx

@@ -4,12 +4,6 @@ import {
 } from "@/types/global";
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faCloudArrowDown,
-} from "@fortawesome/free-solid-svg-icons";
-import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
 import useLinkStore from "@/store/links";
 import { toast } from "react-hot-toast";
 import { useRouter } from "next/router";
@@ -97,7 +91,6 @@ export default function PreservedFormats() {
         <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
             <div className="bg-primary text-primary-content p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
             <p>Screenshot</p>
@@ -108,10 +101,6 @@ export default function PreservedFormats() {
               onClick={() => handleDownload(ArchivedFormat.png)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-neutral"
-              />
             </div>
 
             <Link
@@ -123,10 +112,6 @@ export default function PreservedFormats() {
               target="_blank"
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-neutral"
-              />
             </Link>
           </div>
         </div>
@@ -136,7 +121,6 @@ export default function PreservedFormats() {
         <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
             <div className="bg-primary text-primary-content p-2 rounded-l-md">
-              <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
             <p>PDF</p>
@@ -147,10 +131,6 @@ export default function PreservedFormats() {
               onClick={() => handleDownload(ArchivedFormat.pdf)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faCloudArrowDown}
-                className="w-5 h-5 cursor-pointer text-neutral"
-              />
             </div>
 
             <Link
@@ -158,10 +138,6 @@ export default function PreservedFormats() {
               target="_blank"
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
             >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="w-5 h-5 text-neutral"
-              />
             </Link>
           </div>
         </div>
@@ -191,10 +167,6 @@ export default function PreservedFormats() {
             screenshotAvailable(link) && pdfAvailable(link) ? "sm:mt-3" : ""
           }`}
         >
-          <FontAwesomeIcon
-            icon={faArrowUpRightFromSquare}
-            className="w-4 h-4"
-          />
           <p className="whitespace-nowrap">
             View Latest Snapshot on archive.org
           </p>

components/ModalContent/DeleteCollectionModal.tsx

@@ -2,11 +2,6 @@ import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
 import toast from "react-hot-toast";
-import {
-  faRightFromBracket,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import { useRouter } from "next/router";
 import usePermissions from "@/hooks/usePermissions";
@@ -89,19 +84,7 @@ export default function DeleteCollectionModal({
             </div>
 
             <div role="alert" className="alert alert-warning">
-              <svg
+              <i className="bi-exclamation-triangle text-xl"></i>
-                xmlns="http://www.w3.org/2000/svg"
-                className="stroke-current shrink-0 h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-                />
-              </svg>
               <span>
                 <b>Warning:</b> Deleting this collection will permanently erase
                 all its contents, and it will become inaccessible to everyone,
@@ -124,10 +107,7 @@ export default function DeleteCollectionModal({
           }`}
           onClick={submit}
         >
-          <FontAwesomeIcon
+          <i className="bi-trash text-xl"></i>
-            icon={permissions === true ? faTrashCan : faRightFromBracket}
-            className="h-5"
-          />
           {permissions === true ? "Delete" : "Leave"} Collection
         </button>
       </div>

components/ModalContent/DeleteLinkModal.tsx

@@ -1,15 +1,7 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
-import CollectionSelection from "@/components/InputSelect/CollectionSelection";
-import TagSelection from "@/components/InputSelect/TagSelection";
-import TextInput from "@/components/TextInput";
-import unescapeString from "@/lib/client/unescapeString";
 import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
-import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLink, faTrashCan } from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
 import { useRouter } from "next/router";
 
@@ -57,19 +49,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
         <p>Are you sure you want to delete this Link?</p>
 
         <div role="alert" className="alert alert-warning">
-          <svg
+          <i className="bi-exclamation-triangle text-xl"/>
-            xmlns="http://www.w3.org/2000/svg"
-            className="stroke-current shrink-0 h-6 w-6"
-            fill="none"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-            />
-          </svg>
           <span>
             <b>Warning:</b> This action is irreversible!
           </span>
@@ -84,7 +64,7 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
           className={`ml-auto btn w-fit text-white flex items-center gap-2 duration-100 bg-red-500 hover:bg-red-400 hover:dark:bg-red-600 cursor-pointer`}
           onClick={deleteLink}
         >
-          <FontAwesomeIcon icon={faTrashCan} className="h-5" />
+          <i className="bi-trash text-xl"/>
           Delete
         </button>
       </div>

components/ModalContent/EditCollectionModal.tsx

@@ -1,10 +1,8 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
 import Modal from "../Modal";
 
@@ -70,12 +68,10 @@ export default function EditCollectionModal({
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
+                    <i
-                      <FontAwesomeIcon
+                      className="bi-folder-fill text-5xl drop-shadow"
-                        icon={faFolder}
+                      style={{ color: collection.color }}
-                        className="w-12 h-12 drop-shadow"
+                    ></i>
-                      />
-                    </div>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/EditCollectionSharingModal.tsx

@@ -1,13 +1,7 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
-import {
-  faClose,
-  faCrown,
-  faUserPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
 import getPublicUserData from "@/lib/client/getPublicUserData";
 import useAccountStore from "@/store/account";
@@ -182,7 +176,7 @@ export default function EditCollectionSharingModal({
                 }
                 className="btn btn-accent text-white btn-square btn-sm h-10 w-10"
               >
-                <FontAwesomeIcon icon={faUserPlus} className="w-5 h-5" />
+                  <i className="bi-person-add text-xl"></i>
               </div>
             </div>
           </>
@@ -219,10 +213,6 @@ export default function EditCollectionSharingModal({
                         {collectionOwner.name}
                       </p>
                       <div className="flex text-xs gap-1 items-center">
-                        <FontAwesomeIcon
-                          icon={faCrown}
-                          className="w-3 h-3 text-yellow-500"
-                        />
                         Admin
                       </div>
                     </div>
@@ -240,9 +230,8 @@ export default function EditCollectionSharingModal({
                       className="relative border p-2 rounded-xl border-neutral-content bg-base-200 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                     >
                       {permissions === true && (
-                        <FontAwesomeIcon
+                        <i
-                          icon={faClose}
+                          className={"bi-x text-xl absolute right-1 top-1 text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"}
-                          className="absolute right-2 top-2 text-neutral h-4 hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
                           title="Remove Member"
                           onClick={() => {
                             const updatedMembers = collection.members.filter(

components/ModalContent/EditLinkModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
@@ -8,8 +7,6 @@ import useLinkStore from "@/store/links";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
 
 type Props = {
@@ -89,10 +86,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
           title={link.url}
           target="_blank"
         >
-          <FontAwesomeIcon
+          <i className="bi-link-45deg text-xl"/>
-            icon={faLink}
-            className="mt-1 w-5 h-5 min-w-[1.25rem]"
-          />
           <p>{shortendURL}</p>
         </Link>
       ) : undefined}
@@ -122,13 +116,13 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
                 defaultValue={
                   link.collection.id
                     ? {
-                        value: link.collection.id,
+                      value: link.collection.id,
-                        label: link.collection.name,
+                      label: link.collection.name,
-                      }
+                    }
                     : {
-                        value: null as unknown as number,
+                      value: null as unknown as number,
-                        label: "Unorganized",
+                      label: "Unorganized",
-                      }
+                    }
                 }
               />
             ) : null}

components/ModalContent/NewCollectionModal.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
 import TextInput from "@/components/TextInput";
 import useCollectionStore from "@/store/collections";
-import toast, { Toaster } from "react-hot-toast";
+import toast from "react-hot-toast";
-import { faFolder } from "@fortawesome/free-solid-svg-icons";
 import { HexColorPicker } from "react-colorful";
 import { Collection } from "@prisma/client";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Modal from "../Modal";
 
 type Props = {
@@ -29,27 +27,22 @@ export default function NewCollectionModal({ onClose }: Props) {
   const { addCollection } = useCollectionStore();
 
   const submit = async () => {
-    if (!submitLoader) {
+    if (submitLoader) return;
-      setSubmitLoader(true);
+    if (!collection) return null;
-      if (!collection) return null;
 
-      setSubmitLoader(true);
+    setSubmitLoader(true);
 
-      const load = toast.loading("Creating...");
+    const load = toast.loading("Creating...");
 
-      let response;
+    let response = await addCollection(collection as any);
+    toast.dismiss(load);
 
-      response = await addCollection(collection as any);
+    if (response.ok) {
+      toast.success("Created!");
+      onClose();
+    } else toast.error(response.data as string);
 
-      toast.dismiss(load);
+    setSubmitLoader(false);
-
-      if (response.ok) {
-        toast.success("Created!");
-        onClose();
-      } else toast.error(response.data as string);
-
-      setSubmitLoader(false);
-    }
   };
 
   return (
@@ -75,12 +68,10 @@ export default function NewCollectionModal({ onClose }: Props) {
                 <p className="w-full mb-2">Color</p>
                 <div className="color-picker flex justify-between">
                   <div className="flex flex-col gap-2 items-center w-32">
-                    <div style={{ color: collection.color }}>
+                    <i
-                      <FontAwesomeIcon
+                      className={"bi-folder-fill text-5xl"}
-                        icon={faFolder}
+                      style={{ color: collection.color }}
-                        className="w-12 h-12 drop-shadow"
+                    ></i>
-                      />
-                    </div>
                     <div
                       className="btn btn-ghost btn-xs"
                       onClick={() =>

components/ModalContent/NewLinkModal.tsx

@@ -145,51 +145,60 @@ export default function NewLinkModal({ onClose }: Props) {
         </div>
       </div>
 
-      {optionsExpanded ? (
+      <div className={"mt-2"}>
-        <div className="mt-5">
+        {optionsExpanded ? (
-          {/* <hr className="mb-3 border border-neutral-content" /> */}
+          <div className="mt-5">
-          <div className="grid sm:grid-cols-2 gap-3">
+            {/* <hr className="mb-3 border border-neutral-content" /> */}
-            <div>
+            <div className="grid sm:grid-cols-2 gap-3">
-              <p className="mb-2">Name</p>
+              <div>
-              <TextInput
+                <p className="mb-2">Name</p>
-                value={link.name}
+                <TextInput
-                onChange={(e) => setLink({ ...link, name: e.target.value })}
+                  value={link.name}
-                placeholder="e.g. Example Link"
+                  onChange={(e) => setLink({ ...link, name: e.target.value })}
-                className="bg-base-200"
+                  placeholder="e.g. Example Link"
-              />
+                  className="bg-base-200"
-            </div>
+                />
+              </div>
 
-            <div>
+              <div>
-              <p className="mb-2">Tags</p>
+                <p className="mb-2">Tags</p>
-              <TagSelection
+                <TagSelection
-                onChange={setTags}
+                  onChange={setTags}
-                defaultValue={link.tags.map((e) => {
+                  defaultValue={link.tags.map((e) => {
-                  return { label: e.name, value: e.id };
+                    return { label: e.name, value: e.id };
-                })}
+                  })}
-              />
+                />
-            </div>
+              </div>
 
-            <div className="sm:col-span-2">
+              <div className="sm:col-span-2">
-              <p className="mb-2">Description</p>
+                <p className="mb-2">Description</p>
-              <textarea
+                <textarea
-                value={unescapeString(link.description) as string}
+                  value={unescapeString(link.description) as string}
-                onChange={(e) =>
+                  onChange={(e) =>
-                  setLink({ ...link, description: e.target.value })
+                    setLink({ ...link, description: e.target.value })
-                }
+                  }
-                placeholder="Will be auto generated if nothing is provided."
+                  placeholder="Will be auto generated if nothing is provided."
-                className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
+                  className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
-              />
+                />
+              </div>
             </div>
           </div>
-        </div>
+        ) : undefined}
-      ) : undefined}
+      </div>
 
       <div className="flex justify-between items-center mt-5">
         <div
           onClick={() => setOptionsExpanded(!optionsExpanded)}
           className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
         >
-          <p>{optionsExpanded ? "Hide" : "More"} Options</p>
+          <p className="font-normal">
+            {optionsExpanded ? "Hide" : "More"} Options
+          </p>
+          <i
+            className={`${
+              optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
+            }`}
+          ></i>
         </div>
 
         <button

components/ModalContent/PreservedFormatsModal.tsx

@@ -1,32 +1,13 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
-import {
+import { ArchivedFormat, LinkIncludingShortenedCollectionAndTags, } from "@/types/global";
-  ArchivedFormat,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
 import toast from "react-hot-toast";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faArrowUpRightFromSquare,
-  faCloudArrowDown,
-  faLink,
-  faTrashCan,
-  faUpRightFromSquare,
-} from "@fortawesome/free-solid-svg-icons";
 import Modal from "../Modal";
-import {
-  faFileImage,
-  faFileLines,
-  faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
 import { useRouter } from "next/router";
 import { useSession } from "next-auth/react";
-import {
+import { pdfAvailable, readabilityAvailable, screenshotAvailable, } from "@/lib/shared/getArchiveValidity";
-  pdfAvailable,
+import PreservedFormatRow from "@/components/PreserverdFormatRow";
-  readabilityAvailable,
-  screenshotAvailable,
-} from "@/lib/shared/getArchiveValidity";
 
 type Props = {
   onClose: Function;
@@ -92,25 +73,6 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
     } else toast.error(data.response);
   };
 
-  const handleDownload = (format: ArchivedFormat) => {
-    const path = `/api/v1/archives/${link?.id}?format=${format}`;
-    fetch(path)
-      .then((response) => {
-        if (response.ok) {
-          // Create a temporary link and click it to trigger the download
-          const link = document.createElement("a");
-          link.href = path;
-          link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
-          link.click();
-        } else {
-          console.error("Failed to download file");
-        }
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
-  };
-
   return (
     <Modal toggleModal={onClose}>
       <p className="text-xl font-thin">Preserved Formats</p>
@@ -129,112 +91,18 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
 
       <div className={`flex flex-col gap-3`}>
         {readabilityAvailable(link) ? (
-          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+          <PreservedFormatRow name={'Readable'} icon={'bi-file-earmark-text'} format={ArchivedFormat.readability}
-            <div className="flex gap-2 items-center">
+                              activeLink={link}/>
-              <div className="bg-primary text-primary-content p-2 rounded-l-md">
-                <FontAwesomeIcon icon={faFileLines} className="w-6 h-6" />
-              </div>
-
-              <p>Readable</p>
-            </div>
-
-            <div className="flex gap-1">
-              {/* <div
-                onClick={() => handleDownload(ArchivedFormat.pdf)}
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faCloudArrowDown}
-                  className="w-5 h-5 cursor-pointer text-neutral"
-                />
-              </div> */}
-
-              <Link
-                href={`/preserved/${link?.id}?format=${ArchivedFormat.readability}`}
-                target="_blank"
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="w-5 h-5 text-neutral"
-                />
-              </Link>
-            </div>
-          </div>
         ) : undefined}
 
         {screenshotAvailable(link) ? (
-          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+          <PreservedFormatRow name={'Screenshot'} icon={'bi-file-earmark-image'} format={ArchivedFormat.png}
-            <div className="flex gap-2 items-center">
+                              activeLink={link} downloadable={true}/>
-              <div className="bg-primary text-primary-content p-2 rounded-l-md">
-                <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
-              </div>
-
-              <p>Screenshot</p>
-            </div>
-
-            <div className="flex gap-1">
-              <div
-                onClick={() => handleDownload(ArchivedFormat.png)}
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faCloudArrowDown}
-                  className="w-5 h-5 cursor-pointer text-neutral"
-                />
-              </div>
-
-              <Link
-                href={`/api/v1/archives/${link?.id}?format=${
-                  link.screenshotPath?.endsWith("png")
-                    ? ArchivedFormat.png
-                    : ArchivedFormat.jpeg
-                }`}
-                target="_blank"
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faUpRightFromSquare}
-                  className="w-5 h-5 text-neutral"
-                />
-              </Link>
-            </div>
-          </div>
         ) : undefined}
 
         {pdfAvailable(link) ? (
-          <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+          <PreservedFormatRow name={'PDF'} icon={'bi-file-earmark-pdf'} format={ArchivedFormat.pdf}
-            <div className="flex gap-2 items-center">
+                              activeLink={link} downloadable={true}/>
-              <div className="bg-primary text-primary-content p-2 rounded-l-md">
-                <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
-              </div>
-
-              <p>PDF</p>
-            </div>
-
-            <div className="flex gap-1">
-              <div
-                onClick={() => handleDownload(ArchivedFormat.pdf)}
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faCloudArrowDown}
-                  className="w-5 h-5 cursor-pointer text-neutral"
-                />
-              </div>
-
-              <Link
-                href={`/api/v1/archives/${link?.id}?format=${ArchivedFormat.pdf}`}
-                target="_blank"
-                className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
-              >
-                <FontAwesomeIcon
-                  icon={faArrowUpRightFromSquare}
-                  className="w-5 h-5 text-neutral"
-                />
-              </Link>
-            </div>
-          </div>
         ) : undefined}
 
         <div className="flex flex-col-reverse sm:flex-row sm:gap-3 items-center justify-center">
@@ -272,10 +140,7 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
             <p className="whitespace-nowrap">
               View latest snapshot on archive.org
             </p>
-            <FontAwesomeIcon
+            <i className="bi-box-arrow-up-right"/>
-              icon={faArrowUpRightFromSquare}
-              className="w-4 h-4"
-            />
           </Link>
         </div>
       </div>

components/ModalContent/UploadFileModal.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { Toaster } from "react-hot-toast";
 import CollectionSelection from "@/components/InputSelect/CollectionSelection";
 import TagSelection from "@/components/InputSelect/TagSelection";
 import TextInput from "@/components/TextInput";
@@ -14,9 +13,6 @@ import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import toast from "react-hot-toast";
 import Modal from "../Modal";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faQuestion } from "@fortawesome/free-solid-svg-icons";
-import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons";
 
 type Props = {
   onClose: Function;

components/Navbar.tsx

@@ -1,6 +1,4 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { signOut } from "next-auth/react";
-import { faPlus, faBars, faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { useEffect, useState } from "react";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Sidebar from "@/components/Sidebar";
@@ -52,29 +50,30 @@ export default function Navbar() {
   const [uploadFileModal, setUploadFileModal] = useState(false);
 
   return (
-    <div className="flex justify-between gap-2 items-center px-4 py-2 border-solid border-b-neutral-content border-b">
+    <div className="flex justify-between gap-2 items-center pl-3 pr-4 py-2 border-solid border-b-neutral-content border-b">
       <div
         onClick={toggleSidebar}
         className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
       >
-        <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+        <i className="bi-list text-2xl leading-none"></i>
       </div>
       <SearchBar />
       <div className="flex items-center gap-2">
-        <ToggleDarkMode className="sm:inline-grid hidden" />
+        <ToggleDarkMode className="hidden sm:inline-grid" />
 
         <div className="dropdown dropdown-end">
           <div className="tooltip tooltip-bottom" data-tip="Create New...">
             <div
               tabIndex={0}
               role="button"
-              className="flex min-w-[3.4rem] items-center group btn btn-accent dark:border-violet-400 text-white btn-sm px-2"
+              className="flex min-w-[3.4rem] items-center btn btn-accent dark:border-violet-400 text-white btn-sm max-h-[2rem] px-2 relative"
             >
-              <FontAwesomeIcon icon={faPlus} className="w-5 h-5" />
+              <span>
-              <FontAwesomeIcon
+                <i className="bi-plus text-4xl absolute -top-[0.3rem] left-0 pointer-events-none"></i>
-                icon={faCaretDown}
+              </span>
-                className="w-2 h-2 sm:w-3 sm:h-3"
+              <span>
-              />
+                <i className="bi-caret-down-fill text-xs absolute top-2 right-[0.3rem] pointer-events-none"></i>
+              </span>
             </div>
           </div>
           <ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-40 mt-1">

components/NoLinksFound.tsx

@@ -1,5 +1,3 @@
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import React, { useState } from "react";
 import NewLinkModal from "./ModalContent/NewLinkModal";
 
@@ -35,10 +33,7 @@ export default function NoLinksFound({ text }: Props) {
           }}
           className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
         >
-          <FontAwesomeIcon
+          <i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
-            icon={faPlus}
-            className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
-          />
           <span className="group-hover:opacity-0 text-right w-full duration-100">
             Create New Link
           </span>

components/PageHeader.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+export default function PageHeader({
+  title,
+  description,
+  icon,
+}: {
+  title: string;
+  description?: string;
+  icon: string;
+}) {
+  return (
+    <div className="flex items-center gap-3">
+      <i
+        className={`${icon} text-primary text-3xl sm:text-4xl drop-shadow`}
+      ></i>
+      <div>
+        <p className="text-3xl capitalize font-thin">{title}</p>
+        <p className="text-xs sm:text-sm">{description}</p>
+      </div>
+    </div>
+  );
+}

components/PreserverdFormatRow.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import toast from "react-hot-toast";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+
+type Props = {
+  name: string,
+  icon: string,
+  format: ArchivedFormat,
+  activeLink: LinkIncludingShortenedCollectionAndTags,
+  downloadable?: boolean,
+};
+
+export default function PreservedFormatRow({ name, icon, format, activeLink, downloadable }: Props) {
+  const session = useSession();
+  const { getLink } = useLinkStore();
+
+  const [link, setLink] =
+    useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
+
+  const router = useRouter();
+
+  useEffect(() => {
+    let isPublicRoute = router.pathname.startsWith("/public")
+      ? true
+      : undefined;
+
+    (async () => {
+      const data = await getLink(link.id as number, isPublicRoute);
+      setLink(
+        (data as any).response as LinkIncludingShortenedCollectionAndTags
+      );
+    })();
+
+    let interval: any;
+    if (link?.screenshotPath === "pending" || link?.pdfPath === "pending") {
+      interval = setInterval(async () => {
+        const data = await getLink(link.id as number, isPublicRoute);
+        setLink(
+          (data as any).response as LinkIncludingShortenedCollectionAndTags
+        );
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.screenshotPath, link?.pdfPath, link?.readabilityPath]);
+
+  const updateArchive = async () => {
+    const load = toast.loading("Sending request...");
+
+    const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
+      method: "PUT",
+    });
+
+    const data = await response.json();
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success(`Link is being archived...`);
+      getLink(link?.id as number);
+    } else toast.error(data.response);
+  };
+
+  const handleDownload = () => {
+    const path = `/api/v1/archives/${link?.id}?format=${format}`;
+    fetch(path)
+      .then((response) => {
+        if (response.ok) {
+          // Create a temporary link and click it to trigger the download
+          const link = document.createElement("a");
+          link.href = path;
+          link.download = format === ArchivedFormat.png ? "Screenshot" : "PDF";
+          link.click();
+        } else {
+          console.error("Failed to download file");
+        }
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  };
+
+  return (
+    <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
+      <div className="flex gap-2 items-center">
+        <div className="bg-primary text-primary-content p-2 rounded-l-md">
+          <i className={`${icon} text-2xl`}/>
+        </div>
+        <p>{name}</p>
+      </div>
+
+      <div className="flex gap-1">
+        {downloadable || false ? (
+          <div
+            onClick={() => handleDownload()}
+            className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+          >
+            <i className="bi-cloud-arrow-down text-xl text-neutral"/>
+          </div>
+        ) : undefined}
+
+        <Link
+          href={
+            `${
+              format === ArchivedFormat.readability
+                ? `/preserved/${link?.id}?format=${format}`
+                : `/api/v1/archives/${link?.id}?format=${
+                  link.screenshotPath?.endsWith("png")
+                    ? ArchivedFormat.png
+                    : ArchivedFormat.jpeg
+                }`
+            }`
+          }
+          target="_blank"
+          className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
+        >
+          <i className="bi-box-arrow-up-right text-xl text-neutral"/>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/ProfilePhoto.tsx

@@ -1,6 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faUser } from "@fortawesome/free-solid-svg-icons";
 import Image from "next/image";
 
 type Props = {
@@ -8,7 +6,7 @@ type Props = {
   className?: string;
   priority?: boolean;
   name?: string;
-  dimensionClass?: string;
+  large?: boolean;
 };
 
 export default function ProfilePhoto({
@@ -16,7 +14,7 @@ export default function ProfilePhoto({
   className,
   priority,
   name,
-  dimensionClass,
+  large,
 }: Props) {
   const [image, setImage] = useState("");
 
@@ -32,17 +30,14 @@ export default function ProfilePhoto({
   return !image ? (
     <div
       className={`avatar drop-shadow-md placeholder ${className || ""} ${
-        dimensionClass || "w-8 h-8 "
+        large ? "w-28 h-28" : "w-8 h-8"
       }`}
     >
       <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
         {name ? (
           <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
         ) : (
-          <FontAwesomeIcon
+          <i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
-            icon={faUser}
-            className="w-1/2 h-1/2 aspect-square"
-          />
         )}
       </div>
     </div>
@@ -50,7 +45,7 @@ export default function ProfilePhoto({
     <div
       className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      } ${dimensionClass || "w-8 h-8 "}`}
+      } ${large || "w-8 h-8"}`}
     >
       <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image

components/PublicPage/PublicLinkCard.tsx

@@ -1,5 +1,3 @@
-import { faChevronRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import { Link as LinkType, Tag } from "@prisma/client";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -83,10 +81,7 @@ export default function LinkCard({ link, count }: Props) {
               className="flex gap-1 items-center flex-wrap text-sm text-neutral hover:opacity-50 duration-100 min-w-fit float-right mt-1 ml-2"
             >
               <p>Read</p>
-              <FontAwesomeIcon
+              <i className={"bi-chevron-right"}></i>
-                icon={faChevronRight}
-                className="w-3 h-3 mt-[0.15rem]"
-              />
             </Link>
           </div>
         </div>

components/RadioButton.tsx

@@ -1,5 +1,3 @@
-import { faCircle, faCircleCheck } from "@fortawesome/free-regular-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ChangeEventHandler } from "react";
 
 type Props = {
@@ -18,14 +16,14 @@ export default function RadioButton({ label, state, onClick }: Props) {
         checked={state}
         onChange={onClick}
       />
-      <FontAwesomeIcon
+      {/*<FontAwesomeIcon*/}
-        icon={faCircleCheck}
+      {/*  icon={faCircleCheck}*/}
-        className="w-5 h-5 text-primary peer-checked:block hidden"
+      {/*  className="w-5 h-5 text-primary peer-checked:block hidden"*/}
-      />
+      {/*/>*/}
-      <FontAwesomeIcon
+      {/*<FontAwesomeIcon*/}
-        icon={faCircle}
+      {/*  icon={faCircle}*/}
-        className="w-5 h-5 text-primary peer-checked:hidden block"
+      {/*  className="w-5 h-5 text-primary peer-checked:hidden block"*/}
-      />
+      {/*/>*/}
       <span className="rounded select-none">{label}</span>
     </label>
   );

components/ReadableView.tsx

@@ -6,8 +6,6 @@ import {
   ArchivedFormat,
   LinkIncludingShortenedCollectionAndTags,
 } from "@/types/global";
-import { faFolder, faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ColorThief, { RGBColor } from "colorthief";
 import DOMPurify from "dompurify";
 import Image from "next/image";
@@ -174,7 +172,7 @@ export default function ReadableView({ link }: Props) {
                   target="_blank"
                   className="hover:opacity-60 duration-100 break-all text-sm flex items-center gap-1 text-neutral w-fit"
                 >
-                  <FontAwesomeIcon icon={faLink} className="w-4 h-4" />
+                  <i className="bi-link-45deg"></i>
 
                   {isValidUrl(link?.url || "")
                     ? new URL(link?.url as string).host
@@ -189,11 +187,10 @@ export default function ReadableView({ link }: Props) {
               href={`/collections/${link?.collection.id}`}
               className="flex items-center gap-1 cursor-pointer hover:opacity-60 duration-100 mr-2 z-10"
             >
-              <FontAwesomeIcon
+              <i
-                icon={faFolder}
+                className="bi-folder-fill drop-shadow text-2xl"
-                className="w-5 h-5 drop-shadow"
                 style={{ color: link?.collection.color }}
-              />
+              ></i>
               <p
                 title={link?.collection.name}
                 className="text-lg truncate max-w-[12rem]"

components/SearchBar.tsx

@@ -1,5 +1,3 @@
-import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
@@ -23,9 +21,9 @@ export default function SearchBar({ placeholder }: Props) {
     <div className="flex items-center relative group">
       <label
         htmlFor="search-box"
-        className="inline-flex w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+        className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
       >
-        <FontAwesomeIcon icon={faMagnifyingGlass} className="w-5 h-5" />
+        <i className="bi-search"></i>
       </label>
 
       <input
@@ -49,11 +47,11 @@ export default function SearchBar({ placeholder }: Props) {
                 "/public/collections/" +
                   router.query.id +
                   "?q=" +
-                  encodeURIComponent(searchQuery || "")
+                  encodeURIComponent(searchQuery || ""),
               );
             } else {
               return router.push(
-                "/search?q=" + encodeURIComponent(searchQuery)
+                "/search?q=" + encodeURIComponent(searchQuery),
               );
             }
           }

components/SettingsSidebar.tsx

@@ -1,24 +1,7 @@
 import useCollectionStore from "@/store/collections";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faUser,
-  faPalette,
-  faBoxArchive,
-  faKey,
-  faLock,
-} from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
-import {
-  faCircleQuestion,
-  faCreditCard,
-} from "@fortawesome/free-regular-svg-icons";
-import {
-  faGithub,
-  faMastodon,
-  faXTwitter,
-} from "@fortawesome/free-brands-svg-icons";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
   const LINKWARDEN_VERSION = "v2.4.0";
@@ -48,7 +31,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon icon={faUser} className="w-7 h-7 text-primary" />
+            <i
+              className="bi-person text-primary text-2xl"
+            ></i>
 
             <p className="truncate w-full pr-7">Account</p>
           </div>
@@ -62,10 +47,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faPalette}
+              className="bi-palette text-primary text-2xl"
-              className="w-7 h-7 text-primary"
+            ></i>
-            />
 
             <p className="truncate w-full pr-7">Appearance</p>
           </div>
@@ -79,11 +63,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faBoxArchive}
+              className="bi-archive text-primary text-2xl"
-              className="w-7 h-7 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
@@ -96,8 +78,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon icon={faKey} className="w-7 h-7 text-primary" />
+            <i
-
+              className="bi-key text-primary text-2xl"
+            ></i>
             <p className="truncate w-full pr-7">API Keys</p>
           </div>
         </Link>
@@ -110,8 +93,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 : "hover:bg-neutral/20"
             } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon icon={faLock} className="w-7 h-7 text-primary" />
+            <i
-
+              className="bi-lock text-primary text-2xl"
+            ></i>
             <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
@@ -125,11 +109,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                   : "hover:bg-neutral/20"
               } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
             >
-              <FontAwesomeIcon
+              <i
-                icon={faCreditCard}
+                className="bi-credit-card text-primary text-xl"
-                className="w-7 h-7 text-primary"
+              ></i>
-              />
-
               <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
@@ -148,10 +130,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faCircleQuestion as any}
+              className="bi-question-circle text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
 
             <p className="truncate w-full pr-7">Help</p>
           </div>
@@ -161,11 +142,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faGithub as any}
+              className="bi-github text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
@@ -174,11 +153,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faXTwitter as any}
+              className="bi-twitter-x text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
@@ -187,11 +164,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
           <div
             className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
           >
-            <FontAwesomeIcon
+            <i
-              icon={faMastodon as any}
+              className="bi-mastodon text-primary text-xl"
-              className="w-6 h-6 text-primary"
+            ></i>
-            />
-
             <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>

components/Sidebar.tsx

@@ -1,19 +1,10 @@
 import useCollectionStore from "@/store/collections";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faFolder,
-  faHashtag,
-  faChartSimple,
-  faChevronDown,
-  faLink,
-  faGlobe,
-  faThumbTack,
-} from "@fortawesome/free-solid-svg-icons";
 import useTagStore from "@/store/tags";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
+import SidebarHighlightLink from "@/components/SidebarHighlightLink";
 
 export default function Sidebar({ className }: { className?: string }) {
   const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
@@ -52,70 +43,36 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content px-2 z-20 ${
+      id="sidebar"
+      className={`bg-base-200 h-full w-64 xl:w-80 overflow-y-auto border-solid border border-base-200 border-r-neutral-content p-2 z-20 ${
         className || ""
       }`}
     >
-      <div className="flex flex-col gap-2 mt-2">
+      <div className="grid grid-cols-2 gap-2">
-        <Link href={`/dashboard`}>
+        <SidebarHighlightLink
-          <div
+          title={"Dashboard"}
-            className={`${
+          href={`/dashboard`}
-              active === `/dashboard` ? "bg-primary/20" : "hover:bg-neutral/20"
+          icon={"bi-house"}
-            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+          active={active === `/dashboard`}
-          >
+        />
-            <FontAwesomeIcon
+        <SidebarHighlightLink
-              icon={faChartSimple}
+          title={"Pinned"}
-              className="w-7 h-7 drop-shadow text-primary"
+          href={`/links/pinned`}
-            />
+          icon={"bi-pin-angle"}
-            <p className="truncate w-full">Dashboard</p>
+          active={active === `/links/pinned`}
-          </div>
+        />
-        </Link>
+        <SidebarHighlightLink
-
+          title={"All Links"}
-        <Link href={`/links`}>
+          href={`/links`}
-          <div
+          icon={"bi-link-45deg"}
-            className={`${
+          active={active === `/links`}
-              active === `/links` ? "bg-primary/20" : "hover:bg-neutral/20"
+        />
-            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
+        <SidebarHighlightLink
-          >
+          title={"All Collections"}
-            <FontAwesomeIcon
+          href={`/collections`}
-              icon={faLink}
+          icon={"bi-folder2"}
-              className="w-7 h-7 drop-shadow text-primary"
+          active={active === `/collections`}
-            />
+        />
-            <p className="truncate w-full">All Links</p>
-          </div>
-        </Link>
-
-        <Link href={`/collections`}>
-          <div
-            className={`${
-              active === `/collections`
-                ? "bg-primary/20"
-                : "hover:bg-neutral/20"
-            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-          >
-            <FontAwesomeIcon
-              icon={faFolder}
-              className="w-7 h-7 drop-shadow text-primary"
-            />
-            <p className="truncate w-full">All Collections</p>
-          </div>
-        </Link>
-
-        <Link href={`/links/pinned`}>
-          <div
-            className={`${
-              active === `/links/pinned`
-                ? "bg-primary/20"
-                : "hover:bg-neutral/20"
-            } duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
-          >
-            <FontAwesomeIcon
-              icon={faThumbTack}
-              className="w-7 h-7 drop-shadow text-primary"
-            />
-            <p className="truncate w-full">Pinned Links</p>
-          </div>
-        </Link>
       </div>
 
       <Disclosure defaultOpen={collectionDisclosure}>
@@ -123,16 +80,14 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setCollectionDisclosure(!collectionDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
+          className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p>Collections</p>
+          <p className="text-sm">Collections</p>
-
+          <i
-          <FontAwesomeIcon
+            className={`bi-chevron-down ${
-            icon={faChevronDown}
-            className={`w-3 h-3 ${
               collectionDisclosure ? "rotate-reverse" : "rotate"
             }`}
-          />
+          ></i>
         </Disclosure.Button>
         <Transition
           enter="transition duration-100 ease-out"
@@ -156,19 +111,17 @@ export default function Sidebar({ className }: { className?: string }) {
                             : "hover:bg-neutral/20"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8 capitalize`}
                       >
-                        <FontAwesomeIcon
+                        <i
-                          icon={faFolder}
+                          className="bi-folder-fill text-2xl drop-shadow"
-                          className="w-6 h-6 drop-shadow"
                           style={{ color: e.color }}
-                        />
+                        ></i>
                         <p className="truncate w-full">{e.name}</p>
 
                         {e.isPublic ? (
-                          <FontAwesomeIcon
+                          <i
-                            icon={faGlobe}
+                            className="bi-globe2 text-sm text-black/50 dark:text-white/50 drop-shadow"
                             title="This collection is being shared publicly."
-                            className="w-4 h-4 drop-shadow text-neutral"
+                          ></i>
-                          />
                         ) : undefined}
                         <div className="drop-shadow text-neutral text-xs">
                           {e._count?.links}
@@ -194,13 +147,14 @@ export default function Sidebar({ className }: { className?: string }) {
           onClick={() => {
             setTagDisclosure(!tagDisclosure);
           }}
-          className="flex items-center justify-between text-sm w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
+          className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
         >
-          <p>Tags</p>
+          <p className="text-sm">Tags</p>
-          <FontAwesomeIcon
+          <i
-            icon={faChevronDown}
+            className={`bi-chevron-down  ${
-            className={`w-3 h-3 ${tagDisclosure ? "rotate-reverse" : "rotate"}`}
+              tagDisclosure ? "rotate-reverse" : "rotate"
-          />
+            }`}
+          ></i>
         </Disclosure.Button>
         <Transition
           enter="transition duration-100 ease-out"
@@ -224,11 +178,7 @@ export default function Sidebar({ className }: { className?: string }) {
                             : "hover:bg-neutral/20"
                         } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
                       >
-                        <FontAwesomeIcon
+                        <i className="bi-hash text-2xl text-primary drop-shadow"></i>
-                          icon={faHashtag}
-                          className="w-4 h-4 text-primary mt-1"
-                        />
-
                         <p className="truncate w-full pr-7">{e.name}</p>
                         <div className="drop-shadow text-neutral text-xs">
                           {e._count?.links}

components/SidebarHighlightLink.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+export default function SidebarHighlightLink({
+  title,
+  href,
+  icon,
+  active,
+}: {
+  title: string;
+  href: string;
+  icon: string;
+  active?: boolean;
+}) {
+  return (
+    <Link href={href}>
+      <div
+        className={`${
+          active || false
+            ? "bg-primary/20"
+            : "bg-neutral-content/20 hover:bg-neutral/20"
+        } duration-200 px-3 py-2 cursor-pointer gap-2 w-full rounded-lg capitalize`}
+      >
+        <div
+          className={
+            "w-10 h-10 inline-flex items-center justify-center bg-black/10 dark:bg-white/5 rounded-full"
+          }
+        >
+          <i className={`${icon} text-primary text-2xl drop-shadow`}></i>
+        </div>
+        <div className={"mt-1"}>
+          <p className="truncate w-full text-xs font-semibold xl:text-sm">
+            {title}
+          </p>
+        </div>
+      </div>
+    </Link>
+  );
+}

components/SortDropdown.tsx

@@ -1,7 +1,5 @@
 import React, { Dispatch, SetStateAction } from "react";
 import { Sort } from "@/types/global";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSort } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   sortBy: Sort;
@@ -16,14 +14,7 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <svg
+        <i className="bi-chevron-expand text-neutral text-2xl"></i>
-          className="w-5 h-5 text-neutral"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-        >
-          <path d="M3 6H12H21M6 12H18M9 18H15" stroke="currentColor"></path>
-        </svg>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>

components/SubmitButton.tsx

@@ -1,9 +1,5 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp } from "@fortawesome/fontawesome-svg-core";
-
 type Props = {
   onClick?: Function;
-  icon?: IconProp;
   label: string;
   loading: boolean;
   className?: string;
@@ -12,7 +8,6 @@ type Props = {
 
 export default function SubmitButton({
   onClick,
-  icon,
   label,
   loading,
   className,
@@ -28,7 +23,6 @@ export default function SubmitButton({
         if (!loading && onClick) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
       <p>{label}</p>
     </button>
   );

components/ToggleDarkMode.tsx

@@ -11,11 +11,7 @@ export default function ToggleDarkMode({ className }: Props) {
   const [theme, setTheme] = useState(localStorage.getItem("theme"));
 
   const handleToggle = (e: any) => {
-    if (e.target.checked) {
+    setTheme(e.target.checked ? "dark" : "light");
-      setTheme("dark");
-    } else {
-      setTheme("light");
-    }
   };
 
   useEffect(() => {
@@ -36,27 +32,8 @@ export default function ToggleDarkMode({ className }: Props) {
           className="theme-controller"
           checked={localStorage.getItem("theme") === "light" ? false : true}
         />
-
+        <i className="bi-sun-fill text-xl swap-on"></i>
-        {/* sun icon */}
+        <i className="bi-moon-fill text-xl swap-off"></i>
-
-        <svg
-          className="swap-on fill-current w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" />
-        </svg>
-
-        {/* moon icon */}
-        <svg
-          className="swap-off fill-current w-5 h-5"
-          xmlns="http://www.w3.org/2000/svg"
-          fill="currentColor"
-          viewBox="0 0 16 16"
-        >
-          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278" />
-        </svg>
       </label>
     </div>
   );

layouts/LinkLayout.tsx

@@ -1,216 +0,0 @@
-import LinkSidebar from "@/components/LinkSidebar";
-import { ReactNode, useEffect, useState } from "react";
-import ModalManagement from "@/components/ModalManagement";
-import useModalStore from "@/store/modals";
-import { useRouter } from "next/router";
-import ClickAwayHandler from "@/components/ClickAwayHandler";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-import {
-  faPen,
-  faBoxesStacked,
-  faTrashCan,
-} from "@fortawesome/free-solid-svg-icons";
-import useLinkStore from "@/store/links";
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import { useSession } from "next-auth/react";
-import useCollectionStore from "@/store/collections";
-import EditLinkModal from "@/components/ModalContent/EditLinkModal";
-import Link from "next/link";
-import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
-import toast from "react-hot-toast";
-import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
-
-interface Props {
-  children: ReactNode;
-}
-
-export default function LinkLayout({ children }: Props) {
-  const { modal } = useModalStore();
-
-  const router = useRouter();
-
-  useEffect(() => {
-    modal
-      ? (document.body.style.overflow = "hidden")
-      : (document.body.style.overflow = "auto");
-  }, [modal]);
-
-  const [sidebar, setSidebar] = useState(false);
-
-  const { width } = useWindowDimensions();
-
-  useEffect(() => {
-    setSidebar(false);
-  }, [width]);
-
-  useEffect(() => {
-    setSidebar(false);
-  }, [router]);
-
-  const toggleSidebar = () => {
-    setSidebar(!sidebar);
-  };
-
-  const session = useSession();
-  const userId = session.data?.user.id;
-
-  const { setModal } = useModalStore();
-
-  const { links, removeLink } = useLinkStore();
-  const { collections } = useCollectionStore();
-
-  const [linkCollection, setLinkCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>();
-
-  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
-
-  useEffect(() => {
-    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
-  }, [links]);
-
-  useEffect(() => {
-    if (link)
-      setLinkCollection(collections.find((e) => e.id === link?.collection?.id));
-  }, [link, collections]);
-
-  const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
-
-    const response = await removeLink(link?.id as number);
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(`Link Deleted.`);
-
-    router.push("/dashboard");
-  };
-
-  const [editLinkModal, setEditLinkModal] = useState(false);
-  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
-  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
-
-  return (
-    <>
-      <div className="flex mx-auto">
-        {/* <div className="hidden lg:block fixed left-5 h-screen">
-          <LinkSidebar />
-        </div> */}
-
-        <div className="w-full flex flex-col min-h-screen max-w-screen-md mx-auto p-5">
-          <div className="flex gap-3 mb-3 duration-100 items-center justify-between">
-            {/* <div
-              onClick={toggleSidebar}
-              className="inline-flex lg:hidden gap-1 items-center select-none cursor-pointer p-2 text-neutral rounded-md duration-100 hover:bg-neutral-content"
-            >
-              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
-            </div> */}
-
-            <Link
-              href={
-                router.pathname.startsWith("/public")
-                  ? `/public/collections/${
-                      linkCollection?.id || link?.collection?.id
-                    }`
-                  : `/dashboard`
-              }
-              className="inline-flex gap-1 btn btn-ghost btn-sm text-neutral px-2"
-            >
-              <FontAwesomeIcon icon={faChevronLeft} className="w-4 h-4" />
-              <span className="capitalize">
-                {router.pathname.startsWith("/public")
-                  ? linkCollection?.name || link?.collection?.name
-                  : "Dashboard"}
-              </span>
-            </Link>
-
-            <div className="flex gap-3">
-              {link?.collection?.ownerId === userId ||
-              linkCollection?.members.some(
-                (e) => e.userId === userId && e.canUpdate
-              ) ? (
-                <div
-                  title="Edit"
-                  onClick={() => setEditLinkModal(true)}
-                  className={`btn btn-ghost btn-square btn-sm`}
-                >
-                  <FontAwesomeIcon
-                    icon={faPen}
-                    className="w-4 h-4 text-neutral"
-                  />
-                </div>
-              ) : undefined}
-
-              <div
-                onClick={() => setPreservedFormatsModal(true)}
-                title="Preserved Formats"
-                className={`btn btn-ghost btn-square btn-sm`}
-              >
-                <FontAwesomeIcon
-                  icon={faBoxesStacked}
-                  className="w-4 h-4 text-neutral"
-                />
-              </div>
-
-              {link?.collection?.ownerId === userId ||
-              linkCollection?.members.some(
-                (e) => e.userId === userId && e.canDelete
-              ) ? (
-                <div
-                  onClick={(e) => {
-                    (document?.activeElement as HTMLElement)?.blur();
-                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
-                  }}
-                  title="Delete"
-                  className={`btn btn-ghost btn-square btn-sm`}
-                >
-                  <FontAwesomeIcon
-                    icon={faTrashCan}
-                    className="w-4 h-4 text-neutral"
-                  />
-                </div>
-              ) : undefined}
-            </div>
-          </div>
-
-          {children}
-
-          {sidebar ? (
-            <div className="fixed top-0 bottom-0 right-0 left-0 bg-black bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
-              <ClickAwayHandler
-                className="h-full"
-                onClickOutside={toggleSidebar}
-              >
-                <div className="slide-right h-full shadow-lg">
-                  <LinkSidebar onClick={() => setSidebar(false)} />
-                </div>
-              </ClickAwayHandler>
-            </div>
-          ) : null}
-        </div>
-        {link && editLinkModal ? (
-          <EditLinkModal
-            onClose={() => setEditLinkModal(false)}
-            activeLink={link}
-          />
-        ) : undefined}
-        {link && deleteLinkModal ? (
-          <DeleteLinkModal
-            onClose={() => setDeleteLinkModal(false)}
-            activeLink={link}
-          />
-        ) : undefined}
-        {link && preservedFormatsModal ? (
-          <PreservedFormatsModal
-            onClose={() => setPreservedFormatsModal(false)}
-            activeLink={link}
-          />
-        ) : undefined}
-      </div>
-    </>
-  );
-}

layouts/SettingsLayout.tsx

@@ -1,11 +1,9 @@
 import SettingsSidebar from "@/components/SettingsSidebar";
-import { ReactNode, useEffect, useState } from "react";
+import React, { ReactNode, useEffect, useState } from "react";
 import ModalManagement from "@/components/ModalManagement";
 import useModalStore from "@/store/modals";
 import { useRouter } from "next/router";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
 
@@ -55,14 +53,14 @@ export default function SettingsLayout({ children }: Props) {
               onClick={toggleSidebar}
               className="text-neutral btn btn-square btn-sm btn-ghost lg:hidden"
             >
-              <FontAwesomeIcon icon={faBars} className="w-5 h-5" />
+              <i className="bi-list text-2xl leading-none"></i>
             </div>
 
             <Link
               href="/dashboard"
               className="text-neutral btn btn-square btn-sm btn-ghost"
             >
-              <FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
+              <i className="bi-chevron-left text-xl"></i>
             </Link>
           </div>
 

package.json

@@ -16,11 +16,6 @@
   "dependencies": {
     "@auth/prisma-adapter": "^1.0.1",
     "@aws-sdk/client-s3": "^3.379.1",
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.2",
-    "@fortawesome/free-regular-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
     "@mozilla/readability": "^0.4.4",
     "@prisma/client": "^4.16.2",
@@ -33,6 +28,7 @@
     "@types/react-dom": "18.2.7",
     "axios": "^1.5.1",
     "bcrypt": "^5.1.0",
+    "bootstrap-icons": "^1.11.2",
     "colorthief": "^2.4.0",
     "crypto-js": "^4.2.0",
     "csstype": "^3.1.2",

pages/_app.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import "@/styles/globals.css";
+import 'bootstrap-icons/font/bootstrap-icons.css';
 import { SessionProvider } from "next-auth/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";

pages/api/v1/links/[id]/archive/index.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import urlHandler from "@/lib/api/archiveHandler";
+import archiveHandler from "@/lib/api/archiveHandler";
 import { prisma } from "@/lib/api/db";
 import verifyUser from "@/lib/api/verifyUser";
 import isValidUrl from "@/lib/shared/isValidUrl";
@@ -14,7 +14,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
     where: {
       id: Number(req.query.id),
     },
-    include: { collection: true },
+    include: { collection: { include: { owner: true } } },
   });
 
   if (!link)
@@ -43,7 +43,7 @@ export default async function links(req: NextApiRequest, res: NextApiResponse) {
       });
 
     if (link.url && isValidUrl(link.url)) {
-      urlHandler(link.id, link.url, user.id);
+      archiveHandler(link);
       return res.status(200).json({
         response: "Link is not a webpage to be archived.",
       });

pages/collections/[id].tsx

@@ -6,10 +6,8 @@ import {
   Sort,
   ViewMode,
 } from "@/types/global";
-import { faEllipsis, faFolder } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SortDropdown from "@/components/SortDropdown";
@@ -109,12 +107,12 @@ export default function Index() {
       >
         {activeCollection && (
           <div className="flex gap-3 items-start justify-between">
-            <div className="flex gap-2">
+            <div className="flex items-center gap-2">
-              <FontAwesomeIcon
+              <i
-                icon={faFolder}
+                className="bi-folder-fill text-3xl drop-shadow"
                 style={{ color: activeCollection?.color }}
-                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 drop-shadow"
+              ></i>
-              />
+
               <p className="sm:text-4xl text-3xl capitalize w-full py-1 break-words hyphens-auto font-thin">
                 {activeCollection?.name}
               </p>
@@ -126,11 +124,7 @@ export default function Index() {
                 role="button"
                 className="btn btn-ghost btn-sm btn-square text-neutral"
               >
-                <FontAwesomeIcon
+                <i className="bi-three-dots text-xl" title="More"></i>
-                  icon={faEllipsis}
-                  title="More"
-                  className="w-5 h-5"
-                />
               </div>
               <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
                 {permissions === true ? (

pages/collections/index.tsx

@@ -1,10 +1,4 @@
 import useCollectionStore from "@/store/collections";
-import {
-  faEllipsis,
-  faFolder,
-  faPlus,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import CollectionCard from "@/components/CollectionCard";
 import { useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
@@ -13,6 +7,7 @@ import SortDropdown from "@/components/SortDropdown";
 import { Sort } from "@/types/global";
 import useSort from "@/hooks/useSort";
 import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
+import PageHeader from "@/components/PageHeader";
 
 export default function Collections() {
   const { collections } = useCollectionStore();
@@ -28,27 +23,19 @@ export default function Collections() {
 
   return (
     <MainLayout>
-      <div className="p-5">
+      <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div className="flex gap-3 justify-between mb-5">
+        <div className="flex justify-between">
-          <div className="flex gap-3">
+          <PageHeader
-            <div className="flex items-center gap-3">
+            icon={"bi-folder"}
-              <FontAwesomeIcon
+            title={"Collections"}
-                icon={faFolder}
+            description={"Collections you own"}
-                className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
+          />
-              />
-              <div>
-                <p className="text-3xl capitalize font-thin">
-                  Your Collections
-                </p>
 
-                <p className="sm:text-sm text-xs">Collections you own</p>
+          <div className="flex gap-3 justify-end">
-              </div>
+            <div className="relative mt-2">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             </div>
           </div>
-
-          <div className="relative mt-2">
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-          </div>
         </div>
 
         <div className="grid xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -63,20 +50,15 @@ export default function Collections() {
             onClick={() => setNewCollectionModal(true)}
           >
             <p className="group-hover:opacity-0 duration-100">New Collection</p>
-            <FontAwesomeIcon
+            <i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
-              icon={faPlus}
-              className="w-8 h-8 text-primary group-hover:w-12 group-hover:h-12 group-hover:-mt-10 duration-100"
-            />
           </div>
         </div>
 
         {sortedCollections.filter((e) => e.ownerId !== data?.user.id)[0] ? (
           <>
             <div className="flex items-center gap-3 my-5">
-              <FontAwesomeIcon
+              <i className="bi-folder text-3xl sm:text-2xl text-primary drop-shadow"></i>
-                icon={faFolder}
+
-                className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
-              />
               <div>
                 <p className="text-3xl capitalize font-thin">
                   Other Collections

pages/dashboard.tsx

@@ -1,30 +1,19 @@
-import useCollectionStore from "@/store/collections";
-import {
-  faChartSimple,
-  faChevronRight,
-  faClockRotateLeft,
-  faFileImport,
-  faFolder,
-  faHashtag,
-  faLink,
-  faThumbTack,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
 import useTagStore from "@/store/tags";
+import MainLayout from "@/layouts/MainLayout";
 import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import { useEffect, useState } from "react";
 import useLinks from "@/hooks/useLinks";
 import Link from "next/link";
 import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 import useModalStore from "@/store/modals";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import DashboardItem from "@/components/DashboardItem";
 import NewLinkModal from "@/components/ModalContent/NewLinkModal";
+import PageHeader from "@/components/PageHeader";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -105,24 +94,17 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <div className="flex items-center gap-3">
+        <PageHeader
-          <FontAwesomeIcon
+          icon={"bi-house "}
-            icon={faChartSimple}
+          title={"Dashboard"}
-            className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
+          description={"A brief overview of your data"}
-          />
+        />
-          <div>
-            <p className="text-3xl capitalize font-thin">Dashboard</p>
-
-            <p className="sm:text-sm text-xs">A brief overview of your data</p>
-          </div>
-        </div>
-
         <div>
           <div className="flex justify-evenly flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
             <DashboardItem
               name={numberOfLinks === 1 ? "Link" : "Links"}
               value={numberOfLinks}
-              icon={faLink}
+              icon={"bi-link-45deg"}
             />
 
             <div className="divider md:divider-horizontal"></div>
@@ -130,7 +112,7 @@ export default function Dashboard() {
             <DashboardItem
               name={collections.length === 1 ? "Collection" : "Collections"}
               value={collections.length}
-              icon={faFolder}
+              icon={"bi-folder"}
             />
 
             <div className="divider md:divider-horizontal"></div>
@@ -138,25 +120,22 @@ export default function Dashboard() {
             <DashboardItem
               name={tags.length === 1 ? "Tag" : "Tags"}
               value={tags.length}
-              icon={faHashtag}
+              icon={"bi-hash"}
             />
           </div>
         </div>
 
         <div className="flex justify-between items-center">
           <div className="flex gap-2 items-center">
-            <FontAwesomeIcon
+            <i className="bi-clock-history text-primary text-2xl drop-shadow"></i>
-              icon={faClockRotateLeft}
+            <p className="text-2xl">Recent</p>
-              className="w-5 h-5 text-primary drop-shadow"
-            />
-            <p className="text-2xl">Recently Added Links</p>
           </div>
           <Link
             href="/links"
-            className="flex items-center gap-2 cursor-pointer"
+            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
           >
             View All
-            <FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
+            <i className="bi-chevron-right text-sm "></i>
           </Link>
         </div>
 
@@ -192,14 +171,11 @@ export default function Dashboard() {
                   onClick={() => {
                     setNewLinkModal(true);
                   }}
-                  className="inline-flex gap-1 relative w-[11rem] items-center btn btn-accent dark:border-violet-400 text-white group"
+                  className="inline-flex items-center gap-2 text-sm btn btn-accent dark:border-accent text-white"
                 >
-                  <FontAwesomeIcon
+                  <i className="bi-plus-lg text-xl duration-100"></i>
-                    icon={faPlus}
+                  <span className="group-hover:opacity-0 text-right duration-100">
-                    className="w-5 h-5 left-4 group-hover:ml-[4rem] absolute duration-100"
+                    Add New Link
-                  />
-                  <span className="group-hover:opacity-0 text-right w-full duration-100">
-                    Create New Link
                   </span>
                 </div>
 
@@ -207,13 +183,10 @@ export default function Dashboard() {
                   <div
                     tabIndex={0}
                     role="button"
-                    className="flex gap-2 text-sm btn btn-outline btn-neutral group"
+                    className="inline-flex items-center gap-2 text-sm btn btn-outline btn-neutral"
                     id="import-dropdown"
                   >
-                    <FontAwesomeIcon
+                    <i className="bi-cloud-upload text-xl duration-100"></i>
-                      icon={faFileImport}
-                      className="w-5 h-5 duration-100"
-                    />
                     <p>Import From</p>
                   </div>
                   <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -266,18 +239,15 @@ export default function Dashboard() {
 
         <div className="flex justify-between items-center">
           <div className="flex gap-2 items-center">
-            <FontAwesomeIcon
+            <i className="bi-pin-angle text-primary text-2xl drop-shadow"></i>
-              icon={faThumbTack}
+            <p className="text-2xl">Pinned</p>
-              className="w-5 h-5 text-primary drop-shadow"
-            />
-            <p className="text-2xl">Pinned Links</p>
           </div>
           <Link
             href="/links/pinned"
-            className="flex items-center gap-2 cursor-pointer"
+            className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
           >
             View All
-            <FontAwesomeIcon icon={faChevronRight} className={`w-4 h-4`} />
+            <i className="bi-chevron-right text-sm "></i>
           </Link>
         </div>
 

pages/links/index.tsx

@@ -1,16 +1,13 @@
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import NoLinksFound from "@/components/NoLinksFound";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
+import React, { useState } from "react";
+import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import { faLink } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
-import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
 
 export default function Links() {
@@ -35,24 +32,19 @@ export default function Links() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div className="flex gap-3 justify-between">
+        <div className="flex justify-between">
-          <div className="flex items-center gap-3">
+          <PageHeader
-            <FontAwesomeIcon
+            icon={"bi-link-45deg"}
-              icon={faLink}
+            title={"All Links"}
-              className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
+            description={"Links from every Collections"}
-            />
+          />
-            <div>
-              <p className="text-3xl capitalize font-thin">All Links</p>
 
-              <p className="sm:text-sm text-xs">Links from every Collections</p>
+          <div className="mt-2 flex items-center justify-end gap-2">
-            </div>
-          </div>
-
-          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
+
         {links[0] ? (
           <LinkComponent links={links} />
         ) : (

pages/links/pinned.tsx

@@ -1,15 +1,12 @@
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
+import React, { useState } from "react";
+import PageHeader from "@/components/PageHeader";
 import { Sort, ViewMode } from "@/types/global";
-import { faThumbTack } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
-import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
 
 export default function PinnedLinks() {
@@ -34,26 +31,18 @@ export default function PinnedLinks() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full h-full">
-        <div className="flex gap-3 justify-between">
+        <div className="flex justify-between">
-          <div className="flex items-center gap-3">
+          <PageHeader
-            <FontAwesomeIcon
+            icon={"bi-pin-angle"}
-              icon={faThumbTack}
+            title={"Pinned Links"}
-              className="sm:w-10 sm:h-10 w-8 h-8 text-primary drop-shadow"
+            description={"Pinned Links from your Collections"}
-            />
+          />
-            <div>
+          <div className="mt-2 flex items-center justify-end gap-2">
-              <p className="text-3xl capitalize font-thin">Pinned Links</p>
-
-              <p className="sm:text-sm text-xs">
-                Pinned Links from your Collections
-              </p>
-            </div>
-          </div>
-
-          <div className="flex gap-2 items-center mt-2">
             <SortDropdown sortBy={sortBy} setSort={setSortBy} />
             <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
           </div>
         </div>
+
         {links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
           <LinkComponent links={links} />
         ) : (

pages/search.tsx

@@ -1,18 +1,16 @@
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
-import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import React, { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
 import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
+import PageHeader from "@/components/PageHeader";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -56,28 +54,21 @@ export default function Search() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="flex gap-3 items-center justify-between">
+        <div className="flex justify-between">
-          <div className="flex gap-3 items-center">
+          <PageHeader icon={"bi-search"} title={"Search Results"} />
-            <div className="flex items-center gap-2">
+
-              <FontAwesomeIcon
+          <div className="flex gap-3 items-center justify-end">
-                icon={faSearch}
+            <div className="flex gap-2 items-center mt-2">
-                className="sm:w-8 sm:h-8 w-8 h-8 text-primary drop-shadow"
+              <FilterSearchDropdown
+                searchFilter={searchFilter}
+                setSearchFilter={setSearchFilter}
               />
-              <p className="sm:text-4xl text-3xl capitalize font-thin">
+              <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-                Search Results
+              <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-              </p>
             </div>
           </div>
-
-          <div className="flex gap-2 items-center mt-2">
-            <FilterSearchDropdown
-              searchFilter={searchFilter}
-              setSearchFilter={setSearchFilter}
-            />
-            <SortDropdown sortBy={sortBy} setSort={setSortBy} />
-            <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
-          </div>
         </div>
+
         {links[0] ? (
           <LinkComponent links={links} />
         ) : (

pages/settings/account.tsx

@@ -1,10 +1,4 @@
 import { useState, useEffect } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faClose,
-  faFileExport,
-  faFileImport,
-} from "@fortawesome/free-solid-svg-icons";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
@@ -203,7 +197,7 @@ export default function Account() {
               <ProfilePhoto
                 priority={true}
                 src={user.image ? user.image : undefined}
-                dimensionClass="w-28 h-28"
+                large={true}
               />
               {user.image && (
                 <div
@@ -215,7 +209,7 @@ export default function Account() {
                   }
                   className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
                 >
-                  <FontAwesomeIcon icon={faClose} className="w-3 h-3" />
+                  <i className="bi-x"></i>
                 </div>
               )}
               <div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
@@ -254,10 +248,7 @@ export default function Account() {
                   className="flex gap-2 text-sm btn btn-outline btn-neutral group"
                   id="import-dropdown"
                 >
-                  <FontAwesomeIcon
+                  <i className="bi-cloud-upload text-xl duration-100"></i>
-                    icon={faFileImport}
-                    className="w-5 h-5 duration-100"
-                  />
                   <p>Import From</p>
                 </div>
                 <ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
@@ -309,10 +300,7 @@ export default function Account() {
               <p className="mb-2">Download your data instantly.</p>
               <Link className="w-fit" href="/api/v1/migration">
                 <div className="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
-                  <FontAwesomeIcon
+                  <i className="bi-cloud-download text-xl duration-100"></i>
-                    icon={faFileExport}
-                    className="w-5 h-5 duration-100"
-                  />
                   <p>Export Data</p>
                 </div>
               </Link>

pages/settings/appearance.tsx

@@ -1,14 +1,9 @@
 import SettingsLayout from "@/layouts/SettingsLayout";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
 import { useState, useEffect } from "react";
 import useAccountStore from "@/store/account";
 import { AccountSettings } from "@/types/global";
 import { toast } from "react-hot-toast";
-import SubmitButton from "@/components/SubmitButton";
 import React from "react";
-import Checkbox from "@/components/Checkbox";
-import LinkPreview from "@/components/LinkPreview";
 import useLocalSettingsStore from "@/store/localSettings";
 
 export default function Appearance() {
@@ -72,28 +67,28 @@ export default function Appearance() {
           <p className="mb-3">Select Theme</p>
           <div className="flex gap-3 w-full">
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
                 localStorage.getItem("theme") === "dark"
                   ? "dark:outline-primary text-primary"
                   : "text-white"
               }`}
               onClick={() => updateSettings({ theme: "dark" })}
             >
-              <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+              <i className="bi-moon-fill text-6xl"></i>
-              <p className="text-2xl">Dark Theme</p>
+              <p className="ml-2 text-2xl">Dark</p>
 
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
             <div
-              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+              className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
                 localStorage.getItem("theme") === "light"
                   ? "outline-primary text-primary"
                   : "text-black"
               }`}
               onClick={() => updateSettings({ theme: "light" })}
             >
-              <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+              <i className="bi-sun-fill text-6xl"></i>
-              <p className="text-2xl">Light Theme</p>
+              <p className="ml-2 text-2xl">Light</p>
               {/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
             </div>
           </div>

pages/settings/archive.tsx

@@ -61,7 +61,7 @@ export default function Archive() {
 
       <div className="divider my-3"></div>
 
-      <p>Formats to Archive webpages:</p>
+      <p>Formats to Archive/Preserve webpages:</p>
       <div className="p-3">
         <Checkbox
           label="Screenshot"

pages/settings/delete.tsx

@@ -1,11 +1,9 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { toast } from "react-hot-toast";
 import TextInput from "@/components/TextInput";
 import CenteredForm from "@/layouts/CenteredForm";
 import { signOut, useSession } from "next-auth/react";
 import Link from "next/link";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
 export default function Delete() {
   const [password, setPassword] = useState("");
@@ -59,10 +57,9 @@ export default function Delete() {
           href="/settings/account"
           className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
         >
-          <FontAwesomeIcon
+          <i
-            icon={faChevronLeft}
+            className="bi-chevron-left  text-neutral text-xl"
-            className="w-5 h-5 text-neutral"
+          ></i>
-          />
         </Link>
         <div className="flex items-center gap-2 w-full rounded-md h-8">
           <p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">

pages/tags/[id].tsx

@@ -1,12 +1,4 @@
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import useLinkStore from "@/store/links";
-import {
-  faCheck,
-  faEllipsis,
-  faHashtag,
-  faXmark,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
 import { FormEvent, useEffect, useState } from "react";
 import MainLayout from "@/layouts/MainLayout";
@@ -116,11 +108,9 @@ export default function Index() {
       <div className="p-5 flex flex-col gap-5 w-full">
         <div className="flex gap-3 items-center justify-between">
           <div className="flex gap-3 items-center">
-            <div className="flex gap-2 items-end font-thin">
+            <div className="flex gap-2 items-center font-thin">
-              <FontAwesomeIcon
+              <i className={'bi-hash text-primary text-3xl'}/>
-                icon={faHashtag}
+
-                className="sm:w-8 sm:h-8 w-8 h-8 mt-2 text-primary"
-              />
               {renameTag ? (
                 <>
                   <form onSubmit={submit} className="flex items-center gap-2">
@@ -136,27 +126,19 @@ export default function Index() {
                       id="expand-dropdown"
                       className="btn btn-ghost btn-square btn-sm"
                     >
-                      <FontAwesomeIcon
+                      <i className={"bi-check text-neutral text-2xl"}></i>
-                        icon={faCheck}
-                        id="expand-dropdown"
-                        className="w-5 h-5 text-neutral"
-                      />
                     </div>
                     <div
-                      onClick={() => cancelUpdateTag()}
+                        onClick={() => cancelUpdateTag()}
-                      id="expand-dropdown"
-                      className="btn btn-ghost btn-square btn-sm"
-                    >
-                      <FontAwesomeIcon
-                        icon={faXmark}
                         id="expand-dropdown"
-                        className="w-5 h-5 text-neutral"
+                        className="btn btn-ghost btn-square btn-sm"
-                      />
+                    >
+                      <i className={"bi-x text-neutral text-2xl"}></i>
                     </div>
                   </form>
                 </>
               ) : (
-                <>
+                  <>
                   <p className="sm:text-4xl text-3xl capitalize">
                     {activeTag?.name}
                   </p>
@@ -169,15 +151,11 @@ export default function Index() {
                       }`}
                     >
                       <div
-                        tabIndex={0}
+                          tabIndex={0}
-                        role="button"
+                          role="button"
-                        className="btn btn-ghost btn-sm btn-square text-neutral"
+                          className="btn btn-ghost btn-sm btn-square text-neutral"
                       >
-                        <FontAwesomeIcon
+                        <i className={"bi-three-dots text-neutral text-2xl"}></i>
-                          icon={faEllipsis}
-                          title="More"
-                          className="w-5 h-5"
-                        />
                       </div>
                       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-36 mt-1">
                         <li>

yarn.lock

@@ -781,51 +781,6 @@
   dependencies:
     "@floating-ui/core" "^1.2.1"
 
-"@fortawesome/fontawesome-common-types@6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.0.tgz#88da2b70d6ca18aaa6ed3687832e11f39e80624b"
-  integrity sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==
-
-"@fortawesome/fontawesome-common-types@6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz#1766039cad33f8ad87f9467b98e0d18fbc8f01c5"
-  integrity sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==
-
-"@fortawesome/fontawesome-svg-core@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.0.tgz#3727552eff9179506e9203d72feb5b1063c11a21"
-  integrity sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-brands-svg-icons@^6.4.2":
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz#9b8e78066ea6dd563da5dfa686615791d0f7cc71"
-  integrity sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.2"
-
-"@fortawesome/free-regular-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.4.0.tgz#cacc53bd8d832d46feead412d9ea9ce80a55e13a"
-  integrity sha512-ZfycI7D0KWPZtf7wtMFnQxs8qjBXArRzczABuMQqecA/nXohquJ5J/RCR77PmY5qGWkxAZDxpnUFVXKwtY/jPw==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/free-solid-svg-icons@^6.4.0":
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.0.tgz#48c0e790847fa56299e2f26b82b39663b8ad7119"
-  integrity sha512-kutPeRGWm8V5dltFP1zGjQOEAzaLZj4StdQhWVZnfGFCvAPVvHh8qk5bRrU4KXnRRRNni5tKQI9PBAdI6MP8nQ==
-  dependencies:
-    "@fortawesome/fontawesome-common-types" "6.4.0"
-
-"@fortawesome/react-fontawesome@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
-  integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
-  dependencies:
-    prop-types "^15.8.1"
-
 "@headlessui/react@^1.7.15":
   version "1.7.15"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.15.tgz#53ef6ae132af81b8f188414767b6e79ebf8dc73f"
@@ -1979,6 +1934,11 @@ bl@^4.0.3:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bootstrap-icons@^1.11.2:
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/bootstrap-icons/-/bootstrap-icons-1.11.2.tgz#e1c75daec154e25958db04c4eb3cbda6041e7118"
+  integrity sha512-TgdiPv+IM9tgDb+dsxrnGIyocsk85d2M7T0qIgkvPedZeoZfyeG/j+yiAE4uHCEayKef2RP05ahQ0/e9Sv75Wg==
+
 bowser@^2.11.0:
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/bowser/-/bowser-2.11.0.tgz#5ca3c35757a7aa5771500c70a73a9f91ef420a8f"