From 2993347dc71e9b4ff74840c6c44e9f3c00679213 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Thu, 7 Nov 2024 02:09:56 -0500
Subject: [PATCH] sleeker dashboard items

---
 components/DashboardItem.tsx | 10 ++++++----
 components/ui/Divider.tsx    |  9 +++++++--
 pages/dashboard.tsx          |  3 ++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/components/DashboardItem.tsx b/components/DashboardItem.tsx
index efc1303..798f2b7 100644
--- a/components/DashboardItem.tsx
+++ b/components/DashboardItem.tsx
@@ -8,13 +8,15 @@ export default function dashboardItem({
   icon: string;
 }) {
   return (
-    <div className="flex items-center">
-      <div className="w-[4rem] aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
+    <div className="flex items-center justify-between w-full rounded-2xl border border-neutral-content p-3 bg-gradient-to-tr from-neutral-content/70 to-50% to-base-200">
+      <div className="w-14 aspect-square flex justify-center items-center bg-primary/20 rounded-xl select-none">
         <i className={`${icon} text-primary text-3xl drop-shadow`}></i>
       </div>
       <div className="ml-4 flex flex-col justify-center">
-        <p className="text-neutral text-xs tracking-wider">{name}</p>
-        <p className="font-thin text-5xl text-primary mt-0.5">{value || 0}</p>
+        <p className="text-neutral text-xs tracking-wider text-right">{name}</p>
+        <p className="font-thin text-4xl text-primary mt-0.5 text-right">
+          {value || 0}
+        </p>
       </div>
     </div>
   );
diff --git a/components/ui/Divider.tsx b/components/ui/Divider.tsx
index 80f50d8..b3b2f62 100644
--- a/components/ui/Divider.tsx
+++ b/components/ui/Divider.tsx
@@ -3,10 +3,15 @@ import React from "react";
 
 type Props = {
   className?: string;
+  vertical?: boolean;
 };
 
-function Divider({ className }: Props) {
-  return <hr className={clsx("border-neutral-content border-t", className)} />;
+function Divider({ className, vertical = false }: Props) {
+  return vertical ? (
+    <hr className={clsx("border-neutral-content border-l h-full", className)} />
+  ) : (
+    <hr className={clsx("border-neutral-content border-t", className)} />
+  );
 }
 
 export default Divider;
diff --git a/pages/dashboard.tsx b/pages/dashboard.tsx
index cbec492..d58ddc9 100644
--- a/pages/dashboard.tsx
+++ b/pages/dashboard.tsx
@@ -16,6 +16,7 @@ import { useTags } from "@/hooks/store/tags";
 import { useDashboardData } from "@/hooks/store/dashboardData";
 import Links from "@/components/LinkViews/Links";
 import useLocalSettingsStore from "@/store/localSettings";
+import Divider from "@/components/ui/Divider";
 
 export default function Dashboard() {
   const { t } = useTranslation();
@@ -112,7 +113,7 @@ export default function Dashboard() {
           <ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
         </div>
 
-        <div className="xl:flex flex flex-col sm:grid grid-cols-2 gap-5 xl:flex-row xl:justify-evenly xl:w-full h-full rounded-2xl p-5 bg-base-200 border border-neutral-content">
+        <div className="xl:flex flex flex-col sm:grid grid-cols-2 gap-3 xl:flex-row xl:justify-evenly xl:w-full h-full">
           <DashboardItem
             name={numberOfLinks === 1 ? t("link") : t("links")}
             value={numberOfLinks}