feat: increased font size for Dates and Course unit pages

Author: vladislavkeblysh

src/course-home/dates-tab/timeline/Day.jsx

@@ -8,7 +8,9 @@ import {
   injectIntl,
   intlShape,
 } from '@edx/frontend-platform/i18n';
-import { Tooltip, OverlayTrigger } from '@openedx/paragon';
+import {
+  Tooltip, OverlayTrigger, breakpoints, useWindowSize,
+} from '@openedx/paragon';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -30,6 +32,7 @@ const Day = ({
   const {
     userTimezone,
   } = useModel('courseHomeMeta', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
@@ -69,9 +72,13 @@ const Day = ({
           const textColor = available ? 'text-primary-700' : 'text-gray-500';
 
           return (
-            <div key={item.title + item.date} className={classNames(textColor, 'small pb-1')} data-testid="dates-item">
+            <div
+              key={item.title + item.date}
+              className={classNames(textColor, 'pb-1', { small: !wideScreen })}
+              data-testid="dates-item"
+            >
               <div>
-                <span className="small">
+                <span className={classNames({ small: !wideScreen })}>
                   <span className="font-weight-bold">{item.assignmentType && `${item.assignmentType}: `}{title}</span>
                   {showDueDateTime && (
                     <span>
@@ -96,7 +103,11 @@ const Day = ({
                   </OverlayTrigger>
                 )}
               </div>
-              {item.description && <div className="small mb-2">{item.description}</div>}
+              {item.description && (
+                <div className={classNames('mb-2', { small: !wideScreen })}>
+                  {item.description}
+                </div>
+              )}
             </div>
           );
         })}

src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
@@ -8,6 +9,8 @@ import {
   Button,
   Row,
   Col,
+  breakpoints,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { resetDeadlines } from '../data';
@@ -18,6 +21,7 @@ const ShiftDatesAlert = ({ fetch, intl, model }) => {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     datesBannerInfo,
@@ -38,14 +42,17 @@ const ShiftDatesAlert = ({ fetch, intl, model }) => {
   return (
     <Alert variant="warning">
       <Row className="w-100 m-0">
-        <Col xs={12} md={9} className="small p-0 pr-md-2">
+        <Col
+          xs={12}
+          md={9}
+          className={classNames('p-0 pr-md-2 shift-dates-alert-text', { small: !wideScreen })}
+        >
           <strong>{intl.formatMessage(messages.missedDeadlines)}</strong>
           {' '}{intl.formatMessage(messages.shiftDatesBody)}
         </Col>
         <Col xs={12} md={3} className="align-self-center text-right mt-3 mt-md-0 p-0">
           <Button
-            variant="primary"
-            size="sm"
+            size={!wideScreen ? 'sm' : 'md'}
             className="w-xs-100 w-md-auto"
             onClick={() => dispatch(resetDeadlines(courseId, model, fetch))}
           >

src/course-home/suggested-schedule-messaging/SuggestedScheduleMessaging.scss

@@ -0,0 +1,10 @@
+.upgrade-to-complete-alert-title.h4 {
+  font-size: $h3-font-size;
+  font-weight: $font-weight-bold;
+}
+
+.upgrade-to-complete-alert-text,
+.upgrade-to-shift-dates-alert-text,
+.shift-dates-alert-text {
+  font-size: $font-size-base;
+}

src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Alert,
   Button,
   Col,
   Row,
+  breakpoints,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { useModel } from '../../generic/model-store';
@@ -16,6 +19,7 @@ const UpgradeToCompleteAlert = ({ intl, logUpgradeLinkClick }) => {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     datesBannerInfo,
@@ -35,14 +39,18 @@ const UpgradeToCompleteAlert = ({ intl, logUpgradeLinkClick }) => {
   return (
     <Alert className="bg-light-200">
       <Row className="w-100 m-0">
-        <Col xs={12} md={9} className="small p-0 pr-md-2">
-          <Alert.Heading>{intl.formatMessage(messages.upgradeToCompleteHeader)}</Alert.Heading>
-          {intl.formatMessage(messages.upgradeToCompleteBody)}
+        <Col xs={12} md={9} className={classNames('p-0 pr-md-2', { small: !wideScreen })}>
+          <Alert.Heading className={classNames({ 'upgrade-to-complete-alert-title': wideScreen })}>
+            {intl.formatMessage(messages.upgradeToCompleteHeader)}
+          </Alert.Heading>
+          <p className={classNames({ 'upgrade-to-complete-alert-text m-0': wideScreen })}>
+            {intl.formatMessage(messages.upgradeToCompleteBody)}
+          </p>
         </Col>
         <Col xs={12} md={3} className="align-self-center text-right mt-3 mt-md-0 p-0">
           <Button
             variant="brand"
-            size="sm"
+            size={!wideScreen ? 'sm' : 'md'}
             className="w-xs-100 w-md-auto"
             onClick={() => {
               logUpgradeLinkClick();

src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
   Alert,
   Button,
   Row,
   Col,
+  breakpoints,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { useModel } from '../../generic/model-store';
@@ -17,6 +20,7 @@ const UpgradeToShiftDatesAlert = ({ intl, logUpgradeLinkClick, model }) => {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     datesBannerInfo,
@@ -37,14 +41,18 @@ const UpgradeToShiftDatesAlert = ({ intl, logUpgradeLinkClick, model }) => {
   return (
     <Alert className="bg-light-200">
       <Row className="w-100 m-0">
-        <Col xs={12} md={9} className="small p-0 pr-md-2">
+        <Col
+          xs={12}
+          md={9}
+          className={classNames('p-0 pr-md-2', { 'upgrade-to-shift-dates-alert-text': wideScreen })}
+        >
           <strong>{intl.formatMessage(messages.missedDeadlines)}</strong>
           {' '}{intl.formatMessage(messages.upgradeToShiftBody)}
         </Col>
         <Col xs={12} md={3} className="align-self-center text-right mt-3 mt-md-0 p-0">
           <Button
             variant="brand"
-            size="sm"
+            size={!wideScreen ? 'sm' : 'md'}
             className="w-xs-100 w-md-auto"
             onClick={() => {
               logUpgradeLinkClick();

src/courseware/course/sidebar/sidebars/notifications/NotificationTray.jsx

@@ -108,7 +108,7 @@ const NotificationTray = ({ intl }) => {
             />
           </PluginSlot>
         ) : (
-          <p className="p-3 small">{intl.formatMessage(messages.noNotificationsMessage)}</p>
+          <p className="p-3">{intl.formatMessage(messages.noNotificationsMessage)}</p>
         )}
       </div>
     </SidebarBase>

src/generic/upgrade-notification/UpgradeNotification.jsx

@@ -485,7 +485,7 @@ const UpgradeNotification = ({
   }
 
   return (
-    <section className={classNames('upgrade-notification small', { 'card mb-4': shouldDisplayBorder })}>
+    <section className={classNames('upgrade-notification', { 'card mb-4': shouldDisplayBorder })}>
       <div id="courseHome-upgradeNotification">
         <h2
           className={classNames('h5 upgrade-notification-header', {

src/generic/upgrade-notification/UpgradeNotification.scss

@@ -3,6 +3,7 @@
 }
 
 .upgrade-notification-header {
+  font-size: $font-size-base;
   margin: 1.25rem;
 }
 

src/generic/user-messages/Alert.jsx

@@ -39,6 +39,7 @@ const Alert = ({
     dismissible={dismissible}
     onClose={onDismiss}
     stacked={stacked}
+    className={`alert-container-${type}`}
   >
     {children}
   </ParagonAlert>

src/generic/user-messages/Alert.scss

@@ -0,0 +1,3 @@
+.alert-container-info .alert-message-content {
+  font-size: $font-size-base;
+}

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;
     }
@@ -470,9 +470,11 @@
 @import "courseware/course/content-tools/contentTools.scss";
 @import "course-home/dates-tab/timeline/Day.scss";
 @import "generic/upgrade-notification/UpgradeNotification.scss";
+@import "generic/user-messages/Alert.scss";
 @import "generic/upsell-bullets/UpsellBullets.scss";
 @import "course-home/outline-tab/widgets/ProctoringInfoPanel.scss";
 @import "course-home/outline-tab/widgets/FlagButton.scss";
+@import "course-home/suggested-schedule-messaging/SuggestedScheduleMessaging.scss";
 @import "course-home/progress-tab/course-completion/CompletionDonutChart.scss";
 @import "course-home/progress-tab/grades/course-grade/GradeBar.scss";
 @import "courseware/course/course-exit/CourseRecommendations";