diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
index a5aaf796c7..ec993bd752 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -179,21 +179,21 @@ describe.each([
course: pastDashboardCourse({
enrollment: { status: EnrollmentStatus.Enrolled },
}),
- expected: { labelPrefix: "View" },
+ expected: { label: "View", usesCourseNoun: true },
case: "past",
},
{
course: currentDashboardCourse({
enrollment: { status: EnrollmentStatus.Enrolled },
}),
- expected: { labelPrefix: "Continue" },
+ expected: { label: "Continue", usesCourseNoun: false },
case: "current",
},
{
course: futureDashboardCourse({
enrollment: { status: EnrollmentStatus.Enrolled },
}),
- expected: { labelPrefix: "Continue" },
+ expected: { label: "Continue", usesCourseNoun: false },
label: "future",
},
])(
@@ -211,10 +211,10 @@ describe.each([
!course.enrollment
) {
expect(coursewareCTA).toHaveTextContent("Start Course")
+ } else if (expected.usesCourseNoun) {
+ expect(coursewareCTA).toHaveTextContent(`${expected.label} Course`)
} else {
- expect(coursewareCTA).toHaveTextContent(
- `${expected.labelPrefix} Course`,
- )
+ expect(coursewareCTA).toHaveTextContent(expected.label)
}
const courseNoun = faker.word.noun()
@@ -231,10 +231,13 @@ describe.each([
!course.enrollment
) {
expect(coursewareCTA).toHaveTextContent(`Start ${courseNoun}`)
- } else {
+ } else if (expected.usesCourseNoun) {
expect(coursewareCTA).toHaveTextContent(
- `${expected.labelPrefix} ${courseNoun}`,
+ `${expected.label} ${courseNoun}`,
)
+ } else {
+ // "Continue" doesn't use courseNoun
+ expect(coursewareCTA).toHaveTextContent(expected.label)
}
},
)
@@ -522,7 +525,7 @@ describe.each([
test.each([
{ status: EnrollmentStatus.Completed, expectedText: "View Course" },
- { status: EnrollmentStatus.Enrolled, expectedText: "Continue Course" },
+ { status: EnrollmentStatus.Enrolled, expectedText: "Continue" },
{ status: EnrollmentStatus.NotEnrolled, expectedText: "Start Course" },
])(
"CoursewareButton shows correct text based on enrollment status ($status)",
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index c3e3d0cd59..1d0787cb60 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -158,7 +158,8 @@ type CoursewareButtonProps = {
courseNoun: string
"data-testid"?: string
}
-const getCoursewareText = ({
+
+const getCoursewareTextAndIcon = ({
endDate,
enrollmentStatus,
courseNoun,
@@ -168,16 +169,17 @@ const getCoursewareText = ({
courseNoun: string
}) => {
if (!enrollmentStatus || enrollmentStatus === EnrollmentStatus.NotEnrolled) {
- return `Start ${courseNoun}`
+ return { text: `Start ${courseNoun}`, endIcon: null }
}
if (
(endDate && isInPast(endDate)) ||
enrollmentStatus === EnrollmentStatus.Completed
) {
- return `View ${courseNoun}`
+ return { text: `View ${courseNoun}`, endIcon: null }
}
- return `Continue ${courseNoun}`
+ return { text: "Continue", endIcon: }
}
+
const CoursewareButton = styled(
({
coursewareId,
@@ -189,7 +191,7 @@ const CoursewareButton = styled(
courseNoun,
...others
}: CoursewareButtonProps) => {
- const coursewareText = getCoursewareText({
+ const coursewareText = getCoursewareTextAndIcon({
endDate,
courseNoun,
enrollmentStatus,
@@ -222,7 +224,7 @@ const CoursewareButton = styled(
}
{...others}
>
- {coursewareText}
+ {coursewareText.text}
)
} else if (hasStarted && href /* Link to course */) {
@@ -230,12 +232,12 @@ const CoursewareButton = styled(
}
+ endIcon={coursewareText.endIcon}
href={href}
className={className}
{...others}
>
- {coursewareText}
+ {coursewareText.text}
)
}
@@ -249,11 +251,11 @@ const CoursewareButton = styled(
className={className}
{...others}
>
- {coursewareText}
+ {coursewareText.text}
)
},
-)({ width: "142px" })
+)({ width: "124px" })
const formatUpgradeTime = (daysFloat: number) => {
if (daysFloat < 0) return ""
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx
index 08a4c20de1..98044121b6 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx
@@ -8,6 +8,7 @@ import { mitxUserQueries } from "api/mitxonline-hooks/user"
import { ButtonLink } from "@mitodl/smoot-design"
import { organizationView } from "@/common/urls"
import { OrganizationPage } from "@mitodl/mitxonline-api-axios/v2"
+import { RiArrowRightLine } from "@remixicon/react"
const Wrapper = styled.div(({ theme }) => ({
display: "flex",
@@ -88,6 +89,12 @@ const Title = styled.div(({ theme }) => ({
},
}))
+const CardButton = styled(ButtonLink)({
+ width: "124px",
+ minWidth: "124px",
+ flexShrink: 0,
+})
+
interface OrganizationContractsProps {
org: OrganizationPage
}
@@ -103,9 +110,9 @@ const OrganizationContracts: React.FC = ({
{contract.name}
-
+ }>
Continue
-
+
)
}) ?? null
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
index b5c28eb72f..bf55189e88 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
@@ -530,9 +530,8 @@ describe("OrganizationContent", () => {
// Check that the card displays information from the correct course run
const coursewareButton = within(card).getByTestId("courseware-button")
- // The courseware button shows different text based on course type and enrollment status
- // For enrolled users in started courses, it shows "Continue Course" or "Continue Module"
- expect(coursewareButton).toHaveTextContent(/Continue (Course|Module)/i)
+ // The courseware button shows "Continue" for enrolled users in started courses
+ expect(coursewareButton).toHaveTextContent("Continue")
// Verify the courseware button has the correct href from the contract run
// Only check href if the course has started and user is enrolled