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="p-4 h-full bg-sky-500 bg-opacity-20 dark:bg-opacity-10 rounded-xl select-none">
+    <div className="flex gap-4 items-end">
+      <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}