feat: Course pages restyles (#6)

* feat: Course pages restyles Course tabs pages(Main Learning, Dates, Progress ) styles * fix: Package-lock file update
edly-io · Nov 29, 2023 · 54802de · 54802de
1 parent 50a1987
commit 54802de
Show file tree

Hide file tree

Showing 46 changed files with 469 additions and 244 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Icons.jsx b/src/Icons.jsx
@@ -111,3 +111,35 @@ export const InfoIcon = (props) => (
     />
   </svg>
 );
+
+export const PolygonDownIcon = (props) => (
+  <svg
+    width="13"
+    height="11"
+    viewBox="0 0 13 11"
+    fill="none"
+    version="1.1"
+    {...props}
+  >
+    <path
+      d="M8.232 10C7.4622 11.3333 5.5377 11.3333 4.7679 10L0.870786 3.25C0.100986 1.91666 1.06324 0.25 2.60284 0.25L10.3971 0.250001C11.9367 0.250001 12.899 1.91667 12.1292 3.25L8.232 10Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const PolygonUpIcon = (props) => (
+  <svg
+    width="13"
+    height="11"
+    viewBox="0 0 13 11"
+    fill="none"
+    version="1.1"
+    {...props}
+  >
+    <path
+      d="M4.16815 0.999998C4.93795 -0.333302 6.86245 -0.333301 7.63225 0.999999L11.5294 7.75C12.2992 9.08334 11.3369 10.75 9.79731 10.75L2.0031 10.75C0.463496 10.75 -0.498804 9.08333 0.270996 7.75L4.16815 0.999998Z"
+      fill="currentColor"
+    />
+  </svg>
+);
diff --git a/src/course-home/dates-tab/DatesTab.jsx b/src/course-home/dates-tab/DatesTab.jsx
@@ -42,8 +42,8 @@ const DatesTab = ({ intl }) => {
   };
 
   return (
-    <>
-      <div role="heading" aria-level="1" className="h2 my-3">
+    <div className="raised-card dates-tab">
+      <div role="heading" aria-level="1" className="heading mb-3">
         {intl.formatMessage(messages.title)}
       </div>
       {isSelfPaced && hasDeadlines && (
@@ -55,7 +55,7 @@ const DatesTab = ({ intl }) => {
         </>
       )}
       <Timeline />
-    </>
+    </div>
   );
 };
 

diff --git a/src/course-home/dates-tab/timeline/Day.jsx b/src/course-home/dates-tab/timeline/Day.jsx
@@ -36,19 +36,19 @@ const Day = ({
   const { color, badges } = getBadgeListAndColor(date, intl, null, items);
 
   return (
-    <li className="dates-day pb-4" data-testid="dates-day">
+    <li className="dates-day pb-5" data-testid="dates-day">
       {/* Top Line */}
-      {!first && <div className="dates-line-top border-1 border-left border-gray-900 bg-gray-900" />}
+      {!first && <div className="dates-line-top border-1 border-left" />}
 
       {/* Dot */}
-      <div className={classNames(color, 'dates-dot border border-gray-900')} />
+      <div className={classNames(color, 'dates-dot border')} />
 
       {/* Bottom Line */}
       {!last && <div className="dates-line-bottom border-1 border-left border-gray-900 bg-gray-900" />}
 
       {/* Content */}
-      <div className="d-inline-block ml-3 pl-2">
-        <div className="row w-100 m-0 mb-1 align-items-center text-primary-700" data-testid="dates-header">
+      <div className="d-inline-block ml-3 pl-4">
+        <div className="row w-100 m-0 align-items-center" data-testid="dates-header">
           <FormattedDate
             value={date}
             day="numeric"
@@ -66,12 +66,12 @@ const Day = ({
           const showLink = item.link && isLearnerAssignment(item);
           const title = showLink ? (<u><a href={item.link} className="text-reset">{item.title}</a></u>) : item.title;
           const available = item.learnerHasAccess && (item.link || !isLearnerAssignment(item));
-          const textColor = available ? 'text-primary-700' : 'text-gray-500';
+          const textColor = available ? '' : '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')} data-testid="dates-item">
               <div>
-                <span className="small">
+                <span>
                   <span className="font-weight-bold">{item.assignmentType && `${item.assignmentType}: `}{title}</span>
                   {showDueDateTime && (
                     <span>

diff --git a/src/course-home/dates-tab/timeline/Day.scss b/src/course-home/dates-tab/timeline/Day.scss
@@ -1,9 +1,20 @@
-$dot-radius: 0.3rem;
+$dot-radius: 0.45rem;
 $dot-size: $dot-radius * 2;
 $offset: $dot-radius * 1.5;
 
 .dates-day {
   position: relative;
+  font-size: 1.125rem;
+}
+
+.dates-tab {
+  color: $black;
+  padding: 1.7rem 2.2rem;
+
+  .heading {
+    font-size: 1.5rem;
+    font-weight: $font-weight-bold;
+  }
 }
 
 .dates-line-top {

diff --git a/src/course-home/dates-tab/timeline/badgelist.jsx b/src/course-home/dates-tab/timeline/badgelist.jsx
@@ -37,7 +37,7 @@ function getBadgeListAndColor(date, intl, item, items) {
     {
       message: messages.today,
       shownForDay: isToday,
-      bg: 'bg-warning-300',
+      bg: 'bg-secondary',
       className: 'text-black',
     },
     {

diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
@@ -181,7 +181,7 @@ const OutlineTab = ({ intl }) => {
         </div>
         {rootCourseId && (
           <div className="col col-12 col-md-4">
-            <div className="course-outline-sidebar">
+            <div className="course-sidebar pt-md-6">
               <ProctoringInfoPanel />
               { /** Defer showing the goal widget until the ProctoringInfoPanel has resolved or has been determined as
                disabled to avoid components bouncing around too much as screen is rendered */ }

diff --git a/src/course-home/outline-tab/widgets/CourseDates.jsx b/src/course-home/outline-tab/widgets/CourseDates.jsx
@@ -29,7 +29,7 @@ const CourseDates = ({
 
   return (
     <section className="mb-4">
-      <div id="courseHome-dates">
+      <div id="courseHome-dates" className="pb-3">
         <h2 className="h4">{intl.formatMessage(messages.dates)}</h2>
         <ol className="list-unstyled">
           {courseDateBlocks.map((courseDateBlock) => (
@@ -40,7 +40,7 @@ const CourseDates = ({
             />
           ))}
         </ol>
-        <a className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
+        <a className="font-weight-semi-bold ml-4 pl-1 small" href={datesTabLink}>
           {intl.formatMessage(messages.allDates)}
         </a>
       </div>

diff --git a/src/course-home/progress-tab/ProgressHeader.jsx b/src/course-home/progress-tab/ProgressHeader.jsx
@@ -27,7 +27,7 @@ const ProgressHeader = ({ intl }) => {
 
   return (
     <div className="row w-100 m-0 mt-3 mb-4 justify-content-between">
-      <h1>{pageTitle}</h1>
+      <h1 className="d-none">{pageTitle}</h1>
       {administrator && studioUrl && (
       <Button variant="outline-primary" size="sm" className="align-self-center" href={studioUrl}>
         {intl.formatMessage(messages.studioLink)}

diff --git a/src/course-home/progress-tab/ProgressTab.jsx b/src/course-home/progress-tab/ProgressTab.jsx
@@ -35,22 +35,24 @@ const ProgressTab = () => {
   return (
     <>
       <ProgressHeader />
-      <div className="row w-100 m-0">
+      <div className="row w-100 m-0 progress-tab">
         {/* Main body */}
-        <div className="col-12 col-md-8 p-0">
+        <div className="col-12 col-md-8 p-0 progress-content">
           <CourseCompletion />
           {!wideScreen && <CertificateStatus />}
           <CourseGrade />
-          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
+          <div className={`grades my-4 p-4 px-md-5 raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
             <GradeSummary />
             <DetailedGrades />
           </div>
         </div>
 
         {/* Side panel */}
         <div className="col-12 col-md-4 p-0 px-md-4">
-          {wideScreen && <CertificateStatus />}
-          <RelatedLinks />
+          <div className="course-sidebar">
+            {wideScreen && <CertificateStatus />}
+            <RelatedLinks />
+          </div>
         </div>
       </div>
     </>

diff --git a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -234,8 +234,8 @@ const CertificateStatus = ({ intl }) => {
   };
 
   return (
-    <section data-testid="certificate-status-component" className="text-dark-700 mb-4">
-      <Card className="bg-light-200 raised-card">
+    <section data-testid="certificate-status-component" className="mb-4 raised-card">
+      <Card>
         <Card.Header title={header} />
         <Card.Section className="small text-gray-700">
           {body}

diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx b/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx
@@ -32,7 +32,7 @@ const CompletionDonutChart = ({ intl }) => {
 
   return (
     <>
-      <svg role="img" width="50%" height="100%" viewBox="0 0 42 42" className="donut" style={{ maxWidth: '178px' }} aria-hidden="true">
+      <svg role="img" width="80%" height="100%" viewBox="0 0 42 42" className="donut" style={{ maxWidth: '178px' }} aria-hidden="true">
         {/* The radius (or "r" attribute) is based off of a circumference of 100 in order to simplify percentage
             calculations. The subsequent stroke-dasharray values found in each segment should add up to equal 100
             in order to wrap around the circle once. */}

diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss b/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
@@ -29,7 +29,7 @@
 }
 
 .donut-chart-text {
-  fill: $primary-500;
+  fill: $black;
   -moz-transform: translateY(0.25em);
   -ms-transform: translateY(0.25em);
   -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $info-500;
+    stroke: $secondary;
   }
 
   &.divider-stroke {
@@ -65,7 +65,7 @@
   }
 
   &.incomplete-stroke {
-    stroke: $light-300;
+    stroke: $gray-light;
   }
 
   &.locked-stroke {

diff --git a/src/course-home/progress-tab/course-completion/CourseCompletion.jsx b/src/course-home/progress-tab/course-completion/CourseCompletion.jsx
@@ -1,24 +1,45 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import CompletionDonutChart from './CompletionDonutChart';
 import messages from './messages';
+import headerMessages from '../messages';
+import { useModel } from '../../../generic/model-store';
 
-const CourseCompletion = ({ intl }) => (
-  <section className="text-dark-700 mb-4 rounded raised-card p-4">
-    <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">
-          {intl.formatMessage(messages.completionBody)}
-        </p>
-      </div>
-      <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
-        <CompletionDonutChart />
+const CourseCompletion = ({ intl }) => {
+  const {
+    courseId,
+    targetUserId,
+  } = useSelector(state => state.courseHome);
+
+  const { username } = useModel('progress', courseId);
+  const { userId } = getAuthenticatedUser();
+
+  const viewingOtherStudentsProgressPage = (targetUserId && targetUserId !== userId);
+
+  const pageTitle = viewingOtherStudentsProgressPage
+    ? intl.formatMessage(headerMessages.progressHeaderForTargetUser, { username })
+    : intl.formatMessage(headerMessages.progressHeader);
+
+  return (
+    <section className="mb-4 raised-card p-4 px-md-5">
+      <div className="row w-100 m-0">
+        <div className="col-12 col-sm-6 col-md-7 col-lg-9 p-0">
+          <h1 className="h2 mb-4">{pageTitle}</h1>
+          <h2 className="h3">{intl.formatMessage(messages.courseCompletion)}</h2>
+          <p className="small">
+            {intl.formatMessage(messages.completionBody)}
+          </p>
+        </div>
+        <div className="col-12 col-sm-6 col-md-5 col-lg-3 mt-sm-n3 p-0 text-center">
+          <CompletionDonutChart />
+        </div>
       </div>
-    </div>
-  </section>
-);
+    </section>
+  );
+};
 
 CourseCompletion.propTypes = {
   intl: intlShape.isRequired,

diff --git a/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx b/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
@@ -30,22 +30,22 @@ const CourseGrade = ({ intl }) => {
   const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
 
   return (
-    <section className="text-dark-700 my-4 rounded raised-card">
+    <section className="mb-3 raised-card">
       {(gradesFeatureIsFullyLocked || gradesFeatureIsPartiallyLocked) && <CourseGradeHeader />}
       <div className={applyLockedOverlay} aria-hidden={gradesFeatureIsFullyLocked}>
-        <div className="row w-100 m-0 p-4">
+        <div className="row w-100 m-0 p-4 px-md-5">
           <div className="col-12 col-sm-6 p-0 pr-sm-5.5">
             <h2>{creditCourseRequirements
               ? intl.formatMessage(messages.gradesAndCredit)
               : intl.formatMessage(messages.grades)}
             </h2>
-            <p className="small">
+            <p>
               {intl.formatMessage(messages.courseGradeBody)}
             </p>
           </div>
           <GradeBar passingGrade={passingGrade} />
         </div>
-        <div className="row w-100 m-0 px-4">
+        <div className="row w-100 m-0 px-4 px-md-5">
           <CreditInformation />
         </div>
         <CourseGradeFooter passingGrade={passingGrade} />

diff --git a/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx b/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
@@ -3,11 +3,11 @@ import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { CheckCircle, WarningFilled } from '@edx/paragon/icons';
-import { breakpoints, Icon, useWindowSize } from '@edx/paragon';
+import { breakpoints, useWindowSize } from '@edx/paragon';
 import { useModel } from '../../../../generic/model-store';
 
 import GradeRangeTooltip from './GradeRangeTooltip';
+import { CheckSquareIcon, InfoIcon } from '../../../../Icons';
 import messages from '../messages';
 
 const CourseGradeFooter = ({ intl, passingGrade }) => {
@@ -49,17 +49,17 @@ const CourseGradeFooter = ({ intl, passingGrade }) => {
     }
   }
 
-  const icon = isPassing ? <Icon src={CheckCircle} className="text-success-300 d-inline-flex align-bottom" />
-    : <Icon src={WarningFilled} className="d-inline-flex align-bottom" />;
+  const icon = isPassing ? <CheckSquareIcon className="text-success-500 d-inline-flex" />
+    : <InfoIcon className="text-secondary d-inline-flex" />;
 
   return (
-    <div className={`row w-100 m-0 px-4 py-3 py-md-4 rounded-bottom ${isPassing ? 'bg-success-100' : 'bg-warning-100'}`}>
+    <div className={`row w-100 m-0 py-3 px-md-5 rounded-bottom course-grade-footer ${isPassing ? 'bg-suces-100' : 'bg-warnings-100'}`}>
       <div className="col-auto p-0">
         {icon}
       </div>
       <div className="col-11 pl-2 px-0">
         {!wideScreen && (
-          <span className="h5 align-bottom">
+          <span className="h5 font-weight-normal">
             {footerText}
             {hasLetterGrades && (
               <span style={{ whiteSpace: 'nowrap' }}>
@@ -70,7 +70,7 @@ const CourseGradeFooter = ({ intl, passingGrade }) => {
           </span>
         )}
         {wideScreen && (
-          <span className="h4 m-0 align-bottom">
+          <span className="h4 font-weight-normal m-0">
             {footerText}
             {hasLetterGrades && (
               <span style={{ whiteSpace: 'nowrap' }}>

diff --git a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -39,9 +39,9 @@ const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
         show
         placement="top"
         overlay={(
-          <Popover id={`${isPassing ? 'passing' : 'non-passing'}-grade-tooltip`} aria-hidden="true" className={tooltipClassName}>
-            <Popover.Content data-testid="currentGradeTooltipContent" className={isPassing ? 'text-white' : 'text-dark-700'}>
-              {currentGrade.toFixed(0)}{isLocaleRtl ? '\u200f' : ''}%
+          <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' : ''}%
             </Popover.Content>
           </Popover>
         )}