frontend: dashboard improvements

NickSavage · Dec 4, 2024 · 22c4444 · 22c4444
1 parent b92477b
commit 22c4444
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 30 deletions.
diff --git a/zettelkasten-front/src/assets/icons/TasksIcon.tsx b/zettelkasten-front/src/assets/icons/TasksIcon.tsx
@@ -3,21 +3,16 @@ import React from "react";
 export function TasksIcon() {
   return (
     <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="16"
-      height="16"
-      fill="currentColor"
-      className="bi bi-list-task"
-      viewBox="0 0 16 16"
+      className="w-5 h-50"
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
     >
       <path
-        fill-rule="evenodd"
-        d="M2 2.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5zM3 3H2v1h1z"
-      />
-      <path d="M5 3.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5M5.5 7a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1zm0 4a.5.5 0 0 0 0 1h9a.5.5 0 0 0 0-1z" />
-      <path
-        fill-rule="evenodd"
-        d="M1.5 7a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5zM2 7h1v1H2zm0 3.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5zm1 .5H2v1h1z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
       />
     </svg>
   );

diff --git a/zettelkasten-front/src/pages/DashboardPage.tsx b/zettelkasten-front/src/pages/DashboardPage.tsx
@@ -3,15 +3,13 @@ import { fetchPartialCards, getCard } from "../api/cards";
 import { useEffect } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { PartialCard, Card } from "../models/Card";
-import { isTodayOrPast } from "../utils/dates";
 import { useTaskContext } from "../contexts/TaskContext";
 import { usePartialCardContext } from "../contexts/CardContext";
-import { H4, H6 } from "../components/Header";
 import { CardList } from "../components/cards/CardList";
-import { TaskList } from "../components/tasks/TaskList";
 import { useAuth } from "../contexts/AuthContext";
 import { CardBody } from "../components/cards/CardBody";
 import { useNavigate } from "react-router-dom";
+import { TasksIcon } from "../assets/icons/TasksIcon";
 
 export function DashboardPage() {
   const { partialCards } = usePartialCardContext();
@@ -43,18 +41,59 @@ export function DashboardPage() {
 
   return (
     <div>
-      <div className="px-10 py-10">
-        <ul>
+      <div className="p-6 bg-white rounded-lg shadow-sm">
+        <ul className="space-y-3">
           <li>
-            <span onClick={handleNewCard} className="cursor-pointer">
+            <span
+              onClick={handleNewCard}
+              className="flex items-center gap-3 p-3 rounded-lg transition-all duration-200 
+        bg-blue-50 hover:bg-blue-100 cursor-pointer"
+            >
+              <svg
+                className="w-5 h-5 text-blue-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M12 4v16m8-8H4"
+                />
+              </svg>
               Create a Card
             </span>
           </li>
           <li>
-            <span className="cursor-pointer">Create a Task</span>
+            <span
+              className="flex items-center gap-3 p-3 rounded-lg transition-all duration-200 
+        bg-green-50 hover:bg-green-100 cursor-pointer"
+            >
+              <TasksIcon />
+              Create a Task
+            </span>
           </li>
           <li>
-            <span className="cursor-pointer">Upload a File</span>
+            <span
+              className="flex items-center gap-3 p-3 rounded-lg transition-all duration-200 
+        bg-purple-50 hover:bg-purple-100 cursor-pointer"
+            >
+              <svg
+                className="w-5 h-5 text-purple-600"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                />
+              </svg>
+              Upload a File
+            </span>
           </li>
         </ul>
       </div>
@@ -63,15 +102,16 @@ export function DashboardPage() {
           <div>
             <div>
               <hr />
-
-              {displayCard && (
-                <div>
-                  <CardBody viewingCard={displayCard} />
-                  <Link to={"/app/card/" + displayCard.id.toString() + "/edit"}>
-                    Edit Dashboard
-                  </Link>
-                </div>
-              )}
+              <div className="mb-8">
+                <h1 className="text-3xl font-bold text-gray-900 mb-3">
+                  Welcome to Zettelgarden 🌱
+                </h1>
+                <p className="text-lg text-gray-600 max-w-2xl">
+                  Your personal space for growing ideas. Create cards, connect
+                  thoughts, and watch your knowledge garden flourish. Get
+                  started with the quick actions below.
+                </p>
+              </div>
             </div>
           </div>
         </div>