desktop dashboard design updates

frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx

@@ -334,16 +334,14 @@ describe("ContractContent", () => {
     expect(completedCard).toBeDefined()
     expect(enrolledCard).toBeDefined()
 
-    // Check enrollment status indicators
-    const completedIndicator = within(completedCard!).getByTestId(
-      "enrollment-status",
-    )
-    const enrolledIndicator = within(enrolledCard!).getByTestId(
-      "enrollment-status",
-    )
-
-    expect(completedIndicator).toHaveTextContent(/^Completed$/)
-    expect(enrolledIndicator).toHaveTextContent(/^Enrolled$/)
+    // Check progress badges (the enrollment-status icon is reserved for
+    // compact program module rows; contract cards convey status via the
+    // ProgressBadge next to the card type label instead)
+    const completedBadge = within(completedCard!).getByTestId("progress-badge")
+    const enrolledBadge = within(enrolledCard!).getByTestId("progress-badge")
+
+    expect(completedBadge).toHaveTextContent(/^Completed$/)
+    expect(enrolledBadge).toHaveTextContent(/^In Progress$/)
   })
 
   test("Renders program collections", async () => {
@@ -1271,15 +1269,17 @@ describe("ContractContent", () => {
     ).findAllByTestId("enrollment-card-desktop")
 
     expect(cards.length).toBe(3)
-    // First card should show enrolled status
-    const cardStatus0 = within(cards[0]).getByTestId("enrollment-status")
+    // Progress badges (the enrollment-status icon is reserved for compact
+    // program module rows; contract cards convey status via the
+    // ProgressBadge next to the card type label instead)
+    const cardStatus0 = within(cards[0]).getByTestId("progress-badge")
     expect(cardStatus0).toHaveTextContent(/^Completed$/)
 
-    const cardStatus1 = within(cards[1]).getByTestId("enrollment-status")
-    expect(cardStatus1).toHaveTextContent(/^Enrolled$/)
+    const cardStatus1 = within(cards[1]).getByTestId("progress-badge")
+    expect(cardStatus1).toHaveTextContent(/^In Progress$/)
 
-    const cardStatus2 = within(cards[2]).getByTestId("enrollment-status")
-    expect(cardStatus2).toHaveTextContent(/^Not Enrolled$/)
+    const cardStatus2 = within(cards[2]).getByTestId("progress-badge")
+    expect(cardStatus2).toHaveTextContent(/^Not Started$/)
   })
 
   test("shows the not found screen if the organization is not found by orgSlug", async () => {

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/CardShared.tsx

@@ -64,18 +64,21 @@ const CardRoot = styled.div<{
 ])
 
 const CardTypeText = styled(Typography)(({ theme }) => ({
-  ...theme.typography.subtitle4,
+  ...theme.typography.body3,
   color: theme.custom.colors.silverGrayDark,
 }))
 
 const TitleHeading = styled.h3(({ theme }) => ({
   margin: 0,
+  ...theme.typography.subtitle2,
   [theme.breakpoints.down("md")]: {
     maxWidth: "calc(100% - 16px)",
   },
 }))
 
-const TitleLink = styled(Link)()
+const TitleLink = styled(Link)(({ theme }) => ({
+  ...theme.typography.subtitle2,
+}))
 
 const TitleText = styled.h3<{ clickable?: boolean }>(
   ({ theme, clickable }) => ({
@@ -89,41 +92,29 @@ const TitleText = styled.h3<{ clickable?: boolean }>(
   }),
 )
 
-const SubtitleLinkRoot = styled.div<{ layout?: "default" | "compact" }>(
-  ({ theme, layout = "default" }) => ({
-    display: "flex",
-    alignItems: "center",
-    gap: "8px",
-    flex: 1,
-    color:
-      layout === "compact"
-        ? theme.custom.colors.silverGrayDark
-        : theme.custom.colors.darkGray2,
-    ...theme.typography.subtitle3,
-  }),
-)
+const SubtitleLinkRoot = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  flex: 1,
+  color: theme.custom.colors.red,
+  ...theme.typography.body3,
+}))
 
