improved dashboard design + blurred icons based on personal preferences

components/DashboardItem.tsx

@@ -9,8 +9,8 @@ type Props = {
 
 export default function dashboardItem({ name, value, icon }: Props) {
   return (
-    <div className="flex gap-5 items-end">
+    <div className="flex gap-4 items-end">
-      <div className="p-4 h-full bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
+      <div className="p-4 bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
         <FontAwesomeIcon
           icon={icon}
           className="w-8 h-8 text-sky-500 dark:text-sky-500"
@@ -20,7 +20,7 @@ export default function dashboardItem({ name, value, icon }: Props) {
         <p className="text-gray-500 dark:text-gray-400 text-sm tracking-wider">
           {name}
         </p>
-        <p className="font-thin text-5xl text-sky-500 dark:text-sky-500">
+        <p className="font-thin text-6xl text-sky-500 dark:text-sky-500">
           {value}
         </p>
       </div>

components/LinkCard.tsx

@@ -165,7 +165,7 @@ export default function LinkCard({ link, count, className }: Props) {
           onClick={() => router.push("/links/" + link.id)}
           className="flex items-start cursor-pointer gap-5 sm:gap-10 h-full w-full p-5"
         >
-          {url && (
+          {url && account.blurredFavicons && (
             <Image
               src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${url.origin}&size=32`}
               width={64}
@@ -195,7 +195,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 onClick={(e) => {
                   e.stopPropagation();
                 }}
-                className="flex items-center gap-1 max-w-full w-fit my-3 hover:opacity-70 duration-100"
+                className="flex items-center gap-1 max-w-full w-fit my-1 hover:opacity-70 duration-100"
               >
                 <FontAwesomeIcon
                   icon={faFolder}

lib/api/controllers/users/userId/updateUserById.ts

@@ -132,6 +132,7 @@ export default async function updateUserById(
       archiveAsScreenshot: data.archiveAsScreenshot,
       archiveAsPDF: data.archiveAsPDF,
       archiveAsWaybackMachine: data.archiveAsWaybackMachine,
+      blurredFavicons: data.blurredFavicons,
       password:
         data.newPassword && data.newPassword !== ""
           ? newHashedPassword

pages/settings/account.tsx

@@ -9,7 +9,6 @@ import TextInput from "@/components/TextInput";
 import { resizeImage } from "@/lib/client/resizeImage";
 import ProfilePhoto from "@/components/ProfilePhoto";
 import SubmitButton from "@/components/SubmitButton";
-import { useSession, signOut } from "next-auth/react";
 import React from "react";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import Link from "next/link";
@@ -17,8 +16,6 @@ import ClickAwayHandler from "@/components/ClickAwayHandler";
 import Checkbox from "@/components/Checkbox";
 
 export default function Account() {
-  const { update, data } = useSession();
-
   const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
 
   const [submitLoader, setSubmitLoader] = useState(false);
@@ -154,7 +151,7 @@ export default function Account() {
 
   return (
     <SettingsLayout>
-      <div className="flex flex-col gap-10 justify-between sm:w-[35rem] w-80 mx-auto lg:mx-0">
+      <div className="flex flex-col gap-10">
         <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
           <div className="flex flex-col gap-3">
             <div>

pages/settings/appearance.tsx

@@ -2,37 +2,119 @@ import SettingsLayout from "@/layouts/SettingsLayout";
 import { useTheme } from "next-themes";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSun, faMoon } from "@fortawesome/free-solid-svg-icons";
+import { useState, useEffect } from "react";
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import useAccountStore from "@/store/account";
+import { AccountSettings } from "@/types/global";
+import { toast } from "react-hot-toast";
+import TextInput from "@/components/TextInput";
+import { resizeImage } from "@/lib/client/resizeImage";
+import ProfilePhoto from "@/components/ProfilePhoto";
+import SubmitButton from "@/components/SubmitButton";
+import React from "react";
+import Checkbox from "@/components/Checkbox";
 
 export default function Appearance() {
   const { theme, setTheme } = useTheme();
 
+  const submit = async () => {
+    setSubmitLoader(true);
+
+    const load = toast.loading("Applying...");
+
+    const response = await updateAccount({
+      ...user,
+    });
+
+    toast.dismiss(load);
+
+    if (response.ok) {
+      toast.success("Settings Applied!");
+    } else toast.error(response.data as string);
+    setSubmitLoader(false);
+  };
+
+  const [submitLoader, setSubmitLoader] = useState(false);
+
+  const { account, updateAccount } = useAccountStore();
+
+  const [user, setUser] = useState<AccountSettings>(
+    !objectIsEmpty(account)
+      ? account
+      : ({
+          // @ts-ignore
+          id: null,
+          name: "",
+          username: "",
+          email: "",
+          emailVerified: null,
+          blurredFavicons: null,
+          image: "",
+          isPrivate: true,
+          // @ts-ignore
+          createdAt: null,
+          whitelistedUsers: [],
+        } as unknown as AccountSettings)
+  );
+
+  function objectIsEmpty(obj: object) {
+    return Object.keys(obj).length === 0;
+  }
+
+  useEffect(() => {
+    if (!objectIsEmpty(account)) setUser({ ...account });
+  }, [account]);
+
   return (
     <SettingsLayout>
-      <p className="mb-3">Select Theme</p>
+      <div className="flex flex-col gap-3">
-      <div className="flex gap-3 w-full">
+        <div>
-        <div
+          <p className="mb-3">Select Theme</p>
-          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
+          <div className="flex gap-3 w-full">
-            theme === "dark"
+            <div
-              ? "dark:outline-sky-500 text-sky-500"
+              className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
-              : "text-white"
+                theme === "dark"
-          }`}
+                  ? "dark:outline-sky-500 text-sky-500"
-          onClick={() => setTheme("dark")}
+                  : "text-white"
-        >
+              }`}
-          <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+              onClick={() => setTheme("dark")}
-          <p className="text-2xl">Dark Theme</p>
+            >
+              <FontAwesomeIcon icon={faMoon} className="w-1/2 h-1/2" />
+              <p className="text-2xl">Dark Theme</p>
 
-          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+              {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+            </div>
+            <div
+              className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+                theme === "light"
+                  ? "outline-sky-500 text-sky-500"
+                  : "text-black"
+              }`}
+              onClick={() => setTheme("light")}
+            >
+              <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+              <p className="text-2xl">Light Theme</p>
+              {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+            </div>
+          </div>
         </div>
-        <div
+
-          className={`w-full text-center outline-solid outline-sky-100 outline dark:outline-neutral-700 h-40 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
+        <div>
-            theme === "light" ? "outline-sky-500 text-sky-500" : "text-black"
+          <Checkbox
-          }`}
+            label="Blurred Link Icons"
-          onClick={() => setTheme("light")}
+            state={user.blurredFavicons}
-        >
+            onClick={() =>
-          <FontAwesomeIcon icon={faSun} className="w-1/2 h-1/2" />
+              setUser({ ...user, blurredFavicons: !user.blurredFavicons })
-          <p className="text-2xl">Light Theme</p>
+            }
-          {/* <hr className="my-3 outline-1 outline-sky-100 dark:outline-neutral-700" /> */}
+          />
         </div>
+
+        <SubmitButton
+          onClick={submit}
+          loading={submitLoader}
+          label="Save"
+          className="mt-2 mx-auto lg:mx-0"
+        />
       </div>
     </SettingsLayout>
   );

pages/settings/billing.tsx

@@ -11,7 +11,7 @@ export default function Billing() {
 
   return (
     <SettingsLayout>
-      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+      <div className="w-full mx-auto flex flex-col gap-3 justify-between">
         <p className="text-md text-black dark:text-white">
           To manage/cancel your subsciption, visit the{" "}
           <a

pages/settings/delete.tsx

@@ -134,7 +134,7 @@ export default function Password() {
         ) : undefined}
 
         <button
-          className={`mx-auto lg:mx-0 text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
+          className={`mx-auto text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
             submitLoader
               ? "bg-red-400 cursor-auto"
               : "bg-red-500 hover:bg-red-400 cursor-pointer"

prisma/migrations/20231110154938_add_blurred_favicons_field/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "blurredFavicons" BOOLEAN NOT NULL DEFAULT true;

prisma/schema.prisma

@@ -33,6 +33,8 @@ model User {
 
   isPrivate               Boolean         @default(false)
 
+  blurredFavicons         Boolean         @default(true)
+
   createdAt               DateTime        @default(now())
   updatedAt               DateTime        @updatedAt @default(now())
 }