From 4e7d851237369e279a014ee3166c35f80878a839 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Tue, 18 Jun 2024 10:56:06 +0200
Subject: [PATCH] Use a cleaner design for the dashboard, without cards (#6358)

---
 .../dashboard/AssignmentActivity.tsx          | 75 ++++++--------
 .../components/dashboard/CourseActivity.tsx   | 98 ++++++++-----------
 .../components/dashboard/DashboardApp.tsx     |  2 +-
 .../dashboard/DashboardBreadcrumbs.tsx        | 12 ++-
 .../dashboard/OrganizationActivity.tsx        | 75 +++++++-------
 .../dashboard/test/AssignmentActivity-test.js |  6 +-
 .../dashboard/test/CourseActivity-test.js     |  6 +-
 7 files changed, 121 insertions(+), 153 deletions(-)

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
index c24d5082dc..85d006c401 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
@@ -1,10 +1,3 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from '@hypothesis/frontend-shared';
-import classnames from 'classnames';
 import { useMemo } from 'preact/hooks';
 import { useParams } from 'wouter-preact';
 
@@ -52,14 +45,8 @@ export default function AssignmentActivity() {
   );
 
   return (
-    <Card>
-      <CardHeader
-        fullWidth
-        classes={classnames(
-          // Overwrite gap-x-2 and items-center from CardHeader
-          'flex-col !gap-x-0 !items-start',
-        )}
-      >
+    <div className="flex flex-col gap-y-5">
+      <div>
         {assignment.data && (
           <div className="mb-3 mt-1 w-full">
             <DashboardBreadcrumbs
@@ -72,40 +59,38 @@ export default function AssignmentActivity() {
             />
           </div>
         )}
-        <CardTitle tagName="h2" data-testid="title">
+        <h2 className="text-lg text-brand font-semibold" data-testid="title">
           {assignment.isLoading && 'Loading...'}
           {assignment.error && 'Could not load assignment title'}
           {assignment.data && title}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <OrderableActivityTable
-          loading={students.isLoading}
-          title={assignment.isLoading ? 'Loading...' : title}
-          emptyMessage={
-            students.error ? 'Could not load students' : 'No students found'
+        </h2>
+      </div>
+      <OrderableActivityTable
+        loading={students.isLoading}
+        title={assignment.isLoading ? 'Loading...' : title}
+        emptyMessage={
+          students.error ? 'Could not load students' : 'No students found'
+        }
+        rows={rows}
+        columnNames={{
+          display_name: 'Student',
+          annotations: 'Annotations',
+          replies: 'Replies',
+          last_activity: 'Last Activity',
+        }}
+        defaultOrderField="display_name"
+        renderItem={(stats, field) => {
+          if (['annotations', 'replies'].includes(field)) {
+            return <div className="text-right">{stats[field]}</div>;
+          } else if (field === 'last_activity') {
+            return stats.last_activity
+              ? formatDateTime(new Date(stats.last_activity))
+              : '';
           }
-          rows={rows}
-          columnNames={{
-            display_name: 'Student',
-            annotations: 'Annotations',
-            replies: 'Replies',
-            last_activity: 'Last Activity',
-          }}
-          defaultOrderField="display_name"
-          renderItem={(stats, field) => {
-            if (['annotations', 'replies'].includes(field)) {
-              return <div className="text-right">{stats[field]}</div>;
-            } else if (field === 'last_activity') {
-              return stats.last_activity
-                ? formatDateTime(new Date(stats.last_activity))
-                : '';
-            }
 
-            return stats[field] ?? `Student ${stats.id.substring(0, 10)}`;
-          }}
-        />
-      </CardContent>
-    </Card>
+          return stats[field] ?? `Student ${stats.id.substring(0, 10)}`;
+        }}
+      />
+    </div>
   );
 }
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx
index 019cf2c7d4..7b4b75d948 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx
@@ -1,13 +1,6 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Link,
-} from '@hypothesis/frontend-shared';
-import classnames from 'classnames';
+import { Link } from '@hypothesis/frontend-shared';
 import { useMemo } from 'preact/hooks';
-import { useParams, Link as RouterLink } from 'wouter-preact';
+import { Link as RouterLink, useParams } from 'wouter-preact';
 
 import type { AssignmentsResponse, Course } from '../../api-types';
 import { useConfig } from '../../config';
@@ -56,61 +49,52 @@ export default function CourseActivity() {
   );
 
   return (
-    <Card>
-      <CardHeader
-        fullWidth
-        classes={classnames(
-          // Overwrite gap-x-2 and items-center from CardHeader
-          'flex-col !gap-x-0 !items-start',
-        )}
-      >
+    <div className="flex flex-col gap-y-5">
+      <div>
         <div className="mb-3 mt-1 w-full">
           <DashboardBreadcrumbs />
         </div>
-        <CardTitle tagName="h2" data-testid="title">
+        <h2 className="text-lg text-brand font-semibold" data-testid="title">
           {course.isLoading && 'Loading...'}
           {course.error && 'Could not load course title'}
           {course.data && course.data.title}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <OrderableActivityTable
-          loading={assignments.isLoading}
-          title={course.data?.title ?? 'Loading...'}
-          emptyMessage={
-            assignments.error
-              ? 'Could not load assignments'
-              : 'No assignments found'
-          }
-          rows={rows}
-          columnNames={{
-            title: 'Assignment',
-            annotations: 'Annotations',
-            replies: 'Replies',
-            last_activity: 'Last Activity',
-          }}
-          defaultOrderField="title"
-          renderItem={(stats, field) => {
-            if (['annotations', 'replies'].includes(field)) {
-              return <div className="text-right">{stats[field]}</div>;
-            } else if (field === 'title') {
-              return (
-                <RouterLink href={assignmentURL(stats.id)} asChild>
-                  <Link underline="always" variant="text">
-                    {stats.title}
-                  </Link>
-                </RouterLink>
-              );
-            }
-
+        </h2>
+      </div>
+      <OrderableActivityTable
+        loading={assignments.isLoading}
+        title={course.data?.title ?? 'Loading...'}
+        emptyMessage={
+          assignments.error
+            ? 'Could not load assignments'
+            : 'No assignments found'
+        }
+        rows={rows}
+        columnNames={{
+          title: 'Assignment',
+          annotations: 'Annotations',
+          replies: 'Replies',
+          last_activity: 'Last Activity',
+        }}
+        defaultOrderField="title"
+        renderItem={(stats, field) => {
+          if (['annotations', 'replies'].includes(field)) {
+            return <div className="text-right">{stats[field]}</div>;
+          } else if (field === 'title') {
             return (
-              stats.last_activity &&
-              formatDateTime(new Date(stats.last_activity))
+              <RouterLink href={assignmentURL(stats.id)} asChild>
+                <Link underline="always" variant="text">
+                  {stats.title}
+                </Link>
+              </RouterLink>
             );
-          }}
-          navigateOnConfirmRow={stats => assignmentURL(stats.id)}
-        />
-      </CardContent>
-    </Card>
+          }
+
+          return (
+            stats.last_activity && formatDateTime(new Date(stats.last_activity))
+          );
+        }}
+        navigateOnConfirmRow={stats => assignmentURL(stats.id)}
+      />
+    </div>
   );
 }
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardApp.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardApp.tsx
index 213835faa3..d9e7e56800 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/DashboardApp.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/DashboardApp.tsx
@@ -12,7 +12,7 @@ export default function DashboardApp() {
   }>();
 
   return (
-    <div className="flex flex-col min-h-screen gap-5 bg-grey-2">
+    <div className="flex flex-col min-h-screen gap-5">
       <div
         className={classnames(
           'flex justify-center p-3 w-full',
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx b/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx
index e56ba27a56..7f2cf78bf3 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/DashboardBreadcrumbs.tsx
@@ -19,7 +19,11 @@ export type DashboardBreadcrumbsProps = {
 function BreadcrumbLink({ title, href }: BreadcrumbLink) {
   return (
     <RouterLink href={href} asChild>
-      <Link underline="hover" variant="text-light" classes="truncate">
+      <Link
+        underline="always"
+        variant="text-light"
+        classes="truncate font-normal"
+      >
         <ArrowLeftIcon className="inline-block md:hidden mr-1 align-sub" />
         {title}
       </Link>
@@ -34,7 +38,7 @@ export default function DashboardBreadcrumbs({
   links = [],
 }: DashboardBreadcrumbsProps) {
   const linksWithHome = useMemo(
-    (): BreadcrumbLink[] => [{ title: 'Home', href: '' }, ...links],
+    (): BreadcrumbLink[] => [{ title: 'All courses', href: '' }, ...links],
     [links],
   );
 
@@ -62,7 +66,9 @@ export default function DashboardBreadcrumbs({
             })}
           >
             <BreadcrumbLink href={href} title={title} />
-            {!isLastLink && <CaretRightIcon />}
+            {!isLastLink && (
+              <CaretRightIcon className="text-color-text-light" />
+            )}
           </span>
         );
       })}
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/OrganizationActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/OrganizationActivity.tsx
index 24eaa9f5fa..480136ac44 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/OrganizationActivity.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/OrganizationActivity.tsx
@@ -1,9 +1,4 @@
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  Link,
-} from '@hypothesis/frontend-shared';
+import { Link } from '@hypothesis/frontend-shared';
 import { useMemo } from 'preact/hooks';
 import { Link as RouterLink } from 'wouter-preact';
 
@@ -51,42 +46,40 @@ export default function OrganizationActivity({
   );
 
   return (
-    <Card>
-      <CardHeader title="Home" fullWidth />
-      <CardContent>
-        <OrderableActivityTable
-          loading={courses.isLoading}
-          title="Courses"
-          emptyMessage={
-            courses.error ? 'Could not load courses' : 'No courses found'
+    <div className="flex flex-col gap-y-5">
+      <h2 className="text-lg text-brand font-semibold">All courses</h2>
+      <OrderableActivityTable
+        loading={courses.isLoading}
+        title="Courses"
+        emptyMessage={
+          courses.error ? 'Could not load courses' : 'No courses found'
+        }
+        rows={rows}
+        columnNames={{
+          title: 'Course Title',
+          assignments: 'Assignments',
+          last_launched: 'Last launched',
+        }}
+        defaultOrderField="title"
+        renderItem={(stats, field) => {
+          if (field === 'assignments') {
+            return <div className="text-right">{stats[field]}</div>;
+          } else if (field === 'last_launched') {
+            return stats.last_launched
+              ? formatDateTime(new Date(stats.last_launched))
+              : '';
           }
-          rows={rows}
-          columnNames={{
-            title: 'Course Title',
-            assignments: 'Assignments',
-            last_launched: 'Last launched',
-          }}
-          defaultOrderField="title"
-          renderItem={(stats, field) => {
-            if (field === 'assignments') {
-              return <div className="text-right">{stats[field]}</div>;
-            } else if (field === 'last_launched') {
-              return stats.last_launched
-                ? formatDateTime(new Date(stats.last_launched))
-                : '';
-            }
 
-            return (
-              <RouterLink href={urlPath`/courses/${String(stats.id)}`} asChild>
-                <Link underline="always" variant="text">
-                  {stats.title}
-                </Link>
-              </RouterLink>
-            );
-          }}
-          navigateOnConfirmRow={stats => courseURL(stats.id)}
-        />
-      </CardContent>
-    </Card>
+          return (
+            <RouterLink href={urlPath`/courses/${String(stats.id)}`} asChild>
+              <Link underline="always" variant="text">
+                {stats.title}
+              </Link>
+            </RouterLink>
+          );
+        }}
+        navigateOnConfirmRow={stats => courseURL(stats.id)}
+      />
+    </div>
   );
 }
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
index a9d5df6ff2..68f40301df 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
+++ b/lms/static/scripts/frontend_apps/components/dashboard/test/AssignmentActivity-test.js
@@ -85,7 +85,7 @@ describe('AssignmentActivity', () => {
     fakeUseAPIFetch.returns({ isLoading: true });
 
     const wrapper = createComponent();
-    const titleElement = wrapper.find('CardTitle[data-testid="title"]');
+    const titleElement = wrapper.find('[data-testid="title"]');
     const tableElement = wrapper.find('OrderableActivityTable');
 
     assert.equal(titleElement.text(), 'Loading...');
@@ -96,7 +96,7 @@ describe('AssignmentActivity', () => {
     fakeUseAPIFetch.returns({ error: new Error('Something failed') });
 
     const wrapper = createComponent();
-    const titleElement = wrapper.find('CardTitle[data-testid="title"]');
+    const titleElement = wrapper.find('[data-testid="title"]');
     const tableElement = wrapper.find('OrderableActivityTable');
 
     assert.equal(titleElement.text(), 'Could not load assignment title');
@@ -105,7 +105,7 @@ describe('AssignmentActivity', () => {
 
   it('shows expected title', () => {
     const wrapper = createComponent();
-    const titleElement = wrapper.find('CardTitle[data-testid="title"]');
+    const titleElement = wrapper.find('[data-testid="title"]');
     const tableElement = wrapper.find('OrderableActivityTable');
     const expectedTitle = 'Assignment: The title';
 
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/test/CourseActivity-test.js b/lms/static/scripts/frontend_apps/components/dashboard/test/CourseActivity-test.js
index 1dc711bb3e..7cd484c77b 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/test/CourseActivity-test.js
+++ b/lms/static/scripts/frontend_apps/components/dashboard/test/CourseActivity-test.js
@@ -81,7 +81,7 @@ describe('CourseActivity', () => {
     fakeUseAPIFetch.returns({ isLoading: true });
 
     const wrapper = createComponent();
-    const titleElement = wrapper.find('CardTitle[data-testid="title"]');
+    const titleElement = wrapper.find('[data-testid="title"]');
     const tableElement = wrapper.find('OrderableActivityTable');
 
     assert.equal(titleElement.text(), 'Loading...');
@@ -92,7 +92,7 @@ describe('CourseActivity', () => {
     fakeUseAPIFetch.returns({ error: new Error('Something failed') });
 
     const wrapper = createComponent();
-    const titleElement = wrapper.find('CardTitle[data-testid="title"]');
+    const titleElement = wrapper.find('[data-testid="title"]');
     const tableElement = wrapper.find('OrderableActivityTable');
 
     assert.equal(titleElement.text(), 'Could not load course title');
@@ -104,7 +104,7 @@ describe('CourseActivity', () => {
 
   it('shows expected title', () => {
     const wrapper = createComponent();
-    const titleElement = wrapper.find('CardTitle[data-testid="title"]');
+    const titleElement = wrapper.find('[data-testid="title"]');
     const tableElement = wrapper.find('OrderableActivityTable');
     const expectedTitle = 'The title';