VAN-553 - Used primary-400 as header background color (#335)

Co-authored-by: Waheed Ahmed <waheed.ahmed@arbisoft.com>

src/_style.scss

@@ -405,7 +405,7 @@ select.form-control {
 }
 
 .screen-header {
-  background-color: $primary;
+  background-color: $primary-400;
 }
 
 .screen-polygon {
@@ -413,18 +413,19 @@ select.form-control {
 }
 
 .medium-screen-svg {
-  fill: $primary;
+  fill: $primary-400;
   overflow: inherit;
   position: absolute;
 }
 
 .large-screen-svg {
-  fill: $primary;
+  fill: $primary-400;
   overflow: hidden;
   position: absolute;
 }
 
 .small-screen-header {
+  background-color: $primary-400;
   width: 100vw;
 }
 

src/common-components/SmallScreenHeader.jsx

@@ -10,7 +10,7 @@ const SmallScreenHeader = (props) => {
 
   return (
     <>
-      <div className="bg-primary small-screen-header">
+      <div className="small-screen-header">
         <img alt="edx" className="logo" src={getConfig().LOGO_WHITE_URL} />
         <div className="d-flex mt-3">
           <svg className="small-screen-svg-line">