Design QA (#2308)

* update smoot to proper release

* align price spacing w figma

* change sidebar filter order, align icons with hero

* fix ListRow card mobile title size

* improve search page filter spacing for mobile

* align units page with figma

* center free in search facets

* fix userlist row icon size

* fix topics top/bottom spacing

* fix departments page spacing

* fix filter section title spacing

* make search input font neue haas

* remove gridcolumn, gridcontainer from search page

* hide icons when too button shrinks

* fix unit logo alignment

* fix a few spacing issues in department page

* fix a spacing issue in topic page

* fix certificate icon padding on learning resource cards

Author: ChristopherChudzicki

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

@@ -9,7 +9,7 @@ import {
   ListItem,
   ListItemLink,
   ListItemText,
-  Grid,
+  Grid2 as Grid,
   Banner,
   Breadcrumbs,
 } from "ol-components"
@@ -47,6 +47,7 @@ const SCHOOL_ICONS: Record<string, React.ReactNode> = {
 const SchoolTitle = styled.h2(({ theme }) => {
   return {
     marginBottom: "10px",
+    marginTop: "0",
     display: "flex",
     alignItems: "center",
     ...theme.typography.h5,
@@ -186,15 +187,6 @@ const SchoolDepartments: React.FC<SchoolDepartmentProps> = ({
   )
 }
 
-const SchoolList = styled.div(({ theme }) => ({
-  "> section": {
-    marginTop: "40px",
-    [theme.breakpoints.down("sm")]: {
-      marginTop: "30px",
-    },
-  },
-}))
-
 const DepartmentListingPage: React.FC = () => {
   const channelCountQuery = useChannelCounts("department")
   const courseCounts = channelCountQuery.data
@@ -222,19 +214,28 @@ const DepartmentListingPage: React.FC = () => {
       />
       <Container>
         <Grid container>
-          <Grid item xs={0} sm={1}></Grid>
-          <Grid item xs={12} sm={10}>
-            <SchoolList>
-              {schoolsQuery.data?.results?.map((school) => (
-                <SchoolDepartments
-                  as="li"
-                  key={school.id}
-                  school={school}
-                  courseCounts={courseCounts}
-                  programCounts={programCounts}
-                />
-              ))}
-            </SchoolList>
+          <Grid
+            size={{ xs: 12, sm: 10 }}
+            offset={{ xs: 0, sm: 1 }}
+            sx={(theme) => ({
+              display: "flex",
+              flexDirection: "column",
+              gap: "40px",
+              margin: "80px 0",
+              [theme.breakpoints.down("sm")]: {
+                margin: "20px 0",
+                gap: "30px",
+              },
+            })}
+          >
+            {schoolsQuery.data?.results?.map((school) => (
+              <SchoolDepartments
+                key={school.id}
+                school={school}
+                courseCounts={courseCounts}
+                programCounts={programCounts}
+              />
+            ))}
           </Grid>
         </Grid>
       </Container>

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

@@ -5,7 +5,7 @@ import {
   Container,
   Typography,
   styled,
-  Grid,
+  Grid2 as Grid,
   PlainList,
   ChipLink,
   linkStyles,
@@ -269,11 +269,7 @@ const groupTopics = (
 }
 
 const RootTopicList = styled(PlainList)(({ theme }) => ({
-  marginTop: "80px",
-  [theme.breakpoints.down("sm")]: {
-    marginTop: "32px",
-  },
-  "> li": {
+  "> li:not(:last-of-type)": {
     paddingBottom: "32px",
   },
   "> li + li": {
@@ -316,8 +312,16 @@ const TopicsListingPage: React.FC = () => {
       />
       <Container>
         <Grid container>
-          <Grid item xs={0} sm={1}></Grid>
-          <Grid item xs={12} sm={10}>
+          <Grid
+            size={{ xs: 12, sm: 10 }}
+            offset={{ xs: 0, sm: 1 }}
+            sx={(theme) => ({
+              margin: "80px 0",
+              [theme.breakpoints.down("sm")]: {
+                margin: "32px 0",
+              },
+            })}
+          >
             <RootTopicList>
               {topicsQuery.isLoading
                 ? Array(10)

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

@@ -1,14 +1,7 @@
 import React from "react"
 import type { OfferedByEnum } from "api"
 import type { UnitChannel } from "api/v0"
-import {
-  Card,
-  Skeleton,
-  Typography,
-  styled,
-  theme,
-  UnitLogo,
-} from "ol-components"
+import { Card, Skeleton, styled, theme, UnitLogo } from "ol-components"
 import Link from "next/link"
 import { usePostHog } from "posthog-js/react"
 import { PostHogEvents } from "@/common/constants"
@@ -23,9 +16,6 @@ const UnitCardContainer = styled.div({
   alignItems: "center",
   height: "100%",
   backgroundColor: "rgba(243, 244, 248, 0.50)",
-  [theme.breakpoints.down("md")]: {
-    backgroundColor: theme.custom.colors.white,
-  },
 })
 
 const UnitCardContent = styled.div({
@@ -39,7 +29,7 @@ const LogoContainer = styled.div({
   padding: "40px 32px",
   backgroundColor: theme.custom.colors.white,
   [theme.breakpoints.down("md")]: {
-    padding: "34px 0 14px",
+    padding: "24px 16px",
     ".MuiSkeleton-root": {
       margin: "0 auto",
     },
@@ -50,6 +40,7 @@ const LogoContainer = styled.div({
       height: "40px",
       margin: "0 auto",
     },
+    maxWidth: "calc(100% - 32px)",
   },
 })
 
@@ -59,50 +50,25 @@ const CardBottom = styled.div({
   display: "flex",
   flexGrow: 1,
   flexDirection: "column",
+  justifyContent: "space-between",
   gap: "24px",
+  ...theme.typography.body1,
   [theme.breakpoints.down("md")]: {
+    ...theme.typography.body2,
     padding: "16px",
-    gap: "10px",
-    borderTop: "none",
+    gap: "16px",
   },
 })
 
-const ValuePropContainer = styled.div({
-  display: "flex",
-  flexDirection: "column",
-  alignItems: "flex-start",
-  justifyContent: "flex-start",
-  flexGrow: 1,
-  paddingBottom: "16px",
-})
-
 const LoadingContent = styled.div({
   padding: "24px",
 })
 
-const HeadingText = styled.span(({ theme }) => ({
-  alignSelf: "stretch",
-  color: theme.custom.colors.darkGray2,
-  ...theme.typography.body2,
-}))
-
 const CountsTextContainer = styled.div({
   display: "flex",
   gap: "10px",
-  [theme.breakpoints.down("md")]: {
-    justifyContent: "flex-end",
-  },
 })
 
-const CountsText = styled(Typography)(({ theme }) => ({
-  color: theme.custom.colors.darkGray2,
-  ...theme.typography.body2,
-  [theme.breakpoints.down("md")]: {
-    ...theme.typography.body3,
-    color: theme.custom.colors.silverGrayDark,
-  },
-}))
-
 interface UnitCardsProps {
   channels: UnitChannel[] | undefined
   courseCounts: Record<string, number>
@@ -144,16 +110,14 @@ const UnitCard: React.FC<UnitCardProps> = (props) => {
               </Link>
             </LogoContainer>
             <CardBottom>
-              <ValuePropContainer>
-                <HeadingText>{channel?.configuration?.heading}</HeadingText>
-              </ValuePropContainer>
+              {channel?.configuration?.heading}
               <CountsTextContainer>
-                <CountsText data-testid={`course-count-${unit.code}`}>
+                <span data-testid={`course-count-${unit.code}`}>
                   {courseCount > 0 ? `Courses: ${courseCount}` : ""}
-                </CountsText>
-                <CountsText data-testid={`program-count-${unit.code}`}>
+                </span>
+                <span data-testid={`program-count-${unit.code}`}>
                   {programCount > 0 ? `Programs: ${programCount}` : ""}
-                </CountsText>
+                </span>
               </CountsTextContainer>
             </CardBottom>
           </UnitCardContent>

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

@@ -14,9 +14,9 @@ import {
   RiVerifiedBadgeLine,
   RiFileAddLine,
   RiTimeLine,
-  RiHeartLine,
   RiPriceTag3Line,
   RiAwardLine,
+  RiThumbUpLine,
 } from "@remixicon/react"
 import { useToggle } from "ol-utilities"
 import MITLogoLink from "@/components/MITLogoLink/MITLogoLink"
@@ -241,18 +241,18 @@ const navData: NavData = {
           href: SEARCH_NEW,
           posthogEvent: PostHogEvents.ClickedNavBrowseNew,
         },
+        {
+          title: "Popular",
+          href: SEARCH_POPULAR,
+          icon: <RiThumbUpLine />,
+          posthogEvent: PostHogEvents.ClickedNavBrowsePopular,
+        },
         {
           title: "Upcoming",
           icon: <RiTimeLine />,
           href: SEARCH_UPCOMING,
           posthogEvent: PostHogEvents.ClickedNavBrowseUpcoming,
         },
-        {
-          title: "Popular",
-          href: SEARCH_POPULAR,
-          icon: <RiHeartLine />,
-          posthogEvent: PostHogEvents.ClickedNavBrowsePopular,
-        },
         {
           title: "Free",
           icon: <RiPriceTag3Line />,

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

@@ -24,10 +24,10 @@ import {
 import {
   RiAwardLine,
   RiFileAddLine,
+  RiPriceTag3Line,
   RiSearch2Line,
   RiThumbUpLine,
   RiTimeLine,
-  RiVerifiedBadgeLine,
 } from "@remixicon/react"
 import Image from "next/image"
 import { SearchField } from "@/page-components/SearchField/SearchField"
@@ -63,7 +63,7 @@ const SEARCH_CHIPS: SearchChip[] = [
     label: "Free",
     href: SEARCH_FREE,
     variant: "outlinedWhite",
-    icon: <RiVerifiedBadgeLine />,
+    icon: <RiPriceTag3Line />,
   },
   {
     label: "With Certificate",

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

@@ -12,10 +12,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)`
   height: 40px;
   border-radius: 4px;
 `
-const StyledButtonGroupContainer = styled.div`
-  margin-top: 10px;
-  margin-bottom: 10px;
-`
+
 const ExplanationContainer = styled.div`
   margin: 10px;
   font-size: 0.875em;
@@ -50,17 +47,40 @@ const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
     backgroundColor: theme.custom.colors.white,
   },
   ...theme.typography.subtitle3,
+
+  // MUI's ToggleButtonGroup have a -1 margin offset that caused problems for our borders.
+  "&.MuiToggleButtonGroup-middleButton, .MuiToggleButtonGroup-lastButton": {
+    margin: 0,
+  },
+  /**
+   * 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.
+   */
+  containerType: "size",
+  boxSizing: "border-box",
+  "& > span": {
+    minWidth: "70px",
+  },
+  "@container (max-width: 85px)": {
+    "& > svg": {
+      display: "none",
+    },
+  },
 }))
 
 const ViewAllButton = styled(StyledToggleButton)`
-  border-right: 2px solid;
+  border-right: 1px solid;
   border-color: ${({ theme }) => theme.custom.colors.silverGrayLight};
   width: 20%;
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
 `
 const AcademicButton = styled(StyledToggleButton)`
-  border-right: 2px solid;
+  border-right: 1px solid;
   border-color: ${({ theme }) => theme.custom.colors.silverGrayLight};
   width: 40%;
 `
@@ -88,18 +108,18 @@ const ProfessionalToggle: React.FC<{
   }
 
   return (
-    <StyledButtonGroupContainer>
+    <div>
       <StyledToggleButtonGroup
         value={professionalSetting}
         exclusive
         onChange={handleChange}
       >
         <ViewAllButton value="">All</ViewAllButton>
         <AcademicButton value="false">
-          <StyledRiBookOpenLine /> Academic
+          <StyledRiBookOpenLine /> <span>Academic</span>
         </AcademicButton>
         <ProfesionalButton value="true">
-          <StyledRiBriefcase3Line /> Professional
+          <StyledRiBriefcase3Line /> <span>Professional</span>
         </ProfesionalButton>
       </StyledToggleButtonGroup>
       <Collapse in={professionalSetting === ""}>
@@ -117,7 +137,7 @@ const ProfessionalToggle: React.FC<{
           Content developed from MIT's professional curriculum
         </ExplanationContainer>
       </Collapse>
-    </StyledButtonGroupContainer>
+    </div>
   )
 }