Track Overview, Syllabus, Exercises, About tweaks

app/css/components/track/concept-map.css

@@ -1,6 +1,6 @@
 :root {
-    --c-concept-map-background: #ffffff;
-    --c-concept-map-card-background: #ffffff;
+    --c-concept-map-background: var(--backgroundColorA);
+    --c-concept-map-card-background: var(--backgroundColorA);
 
     --c-concept-map-line-complete: #64b294;
     --c-concept-map-line-available: #dce3ef;
@@ -37,7 +37,7 @@
                 @apply text-textColor2;
                 @apply border-1 border-borderColor7;
 
-                background-color: var(--c-concept-map-card-background);
+                background-color: var(--backgroundColorA);
                 opacity: var(--c-concept-map-hover-opacity);
                 transition: opacity 200ms ease-out, box-shadow 200ms ease-out;
 

app/css/pages/track-about.css

@@ -223,7 +223,12 @@
         }
     }
     & .features-section {
-        background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%);
+        background: linear-gradient(
+            180deg,
+            var(--backgroundColorA) 80%,
+            var(--backgroundColorB) 100%
+        );
+        /* background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%); */
         & .section-header {
             @apply border-t-3 border-borderColor7;
             @apply pt-48;

app/css/pages/track-show.css

@@ -54,7 +54,7 @@
     }
     & article {
         @apply pb-80;
-        background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%);
+        /* background: linear-gradient(180deg, #ffffff 80%, #fbfbff 100%); */
     }
     & article.summary-article {
         @apply bg-backgroundColorA;
@@ -344,7 +344,7 @@
 
         & section.learning-pattern,
         & .stats-box {
-            @apply border-1 border-borderColor6 bg-white rounded-8;
+            @apply border-1 border-borderColor6 bg-backgroundColorA rounded-8;
         }
         & section.learning-pattern {
             @apply py-12 px-24 mb-40;
@@ -479,7 +479,7 @@
             }
 
             & .cta {
-                @apply bg-unnamed15 rounded-8 py-16 px-24;
+                @apply bg-backgroundColorD rounded-8 py-16 px-24;
 
                 & h3 {
                     @apply text-16 font-semibold mb-8;

app/css/ui-kit/borders.css

@@ -2,7 +2,11 @@
     .border-gradient {
         border-style: solid;
         border-color: transparent;
-        background-image: linear-gradient(white, white),
+        /* TODO: decide its lighttheme color. it was white, now it is FAFAFF */
+        background-image: linear-gradient(
+                var(--backgroundColorF),
+                var(--backgroundColorF)
+            ),
             linear-gradient(#2200ff, #9e00ff);
         background-origin: border-box;
         background-clip: padding-box, border-box;

app/views/tracks/show/_summary_article.html.haml

@@ -7,10 +7,10 @@
       %section.progress-chart
         %h2
           - if user_track.completed_percentage.zero?
-            You’ve just started the #{track.title} track.
+            You've just started the #{track.title} track.
             %strong Good luck, adventurer!
           - else
-            You’re
+            You're
             %em #{user_track.completed_percentage}%
             through the #{track.title} track.
             %strong Keep it up! 🚀