feat: increased Course home font size

vladislavkeblysh · vladislavkeblysh · commit 6bb5c60e377b · 2025-02-24T19:27:59.000+02:00
diff --git a/src/alerts/course-start-alert/CourseStartAlert.jsx b/src/alerts/course-start-alert/CourseStartAlert.jsx
@@ -40,7 +40,7 @@ const CourseStartAlert = ({ payload }) => {
   );
   if (delta < DAY_MS) {
     return (
-      <Alert variant="info" icon={Info}>
+      <Alert className="course-start-info-alert" variant="info" icon={Info}>
         <FormattedMessage
           id="learning.outline.alert.start.short"
           defaultMessage="Course starts {timeRemaining} at {courseStartTime}."
@@ -65,7 +65,7 @@ const CourseStartAlert = ({ payload }) => {
   }
 
   return (
-    <Alert variant="info" icon={Info}>
+    <Alert className="course-start-info-alert" variant="info" icon={Info}>
       <strong>
         <FormattedMessage
           id="learning.outline.alert.start.long"
diff --git a/src/alerts/course-start-alert/CourseStartAlert.scss b/src/alerts/course-start-alert/CourseStartAlert.scss
@@ -0,0 +1,3 @@
+.course-start-info-alert.alert-content {
+  font-size: $font-size-base;
+}
diff --git a/src/course-home/outline-tab/DateSummary.jsx b/src/course-home/outline-tab/DateSummary.jsx
@@ -5,6 +5,8 @@ import { FormattedDate } from '@edx/frontend-platform/i18n';
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
 import { useModel } from '../../generic/model-store';
 import { isLearnerAssignment } from '../dates-tab/utils';
 import './DateSummary.scss';
@@ -19,6 +21,7 @@ const DateSummary = ({
   const {
     org,
   } = useModel('courseHomeMeta', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const linkedTitle = dateBlock.link && isLearnerAssignment(dateBlock);
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
@@ -35,7 +38,7 @@ const DateSummary = ({
   };
 
   return (
-    <li className="p-0 mb-3 small text-dark-500">
+    <li className={classNames('p-0 mb-3 text-dark-500', { small: !wideScreen })}>
       <div className="row">
         <FontAwesomeIcon icon={faCalendarAlt} className="ml-3 mt-1 mr-1" fixedWidth />
         <div className="ml-1 font-weight-bold">
diff --git a/src/course-home/outline-tab/widgets/CourseDates.jsx b/src/course-home/outline-tab/widgets/CourseDates.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -22,6 +24,7 @@ const CourseDates = ({
       datesTabLink,
     },
   } = useModel('outline', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   if (courseDateBlocks.length === 0) {
     return null;
@@ -40,7 +43,10 @@ const CourseDates = ({
             />
           ))}
         </ol>
-        <a className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
+        <a
+          className={classNames('font-weight-bold ml-4 pl-1', { small: !wideScreen })}
+          href={datesTabLink}
+        >
           {intl.formatMessage(messages.allDates)}
         </a>
       </div>
diff --git a/src/course-home/outline-tab/widgets/CourseHandouts.jsx b/src/course-home/outline-tab/widgets/CourseHandouts.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import classNames from 'classnames';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
@@ -14,6 +16,7 @@ const CourseHandouts = ({ intl }) => {
   const {
     handoutsHtml,
   } = useModel('outline', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   if (!handoutsHtml) {
     return null;
@@ -23,7 +26,7 @@ const CourseHandouts = ({ intl }) => {
     <section className="mb-4">
       <h2 className="h4">{intl.formatMessage(messages.handouts)}</h2>
       <LmsHtmlFragment
-        className="small"
+        className={classNames({ small: !wideScreen })}
         html={handoutsHtml}
         title={intl.formatMessage(messages.handouts)}
       />
diff --git a/src/course-home/outline-tab/widgets/CourseTools.jsx b/src/course-home/outline-tab/widgets/CourseTools.jsx
@@ -9,6 +9,8 @@ import {
   faBookmark, faCertificate, faInfo, faCalendar, faStar,
 } from '@fortawesome/free-solid-svg-icons';
 import { faNewspaper } from '@fortawesome/free-regular-svg-icons';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import classNames from 'classnames';
 
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
@@ -22,6 +24,7 @@ const CourseTools = ({ intl }) => {
   const {
     courseTools,
   } = useModel('outline', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   if (courseTools.length === 0) {
     return null;
@@ -66,14 +69,14 @@ const CourseTools = ({ intl }) => {
       <h2 className="h4">{intl.formatMessage(messages.tools)}</h2>
       <ul className="list-unstyled">
         {courseTools.map((courseTool) => (
-          <li key={courseTool.analyticsId} className="small">
+          <li key={courseTool.analyticsId} className={classNames({ small: !wideScreen })}>
             <a href={courseTool.url} onClick={() => logClick(courseTool.analyticsId)}>
               <FontAwesomeIcon icon={renderIcon(courseTool.analyticsId)} className="mr-2" fixedWidth />
               {courseTool.title}
             </a>
           </li>
         ))}
-        <li className="small" id="courseHome-launchTourLink">
+        <li id="courseHome-launchTourLink" className={classNames({ small: !wideScreen })}>
           <LaunchCourseHomeTourButton />
         </li>
       </ul>
diff --git a/src/course-home/outline-tab/widgets/FlagButton.jsx b/src/course-home/outline-tab/widgets/FlagButton.jsx
@@ -1,36 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
 
 const FlagButton = ({
   buttonIcon,
   title,
   text,
   handleSelect,
   isSelected,
-}) => (
-  <button
-    type="button"
-    className={classnames(
-      'flag-button row w-100 align-content-between m-1.5 py-3.5',
-      isSelected ? 'flag-button-selected' : '',
-    )}
-    aria-checked={isSelected}
-    role="radio"
-    onClick={() => handleSelect()}
-    data-testid={`weekly-learning-goal-input-${title}`}
-  >
-    <div className="row w-100 m-0 justify-content-center pb-1">
-      {buttonIcon}
-    </div>
-    <div className={classnames('row w-100 m-0 justify-content-center small text-gray-700 pb-1', isSelected ? 'font-weight-bold' : '')}>
-      {title}
-    </div>
-    <div className={classnames('row w-100 m-0 justify-content-center micro text-gray-500', isSelected ? 'font-weight-bold' : '')}>
-      {text}
-    </div>
-  </button>
-);
+}) => {
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
+  return (
+    <button
+      type="button"
+      className={classnames(
+        'flag-button row w-100 align-content-between m-1.5 py-3.5',
+        isSelected ? 'flag-button-selected' : '',
+      )}
+      aria-checked={isSelected}
+      role="radio"
+      onClick={() => handleSelect()}
+      data-testid={`weekly-learning-goal-input-${title}`}
+    >
+      <div className="row w-100 m-0 justify-content-center pb-1">
+        {buttonIcon}
+      </div>
+      <div className={classnames(
+        'row w-100 m-0 justify-content-center text-gray-700 pb-1',
+        isSelected ? 'font-weight-bold' : '',
+        { small: !wideScreen },
+      )}
+      >
+        {title}
+      </div>
+      <div className={classnames(
+        'row w-100 m-0 justify-content-center small text-gray-500',
+        isSelected ? 'font-weight-bold' : '',
+        { small: !wideScreen },
+      )}
+      >
+        {text}
+      </div>
+    </button>
+  );
+};
 
 FlagButton.propTypes = {
   buttonIcon: PropTypes.element.isRequired,
diff --git a/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
@@ -2,7 +2,10 @@ import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
 
-import { Form, Card, Icon } from '@openedx/paragon';
+import {
+  Form, Card, Icon, useWindowSize, breakpoints,
+} from '@openedx/paragon';
+import classNames from 'classnames';
 import { history } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
@@ -23,6 +26,7 @@ const WeeklyLearningGoalCard = ({
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     isMasquerading,
@@ -94,11 +98,11 @@ const WeeklyLearningGoalCard = ({
       data-testid="weekly-learning-goal-card"
     >
       <Card.Header
-        size="sm"
+        size={!wideScreen ? 'sm' : 'md'}
         title={(<div id="set-weekly-goal-header">{intl.formatMessage(messages.setWeeklyGoal)}</div>)}
         subtitle={intl.formatMessage(messages.setWeeklyGoalDetail)}
       />
-      <Card.Section className="text-gray-700 small">
+      <Card.Section className={classNames('text-gray-700', { small: !wideScreen })}>
         <div
           role="radiogroup"
           aria-labelledby="set-weekly-goal-header"
@@ -125,14 +129,17 @@ const WeeklyLearningGoalCard = ({
             checked={isGetReminderSelected}
             onChange={(event) => handleSubscribeToReminders(event)}
             disabled={!daysPerWeekGoal}
+            className={classNames({ small: !wideScreen })}
           >
-            <small>{intl.formatMessage(messages.setGoalReminder)}</small>
+            {wideScreen
+              ? intl.formatMessage(messages.setGoalReminder)
+              : <small>{intl.formatMessage(messages.setGoalReminder)}</small>}
           </Form.Switch>
         </div>
       </Card.Section>
       {isGetReminderSelected && (
         <Card.Section muted>
-          <div className="row w-100 m-0 small align-center">
+          <div className="row w-100 m-0 align-center">
             <div className="d-flex align-items-center pr-1">
               <Icon
                 className="text-primary-500"
diff --git a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
@@ -1,11 +1,13 @@
-import { useState, useMemo, useRef } from 'react';
+import React, {
+  useState, useRef, useEffect, useMemo,
+} from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Button, TransitionReplace } from '@openedx/paragon';
 import truncate from 'truncate-html';
 
 import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import LmsHtmlFragment from '../LmsHtmlFragment';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
@@ -38,16 +40,28 @@ const WelcomeMessage = ({ courseId, nextElementRef }) => {
 
   const [showShortMessage, setShowShortMessage] = useState(messageCanBeShortened);
   const dispatch = useDispatch();
+  const alertRef = useRef(null);
 
   if (!welcomeMessageHtml) {
     return null;
   }
 
+  useEffect(() => {
+    // TODO: Temporary solution due to a bug in the Paragon Alert component
+    // that prevents changing the button sizes. Delete after correction.
+    // Issue: https://github.com/openedx/paragon/issues/3205
+    if (alertRef.current) {
+      const buttons = alertRef.current.querySelectorAll('button.btn-sm');
+      buttons.forEach(btn => btn.classList.remove('btn-sm'));
+    }
+  }, [showShortMessage]);
+
   return (
     <Alert
       data-testid="alert-container-welcome"
       variant="light"
       stacked
+      ref={alertRef}
       dismissible
       show={display}
       onClose={() => {
diff --git a/src/generic/upgrade-notification/UpgradeNotification.jsx b/src/generic/upgrade-notification/UpgradeNotification.jsx
@@ -3,7 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useIntl, FormattedDate, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { Button, Icon, IconButton } from '@openedx/paragon';
+import {
+  Button, Icon, IconButton, useWindowSize, breakpoints,
+} from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 import { setLocalStorage } from '../../data/localStorage';
 import { UpgradeButton } from '../upgrade-button';
@@ -293,6 +295,7 @@ const UpgradeNotification = ({
   const correctedTime = new Date(dateNow + timeOffsetMillis);
   const accessExpirationDate = accessExpiration ? new Date(accessExpiration.expirationDate) : null;
   const pastExpirationDeadline = accessExpiration ? new Date(dateNow) > accessExpirationDate : false;
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const eventProperties = {
     org_key: org,
@@ -485,7 +488,10 @@ const UpgradeNotification = ({
   }
 
   return (
-    <section className={classNames('upgrade-notification small', { 'card mb-4': shouldDisplayBorder })}>
+    <section className={classNames('upgrade-notification small', {
+      'card mb-4': shouldDisplayBorder, small: !wideScreen,
+    })}
+    >
       <div id="courseHome-upgradeNotification">
         <h2
           className={classNames('h5 upgrade-notification-header', {
diff --git a/src/index.scss b/src/index.scss
@@ -448,12 +448,12 @@
   .course-outline-tab .pgn__card {
     .pgn__card-header {
       display: block;
-  
+
       .pgn__card-header-content {
         margin-top: 0;
       }
     }
-    
+
     .pgn__card-header-actions {
       margin-left: 0;
     }
@@ -477,6 +477,7 @@
 @import "course-home/progress-tab/grades/course-grade/GradeBar.scss";
 @import "courseware/course/course-exit/CourseRecommendations";
 @import "product-tours/newUserCourseHomeTour/NewUserCourseHomeTourModal.scss";
+@import "alerts/course-start-alert/CourseStartAlert.scss";
 @import "course-home/courseware-search/courseware-search.scss";
 @import "course-tabs/course-tabs-navigation.scss";
 @import "courseware/course/sidebar/common/SidebarBase.scss";

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.course-start-info-alert.alert-content {`
	`2`	`+ font-size: $font-size-base;`
	`3`	`+}`