From d5860681a7b9e099c35172aa13955e976e60291c Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Fri, 30 Oct 2020 15:11:31 +0100
Subject: [PATCH] feat: update global color and style
---
src/app/header/header.component.scss | 2 ++
src/app/map/components/map.component.scss | 2 +-
.../components/card/card.component.scss | 4 ++--
src/assets/scss/_color.scss | 22 ++++++-------------
src/assets/scss/_icons.scss | 20 +++++++----------
5 files changed, 20 insertions(+), 30 deletions(-)
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 304251c57..724e589e8 100644
--- a/src/app/header/header.component.scss
+++ b/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 {
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 765479d97..b45b2ff1f 100644
--- a/src/app/map/components/map.component.scss
+++ b/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;
}
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 8abcee027..b9682472a 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/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;
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index 1a854b6a0..2efedea70 100644
--- a/src/assets/scss/_color.scss
+++ b/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;
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 1d52f59d6..98209578e 100644
--- a/src/assets/scss/_icons.scss
+++ b/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;
}
}
--
GitLab