fix: change the banner design by ahtesham-quraish · Pull Request #3032 · mitodl/mit-learn

ahtesham-quraish · 2026-03-10T11:42:21Z

What are the relevant tickets?

https://github.com/mitodl/hq/issues/10435#top

Description (What does it do?)

We need to update the product page banner / nav

Acceptance Criteria

Match the designs... Things I notice:
- New background
- image/video now larger than sidebar on desktop
- Program pages say "Learning Paths" in the breadcrumb (all programs)
- No navigation links

Screenshots (if appropriate):

How can this be tested?

For testing you should visits the following urls and compare the design with Figma design
http://open.odl.local:8062/courses/course-v1:MITxT+14.100x
https://rc.learn.mit.edu/programs/program-v1:MITx+DEDP

Additional Context

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx

ChristopherChudzicki

@ahtesham-quraish This looks nice! A couple requests.

ChristopherChudzicki · 2026-03-10T14:43:36Z

frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.test.tsx

    const course = makeCourse({ next_run_id: run.id, courseruns: [run] })

    setMockResponse.get(urls.userMe.get(), makeUser({ is_authenticated: true }))
-    const { promise } = Promise.withResolvers()


Request: Leave this as-is / restore to original. Here and in the other places changed in this PR.

Promise.withResolvers was added in Node 22 and is standard in our environments (Node 24).

Did you have trouble running the tests locally? If so:

run inside watch container e.g., after docker compose exec watch bash

Or make sure host node is up-to-date with our docker.

ChristopherChudzicki · 2026-03-11T00:30:19Z

frontends/main/src/app-pages/ProductPages/CoursePage.tsx

  readableId: string
 }

