style: Updated CSS files to fix text color and background color on the challenges page

Author: Yashasewi

src/components/ChallengesPanel.module.css

@@ -9,7 +9,7 @@
   flex-wrap: wrap;
   border-left: var(--border-cyan);
   border-bottom: var(--border-cyan);
-  color: var(--gray-dark);
+  color: var(--text-color);
   text-transform: uppercase;
   background-color: var(--cyan-light);
 
@@ -60,7 +60,8 @@
     justify-content: space-between;
     align-items: center;
     margin: 0;
-    color: var(--gray-dark);
+  color: var(--text-color);
+
   }
 }
 
@@ -92,7 +93,7 @@
   padding: 0 calc(var(--box-padding) / 2);
   border-bottom: var(--border);
   border-color: var(--cyan);
-  color: var(--gray-dark);
+  color: var(--text-color);
   font-weight: normal;
   font-size: var(--maru-normal);
   text-overflow: ellipsis;
@@ -122,7 +123,7 @@
 }
 
 .date {
-  color: var(--gray-dark);
+  color: var(--text-color);
   background-color: var(--cyan-light);
   border-bottom: var(--border-cyan);
   border-left: var(--border-cyan);

src/components/challenges/Card.module.css

@@ -79,7 +79,7 @@
 }
 
 .date {
-  color: var(--gray-dark);
+  color: var(--text-color);
   background-color: var(--cyan-light);
   border-bottom: var(--border-cyan);
   border-left: var(--border-cyan);
@@ -88,7 +88,7 @@
 
   & span {
     border-bottom: none;
-    color: var(--gray-dark);
+    color: var(--text-color);
     text-transform: uppercase;
   }
 

src/components/challenges/VideoSection.module.css

@@ -14,7 +14,7 @@
   height: var(--baseline-2x);
   border-bottom: var(--border-cyan);
   border-left: var(--border);
-  background: white;
+  background: var(--background-color);
 }
 
 .title h1 {

src/templates/challenge.module.css

@@ -12,7 +12,7 @@
   height: var(--baseline);
   border-left: var(--border);
   border-bottom: var(--border-cyan);
-  background: white;
+  background: var(--background-color);
 }
 
 @media (--small) {