Update module card progress text color

frontend/src/components/atoms/ModuleCard/index.tsx

@@ -10,8 +10,15 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 export enum Term {
   AUTUMN,
   SPRING,
-  SUMMER,
+  SUMMER
 }
+
+export enum ProgressStatus {
+  NOT_STARTED = "Not Started",
+  IN_PROGRESS = "In Progress",
+  COMPLETED = "Completed"
+}
+
 export interface ModuleCardProps {
   module: {
     title: string;
@@ -19,12 +26,21 @@ export interface ModuleCardProps {
     image: string;
     content: string;
     terms: Term[];
-    progressStatus?: string;
+    progressStatus?: ProgressStatus;
     progressPercent?: number;
   };
 }
 
 const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
+  let textColor: string = "";
+  switch (module.progressStatus) {
+    case ProgressStatus.NOT_STARTED:
+      textColor = "#ACB5BD"; break;
+    case ProgressStatus.IN_PROGRESS:
+      textColor = "#29A745"; break;
+    case ProgressStatus.COMPLETED:
+      textColor = "#000";
+  }
   return (
     <Col xs={12} sm={12} md={6} lg={6} xl={3} style={{ marginTop: "1.875rem" }}>
       <Card
@@ -37,11 +53,13 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
             {module.terms.map((term: Term) => {
               switch (term) {
                 case Term.AUTUMN:
-                  return <FontAwesomeIcon icon={faLeaf} key={Term.AUTUMN}/>;
+                  return <FontAwesomeIcon icon={faLeaf} key={Term.AUTUMN} />;
                 case Term.SPRING:
-                  return <FontAwesomeIcon icon={faSeedling} key={Term.SPRING}/>;
+                  return (
+                    <FontAwesomeIcon icon={faSeedling} key={Term.SPRING} />
+                  );
                 case Term.SUMMER:
-                  return <FontAwesomeIcon icon={faSun} key={Term.SUMMER}/>;
+                  return <FontAwesomeIcon icon={faSun} key={Term.SUMMER} />;
                 default:
                   return "";
               }
@@ -58,10 +76,16 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module }: ModuleCardProps) => {
           <Card.Title style={{ color: "#000" }}>{module.title}</Card.Title>
         </Card.Body>
         <Card.Footer>
-          <span className={classNames(styles.moduleCardProgressText)}>
+          <span
+            style={{ color: textColor }}
+            className={styles.moduleCardProgressText}
+          >
             {module.progressStatus}
           </span>
-          <span className={classNames(styles.moduleCardProgressText)}>{`${module.progressPercent}%`}</span>
+          <span
+            style={{ color: textColor }}
+            className={styles.moduleCardProgressText}
+          >{`${module.progressPercent}%`}</span>
         </Card.Footer>
       </Card>
     </Col>

frontend/src/components/atoms/ModuleCard/style.module.scss

@@ -49,7 +49,6 @@
 .moduleCardProgressText {
   text-transform: uppercase;
   font-weight: 500;
-  color: $green-500;
   font-size: 1rem;
 }
 

frontend/src/components/pages/ModuleList/index.tsx

@@ -13,7 +13,8 @@ import javaIllustration from "assets/images/java-illustration.png";
 import reasoningIllustration from "assets/images/reasoning-illustration.png";
 import architectureIllustration from "assets/images/architecture-illustration.png";
 import databaseIllustration from "assets/images/database-illustration.png";
-import ModuleCard, { Term } from "components/atoms/ModuleCard";
+
+import ModuleCard, { Term, ProgressStatus } from "components/atoms/ModuleCard";
 import Dandruff from "components/molecules/Dandruff";
 
 const ModuleList: React.FC = () => {
@@ -23,7 +24,7 @@ const ModuleList: React.FC = () => {
       code: "CO140",
       image: logicIllustration,
       terms: [Term.AUTUMN],
-      progressStatus: "in progress",
+      progressStatus: ProgressStatus.IN_PROGRESS,
       progressPercent: 50,
       content: ""
     },
@@ -32,7 +33,7 @@ const ModuleList: React.FC = () => {
       code: "CO142",
       image: discreteIllustration,
       terms: [Term.AUTUMN],
-      progressStatus: "in progress",
+      progressStatus: ProgressStatus.IN_PROGRESS,
       progressPercent: 60,
       content: ""
     },
@@ -41,7 +42,7 @@ const ModuleList: React.FC = () => {
       code: "CO112",
       image: systemsIllustration,
       terms: [Term.AUTUMN],
-      progressStatus: "in progress",
+      progressStatus: ProgressStatus.IN_PROGRESS,
       progressPercent: 93,
       content: ""
     },
@@ -50,7 +51,7 @@ const ModuleList: React.FC = () => {
       code: "CO145",
       terms: [Term.AUTUMN],
       image: methodsIllustration,
-      progressStatus: "in progress",
+      progressStatus: ProgressStatus.IN_PROGRESS,
       progressPercent: 45,
       content: ""
     },
@@ -59,7 +60,7 @@ const ModuleList: React.FC = () => {
       code: "CO120.2",
       image: javaIllustration,
       terms: [Term.AUTUMN, Term.SPRING, Term.SUMMER],
-      progressStatus: "in progress",
+      progressStatus: ProgressStatus.IN_PROGRESS,
       progressPercent: 20,
       content: ""
     },
@@ -68,7 +69,7 @@ const ModuleList: React.FC = () => {
       code: "CO150",
       image: graphIllustration,
       terms: [Term.SPRING],
-      progressStatus: "no started",
+      progressStatus: ProgressStatus.NOT_STARTED,
       progressPercent: 0,
       content: ""
     },
@@ -77,7 +78,7 @@ const ModuleList: React.FC = () => {
       code: "CO113",
       image: architectureIllustration,
       terms: [Term.SPRING],
-      progressStatus: "no started",
+      progressStatus: ProgressStatus.NOT_STARTED,
       progressPercent: 0,
       content: ""
     },
@@ -86,7 +87,7 @@ const ModuleList: React.FC = () => {
       code: "CO141",
       image: reasoningIllustration,
       terms: [Term.SPRING],
-      progressStatus: "no started",
+      progressStatus: ProgressStatus.NOT_STARTED,
       progressPercent: 0,
       content: ""
     },
@@ -95,7 +96,7 @@ const ModuleList: React.FC = () => {
       code: "CO130",
       image: databaseIllustration,
       terms: [Term.SPRING],
-      progressStatus: "no started",
+      progressStatus: ProgressStatus.NOT_STARTED,
       progressPercent: 0,
       content: ""
     }