Improve app responsiveness on mobile screen

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 {

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

services/course-material/src/components/ContentRenderer/core/common/Quote/QuoteBlock.tsx

@@ -7,6 +7,7 @@ import { GlossaryContext } from "../../../../../contexts/GlossaryContext"
 import InnerBlocks from "../../../util/InnerBlocks"
 import { parseText } from "../../../util/textParsing"
 
+import { respondToOrLarger } from "@/shared-module/common/styles/respond"
 import withErrorBoundary from "@/shared-module/common/utils/withErrorBoundary"
 
 interface ExtraAttributes {
@@ -18,7 +19,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;

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,

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

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">

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

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`

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 {

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 {

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 {

shared-module/packages/common/src/components/TopLevelPage.tsx

@@ -3,14 +3,14 @@ import styled from "@emotion/styled"
 import Link from "next/link"
 import React from "react"
 
-import { primaryFont } from "../styles"
+import { baseTheme, primaryFont } from "../styles"
 import { respondToOrLarger } from "../styles/respond"
 
 // eslint-disable-next-line i18next/no-literal-string
 const Content = styled.div`
   margin: 0 auto;
   max-width: 100%;
-  background: #ecf3f2;
+  background: rgb(242, 245, 247);
   display: flex;
   height: auto;
   align-items: center;
@@ -25,14 +25,14 @@ const Content = styled.div`
   transition: filter 0.2s;
   filter: brightness(100%) contrast(100%);
   &:hover {
-    filter: brightness(92%) contrast(110%);
+    background-color: rgb(235, 239, 242);
   }
 
   h3 {
     font-family: ${primaryFont};
     font-size: 22px;
     font-weight: 400;
-    color: #065853;
+    color: #1a2333;
   }
 
   span {
@@ -80,7 +80,7 @@ const TopLevelPage: React.FC<React.PropsWithChildren<React.PropsWithChildren<Top
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56.957 49" className="right-arrow">
           <path
             d="M32.466,0,29.321,3.146l19.123,19.11H0v4.475H48.444L29.321,45.854,32.466,49l24.49-24.506Z"
-            fill="#44827E"
+            fill="#1a2333"
           />
         </svg>
       </Content>