From 643a3e849098fb132c9f9c1f8f8d3ea2613bc7f2 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Wed, 11 Sep 2024 11:56:27 +0100
Subject: [PATCH] Update card designs

---
 .../Dashboard/DashboardBookmarkCard.tsx       |  8 ++--
 .../Dashboard/DashboardProjectCard.tsx        | 43 ++++++++++++++-----
 src/components/Dashboard/ProgressStack.tsx    | 12 ++----
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/src/components/Dashboard/DashboardBookmarkCard.tsx b/src/components/Dashboard/DashboardBookmarkCard.tsx
index 92eded421..3a7bafbb9 100644
--- a/src/components/Dashboard/DashboardBookmarkCard.tsx
+++ b/src/components/Dashboard/DashboardBookmarkCard.tsx
@@ -27,12 +27,10 @@ export function DashboardBookmarkCard(props: DashboardBookmarkCardProps) {
     <a
       href={url}
       key={resourceId}
-      className="group relative flex w-full items-center gap-2 text-left text-sm"
+      className="group relative flex w-full items-center gap-2 text-left text-sm hover:text-black hover:underline"
     >
-      <Bookmark className="size-4 fill-current text-gray-500 group-hover:text-gray-600" />
-      <h4 className="truncate font-medium text-gray-900 group-hover:text-gray-600">
-        {resourceTitle}
-      </h4>
+      <Bookmark className="size-4 fill-current text-gray-400" />
+      <h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4>
     </a>
   );
 }
diff --git a/src/components/Dashboard/DashboardProjectCard.tsx b/src/components/Dashboard/DashboardProjectCard.tsx
index 14a033bb0..81c6614f7 100644
--- a/src/components/Dashboard/DashboardProjectCard.tsx
+++ b/src/components/Dashboard/DashboardProjectCard.tsx
@@ -1,5 +1,7 @@
-import { CircleCheck, CircleDashed } from 'lucide-react';
+import { Check, CircleCheck, CircleDashed } from 'lucide-react';
 import type { ProjectStatusDocument } from '../Projects/ListProjectSolutions';
+import { cn } from '../../lib/classname.ts';
+import { getRelativeTimeString } from '../../lib/date.ts';
 
 type DashboardProjectCardProps = {
   project: ProjectStatusDocument & {
@@ -10,7 +12,7 @@ type DashboardProjectCardProps = {
 export function DashboardProjectCard(props: DashboardProjectCardProps) {
   const { project } = props;
 
-  const { title, projectId, submittedAt, repositoryUrl } = project;
+  const { title, projectId, submittedAt, startedAt, repositoryUrl } = project;
 
   const url = `/projects/${projectId}`;
   const status = submittedAt && repositoryUrl ? 'submitted' : 'started';
@@ -19,16 +21,35 @@ export function DashboardProjectCard(props: DashboardProjectCardProps) {
     <a
       href={url}
       key={projectId}
-      className="group relative flex w-full items-center gap-2 text-left text-sm"
+      className="group relative flex w-full items-center gap-2 text-left text-sm underline-offset-2"
     >
-      {status === 'submitted' ? (
-        <CircleCheck className="size-4" />
-      ) : (
-        <CircleDashed className="size-4" />
-      )}
-      <h4 className="truncate font-medium text-gray-900 group-hover:text-gray-600">
-        {title}
-      </h4>
+      <span
+        className={cn(
+          'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full',
+          {
+            'border border-green-500 bg-green-500 group-hover:border-green-600 group-hover:bg-green-600':
+              status === 'submitted',
+            'border border-dashed border-gray-400 bg-transparent group-hover:border-gray-500':
+              status === 'started',
+          },
+        )}
+      >
+        {status === 'submitted' && (
+          <Check
+            className="relative top-[0.5px] size-3 text-white"
+            strokeWidth={3}
+          />
+        )}
+      </span>
+      <span className="flex-grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
+      <span className="flex-shrink-0 bg-transparent text-xs text-gray-400 no-underline">
+        {!!startedAt &&
+          status === 'started' &&
+          getRelativeTimeString(startedAt)}
+        {!!submittedAt &&
+          status === 'submitted' &&
+          getRelativeTimeString(submittedAt)}
+      </span>
     </a>
   );
 }
diff --git a/src/components/Dashboard/ProgressStack.tsx b/src/components/Dashboard/ProgressStack.tsx
index 344945154..bdcb7e6ad 100644
--- a/src/components/Dashboard/ProgressStack.tsx
+++ b/src/components/Dashboard/ProgressStack.tsx
@@ -119,11 +119,7 @@ export function ProgressStack(props: ProgressStackProps) {
     props;
 
   const bookmarkedProgresses = progresses.filter(
-    (progress) =>
-      progress?.isFavorite &&
-      progress?.done === 0 &&
-      progress?.learning === 0 &&
-      progress?.skipped === 0,
+    (progress) => progress?.isFavorite,
   );
 
   const userProgresses = progresses.filter(
@@ -198,7 +194,7 @@ export function ProgressStack(props: ProgressStackProps) {
               setShowAll={setShowAllProgresses}
               count={userProgresses.length}
               maxCount={MAX_PROGRESS_TO_SHOW}
-              className="mt-3 mb-0.5"
+              className="mb-0.5 mt-3"
             />
           )}
         </ProgressLane>
@@ -226,7 +222,7 @@ export function ProgressStack(props: ProgressStackProps) {
               setShowAll={setShowAllProjects}
               count={projects.length}
               maxCount={MAX_PROJECTS_TO_SHOW}
-              className="mt-3 mb-0.5"
+              className="mb-0.5 mt-3"
             />
           )}
         </ProgressLane>
@@ -258,7 +254,7 @@ export function ProgressStack(props: ProgressStackProps) {
               setShowAll={setShowAllBookmarks}
               count={bookmarkedProgresses.length}
               maxCount={MAX_BOOKMARKS_TO_SHOW}
-              className="mt-3 mb-0.5"
+              className="mb-0.5 mt-3"
             />
           )}
         </ProgressLane>