feat: increased font size for Dates and Course unit pages

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

@@ -7,7 +7,9 @@ import {
   FormattedTime,
   useIntl,
 } 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';
 
@@ -29,6 +31,7 @@ const Day = ({
   const {
     userTimezone,
   } = useModel('courseHomeMeta', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
 
@@ -68,9 +71,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>
@@ -95,7 +102,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/live-tab/LiveTab.test.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { useSelector } from 'react-redux';
+import LiveTab from './LiveTab';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+describe('LiveTab', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  it('renders iframe from liveModel using dangerouslySetInnerHTML', () => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<iframe id="lti-tab-embed" src="about:blank"></iframe>',
+          },
+        },
+      },
+    }));
+
+    render(<LiveTab />);
+
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe).toBeInTheDocument();
+    expect(iframe.src).toBe('about:blank');
+  });
+
+  it('adds classes to iframe after mount', () => {
+    document.body.innerHTML = `
+      <div id="live_tab">
+        <iframe id="lti-tab-embed" class=""></iframe>
+      </div>
+    `;
+
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<iframe id="lti-tab-embed"></iframe>',
+          },
+        },
+      },
+    }));
+
+    render(<LiveTab />);
+
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe.className).toContain('vh-100');
+    expect(iframe.className).toContain('w-100');
+    expect(iframe.className).toContain('border-0');
+  });
+
+  it('does not throw if iframe is not found in DOM', () => {
+    useSelector.mockImplementation((selector) => selector({
+      courseHome: { courseId: 'course-v1:test+id+2024' },
+      models: {
+        live: {
+          'course-v1:test+id+2024': {
+            iframe: '<div>No iframe here</div>',
+          },
+        },
+      },
+    }));
+
+    expect(() => render(<LiveTab />)).not.toThrow();
+    const iframe = document.getElementById('lti-tab-embed');
+    expect(iframe).toBeNull();
+  });
+});

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 { useIntl } from '@edx/frontend-platform/i18n';
@@ -8,6 +9,8 @@ import {
   Button,
   Row,
   Col,
+  breakpoints,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { resetDeadlines } from '../data';
@@ -19,6 +22,7 @@ const ShiftDatesAlert = ({ fetch, model }) => {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     datesBannerInfo,
@@ -39,14 +43,17 @@ const ShiftDatesAlert = ({ fetch, 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,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -7,6 +8,8 @@ import {
   Button,
   Col,
   Row,
+  breakpoints,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { useModel } from '../../generic/model-store';
@@ -17,6 +20,7 @@ const UpgradeToCompleteAlert = ({ logUpgradeLinkClick }) => {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     datesBannerInfo,
@@ -36,14 +40,18 @@ const UpgradeToCompleteAlert = ({ 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 { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert,
   Button,
   Row,
   Col,
+  breakpoints,
+  useWindowSize,
 } from '@openedx/paragon';
 
 import { useModel } from '../../generic/model-store';
@@ -18,6 +21,7 @@ const UpgradeToShiftDatesAlert = ({ logUpgradeLinkClick, model }) => {
   const {
     courseId,
   } = useSelector(state => state.courseHome);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const {
     datesBannerInfo,
@@ -38,14 +42,18 @@ const UpgradeToShiftDatesAlert = ({ 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

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

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

@@ -446,12 +446,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;
     }
@@ -466,8 +466,11 @@
 @import "courseware/course/content-tools/calculator/calculator.scss";
 @import "courseware/course/content-tools/contentTools.scss";
 @import "course-home/dates-tab/timeline/Day.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";