feat: Programs pages styled (#9)

arbirali · web-flow · commit a2b27a63af4f · 2024-01-07T15:14:59.000+05:00
* feat: Programs pages styled

* fix: Package file updated
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/course-home/outline-tab/DateSummary.jsx b/src/course-home/outline-tab/DateSummary.jsx
@@ -35,10 +35,10 @@ const DateSummary = ({
   };
 
   return (
-    <li className="p-0 mb-3 small text-dark-500">
+    <li className="p-0 px-3 mb-3 small">
       <div className="row">
         <FontAwesomeIcon icon={faCalendarAlt} className="ml-3 mt-1 mr-1" fixedWidth />
-        <div className="ml-1 font-weight-bold">
+        <div className="ml-1 font-weight-bold text-secondary">
           <FormattedDate
             value={dateBlock.date}
             day="numeric"
diff --git a/src/course-home/outline-tab/LmsHtmlFragment.jsx b/src/course-home/outline-tab/LmsHtmlFragment.jsx
@@ -2,15 +2,19 @@ import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import { getConfig } from '@edx/frontend-platform';
+import {
+  getLocale, isRtl,
+} from '@edx/frontend-platform/i18n';
 
 const LmsHtmlFragment = ({
   className,
   html,
   title,
   ...rest
 }) => {
+  const isLocaleRtl = isRtl(getLocale());
   const wholePage = `
-    <html>
+    <html dir=${isLocaleRtl ? 'rtl' : 'ltr'}>
       <head>
         <base href="${getConfig().LMS_BASE_URL}" target="_parent">
         <link rel="stylesheet" href="/static/${getConfig().LEGACY_THEME_NAME ? `${getConfig().LEGACY_THEME_NAME}/` : ''}css/bootstrap/lms-main.css">
diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx b/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx
@@ -39,7 +39,7 @@ const CompletionDonutChart = ({ intl }) => {
         <circle className="donut-hole" fill="#fff" cx="21" cy="21" r="15.91549430918954" />
         <g className="donut-chart-text">
           <text x="50%" y="50%" className="donut-chart-number">
-            {completePercentage}{isLocaleRtl && '\u200f'}%
+            {completePercentage}%{isLocaleRtl && '\u200f'}
           </text>
           <text x="50%" y="50%" className="donut-chart-label">
             {intl.formatMessage(messages.donutLabel)}
diff --git a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -41,7 +41,7 @@ const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
         overlay={(
           <Popover id={`${isPassing ? 'passing' : 'non-passing'}-grade-tooltip`} aria-hidden="true" className={`grade-popover ${tooltipClassName}`}>
             <Popover.Content data-testid="currentGradeTooltipContent" className="text-white font-weight-bold">
-              {currentGrade.toFixed(0)} {isLocaleRtl ? '\u200f' : ''}%
+              {currentGrade.toFixed(0)}%
             </Popover.Content>
           </Popover>
         )}
diff --git a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -25,7 +25,7 @@ const PassingGradeTooltip = ({ intl, passingGrade, tooltipClassName }) => {
         overlay={(
           <Popover id="minimum-grade-tooltip" className={`grade-popover bg-primary-500 ${tooltipClassName}`} aria-hidden="true">
             <Popover.Content className="text-white font-weight-bold">
-              {passingGrade} {isLocaleRtl && '\u200f'}%
+              {passingGrade}% {isLocaleRtl && '\u200f'}
             </Popover.Content>
           </Popover>
         )}
diff --git a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -35,7 +35,7 @@ const DetailedGradesTable = ({ intl }) => {
 
       const detailedGradesData = subsectionScores.map((subsection) => ({
         subsectionTitle: <SubsectionTitleCell subsection={subsection} />,
-        score: <span className={subsection.learnerHasAccess ? '' : 'greyed-out'}>{subsection.numPointsEarned}{isLocaleRtl ? '\\' : '/'}{subsection.numPointsPossible}</span>,
+        score: <span className={subsection.learnerHasAccess ? '' : 'greyed-out'}>{subsection.numPointsEarned}<span className="sr-only">{isLocaleRtl ? '\\' : '/'}</span>/{subsection.numPointsPossible}</span>,
       }));
 
       return (
diff --git a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -16,7 +16,7 @@ const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
       <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
         <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
           {problemScores.map(problemScore => (
-            <li className="ml-3">{problemScore.earned}{isLocaleRtl ? '\\' : '/'}{problemScore.possible}</li>
+            <li className="ml-3">{problemScore.earned}<span className="sr-only">{isLocaleRtl ? '\\' : '/'}</span>/{problemScore.possible}</li>
           ))}
         </ul>
       </div>
diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
@@ -74,9 +74,9 @@ const GradeSummaryTable = ({ intl, setAllOfSomeAssignmentTypeIsLocked }) => {
       type: {
         footnoteId, footnoteMarker, type: assignment.type, locked,
       },
-      weight: { weight: `${(assignment.weight * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''} %`, locked },
-      grade: { grade: `${(assignment.averageGrade * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''} %`, locked },
-      weightedGrade: { weightedGrade: `${(assignment.weightedGrade * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''} %`, locked },
+      weight: { weight: `${(assignment.weight * 100).toFixed(0)}%${isLocaleRtl ? '\u200f' : ''}`, locked },
+      grade: { grade: `${(assignment.averageGrade * 100).toFixed(0)}%${isLocaleRtl ? '\u200f' : ''}`, locked },
+      weightedGrade: { weightedGrade: `${(assignment.weightedGrade * 100).toFixed(0)}%${isLocaleRtl ? '\u200f' : ''}`, locked },
     };
   });
   const getAssignmentTypeCell = (value) => (
diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
@@ -28,7 +28,7 @@ const GradeSummaryTableFooter = ({ intl }) => {
     <DataTable.TableFooter>
       <div className="row w-100 m-0">
         <div id="weighted-grade-summary" className="col-8 font-weight-semi-bold p-0">{intl.formatMessage(messages.weightedGradeSummary)}</div>
-        <div data-testid="gradeSummaryFooterTotalWeightedGrade" aria-labelledby="weighted-grade-summary" className="col-4 p-0 text-right font-weight-semi-bold text-secondary">{totalGrade}{isLocaleRtl && '\u200f'} %</div>
+        <div data-testid="gradeSummaryFooterTotalWeightedGrade" aria-labelledby="weighted-grade-summary" className="col-4 p-0 text-right font-weight-semi-bold text-secondary">{totalGrade}%{isLocaleRtl && '\u200f'}</div>
       </div>
     </DataTable.TableFooter>
   );
