feat: increased font-size for Progress page

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/progress-tab/certificate-status/CertificateStatus.jsx

@@ -1,10 +1,13 @@
 import { useEffect } from 'react';
+import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 
-import { Button, Card } from '@openedx/paragon';
+import {
+  Button, Card, breakpoints, useWindowSize,
+} from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
 import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
@@ -29,6 +32,8 @@ const CertificateStatus = () => {
     userTimezone,
   } = useModel('courseHomeMeta', courseId);
 
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
   const {
     certificateData,
     end,
@@ -244,7 +249,7 @@ const CertificateStatus = () => {
         <ProgressCertificateStatusSlot courseId={courseId}>
           <div id={`${certCase}_certificate_status`}>
             <Card.Header title={header} />
-            <Card.Section className="small text-gray-700">
+            <Card.Section className={classNames('text-gray-700', { small: !wideScreen })}>
               {body}
             </Card.Section>
             <Card.Footer>

src/course-home/progress-tab/course-completion/CourseCompletion.jsx

@@ -1,17 +1,21 @@
+import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import CompletionDonutChart from './CompletionDonutChart';
 import messages from './messages';
 
 const CourseCompletion = () => {
   const intl = useIntl();
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   return (
-    <section className="text-dark-700 mb-4 rounded raised-card p-4">
+    <section className={classNames('text-dark-700 mb-4 rounded raised-card p-4', { small: !wideScreen })}>
       <div className="row w-100 m-0">
         <div className="col-12 col-sm-6 col-md-7 p-0">
           <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
-          <p className="small">
+          <p>
             {intl.formatMessage(messages.completionBody)}
           </p>
         </div>

src/course-home/progress-tab/course-completion/CourseCompletion.scss

@@ -0,0 +1,3 @@
+.course-completion-text {
+  font-size: 18px;
+}

src/course-home/progress-tab/credit-information/CreditInformation.jsx

@@ -61,7 +61,7 @@ const CreditInformation = () => {
         requirementStatus = (<>{intl.formatMessage(messages.upcoming)} <Icon src={WatchFilled} className="text-gray-500 d-inline-flex align-bottom" /></>);
     }
     requirements.push((
-      <div className="row w-100 m-0 small" key={`requirement-${requirement.order}`}>
+      <div className="row w-100 m-0" key={`requirement-${requirement.order}`}>
         <p className="font-weight-bold">
           {requirement.namespace === 'grade'
             ? `${intl.formatMessage(messages.minimumGrade, { minGrade: Number(requirement.criteria.minGrade) * 100 })}:`
@@ -77,7 +77,7 @@ const CreditInformation = () => {
   return (
     <>
       <h3 className="h4 col-12 p-0">{intl.formatMessage(messages.requirementsHeader)}</h3>
-      <p className="small">{eligibilityStatus}</p>
+      <p>{eligibilityStatus}</p>
       {requirements}
     </>
   );

src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx

@@ -1,4 +1,7 @@
+import React from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
@@ -14,6 +17,8 @@ const CourseGrade = () => {
   const intl = useIntl();
   const courseId = useContextId();
 
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
   const {
     creditCourseRequirements,
     gradesFeatureIsFullyLocked,
@@ -37,7 +42,7 @@ const CourseGrade = () => {
               ? intl.formatMessage(messages.gradesAndCredit)
               : intl.formatMessage(messages.grades)}
             </h2>
-            <p className="small">
+            <p className={classNames({ small: !wideScreen })}>
               {intl.formatMessage(messages.courseGradeBody)}
             </p>
           </div>

src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

@@ -1,8 +1,12 @@
+import React from 'react';
+import classNames from 'classnames';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Locked } from '@openedx/paragon/icons';
-import { Icon, Hyperlink } from '@openedx/paragon';
+import {
+  Icon, Hyperlink, breakpoints, useWindowSize,
+} from '@openedx/paragon';
 import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import { showUngradedAssignments } from '../../utils';
@@ -24,6 +28,7 @@ const DetailedGrades = () => {
     gradesFeatureIsPartiallyLocked,
     sectionScores,
   } = useModel('progress', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
 
   const hasSectionScores = sectionScores.length > 0;
   const emptyTableMsg = showUngradedAssignments()
@@ -75,10 +80,12 @@ const DetailedGrades = () => {
         <DetailedGradesTable />
       )}
       {!hasSectionScores && (
-        <p className="small">{intl.formatMessage(emptyTableMsg)}</p>
+        <p className={classNames({ small: !wideScreen })}>
+          {intl.formatMessage(emptyTableMsg)}
+        </p>
       )}
       {overviewTabUrl && !showUngradedAssignments() && (
-        <p className="x-small m-0">
+        <p className={classNames('m-0', { small: !wideScreen })}>
           {intl.formatMessage(messages.ungradedAlert, { outlineLink })}
         </p>
       )}

src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx

@@ -1,4 +1,8 @@
+import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { useContextId } from '../../../../data/hooks';
@@ -12,12 +16,14 @@ const DroppableAssignmentFootnote = ({ footnotes }) => {
   const {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
   return (
     <>
       <span id="grade-summary-footnote-label" className="sr-only">{intl.formatMessage(messages.footnotesTitle)}</span>
       <ul className="list-unstyled mt-2">
         {footnotes.map((footnote, index) => (
-          <li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
+          <li id={`${footnote.id}-footnote`} key={footnote.id} className={classNames('mt-1', { small: !wideScreen })}>
             <sup>{index + 1}</sup>
             {intl.formatMessage(messages.droppableAssignmentsText, {
               numDroppable: footnote.numDroppable,

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

@@ -1,15 +1,13 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Hyperlink,
-  Icon,
-  OverlayTrigger,
-  Stack,
-  Tooltip,
+  Icon, IconButton, OverlayTrigger, Popover, breakpoints, useWindowSize, Stack, Hyperlink,
 } from '@openedx/paragon';
 import { InfoOutline, Locked } from '@openedx/paragon/icons';
-import { useContextId } from '../../../../data/hooks';
 
+import { useContextId } from '../../../../data/hooks';
 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
 
@@ -21,6 +19,15 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
 
+  const [showTooltip, setShowTooltip] = useState(false);
+  const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      setShowTooltip(false);
+    }
+  };
+
   return (
     <Stack gap={2} className="mb-3">
       <Stack direction="horizontal" gap={2}>
@@ -29,15 +36,25 @@ const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
           trigger="hover"
           placement="top"
           overlay={(
-            <Tooltip>
-              {intl.formatMessage(messages.gradeSummaryTooltipBody)}
-            </Tooltip>
+            <Popover>
+              <Popover.Content
+                className={classNames('text-dark-700', { small: !wideScreen })}
+              >
+                {intl.formatMessage(messages.gradeSummaryTooltipBody)}
+              </Popover.Content>
+            </Popover>
           )}
         >
-          <Icon
+          <IconButton
+            onClick={() => { setShowTooltip(!showTooltip); }}
+            onBlur={() => { setShowTooltip(false); }}
+            onKeyDown={handleKeyDown}
             alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
             src={InfoOutline}
+            iconAs={Icon}
+            className="mb-3"
             size="sm"
+            disabled={gradesFeatureIsFullyLocked}
           />
         </OverlayTrigger>
       </Stack>