-const SubtitleLink = styled(NextLink)<{ layout?: "default" | "compact" }>(
-  ({ theme, layout = "default" }) => ({
-    ...theme.typography.subtitle3,
-    color:
-      layout === "compact"
-        ? theme.custom.colors.silverGrayDark
-        : theme.custom.colors.mitRed,
-    display: "flex",
-    alignItems: "center",
-    gap: "4px",
-    ":hover": {
-      textDecoration: "underline",
-    },
-  }),
-)
+const SubtitleLink = styled(NextLink)(({ theme }) => ({
+  ...theme.typography.body3,
+  color: theme.custom.colors.red,
+  display: "flex",
+  alignItems: "center",
+  gap: "2px",
+  ":hover": {
+    textDecoration: "underline",
+  },
+}))
 
 const MenuButton = styled(ActionButton)<{
   status: EnrollmentStatus
 }>(({ theme, status }) => [
   {
-    marginLeft: "-8px",
     [theme.breakpoints.down("md")]: {
       position: "absolute",
       top: "0",
@@ -170,6 +161,14 @@ const Separator = styled.span(({ theme }) => ({
   backgroundColor: theme.custom.colors.silverGrayLight,
 }))
 
+const Ellipse = styled.span(({ theme }) => ({
+  display: "inline-block",
+  width: "4px",
+  height: "4px",
+  borderRadius: "50%",
+  backgroundColor: theme.custom.colors.silverGrayLight,
+}))
+
 const DateText = styled(Typography)(({ theme }) => ({
   ...theme.typography.subtitle3,
   color: theme.custom.colors.silverGrayDark,
@@ -190,7 +189,7 @@ const UpgradedBannerRoot = styled.div(({ theme }) => ({
   alignItems: "center",
   gap: "4px",
   color: theme.custom.colors.silverGrayDark,
-  ...theme.typography.subtitle3,
+  ...theme.typography.body3,
 }))
 
 const UpgradedBanner: React.FC<{ className?: string }> = ({ className }) => (
@@ -212,7 +211,7 @@ const DatePopoverContent = styled.div({
 
 const DatePopoverTrigger = styled("button")<{ $upcoming: boolean }>(
   ({ theme, $upcoming }) => ({
-    ...theme.typography.body2,
+    ...theme.typography.subtitle3,
     color: $upcoming
       ? theme.custom.colors.red
       : theme.custom.colors.silverGrayDark,
@@ -332,6 +331,7 @@ export {
   CoursewareButton,
   CoursewareButtonLink,
   Separator,
+  Ellipse,
   DateText,
   CourseDateText,
   CourseDateSummary,

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/CoursewareCard.tsx

@@ -42,6 +42,8 @@ type CourseDisplayProps = {
   layout?: "default" | "compact"
   headingLevel?: "h2" | "h3" | "h4" | "h5" | "h6"
   onUpgradeError?: (error: string) => void
+  /** Display "Module" instead of "Course" as the card type label. */
+  isModule?: boolean
 }
 
 /** A course row from a program/contract dashboard (full entry available). */
@@ -91,7 +93,7 @@ const CoursewareCard: React.FC<CoursewareCardProps> = (props) => {
     )
   }
 
-  const { layout, headingLevel, onUpgradeError } = props
+  const { layout, headingLevel, onUpgradeError, isModule } = props
 
   if (props.kind === "enrollment") {
     return (
@@ -101,6 +103,7 @@ const CoursewareCard: React.FC<CoursewareCardProps> = (props) => {
         layout={layout}
         headingLevel={headingLevel}
         onUpgradeError={onUpgradeError}
+        isModule={isModule}
         Component={Component}
         className={className}
       />
@@ -120,6 +123,7 @@ const CoursewareCard: React.FC<CoursewareCardProps> = (props) => {
       layout={layout}
       headingLevel={headingLevel}
       onUpgradeError={onUpgradeError}
+      isModule={isModule}
       Component={Component}
       className={className}
     />
@@ -131,6 +135,7 @@ const CoursewareCard: React.FC<CoursewareCardProps> = (props) => {
       ancestorContext={entry.ancestorContext}
       layout={layout}
       headingLevel={headingLevel}
+      isModule={isModule}
       Component={Component}
       className={className}
     />