Design QA #2308

ChristopherChudzicki · 2025-06-17T18:54:17Z

What are the relevant tickets?

https://github.com/mitodl/hq/issues/7572

Description (What does it do?)

Fixes several design discrepancies.

How can this be tested?

View the changed areas. See below.

Screenshots

1. Resource Card Certificate / Price Spacing

Now looks like:
/

Diff (bottom is new version):

2. Explore MIT Filter / Hero Filter

The order and icons are now the same. Hero icon for "Free" changed to pricetag.

3. Search page filter spacing updates (mobile), Mobile ListRowCard title size decrease

4. Unit Page Changes (mostly mobile):

Changes:

desktop: font size body1
mobile: font size body2 for count and text, two-tone cards,
both: count and text same color

Mobile (right hand is extra narrow, svg shrinks now)

5. Search Page (and some channel pages)

Free checkbox is now centered:

BEFORE / AFTER

/

6. My Lists icon sizing

BEFORE / AFTER
/

7. Profile Page Font Sizing

No change. Handled in a separate PR. (#2304 )

8. Topic Page Spacing

Matches Figma ... Top/bottom spacing changed to be symmetric, 80px on desktop 32px on mobile:

Should otherwise look same as RC.

9. Departments Page Spacing

Matches Figma ... Top/bottom spacing changed to be symmetric, 80px on desktop 20px on mobile:

10. Search Display Filter Alignment

The first facet should now always align with the top of the search results:

BEFORE / AFTER

11. Search Page Facet Filter Text

Now Neue-haas-grotesk and dark gray 2.

BEFORE / AFTER

12. Academic and Professional Icon Scaling

See code comment for more details. Behavior updated so that the icons scale at same rate then disappear.

ChristopherChudzicki · 2025-06-18T21:45:39Z

frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx

@@ -35,7 +36,6 @@ import {
 } from "api"
 import { useLearningResourcesSearch } from "api/hooks/learningResources"
 import { useAdminSearchParams } from "api/hooks/adminSearchParams"
-import { GridColumn, GridContainer } from "@/components/GridLayout/GridLayout"


The removal of these components is not particularly related to the other changes in this PR. However, I'd really like to delete these components and this is the most prominent usage.

Suggestion: Check there are no unintended layout changes by opening RC and this branch in browser tabs 1 and 2. Ensure same zoom and size (easy w/o console open). Tab between them. You should see some layout changes—mentioned as the items in this PR—but nothing major or not included in that list.

ChristopherChudzicki · 2025-06-18T21:52:19Z

frontends/main/src/page-components/SearchDisplay/ProfessionalToggle.tsx

+   * The goal here is to ensure the icons:
+   * - scale at same rate when container shrinks
+   * - are hidden if container is too small
+   *
+   * NOTE: containerType: size enables the container query but requires setting
+   * a width on the container. We are doing this anyway.


@mbilalmughal Regarding Academic and Professional Icon scaling: As described in the issue, they scale at different rates on RC as window size decreases and it doesn't look great.

Here are few options for addressing this issue. For now, (2) is implemented.

Scale at same rate. They get very small. Awkward. (The button border still exists, just isn't really showing up in the video.)

option_shrinking_icons.mov

Scale at same rate, but disappear after they get kinda small.

option_disappearing_icons.mov

Change the facet sidebar so that it has a fixed width of 300px, or a width that scales between 275px and 300px, but never goes below 300px.

Remove the icons all together. This is simplest.

IMO (3) would be a good solution. When the facet sidebar gets too narrow it affects usability IMO. That said, I don't think we should consider (3) for now. This change would cause some issues with the cards getting too narrow.

@ChristopherChudzicki I believe what you’ve done on (2) is great, Removing the icon makes sense here. 👍

mbilalmughal · 2025-06-20T15:11:38Z

@ChristopherChudzicki Thanks chris, these updates looks good to me now 👍

jonkafton

A few things look off pixel, though sometimes not sure if I'm looking at the latest in Figma.

jonkafton · 2025-06-20T14:33:11Z

frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx

+  display: "flex",
+  alignItems: "center",
+  gap: size === "small" ? "4px" : "8px",
+}))

 const Certificate = styled.div`
  padding: 2px 4px;


Certificate is slightly tighter in Figma - padding left/right is 2px.

https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=207-3088&m=dev

jonkafton · 2025-06-20T14:56:32Z

frontends/main/src/page-components/SearchDisplay/SearchDisplay.tsx

-    padding-left: 0 !important;
-  }
-`
-
 const MobileFilter = styled.div`
  ${({ theme }) => theme.breakpoints.up("md")} {
    display: none;
  }

  color: ${({ theme }) => theme.custom.colors.darkGray2};
  margin-top: 20px;


Figma has a margin-top of 16px (actually padding on the tabs), though the tab style is old - I might not be looking at the current design https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=4026-60992&m=dev

Yeah, those tabs are an ancient design we never updated. @mbilalmughal IMO it would be good to align that with our current mobile tabs.

I should have linked to this word doc in the PR description (it's in the issue) but the spacing change here was just between Filter/Sort and the search results https://docs.google.com/document/d/1PyPhf-pbsxcDJKKmjzWoFV3dP_7KpCbvx_YHllOL180/edit?tab=t.0

jonkafton · 2025-06-20T15:02:27Z

frontends/ol-components/src/components/Card/ListCard.tsx

@@ -96,7 +96,7 @@ export const Title: React.FC<TitleProps> = styled(Linkable)`
  ${{ ...theme.typography.subtitle1 }}
  height: ${theme.typography.pxToRem(40)};
  ${theme.breakpoints.down("md")} {
-    ${{ ...theme.typography.subtitle2 }}
+    ${{ ...theme.typography.subtitle3 }}


Title has a gap of 8px in Figma:

We would need to fix the image height though to accomodate:

Hmmm, good catch. The figma designs do look better (particularly the alignment of bookmark button on mobile, IMO).

Because:

@mbilalmughal has already approved the screenshots/choices in this PR / this issue wasn't mentioned in the design QA doc

and the PR ~~is pretty big already~~ already touches lots of design features,

I'd like to leave it out of this PR. However, I did make the change locally and I'm going to make a separate, dedicated PR for the change.

jonkafton · 2025-06-20T15:12:06Z

frontends/main/src/app-pages/UnitsListingPage/UnitCard.tsx

@@ -50,6 +40,7 @@ const LogoContainer = styled.div({
      height: "40px",


These are not horizontally centered at <md. Figma has a top and bottom padding of 24px (we have 34px and 14px).

https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=14674-72974&m=dev

jonkafton · 2025-06-20T15:16:55Z

frontends/main/src/app-pages/DepartmentListingPage/DepartmentListingPage.tsx

+              display: "flex",
+              flexDirection: "column",
+              gap: "40px",
+              margin: "80px 0",


We have some default margin top on the title, so should account for that in the 80pc top margin:

In Figma:

https://www.figma.com/design/Eux3guSenAFVvNHGi1Y9Wm/MIT-Design-System?node-id=2197-31369&m=dev

ChristopherChudzicki added 14 commits June 17, 2025 10:01

update smoot to proper release

a94c7e1

align price spacing w figma

af2b1f4

change sidebar filter order, align icons with hero

9ca6987

fix ListRow card mobile title size

fff758e

improve search page filter spacing for mobile

26f8a8c

align units page with figma

d9587de

center free in search facets

88bbb68

fix userlist row icon size

3430789

fix topics top/bottom spacing

b09a56d

fix departments page spacing

9d08e6c

fix filter section title spacing

b74675f

make search input font neue haas

7636a2f

remove gridcolumn, gridcontainer from search page

0e23f2d

hide icons when too button shrinks

4c7dc4e

ChristopherChudzicki force-pushed the cc/design-qa branch from ac996b8 to 4c7dc4e Compare June 18, 2025 21:29

ChristopherChudzicki commented Jun 18, 2025

View reviewed changes

ChristopherChudzicki changed the title ~~[WIP] Design QA~~ Design QA Jun 18, 2025

ChristopherChudzicki added the Needs Review An open Pull Request that is ready for review label Jun 18, 2025

ChristopherChudzicki added 3 commits June 20, 2025 11:00

fix unit logo alignment

6ba8e9a

fix a few spacing issues in department page

ccdb982

fix a spacing issue in topic page

2f3c11f

jonkafton reviewed Jun 20, 2025

View reviewed changes

fix certificate icon padding on learning resource cards

adc2a91

ChristopherChudzicki requested a review from jonkafton June 20, 2025 19:30

ChristopherChudzicki mentioned this pull request Jun 20, 2025

align LearningResourceListCard with figma #2314

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Design QA #2308

Design QA #2308

Uh oh!

ChristopherChudzicki commented Jun 17, 2025 •

edited

Loading

Uh oh!

ChristopherChudzicki Jun 18, 2025

Uh oh!

ChristopherChudzicki Jun 18, 2025

Uh oh!

mbilalmughal Jun 20, 2025

Uh oh!

mbilalmughal commented Jun 20, 2025

Uh oh!

jonkafton left a comment

Uh oh!

jonkafton Jun 20, 2025

Uh oh!

jonkafton Jun 20, 2025

Uh oh!

jonkafton Jun 20, 2025

Uh oh!

ChristopherChudzicki Jun 20, 2025

Uh oh!

jonkafton Jun 20, 2025

Uh oh!

ChristopherChudzicki Jun 20, 2025 •

edited

Loading

Uh oh!

ChristopherChudzicki Jun 20, 2025

Uh oh!

jonkafton Jun 20, 2025

Uh oh!

jonkafton Jun 20, 2025

Uh oh!

Uh oh!

		@@ -50,6 +40,7 @@ const LogoContainer = styled.div({
		height: "40px",

Design QA #2308

Are you sure you want to change the base?

Design QA #2308

Uh oh!

Conversation

ChristopherChudzicki commented Jun 17, 2025 • 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?)

How can this be tested?

Screenshots

1. Resource Card Certificate / Price Spacing

2. Explore MIT Filter / Hero Filter

3. Search page filter spacing updates (mobile), Mobile ListRowCard title size decrease

4. Unit Page Changes (mostly mobile):

5. Search Page (and some channel pages)

6. My Lists icon sizing

7. Profile Page Font Sizing

8. Topic Page Spacing

9. Departments Page Spacing

10. Search Display Filter Alignment

11. Search Page Facet Filter Text

12. Academic and Professional Icon Scaling

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!

mbilalmughal commented Jun 20, 2025

Uh oh!

jonkafton 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!

Choose a reason for hiding this comment

Uh oh!

ChristopherChudzicki Jun 20, 2025 • edited 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!

ChristopherChudzicki commented Jun 17, 2025 •

edited

Loading

ChristopherChudzicki Jun 20, 2025 •

edited

Loading