feat: update global color and style

src/app/header/header.component.scss

@@ -15,8 +15,10 @@
   padding: 0 20px;
   a {
     font-style: italic;
+    color: $primary-color;
     &.active {
       font-weight: bold;
+      color: $grey-1;
     }
   }
   .right-header {

src/app/map/components/map.component.scss

@@ -55,7 +55,7 @@
   padding: 8px 10px 8px 10px;
   border-radius: 6px;
   h1 {
-    color: $purple;
+    color: $grey-1;
     @include cn-bold-20;
     margin: 0;
   }

src/app/structure-list/components/card/card.component.scss

@@ -12,13 +12,13 @@
   }
   .nomStructure {
     padding-top: 13px;
-    color: $purple;
+    color: $grey-1;
     @include cn-bold-20;
     padding-bottom: 5px;
   }
   .distanceStructure {
     @include cn-regular-16;
-    color: $purple;
+    color: $grey-1;
   }
   &:last-child {
     border-bottom: none;

src/assets/scss/_color.scss

@@ -8,24 +8,16 @@ $grey-2: #4f4f4f;
 $grey-3: #828282;
 $grey-4: #bdbdbd;
 $grey-6: #f2f2f2;
-/* YELLOW */
-$yellow: #f2cb04;
-$yellow-light: #fff8d6;
-/* ORANGES */
-$orange: #f27405;
-$orange-light: #f29f05;
-$orange-3: #fff4ea;
-/* GREEN */
+/* Status colors */
 $green: #41c29c;
+$red: #f98181;
 /* OTHERS */
-$blue: #b3f8f8;
-$blue-dark: #2f5480;
-$purple: #594d59;
-$red: #eb5757;
+$blue: #348899;
+$grey-1: #594d59;
 $red-metro: #d50000;
 /* APP COLORS */
-$primary-color: $yellow;
-$secondary-color: $orange;
+$primary-color: $red-metro;
+$secondary-color: $blue;
 $default-link-color: $grey-2;
-$button-secondary: $blue-dark;
+$button-secondary: $blue;
 $app-background: $grey-6;

src/assets/scss/_icons.scss

@@ -5,7 +5,7 @@
   display: inline-block;
   background: transparent;
   border-radius: 30px;
-  border: 2px solid $purple;
+  border: 2px solid $grey-1;
   height: 12px;
   width: 12px;
   min-width: 12px;
@@ -15,7 +15,7 @@
     content: '';
     height: 2px;
     width: 8px;
-    background: $purple;
+    background: $grey-1;
     position: absolute;
     top: 14px;
     left: 10px;
@@ -45,10 +45,6 @@
     background: transparent;
     border-radius: 50%;
   }
-
-  &.orange {
-    background: $orange;
-  }
 }
 .ico-dot-available {
   height: 12px;
@@ -76,14 +72,14 @@
   width: 30px;
   height: 30px;
   border-radius: 50% 50% 50% 0;
-  background: $purple;
+  background: $secondary-color;
   position: absolute;
   transform: rotate(-45deg);
   left: 50%;
   top: 50%;
   margin: -15px 0 0 -15px;
   &.selected {
-    background: $red-metro;
+    background: $primary-color;
   }
 }
 
@@ -125,15 +121,15 @@
     width: 12px;
     height: 12px;
     border-radius: 25px;
-    border: 2px solid $purple;
+    border: 2px solid $grey-1;
   }
   .body {
     width: 28px;
     height: 10px;
     border-radius: 20px 20px 0px 0px;
-    border-top: 2px solid $purple;
-    border-right: 2px solid $purple;
-    border-left: 2px solid $purple;
+    border-top: 2px solid $grey-1;
+    border-right: 2px solid $grey-1;
+    border-left: 2px solid $grey-1;
   }
 }