Fixs classic modal styling not rendering

Move classic modal less files co-locating them in the app file structure

client/less/classic-modal.less

@@ -1,34 +0,0 @@
-.challenge-success-modal {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 50vh;
-
-  .modal-header {
-    margin-bottom: 0;
-
-    .close {
-      color: #eee;
-      font-size: 4rem;
-      opacity: 0.6;
-      transition: all 300ms ease-out;
-      margin-top: 0;
-      padding-left: 0;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-  }
-
-  .modal-body {
-    padding: 35px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .fa {
-      margin-right: 0;
-    }
-  }
-}

client/less/main.less

@@ -1232,6 +1232,5 @@ and (max-width : 400px)  {
 &{ @import "./toastr.less"; }
 &{ @import "./map.less"; }
 &{ @import "./sk-wave.less"; }
-&{ @import "./classic-modal.less"; }
 &{ @import "./skeleton-shimmer.less"; }
 &{ @import "../../common/index.less"; }

common/app/routes/challenges/views/classic/classic.less

@@ -107,3 +107,39 @@
   overflow: hidden;
   width: 100%;
 }
+
+.@{ns}-success-modal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 50vh;
+
+  .modal-header {
+    background-color: @brand-primary;
+    margin-bottom: 0;
+
+    .close {
+      color: #eee;
+      font-size: 4rem;
+      opacity: 0.6;
+      transition: all 300ms ease-out;
+      margin-top: 0;
+      padding-left: 0;
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  .modal-body {
+    padding: 35px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .fa {
+      margin-right: 0;
+    }
+  }
+}