recreated modals and many other components

pages/settings/account.tsx

@@ -153,7 +153,7 @@ export default function Account() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Account Settings</p>
 
-      <hr className="my-3 border-1 border-neutral-content" />
+      <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-10">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
@@ -235,7 +235,7 @@ export default function Account() {
             </p>
           </div>
 
-          <hr className="my-3 border-1 border-neutral-content" />
+          <div className="divider my-3"></div>
 
           <div className="flex gap-3 flex-col">
             <div>
@@ -319,7 +319,7 @@ export default function Account() {
             </p>
           </div>
 
-          <hr className="my-3 border-1 border-neutral-content" />
+          <div className="divider my-3"></div>
 
           <Checkbox
             label="Make profile private"
@@ -362,7 +362,7 @@ export default function Account() {
             </p>
           </div>
 
-          <hr className="my-3 border-1 border-neutral-content" />
+          <div className="divider my-3"></div>
 
           <p>
             This will permanently delete ALL the Links, Collections, Tags, and

pages/settings/api.tsx

@@ -56,7 +56,7 @@ export default function Api() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">API Keys (Soon)</p>
 
-      <hr className="my-3 border-1 border-neutral-content" />
+      <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-3">
         <div className="badge bg-orange-500 rounded-md border border-black w-fit px-2 text-black">

pages/settings/appearance.tsx

@@ -69,7 +69,7 @@ export default function Appearance() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Appearance</p>
 
-      <hr className="my-3 border-1 border-neutral-content" />
+      <div className="divider my-3"></div>
 
       <div className="flex flex-col gap-10">
         <div>
@@ -107,7 +107,9 @@ export default function Appearance() {
           <div className="flex items-center gap-2 w-full rounded-md h-8">
             <p className="truncate w-full pr-7 text-3xl font-thin">Link Card</p>
           </div>
-          <hr className="my-3 border-1 border-neutral-content" />
+
+          <div className="divider my-3"></div>
+
           <Checkbox
             label="Display Icons"
             state={user.displayLinkIcons}

pages/settings/archive.tsx

@@ -59,7 +59,7 @@ export default function Archive() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Archive Settings</p>
 
-      <hr className="my-3 border-1 border-neutral-content" />
+      <div className="divider my-3"></div>
 
       <p>Formats to Archive webpages:</p>
       <div className="p-3">

pages/settings/billing.tsx

@@ -13,7 +13,7 @@ export default function Billing() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Billing Settings</p>
 
-      <hr className="my-3 border-1 border-neutral-content" />
+      <div className="divider my-3"></div>
 
       <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md">

pages/settings/delete.tsx

@@ -7,7 +7,7 @@ import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronLeft } from "@fortawesome/free-solid-svg-icons";
 
-export default function Password() {
+export default function Delete() {
   const [password, setPassword] = useState("");
   const [comment, setComment] = useState<string>();
   const [feedback, setFeedback] = useState<string>();
@@ -70,7 +70,7 @@ export default function Password() {
           </p>
         </div>
 
-        <hr className="border-1 border-neutral-content" />
+        <div className="divider my-0"></div>
 
         <p>
           This will permanently delete all the Links, Collections, Tags, and

pages/settings/password.tsx

@@ -47,7 +47,7 @@ export default function Password() {
     <SettingsLayout>
       <p className="capitalize text-3xl font-thin inline">Change Password</p>
 
-      <hr className="my-3 border-1 border-neutral-content" />
+      <div className="divider my-3"></div>
 
       <p className="mb-3">
         To change your password, please fill out the following. Your password