Merge pull request #112 from topcoder-platform/Issue2592

fix Issue2592

Author: luizrrodrigues

src/assets/sass/_global/_themes.scss

@@ -32,6 +32,7 @@ $themes: (
     iconDarkDisplay: none,
     iconLightDisplay: block,
     arrowBackground: $gray-neutral-light,
+    beforeBackground: $turquoise
   ),
   dark: (
     secondaryBackgroundColor: $gray-60,
@@ -42,5 +43,6 @@ $themes: (
     iconDarkDisplay: block,
     iconLightDisplay: none,
     arrowBackground: $gray-60,
+    beforeBackground: $white
   ),
 );

src/components/TopNav/MobileSubNav.module.scss

@@ -1,4 +1,5 @@
 @import "../../assets/sass/_global/fonts";
+@import "../../assets/sass/_global/themes";
 @import "../../assets/sass/_global/utils";
 
 .mobileSubNav {
@@ -28,7 +29,9 @@
 
   .mobileSubNavHeader {
     @include button-reset;
-    background: $teal;
+    @include themify($themes) {
+      background: themed('secondaryBackgroundColor');
+    }
     width: 100%;
     height: 60px;
     display: flex;
@@ -38,7 +41,9 @@
 
     span {
       @include Roboto-Regular;
-      color: $white;
+      @include themify($themes) {
+        color: themed('secondaryTextColor');
+      }
       font-size: 28px;
       line-height: 40px;
     }
@@ -50,20 +55,30 @@
     img {
       margin-left: 8px;
     }
+
+    path {
+      @include themify($themes) {
+        fill: themed('secondaryTextColor');
+      }
+    }
   }
 
   .mobileSubNavContent {
     display: flex;
     flex-direction: column;
     padding: $base-unit * 3 $base-unit * 4;
-    background: $teal;
+    @include themify($themes) {
+      background: themed('secondaryBackgroundColor');
+    }
     border-top: 1px solid $teal-light;
     width: 100%;
     z-index: 999;
     position: absolute;
 
     .mobileSubNavChild {
-      color: $white;
+      @include themify($themes) {
+        color: themed('secondaryTextColor');
+      }
       font-size: 18px;
       line-height: 40px;
       height: 40px;
@@ -81,7 +96,9 @@
           height: 30px;
           width: 3px;
           border-radius: 1.5px;
-          background: $white;
+          @include themify($themes) {
+            background: themed('beforeBackground');
+          }
           display: inline-block;
           margin-right: 10px;
         }