Shanbady/topic channel page header fixes (#1063)

* remove padding from FieldControls element

* making margin on breadcrumb 16px

* font size adjustments

* fixing width for right panel

* adding mail outline icon

* adjusting margins around text container and subscribe button

* visual tweaks

* changing body text

* minor visual tweaks

* padding tweaks

* fixing background placement and padding adjustments

* style fixes

* slight width adjustment

* font fixes

* ui tweaks

* removing unused alt attributes

* adding reversed banner images

* Revert "adding reversed banner images"

This reverts commit 9a72754.

* Reapply "adding reversed banner images"

This reverts commit 9a45c26.

* adding dimmable background

* some lint

* removing some margin

* removing duplicate css

* fixing lint

* fixing broken test

* background image size adjustment

* adding default bg constant

* fixing background dimming and zindex issues

* fixing banner padding to match figma

* fixing responsive sizing of channel box

* fixing padding

* fix ordering of elements

* lint fix and padding

* fixing interior padding for sm dimension

* lint fix

* lint fix

* padding adjustment

* pushed fix for padding

* revert heading change

Author: shanbady

frontends/mit-open/public/images/unit_banners/see.jpg

@@ -24,6 +24,7 @@ const FACETS_BY_CHANNEL_TYPE: Record<ChannelTypeEnum, string[]> = {
   [ChannelTypeEnum.Unit]: [
     "offerings",
     "audience",
+    "fee",
     "formats",
     "content_types",
     "certifications",
@@ -47,34 +48,42 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
     {
       name: "topic",
       title: "Topic",
+      order: 0,
     },
     {
       name: "formats",
       title: "Formats",
+      order: 0,
     },
     {
       name: "fee",
       title: "Fee",
+      order: 0,
     },
     {
       name: "department",
       title: "Department",
+      order: 0,
     },
     {
       name: "offerings",
       title: "Offerings",
+      order: -1,
     },
     {
       name: "level",
       title: "Level",
+      order: 0,
     },
     {
       name: "content_types",
       title: "Type of Content",
+      order: 0,
     },
     {
       name: "audience",
       title: "Audience",
+      order: 0,
     },
     {
       name: "more_information",
@@ -84,22 +93,27 @@ const getFacetManifest = (channelType: ChannelTypeEnum) => {
           {channelTitle} website <OpenInNewIcon fontSize="inherit" />
         </a>
       ),
+      order: 1,
     },
     {
       name: "platform",
       title: "Platform",
+      order: 0,
     },
     {
       name: "offered_by",
       title: "Offered By",
+      order: 0,
     },
     {
       name: "certifications",
       title: "Certificate",
+      order: 0,
     },
     {
       name: "learning_format",
       title: "Format",
+      order: 0,
       labelFunction: (key: string) =>
         key
           .split("_")
@@ -127,12 +141,15 @@ const InfoLabel = styled(Typography)(({ theme }) => ({
 const ChannelDetailsCard = styled(Box)(({ theme }) => ({
   borderRadius: "12px",
   backgroundColor: "white",
-  minWidth: "300px",
-  padding: "32px",
+  padding: "36px",
   display: "flex",
   flexDirection: "column",
   gap: "16px",
+  [theme.breakpoints.up("md")]: {
+    minWidth: "408px",
+  },
   [theme.breakpoints.down("md")]: {
+    padding: "16px",
     width: "100%",
   },
 }))
@@ -142,36 +159,45 @@ const ChannelDetails: React.FC<ChannelDetailsProps> = (props) => {
   const channelDetails = getChannelDetails(field)
   const channelType = field.channel_type
   const channelTitle = field.title
+
   const facetManifest = useMemo(
     () => getFacetManifest(channelType),
     [channelType],
   )
 
-  const body = facetManifest.map((value) => {
-    const detailValue = (
-      channelDetails as unknown as { [key: string]: string }
-    )[value.name]
-    if (detailValue) {
-      const label = value?.labelFunction
-        ? value.labelFunction(detailValue, channelTitle)
-        : detailValue
+  const body = facetManifest
+    .sort((a, b) =>
+      a?.order && b?.order && a?.order > b?.order
+        ? 1
+        : a?.order && b?.order && b?.order > a?.order
+          ? -1
+          : 0,
+    )
+    .map((value) => {
+      const detailValue = (
+        channelDetails as unknown as { [key: string]: string }
+      )[value.name]
+      if (detailValue) {
+        const label = value?.labelFunction
+          ? value.labelFunction(detailValue, channelTitle)
+          : detailValue
 
-      return (
-        <Box key={value.title}>
-          <InfoLabel
-            variant="subtitle2"
-            sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
-          >
-            {value.title}:
-          </InfoLabel>
-          <Typography variant="body3" color="text.secondary">
-            {Array.isArray(label) ? label.join(" | ") : label}
-          </Typography>
-        </Box>
-      )
-    }
-    return null
-  })
+        return (
+          <Box key={value.title}>
+            <InfoLabel
+              variant="subtitle2"
+              sx={{ marginBottom: (theme) => theme.typography.pxToRem(4) }}
+            >
+              {value.title}
+            </InfoLabel>
+            <Typography variant="body3" color="text.secondary">
+              {Array.isArray(label) ? label.join(" | ") : label}
+            </Typography>
+          </Box>
+        )
+      }
+      return null
+    })
   return <ChannelDetailsCard>{body}</ChannelDetailsCard>
 }
 

frontends/mit-open/public/images/unit_banners/xpro.jpg

@@ -10,6 +10,7 @@ import type { SimpleMenuItem } from "ol-components"
 import ExpandMoreSharpIcon from "@mui/icons-material/ExpandMoreSharp"
 import { useUserMe } from "api/hooks/user"
 import { SourceTypeEnum } from "api"
+import MailOutlineIcon from "@mui/icons-material/MailOutline"
 
 const SearchSubscriptionToggle = ({
   searchParams,
@@ -61,6 +62,7 @@ const SearchSubscriptionToggle = ({
     <Button
       variant="primary"
       disabled={subscriptionCreate.isLoading}
+      startIcon={<MailOutlineIcon />}
       onClick={() =>
         subscriptionCreate.mutateAsync({
           PercolateQuerySubscriptionRequestRequest: subscribeParams,

frontends/mit-open/src/page-components/ChannelDetails/ChannelDetails.tsx

@@ -24,7 +24,6 @@ const ArticlesDetailPage: React.FC = () => {
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="articles-detail-page"
     >
       <MetaTags>

frontends/mit-open/src/page-components/SearchSubscriptionToggle/SearchSubscriptionToggle.tsx

@@ -115,9 +115,11 @@ describe("FieldPage", () => {
     const header = title[0].closest("header")
     assertInstanceOf(header, HTMLElement)
     const images = within(header).getAllByRole("img") as HTMLImageElement[]
-
-    expect(images[0].src).toContain(field.configuration.banner_background)
-    expect(images[1].src).toContain(field.configuration.logo)
+    const headerStyles = getComputedStyle(header)
+    expect(headerStyles.backgroundImage).toContain(
+      field.configuration.banner_background,
+    )
+    expect(images[0].src).toContain(field.configuration.logo)
   })
   it("Displays a featured carousel if the channel type is 'unit'", async () => {
     const { field } = setupApis({

frontends/mit-open/src/pages/ArticleDetailsPage/ArticleDetailsPage.tsx

@@ -36,7 +36,6 @@ export const FieldControls = styled.div`
   position: relative;
   min-height: 38px;
   display: flex;
-  margin-bottom: 1em;
 `
 
 interface FieldSkeletonProps {
@@ -52,7 +51,10 @@ const NAV_PATH: { [key: string]: string } = {
 
 const NavText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.lightGray2,
-  marginBottom: "10px",
+  marginBottom: "16px",
+  [theme.breakpoints.down("md")]: {
+    marginBottom: "32px",
+  },
   ".current": {
     color: theme.custom.colors.silverGrayLight,
   },
@@ -94,10 +96,11 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
         displayConfiguration?.banner_background ??
         "/static/images/background_steps.jpeg"
       }
-      alt=""
       omitBackground={field.isLoading}
+      backgroundSize="2000px auto"
+      dim={30}
       bannerContent={
-        <Container sx={{ my: 2, py: "48px" }}>
+        <Container sx={{ pt: "48px", pb: "64px" }}>
           <NavText variant="subtitle3">
             Home / {NAV_PATH[channelType]} /{" "}
             <span className="current">{field.data?.title}</span>
@@ -120,13 +123,28 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                   display="flex"
                   flexDirection="column"
                   alignItems="start"
-                  sx={{ flexGrow: 24, flexShrink: 0, order: 1, width: "60%" }}
+                  sx={{
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    order: 1,
+                    width: "50%",
+                  }}
                 >
                   <Box
                     display="flex"
                     flexDirection="row"
                     alignItems="center"
-                    sx={{ flexGrow: 1, flexShrink: 0, order: 1, mt: 3 }}
+                    sx={(theme) => ({
+                      flexGrow: 1,
+                      flexShrink: 0,
+                      order: 1,
+                      py: "24px",
+
+                      [theme.breakpoints.down("md")]: {
+                        py: 0,
+                        pb: "8px",
+                      },
+                    })}
                   >
                     {displayConfiguration?.logo ? (
                       <FieldAvatar
@@ -136,7 +154,7 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                         field={field.data}
                       />
                     ) : (
-                      <Typography variant="h3" data-testid="header">
+                      <Typography variant="h1" data-testid="header">
                         <Link
                           to={routes.makeFieldViewPath(
                             field.data.channel_type,
@@ -157,8 +175,8 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                         flexGrow: 0,
                         flexShrink: 0,
                         order: 2,
-                        width: "90%",
-                        my: 2,
+                        width: { md: "80%", sm: "100%" },
+                        my: 1,
                       }}
                     >
                       <Typography variant="h4">
@@ -176,11 +194,11 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                       flexGrow: 0,
                       flexShrink: 0,
                       order: 2,
-                      width: "60%",
-                      my: 2,
+                      width: { md: "80%", sm: "100%" },
+                      my: 1,
                     }}
                   >
-                    <Typography variant="body2">
+                    <Typography variant="body1">
                       {displayConfiguration.sub_heading}
                     </Typography>
                   </Box>
@@ -194,7 +212,8 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                         width: "100%",
                         flexShrink: 1,
                         order: 3,
-                        my: 2,
+                        mt: { xs: "8px" },
+                        mb: { xs: "48px" },
                       }}
                     >
                       <FieldControls>
@@ -222,9 +241,9 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                     display="flex"
                     sx={{
                       order: 2,
-                      flexGrow: 1,
+                      flexGrow: 0,
                       flexShrink: 0,
-                      width: { md: "300px", xs: "100%" },
+                      width: { md: "408px", xs: "100%" },
                     }}
                   >
                     <ChannelDetails field={field.data} />
@@ -235,11 +254,12 @@ const FieldSkeletonProps: React.FC<FieldSkeletonProps> = ({
                     flexDirection="row"
                     alignItems="end"
                     sx={{
-                      flexGrow: 1,
+                      flexGrow: 0,
                       width: { md: "15%", xs: "100%" },
                       flexShrink: 0,
                       order: 2,
-                      my: 1,
+                      mt: { md: "0px", sm: "8px" },
+                      mb: { md: "0px", sm: "48px" },
                     }}
                   >
                     <FieldControls>

frontends/mit-open/src/pages/FieldPage/FieldPage.test.tsx

@@ -91,7 +91,6 @@ const LearningPathListingPage: React.FC = () => {
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="learningpaths-page"
     >
       <MetaTags>

frontends/mit-open/src/pages/FieldPage/FieldPageSkeleton.tsx

@@ -112,7 +112,6 @@ const ListDetailsPage: React.FC<ListDetailsPageProps> = ({
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="learningpaths-page"
     >
       <MetaTags>

frontends/mit-open/src/pages/LearningPathListingPage/LearningPathListingPage.tsx

@@ -159,7 +159,6 @@ const UserListListingPage: React.FC = () => {
   return (
     <BannerPage
       src="/static/images/course_search_banner.png"
-      alt=""
       className="learningpaths-page"
     >
       <MetaTags>