Improve app responsiveness on mobile screen (#1382)

* sync fontColor and backgroundColor of HeroSectionEditor with defaults * refactor HeroSectionEditor to use useEffect * refactor code * [mobile-responsiveness]: update Chapter Card Grid styles * [mobile-responsiveness]: update padding in Learning Objectives block * [mobile-responsiveness]: update color of TopLevelPage block * [mobile-responsiveness]: dynamically add padding-left to breadcrumbs * [mobile-responsiveness]: dynamically add padding to AsideBlock and InfoBox * [mobile-responsiveness]: update padding for QuoteBlock * [mobile-responsiveness]: update padding for HightligtBox * [mobile-responsiveness]: update padding for InstructionBox * [mobile-responsiveness]: fix chapter-progress ui bug * [mobile-responsiveness]: update pages-in-chapter heading * [mobile-responsiveness]: update highlightItem border color to be a shade of the its bgColor * [mobile-responsiveness]: add padding to Highlight container * [mobile-responsiveness]: update NextSectionLink when next course is locked * remove trailing 0 from HighlightItem when value is 0 * remove unused import * update snapshot test * convert px to rem
rage · Feb 6, 2025 · 03f8c1b · 03f8c1b
1 parent 468d3e2
commit 03f8c1b
Show file tree

Hide file tree

Showing 143 changed files with 92 additions and 40 deletions.
diff --git a/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx b/services/cms/src/blocks/HeroSection/HeroSectionEditor.tsx
@@ -2,7 +2,7 @@
 import { css } from "@emotion/css"
 import { InspectorControls, RichText } from "@wordpress/block-editor"
 import { BlockEditProps } from "@wordpress/blocks"
-import React, { useContext } from "react"
+import React, { useContext, useEffect } from "react"
 
 import BackgroundAndColorCustomizer from "../../components/blocks/BackgroundAndColorCustomizer"
 import PageContext from "../../contexts/PageContext"
@@ -33,6 +33,17 @@ const HeroSectionEditor: React.FC<
 
   const backgroundVerticalAlignment = alignBottom ? "bottom" : "center"
 
+  const WHITE = "#FFFFFF"
+
+  useEffect(() => {
+    if (!attributes.fontColor) {
+      setAttributes({ fontColor: baseTheme.colors.gray[700] })
+    }
+    if (!attributes.backgroundColor) {
+      setAttributes({ backgroundColor: WHITE })
+    }
+  }, [attributes.backgroundColor, attributes.fontColor, setAttributes])
+
   return (
     <BlockWrapper id={clientId}>
       <InspectorControls key="settings">
@@ -52,7 +63,7 @@ const HeroSectionEditor: React.FC<
             padding: 7.5em 1em;
             margin-bottom: 3rem;
 
-            background-color: ${backgroundColor ? backgroundColor : baseTheme.colors.green["200"]};
+            background-color: ${backgroundColor};
             position: relative;
 
             &::after {

diff --git a/services/cms/src/components/blocks/BackgroundAndColorCustomizer.tsx b/services/cms/src/components/blocks/BackgroundAndColorCustomizer.tsx
@@ -20,7 +20,14 @@ const DEFAULT_BACKGROUND_COLORS = [
   { color: baseTheme.colors.blue[100], name: "lightblue" },
 ]
 
+const DEFAULT_FONT_COLORS = [
+  { color: baseTheme.colors.gray[700], name: "gray-1" },
+  { color: baseTheme.colors.gray[600], name: "gray-2" },
+  { color: baseTheme.colors.gray[500], name: "gray-3" },
+]
+
 const WHITE = "#FFFFFF"
+const GRAY = baseTheme.colors.gray[700]
 
 const ALLOWED_MIMETYPES_FOR_UPLOAD = ["image/svg+xml"]
 
@@ -108,10 +115,10 @@ const BackgroundAndColorCustomizer: React.FC<
       >
         <ColorPalette
           disableCustomColors={false}
-          value={attributes.fontColor ?? WHITE}
+          value={attributes.fontColor ?? GRAY}
           onChange={(fontColor) => setAttributes({ fontColor })}
           clearable={false}
-          colors={DEFAULT_BACKGROUND_COLORS}
+          colors={DEFAULT_FONT_COLORS}
         />
       </Placeholder>
       <CheckBox

diff --git a/services/course-material/src/components/ContentRenderer/core/common/Quote/QuoteBlock.tsx b/services/course-material/src/components/ContentRenderer/core/common/Quote/QuoteBlock.tsx
@@ -18,7 +18,7 @@ const QuoteBlock: React.FC<BlockRendererProps<QuoteAttributes & ExtraAttributes>
   const { terms } = useContext(GlossaryContext)
 
   const styleLeftDefault = css`
-    padding: 0.5rem 2rem;
+    padding: 0.4rem 1rem;
     margin: 2.5rem 0;
     max-width: 100%;
     border-left: 7px solid #bdc7d1;

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/AsideBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/AsideBlock.tsx
@@ -4,6 +4,7 @@ import React from "react"
 import { BlockRendererProps } from ".."
 import InnerBlocks from "../util/InnerBlocks"
 
+import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 
 interface AsideBlockProps {
@@ -17,11 +18,15 @@ const AsideBLock: React.FC<React.PropsWithChildren<BlockRendererProps<AsideBlock
   return (
     <div
       className={css`
-        padding: 2rem;
+        padding: 0rem 0.8rem;
         border-top: 0.4rem solid ${props.data.attributes.separatorColor};
         border-bottom: 0.4rem solid ${props.data.attributes.separatorColor};
         background: ${props.data.attributes.backgroundColor};
 
+        ${respondToOrLarger.md} {
+          padding: 1rem 2rem;
+        }
+
         h1,
         h2,
         h3,

diff --git a/...ntentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/HilightItem.tsx b/...ntentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/HilightItem.tsx
@@ -1,6 +1,6 @@
 import { css, cx } from "@emotion/css"
 
-import { baseTheme, headingFont } from "@/shared-module/common/styles"
+import { headingFont } from "@/shared-module/common/styles"
 import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 
 const highlightItemStyle = css`
@@ -16,7 +16,7 @@ const highlightItemStyle = css`
 
 // eslint-disable-next-line i18next/no-literal-string
 const highlightItemLeftBorder = css`
-  border-left: 2px solid ${baseTheme.colors.gray[100]};
+  border-left: 2px solid #e4eaee;
 `
 
 interface HighlightItemProps {

diff --git a/...nts/ContentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/index.tsx b/...nts/ContentRenderer/moocfi/CourseProgressBlock/CompletionRequirementsTabulation/index.tsx
@@ -8,6 +8,7 @@ import { baseTheme } from "@/shared-module/common/styles"
 const HighlightContainer = styled.div`
   display: flex;
   flex-direction: row;
+  padding: 1rem 0;
 `
 
 export interface CompletionRequirementsTabulationProps {
@@ -29,7 +30,7 @@ const CompletionRequirementsTabulation: React.FC<
             highlightText={pointsRequiredForCompletion}
           />
         )}
-        {attemptedExercisesRequiredForCompletion && (
+        {!!attemptedExercisesRequiredForCompletion && (
           <HighlightItem
             highlightColor={baseTheme.colors.gradient["blue"]}
             highlightDescription={t("attempted-exercises-required-for-completion")}

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/HighglightBox.tsx b/services/course-material/src/components/ContentRenderer/moocfi/HighglightBox.tsx
@@ -22,10 +22,14 @@ const HightlightBlock: React.FC<
     <>
       <div
         className={css`
-          padding: 1rem 1.5rem;
           background-color: #fafbfb;
           margin: 1rem 0;
           border: 1px solid #e2e4e6;
+          padding: 1rem 0rem;
+
+          ${respondToOrLarger.md} {
+            padding: 1rem 1.5rem;
+          }
         `}
       >
         <div

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/InfoBox.tsx b/services/course-material/src/components/ContentRenderer/moocfi/InfoBox.tsx
@@ -6,6 +6,7 @@ import InnerBlocks from "../util/InnerBlocks"
 
 import BreakFromCentered from "@/shared-module/common/components/Centering/BreakFromCentered"
 import Centered from "@/shared-module/common/components/Centering/Centered"
+import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 
 interface InfoBoxBlockAttributes {
@@ -20,8 +21,12 @@ const InfoBoxBlock: React.FC<
     <BreakFromCentered sidebar={false}>
       <div
         className={css`
-          ${!props.data.attributes.noPadding && `padding: 3rem;`}
+          padding: 1rem 0;
           background-color: ${props.data.attributes.backgroundColor};
+
+          ${respondToOrLarger.md} {
+            ${!props.data.attributes.noPadding && `          padding: 3rem;`}
+          }
         `}
       >
         <Centered variant="narrow">

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/InstructionBox.tsx b/services/course-material/src/components/ContentRenderer/moocfi/InstructionBox.tsx
@@ -19,18 +19,25 @@ const InstructionBlock: React.FC<
     <>
       <div
         className={css`
-          padding: 1rem 1.5rem;
+          padding: 1rem 0rem;
           background-color: #f2f7fc;
           margin: 1rem 0;
           border: 2px ${baseTheme.colors.purple[300]} dashed;
+          ${respondToOrLarger.md} {
+            padding: 1rem 1.5rem;
+          }
         `}
       >
         <div
           className={css`
             max-width: 48rem;
             margin-left: auto;
             margin-right: auto;
-            padding: 0rem 1.375rem;
+            padding: 0rem 1rem;
+
+            ${respondToOrLarger.md} {
+              padding: 0rem 1.375rem;
+            }
 
             span {
               font-size: 18px;
@@ -40,9 +47,6 @@ const InstructionBlock: React.FC<
                 font-size: 20px;
               }
             }
-            ${respondToOrLarger.md} {
-              padding: 0rem;
-            }
           `}
         >
           <span

diff --git a/services/course-material/src/components/ContentRenderer/moocfi/LearningObjectiveBlock.tsx b/services/course-material/src/components/ContentRenderer/moocfi/LearningObjectiveBlock.tsx
@@ -17,7 +17,11 @@ import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 const Wrapper = styled.div`
   margin: 2rem auto;
   background: #f0f5f5;
-  padding: 1.5rem 2.2rem;
+  padding: 0.5rem 1.5rem;
+
+  ${respondToOrLarger.md} {
+    padding: 1.5rem 2.2rem;
+  }
   height: auto;
 `
 const Header = styled.div`

diff --git a/...es/course-material/src/components/ContentRenderer/moocfi/NavigationContainer/NextPage.tsx b/...es/course-material/src/components/ContentRenderer/moocfi/NavigationContainer/NextPage.tsx
@@ -62,14 +62,18 @@ const ChapterProgress = styled.div`
   }
 
   .attempted-exercises {
-    margin-right: 1.2rem;
+    margin-right: 1.4rem;
   }
 
   .description {
     opacity: 80%;
     line-height: 100%;
-    align-self: end;
+    align-self: start;
     padding-top: 0.2rem;
+
+    ${respondToOrLarger.md} {
+      align-self: end;
+    }
   }
 
   .answers,

diff --git a/...rse-material/src/components/ContentRenderer/moocfi/PagesInChapterBlock/PagesInChapter.tsx b/...rse-material/src/components/ContentRenderer/moocfi/PagesInChapterBlock/PagesInChapter.tsx
@@ -9,6 +9,7 @@ import { coursePageRoute } from "../../../../utils/routing"
 import ErrorBanner from "@/shared-module/common/components/ErrorBanner"
 import PagesInChapterBox from "@/shared-module/common/components/PagesInChapterBox"
 import Spinner from "@/shared-module/common/components/Spinner"
+import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 import { INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS } from "@/shared-module/common/utils/constants"
 
 export interface PagesInChapterProps {
@@ -40,11 +41,15 @@ const PagesInChapter: React.FC<React.PropsWithChildren<PagesInChapterProps>> = (
             className={cx(
               INCLUDE_THIS_HEADING_IN_HEADINGS_NAVIGATION_CLASS,
               css`
-                font-size: 1.875rem;
+                font-size: 1.5rem;
                 font-weight: 500;
                 text-align: center;
                 color: #1a2333;
                 margin-bottom: 1.6rem;
+
+                ${respondToOrLarger.md} {
+                  font-size: 1.875rem;
+                }
               `,
             )}
           >

diff --git a/services/course-material/src/components/FeedbackDialog.tsx b/services/course-material/src/components/FeedbackDialog.tsx
@@ -178,7 +178,7 @@ const FeedbackDialog: React.FC<React.PropsWithChildren<Props>> = ({
                     font-family: ${primaryFont};
                     font-style: normal;
                     font-weight: normal;
-                    font-size: 16px;
+                    font-size: 1rem;
                     line-height: 20px;
                     color: #3b4754;
 
@@ -195,7 +195,7 @@ const FeedbackDialog: React.FC<React.PropsWithChildren<Props>> = ({
                     font-family: ${primaryFont};
                     font-style: normal;
                     font-weight: normal;
-                    font-size: 13px;
+                    font-size: 0.813rem;
                     line-height: 16px;
                     color: rgba(117, 117, 117, 0.6);
 

diff --git a/services/course-material/src/components/HeroSection.tsx b/services/course-material/src/components/HeroSection.tsx
@@ -115,7 +115,7 @@ const HeroSection: React.FC<React.PropsWithChildren<React.PropsWithChildren<Card
         margin-bottom: 3rem;
         /** There should not be empty space before the hero section, so we'll undo the default block margin **/
         margin-top: -${COURSE_MATERIAL_DEFAULT_BLOCK_MARGIN_REM}rem;
-        background-color: ${backgroundColor ? backgroundColor : baseTheme.colors.green["200"]};
+        background-color: ${backgroundColor};
         position: relative;
 
         &::after {

diff --git a/shared-module/packages/common/src/components/Breadcrumbs.tsx b/shared-module/packages/common/src/components/Breadcrumbs.tsx
@@ -3,6 +3,8 @@ import styled from "@emotion/styled"
 import Link from "next/link"
 import { useTranslation } from "react-i18next"
 
+import { respondToOrLarger } from "../styles/respond"
+
 const StyledBreadcrumb = styled.div`
   font-size: 1rem;
   margin: 0;
@@ -14,6 +16,11 @@ const StyledBreadcrumb = styled.div`
       display: flex;
       flex-wrap: wrap;
       gap: 0.75rem;
+      padding-left: 0;
+
+      ${respondToOrLarger.md} {
+        padding-left: 2rem;
+      }
     }
 
     .group {

diff --git a/shared-module/packages/common/src/components/Card/SimpleCard.tsx b/shared-module/packages/common/src/components/Card/SimpleCard.tsx
@@ -46,8 +46,12 @@ const CardContentWrapper = styled.div`
     z-index: 20;
     color: #fff;
     font-weight: 500;
-    line-height: 100%;
-    font-size: clamp(28px, 2.7rem, 46px);
+    line-height: 110%;
+    font-size: 1.875rem;
+
+    ${respondToOrLarger.lg} {
+      font-size: clamp(28px, 2.7rem, 46px);
+    }
   }
 
   span {

diff --git a/shared-module/packages/common/src/components/NextSectionLink.tsx b/shared-module/packages/common/src/components/NextSectionLink.tsx
@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next"
 
 import ArrowSVGIcon from "../img/arrow.svg"
 import BackArrowIcon from "../img/backarrow.svg"
-import LockIcon from "../img/lock.svg"
 import TopArrowSVGIcon from "../img/up-arrow.svg"
 import { baseTheme, headingFont, typography } from "../styles"
 import { respondToOrLarger } from "../styles/respond"
@@ -214,6 +213,7 @@ const NextSectionLink: React.FC<
                     overflow: hidden;
                     white-space: nowrap;
                     text-overflow: ellipsis;
+                    display: inline-grid;
 
                     .next-page-title {
                       display: block;
@@ -274,7 +274,7 @@ const NextSectionLink: React.FC<
                     }
                   `}
                 >
-                  {url ? (
+                  {url && (
                     <ArrowSVGIcon
                       id="right-svg-icon"
                       role="presentation"
@@ -283,15 +283,6 @@ const NextSectionLink: React.FC<
                       height="30"
                       viewBox="0 0 39 39"
                     />
-                  ) : (
-                    <LockIcon
-                      id="svg-icon"
-                      role="presentation"
-                      alt=""
-                      width="24"
-                      height="36"
-                      viewBox="0 0 24 36"
-                    />
                   )}
                 </div>
               </div>