better looking dashboard

components/DashboardItem.tsx

@@ -0,0 +1,29 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+type Props = {
+  name: string;
+  value: number;
+  icon: IconProp;
+};
+
+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">
+        <FontAwesomeIcon
+          icon={icon}
+          className="w-8 h-8 text-sky-500 dark:text-sky-500"
+        />
+      </div>
+      <div className="flex flex-col justify-center">
+        <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">
+          {value}
+        </p>
+      </div>
+    </div>
+  );
+}

components/SettingsSidebar.tsx

@@ -20,6 +20,8 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 
 export default function SettingsSidebar({ className }: { className?: string }) {
+  const LINKWARDEN_VERSION = "v2.1.0";
+
   const { collections } = useCollectionStore();
 
   const router = useRouter();
@@ -136,6 +138,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
       </div>
 
       <div className="flex flex-col gap-1">
+        <Link
+          href={`https://github.com/linkwarden/linkwarden/releases/tag/${LINKWARDEN_VERSION}`}
+          target="_blank"
+          className="dark:text-gray-300 text-gray-500 text-sm ml-2 hover:opacity-50 duration-100"
+        >
+          Linkwarden {LINKWARDEN_VERSION}
+        </Link>
         <Link href="https://docs.linkwarden.app" target="_blank">
           <div
             className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}

layouts/MainLayout.tsx

@@ -58,9 +58,9 @@ export default function MainLayout({ children }: Props) {
         </div>
 
         <div
-          className={`w-full flex flex-col min-h-screen lg:ml-64 xl:ml-80 ${
+          className={`w-full flex flex-col min-h-${
-            showAnnouncement ? "mt-10" : ""
+            showAnnouncement ? "full" : "screen"
-          }`}
+          } lg:ml-64 xl:ml-80 ${showAnnouncement ? "mt-10" : ""}`}
         >
           <Navbar />
           {children}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkwarden",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "main": "index.js",
   "repository": "https://github.com/Daniel31x13/link-warden.git",
   "author": "Daniel31X13 <daniel31x13@gmail.com>",

pages/collections/index.tsx

@@ -44,7 +44,7 @@ export default function Collections() {
                   Your Collections
                 </p>
 
-                <p className="capitalize text-black dark:text-white">
+                <p className="text-black dark:text-white">
                   Collections you own
                 </p>
               </div>
@@ -150,7 +150,7 @@ export default function Collections() {
                   Other Collections
                 </p>
 
-                <p className="capitalize text-black dark:text-white">
+                <p className="text-black dark:text-white">
                   Shared collections you&apos;re a member of
                 </p>
               </div>

pages/dashboard.tsx

@@ -5,6 +5,9 @@ import {
   faChevronRight,
   faClockRotateLeft,
   faFileImport,
+  faFolder,
+  faHashtag,
+  faLink,
   faThumbTack,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -22,6 +25,7 @@ import useModalStore from "@/store/modals";
 import { toast } from "react-hot-toast";
 import { MigrationFormat, MigrationRequest } from "@/types/global";
 import ClickAwayHandler from "@/components/ClickAwayHandler";
+import DashboardItem from "@/components/DashboardItem";
 
 export default function Dashboard() {
   const { collections } = useCollectionStore();
@@ -118,44 +122,47 @@ export default function Dashboard() {
   return (
     <MainLayout>
       <div style={{ flex: "1 1 auto" }} className="p-5 flex flex-col gap-5">
-        <div className="flex gap-3 items-center">
+        <div className="flex items-center gap-3">
-          <div className="flex gap-2">
+          <FontAwesomeIcon
-            <FontAwesomeIcon
+            icon={faChartSimple}
-              icon={faChartSimple}
+            className="sm:w-10 sm:h-10 w-6 h-6 text-sky-500 dark:text-sky-500 drop-shadow"
-              className="sm:w-8 sm:h-8 w-6 h-6 mt-2 text-sky-500 dark:text-sky-500 drop-shadow"
+          />
-            />
+          <div>
-            <p className="sm:text-4xl text-3xl text-black dark:text-white font-thin">
+            <p className="text-3xl capitalize text-black dark:text-white font-thin">
               Dashboard
             </p>
+
+            <p className="text-black dark:text-white">
+              A brief overview of your data
+            </p>
           </div>
         </div>
 
-        <div className="flex flex-col md:flex-row md:items-center gap-5">
+        <div>
-          <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
+          <div className="flex justify-between flex-col md:flex-row md:items-center gap-2 md:w-full h-full rounded-2xl p-8 border border-sky-100 dark:border-neutral-700 bg-gray-100 dark:bg-neutral-800">
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
+            <DashboardItem
-              {numberOfLinks}
+              name={numberOfLinks === 1 ? "Link" : "Links"}
-            </p>
+              value={numberOfLinks}
-            <p className="text-black dark:text-white text-xl">
+              icon={faLink}
-              {numberOfLinks === 1 ? "Link" : "Links"}
+            />
-            </p>
-          </div>
 
-          <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
+            <hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
+            <div className="h-full border-1 border-l border-sky-100 dark:border-neutral-700 hidden md:block"></div>
-              {collections.length}
-            </p>
-            <p className="text-black dark:text-white text-xl">
-              {collections.length === 1 ? "Collection" : "Collections"}
-            </p>
-          </div>
 
-          <div className="sky-shadow flex flex-col justify-center items-center gap-2 md:w-full rounded-2xl p-10 border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800">
+            <DashboardItem
-            <p className="font-bold text-6xl text-sky-500 dark:text-sky-500">
+              name={collections.length === 1 ? "Collection" : "Collections"}
-              {tags.length}
+              value={collections.length}
-            </p>
+              icon={faFolder}
-            <p className="text-black dark:text-white text-xl">
+            />
-              {tags.length === 1 ? "Tag" : "Tags"}
+
-            </p>
+            <hr className="border-sky-100 dark:border-neutral-700 md:hidden my-5" />
+            <div className="h-full border-1 border-r border-sky-100 dark:border-neutral-700 hidden md:block"></div>
+
+            <DashboardItem
+              name={tags.length === 1 ? "Tag" : "Tags"}
+              value={tags.length}
+              icon={faHashtag}
+            />
           </div>
         </div>
 

pages/links/index.tsx

@@ -31,7 +31,7 @@ export default function Links() {
                 All Links
               </p>
 
-              <p className="capitalize text-black dark:text-white">
+              <p className="text-black dark:text-white">
                 Links from every Collections
               </p>
             </div>

styles/globals.css

@@ -176,10 +176,6 @@ body {
   padding: 0;
 }
 
-.sky-shadow {
-  box-shadow: 0px 0px 3px #0ea5e9;
-}
-
 .primary-btn-gradient {
   box-shadow: inset 0px -10px 10px #0071b7;
 }