edly-io · Faraz32123 · Jun 10, 2024 · Jun 10, 2024
diff --git a/src/alerts/logistration-alert/AccountActivationAlert.jsx b/src/alerts/logistration-alert/AccountActivationAlert.jsx
@@ -91,7 +91,7 @@ const AccountActivationAlert = ({
           {message}
           <Spinner
             animation="border"
-            variant="secondary"
+            variant="tertiary"
             style={{ height: '1.5rem', width: '1.5rem' }}
           />
         </div>

diff --git a/src/components/index.scss b/src/components/index.scss
@@ -66,7 +66,7 @@
 
     h4 {
       margin: 0 auto 0 1rem;
-      color: $secondary;
+      color: $tertiary;
       font-weight: $font-weight-semi-bold;
     }
   }
@@ -117,7 +117,7 @@
       .ai-submit-button {
         border: 0;
         background: none;
-        color: $secondary;
+        color: $tertiary;
 
         &:hover {
           color: $primary;
@@ -161,8 +161,8 @@
 
     &:hover,
     &.btn-active {
-      border-color: $secondary;
-      color: $secondary;
+      border-color: $tertiary;
+      color: $tertiary;
       background: white;
     }
   }

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-secondary',
+      bg: 'bg-tertiary',
       className: 'text-black',
     },
     {

diff --git a/src/course-home/outline-tab/DateSummary.jsx b/src/course-home/outline-tab/DateSummary.jsx
@@ -38,7 +38,7 @@ const DateSummary = ({
     <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 text-secondary">
+        <div className="ml-1 font-weight-bold text-tertiary">
           <FormattedDate
             value={dateBlock.date}
             day="numeric"

diff --git a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
@@ -135,7 +135,7 @@ const ProctoringInfoPanel = ({ intl }) => {
 
   if (isNotYetReleased(releaseDate)) {
     onboardingExamButton = (
-      <Button variant="secondary" block disabled aria-disabled="true">
+      <Button variant="tertiary" block disabled aria-disabled="true">
         {intl.formatMessage(
           messages.proctoringOnboardingButtonNotOpen,
           {
@@ -150,7 +150,7 @@ const ProctoringInfoPanel = ({ intl }) => {
     );
   } else if (onboardingPastDue) {
     onboardingExamButton = (
-      <Button variant="secondary" block disabled aria-disabled="true">
+      <Button variant="tertiary" block disabled aria-disabled="true">
         {intl.formatMessage(messages.proctoringOnboardingButtonPastDue)}
       </Button>
     );

diff --git a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
@@ -58,7 +58,7 @@ const StartOrResumeCourseCard = ({ intl, title }) => {
         onClick={() => logResumeCourseClick()}
       >
         {hasVisitedCourse ? intl.formatMessage(messages.resumeBlurb) : intl.formatMessage(messages.startBlurb)}
-        <Icon src={isLocaleRtl ? ArrowBackIos : ArrowForwardIos} className="text-secondary ml-1" style={{ height: '16px', width: '16px' }} />
+        <Icon src={isLocaleRtl ? ArrowBackIos : ArrowForwardIos} className="text-tertiary ml-1" style={{ height: '16px', width: '16px' }} />
       </Button>
     </div>
   );

diff --git a/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss b/src/course-home/progress-tab/course-completion/CompletionDonutChart.scss
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $secondary;
+    stroke: $tertiary;
   }
 
   &.divider-stroke {

diff --git a/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx b/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
@@ -50,7 +50,7 @@ const CourseGradeFooter = ({ intl, passingGrade }) => {
   }
 
   const icon = isPassing ? <CheckSquareIcon className="text-success-500 d-inline-flex" />
-    : <InfoIcon className="text-secondary d-inline-flex" />;
+    : <InfoIcon className="text-tertiary d-inline-flex" />;
 
   return (
     <div className={`row w-100 m-0 py-3 px-md-5 rounded-bottom course-grade-footer ${isPassing ? 'bg-suces-100' : 'bg-warnings-100'}`}>

diff --git a/src/course-home/progress-tab/grades/course-grade/GradeBar.scss b/src/course-home/progress-tab/grades/course-grade/GradeBar.scss
@@ -21,7 +21,7 @@
   }
 
   .grade-bar--current-non-passing {
-    fill: $secondary;
+    fill: $tertiary;
   }
 }
 
@@ -52,8 +52,8 @@
 
 #non-passing-grade-tooltip {
   .arrow::after {
-    border-top-color: $secondary;
+    border-top-color: $tertiary;
   }
 
-  background: $secondary;
+  background: $tertiary;
 }
diff --git a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
@@ -43,7 +43,7 @@ const DetailedGrades = ({ intl }) => {
 
   const outlineLink = overviewTabUrl && (
     <Hyperlink
-      variant="secondary"
+      variant="tertiary"
       isInline
       destination={overviewTabUrl}
       onClick={logOutlineLinkClick}
@@ -70,7 +70,7 @@ const DetailedGrades = ({ intl }) => {
       )}
       {overviewTabUrl && (
         <p className="m-0 small">
-          <InfoIcon className="mr-2 text-secondary" />
+          <InfoIcon className="mr-2 text-tertiary" />
           <FormattedMessage
             id="progress.ungradedAlert"
             defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."

diff --git a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -54,7 +54,7 @@ const DetailedGradesTable = ({ intl }) => {
                 Header: `${intl.formatMessage(messages.score)}`,
                 accessor: 'score',
                 headerClassName: 'justify-content-end mb-0',
-                cellClassName: 'align-top text-right font-weight-semi-bold text-secondary',
+                cellClassName: 'align-top text-right font-weight-semi-bold text-tertiary',
               },
             ]}
           >

diff --git a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
@@ -121,8 +121,8 @@ const GradeSummaryTable = ({ intl, setAllOfSomeAssignmentTypeIsLocked }) => {
             accessor: 'weightedGrade',
             headerClassName: 'justify-content-end mb-0 text-right',
             Cell: ({ value }) => getCell(value.locked, value.weightedGrade),
-            cellClassName: 'text-right font-weight-semi-bold text-secondary',
-            footerClassName: 'text-secondary',
+            cellClassName: 'text-right font-weight-semi-bold text-tertiary',
+            footerClassName: 'text-tertiary',
           },
         ]}
       >

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-tertiary">{totalGrade}%{isLocaleRtl && '\u200f'}</div>
       </div>
     </DataTable.TableFooter>
   );

diff --git a/src/courseware/course/content-tools/notes-visibility/NotesVisibility.jsx b/src/courseware/course/content-tools/notes-visibility/NotesVisibility.jsx
@@ -39,7 +39,7 @@ class NotesVisibility extends Component {
     const message = this.state.visible ? 'notes.button.hide' : 'notes.button.show';
     return (
       <button
-        className={`trigger btn ${this.state.visible ? 'text-secondary' : 'text-success'}  mx-2 `}
+        className={`trigger btn ${this.state.visible ? 'text-tertiary' : 'text-success'}  mx-2 `}
         role="switch"
         type="button"
         onClick={this.handleClick}

diff --git a/src/courseware/course/content-tools/notes-visibility/NotesVisibility.test.jsx b/src/courseware/course/content-tools/notes-visibility/NotesVisibility.test.jsx
@@ -62,7 +62,7 @@ describe('Notes Visibility', () => {
 
     const button = screen.getByRole('switch', { name: 'Hide Notes' });
     expect(button).toBeChecked();
-    expect(button).toHaveClass('text-secondary');
+    expect(button).toHaveClass('text-tertiary');
     expect(button.querySelector('svg')).toHaveClass('fa-pencil-alt');
     expect(button.querySelector('svg')).toHaveAttribute('aria-hidden', 'true');
   });

diff --git a/src/index.scss b/src/index.scss
@@ -72,7 +72,7 @@
     &:hover,
     &:focus,
     &.active {
-      color: $secondary;
+      color: $tertiary;
     }
 
     &.active {
@@ -108,7 +108,7 @@
     &:last-of-type {
 
       a {
-        color: $secondary;
+        color: $tertiary;
       }
     }
   }
@@ -200,7 +200,7 @@
     &.related-links {
 
       a {
-        color: $secondary;
+        color: $tertiary;
         font-size: 1.25rem;
         font-weight: $font-weight-semi-bold;
 
@@ -215,7 +215,7 @@
       }
 
       ul {
-        color: $secondary;
+        color: $tertiary;
 
         li {
           font-weight: $font-weight-normal;
@@ -261,7 +261,7 @@
     &:hover,
     &:focus,
     &.active {
-      color: $secondary;
+      color: $tertiary;
       background: $gray-light-400;
     }
 
@@ -277,7 +277,7 @@
         left: 0;
         right: 0;
         height: 3px;
-        background: $secondary;
+        background: $tertiary;
       }
     }
 
@@ -343,7 +343,7 @@
 
         .unit-icon,
         .unit-title {
-          color: $secondary;
+          color: $tertiary;
         }
 
         &:after {
@@ -355,14 +355,14 @@
           right: auto;
           width: 2px;
           height: auto;
-          background: $secondary;
+          background: $tertiary;
         }
       }
     }
 
     .dropdown-item {
       &.active {
-        color: $secondary;
+        color: $tertiary;
         background: $gray-light-400;
       }
     }
@@ -379,7 +379,7 @@
     font-size: 1.25rem;
 
     .pgn__icon {
-      color: $secondary;
+      color: $tertiary;
     }
 
     @media (max-width: (-1 + map-get($grid-breakpoints, "sm"))) {
@@ -451,7 +451,7 @@
   color: $primary;
 
   .is-active & {
-    color: $secondary;
+    color: $tertiary;
   }
 }
 
@@ -476,7 +476,7 @@
     }
 
     .pgn__icon {
-      color: $secondary;
+      color: $tertiary;
     }
 
     &:focus:before {
@@ -552,7 +552,7 @@
     > a[href] {
 
       &.pgn__hyperlink {
-        color: $secondary;
+        color: $tertiary;
         text-decoration: none;
 
         &:hover {
@@ -651,7 +651,7 @@
 
     &:hover {
       span.align-middle {
-        color: $secondary;
+        color: $tertiary;
       }
     }
   }