improved UI

pages/dashboard.tsx

@@ -27,6 +27,8 @@ export default function () {
     setSortedCollections(
       collectionsWithLinkCount.sort((a, b) => b.linkCount - a.linkCount) as any
     );
+
+    // console.log(links.length);
   }, [collections]);
 
   return (
@@ -34,30 +36,33 @@ export default function () {
     <MainLayout>
       <div className="p-5">
         <div className="flex gap-3 items-center mb-5">
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2">
             <FontAwesomeIcon
               icon={faChartSimple}
-              className="w-5 h-5 text-sky-300"
+              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-300"
             />
-            <p className="text-lg text-sky-900">Dashboard</p>
+            <p className="sm:text-4xl text-3xl capitalize bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent font-bold">
+              Dashboard
+            </p>
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10">
+        <div className="flex flex-col md:flex-row md:items-center justify-evenly gap-2 mb-10 bg-gradient-to-tr from-sky-500 to-slate-400 bg-clip-text text-transparent">
           <div className="flex items-baseline gap-2">
-            <p className="text-sky-500 font-bold text-6xl">{links.length}</p>
-            <p className="text-sky-900 text-xl">Links</p>
+            <p className="font-bold text-6xl">{links.length}</p>
+            <p className="text-sky-900 text-xl">
+              Links
+              {/* {links.length == 1 ? "Links" : "Link"} */}
+            </p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="text-sky-500 font-bold text-6xl">
-              {collections.length}
-            </p>
+            <p className="font-bold text-6xl">{collections.length}</p>
             <p className="text-sky-900 text-xl">Collections</p>
           </div>
 
           <div className="flex items-baseline gap-2">
-            <p className="text-sky-500 font-bold text-6xl">{tags.length}</p>
+            <p className="font-bold text-6xl">{tags.length}</p>
             <p className="text-sky-900 text-xl">Tags</p>
           </div>
         </div>