+const StyledCourseEnrollmentButton = styled(CourseEnrollmentButton)({


Request: Would you mind changing the enrollment button styles? They've been updated to use a white background + black text. https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=34479-199611&m=dev

Sorry for the change!

Can you please now?

Here and on ProgramPage: Figma was updated to use the "bordered" type button instead of secondary:

Type: Bordered becomes variant="bordered" in the code. (We couldn't use type because that conflicts for buttons...type="submit"|"button"|....)

Could you please:

Use bordered variant

And remove almost all of the style overrides. Only the color override should be necessary, I believe.

Currently the hover effect is odd... the changes above should fix it.

ChristopherChudzicki · 2026-03-11T00:41:07Z

frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx

+  },
+}))
+
+const ShortDescription = styled(Typography)(({ theme }) => ({


Hmmm. I do see the ellipsis in some of the Figma pages.

@steven-hatch @mbilalmughal I'm not sure we should clamp this.... If we need to limit the text length:

Option 1: clamp it, but we need some expand/collapse situation

Option 2: Do not clamp it, and limit the text length on CMS side.

For now: I'd like to suggest we just not clamp this. And perhaps middle-align the image below.

👇 Looks bad, but real authors would not enter text that long.

I have made this change

Looks good. (Or...as good as it can with hat long text 😆 )

frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx

mbilalmughal · 2026-03-11T08:11:59Z

@ChristopherChudzicki cc: @ahtesham-quraish
I agree with option 2, we need to restrict the text and add chratchter limit.

ChristopherChudzicki

Two small fixes:

button variant to fix hover issue
"Learning Path" instead of program

ChristopherChudzicki · 2026-03-11T12:45:14Z

frontends/main/src/app-pages/ProductPages/CoursePage.tsx

  readableId: string
 }

+const StyledCourseEnrollmentButton = styled(CourseEnrollmentButton)({


Here and on ProgramPage: Figma was updated to use the "bordered" type button instead of secondary:

Type: Bordered becomes variant="bordered" in the code. (We couldn't use type because that conflicts for buttons...type="submit"|"button"|....)

Could you please:

Use bordered variant

And remove almost all of the style overrides. Only the color override should be necessary, I believe.

Currently the hover effect is odd... the changes above should fix it.

ChristopherChudzicki · 2026-03-11T12:46:03Z

frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx


 type CourseEnrollmentButtonProps = {
  course: CourseWithCourseRunsSerializerV2
+  variant?: "primary" | "secondary"


You can use variant?: ButtonProps["variant"] for this to get all the variants.

Same comment on ProgramEnrollmentButton

I have used the proper props. thanks

ChristopherChudzicki · 2026-03-11T12:48:01Z

frontends/main/src/app-pages/ProductPages/ProgramPage.tsx

  return (
    <ProductPageTemplate
-      tags={tags}
      currentBreadcrumbLabel="Program"


currentBreadcrumbLabel should be "Learning Path" now, I believe.

Yes it is fixed

ChristopherChudzicki · 2026-03-11T12:48:56Z

frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx

+  },
+}))
+
+const ShortDescription = styled(Typography)(({ theme }) => ({


Looks good. (Or...as good as it can with hat long text 😆 )

ahtesham-quraish · 2026-03-11T13:48:29Z

@ChristopherChudzicki I have used the bordered variant but Height and some other properties has to be there to align with design.

ChristopherChudzicki

👍

I know this is merging into my branch at the moment. Let's wait till that is merged into main (fairly soon, i think) then merge this into main.

sentry bot reviewed Mar 10, 2026

View reviewed changes

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx Outdated Show resolved Hide resolved

fix: change the banner design

bb44ec4

ahtesham-quraish force-pushed the ahtesham/navbar-changes branch from e140c50 to bb44ec4 Compare March 10, 2026 12:18

ChristopherChudzicki mentioned this pull request Mar 11, 2026

Advertise parent programs on course product pages #3029

Open

ChristopherChudzicki requested changes Mar 11, 2026

View reviewed changes

ahtesham-quraish added the Needs Review An open Pull Request that is ready for review label Mar 11, 2026

add promis changes back

822ace3

sentry bot reviewed Mar 11, 2026

View reviewed changes

frontends/main/src/app-pages/ProductPages/ProductPageTemplate.tsx Show resolved Hide resolved

ahtesham-quraish force-pushed the ahtesham/navbar-changes branch from 5879aea to 028cbee Compare March 11, 2026 07:28

sentry bot reviewed Mar 11, 2026

View reviewed changes

frontends/main/src/app-pages/ProductPages/ProgramEnrollmentButton.tsx Show resolved Hide resolved

ahtesham-quraish force-pushed the ahtesham/navbar-changes branch from 028cbee to c2defe3 Compare March 11, 2026 07:41

merge with branch

8881444

ahtesham-quraish force-pushed the ahtesham/navbar-changes branch from c2defe3 to 8881444 Compare March 11, 2026 08:29

ChristopherChudzicki requested changes Mar 11, 2026

View reviewed changes

Ahtesham Quraish added 2 commits March 11, 2026 18:50

address review

20672a1

address review

a907c91

ahtesham-quraish force-pushed the ahtesham/navbar-changes branch from 76586b1 to a907c91 Compare March 11, 2026 14:17

ChristopherChudzicki approved these changes Mar 11, 2026

View reviewed changes

Conversation

ahtesham-quraish commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What are the relevant tickets?

Description (What does it do?)

Acceptance Criteria

Screenshots (if appropriate):

How can this be tested?

Additional Context

Uh oh!

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Mar 11, 2026 • edited by ahtesham-quraish Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

mbilalmughal commented Mar 11, 2026

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Mar 11, 2026 • edited by ahtesham-quraish Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ahtesham-quraish commented Mar 11, 2026

Uh oh!

ChristopherChudzicki left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

ahtesham-quraish commented Mar 10, 2026 •

edited

Loading

ChristopherChudzicki Mar 11, 2026 •

edited by ahtesham-quraish

Loading

ChristopherChudzicki Mar 11, 2026 •

edited by ahtesham-quraish

Loading