From 49610631024076d01a8e36c8fa9c903fa39f105d Mon Sep 17 00:00:00 2001
From: Gaelle Morin <morin.gaelle@gmail.com>
Date: Thu, 3 Jan 2019 16:53:00 +0100
Subject: [PATCH] Header: visual improvement + bug on Chrome resolved. Color's
 names changed.

---
 src/styles/content.scss     | 14 ++++++-------
 src/styles/filters.scss     |  2 +-
 src/styles/form.scss        | 10 +++++-----
 src/styles/header.scss      | 30 ++++++++++++++++++++--------
 src/styles/job-offers.scss  |  8 ++++----
 src/styles/main.scss        | 30 ++++++++++++++--------------
 src/styles/members.scss     | 22 ++++++++------------
 src/styles/menu.scss        | 16 +++++++--------
 src/styles/right-panel.scss |  6 +++---
 src/styles/variables.scss   | 40 ++++++++++++++++++-------------------
 10 files changed, 93 insertions(+), 85 deletions(-)

diff --git a/src/styles/content.scss b/src/styles/content.scss
index 61d4f0c..bc1fc32 100644
--- a/src/styles/content.scss
+++ b/src/styles/content.scss
@@ -40,7 +40,7 @@
     border: 1px solid;
     border-radius: 2em;
     margin: 0.25em;
-    background-color: $color-yellow;
+    background-color: $color-selective-yellow;
     color: $color-white;
     font-weight: bold;
   }
@@ -99,7 +99,7 @@
       list-style-type: none;
     }
     >[name$="user"]{
-      color: $color-black;
+      color: $color-dark-lava;
     }
     >[name$="avatar"]{
       grid-column-start: first;
@@ -126,7 +126,7 @@ sib-display#member-info {
   }
 
   div[name='header'] {
-    border-bottom: 1px solid $color-grey-light;
+    border-bottom: 1px solid $color-anti-flash-white;
     padding-bottom: 1em;
     padding: 0.5em;
     margin-bottom: 1em;
@@ -181,8 +181,8 @@ sib-display#member-info {
     display: flex;
     border-radius: 25px;
     border-style: solid;
-    border-color: $color-blue-light;
-    color: $color-blue-light;
+    border-color: $color-majorelle-blue;
+    color: $color-majorelle-blue;
     margin: 1em;
     padding: 1em;
     text-decoration:none;
@@ -245,8 +245,8 @@ hdapp-available {
     display: flex;
     border-radius: 25px;
     border-style: solid;
-    border-color: $color-blue-light;
-    color: $color-blue-light;
+    border-color: $color-majorelle-blue;
+    color: $color-majorelle-blue;
     margin: 1em;
     padding: 1em;
     text-decoration:none;
diff --git a/src/styles/filters.scss b/src/styles/filters.scss
index 436f257..3f9eb37 100644
--- a/src/styles/filters.scss
+++ b/src/styles/filters.scss
@@ -1,5 +1,5 @@
 %filters {
-  border-bottom: 1px solid $color-grey1;
+  border-bottom: 1px solid $color-gainsboro;
   display: grid;
   grid-gap: 0px 15px;
   grid-template-columns: 50% 50%;
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 9d173ab..e62fc0e 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -3,13 +3,13 @@
   padding: 0.5em 1em;
   border: none;
   border-radius: 100em;
-  background-color: $color-yellow;
-  color: $color-black;
+  background-color: $color-selective-yellow;
+  color: $color-dark-lava;
   font-weight: normal;
 }
 
 %status-open {
-  background-color: $color-blue-light;
+  background-color: $color-majorelle-blue;
   border: none;
   border-radius: 100em;
   color: $color-white;
@@ -44,7 +44,7 @@ sib-form.block {
         }
         input,
         textarea {
-          background-color: $color-grey-light;
+          background-color: $color-anti-flash-white;
           box-shadow: none !important;
           border: none;
           padding: 1em 2em;
@@ -102,7 +102,7 @@ sib-form {
     button {
       appearance: none;
       background-color: $color-white;
-      color: $color-yellow;
+      color: $color-selective-yellow;
       border: 1px solid;
       width: 1em;
       height: 1em;
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 792f18c..4c7b9b0 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -1,7 +1,7 @@
 
 #header {
   background-color: $color-white;
-  color: $color-black;
+  color: $color-dark-lava;
   //position: relative;
   //@include border-shadow(bottom);
   box-shadow: 0 2px 4px rgba(148, 98, 98, 0.09);
@@ -23,7 +23,7 @@
 #button-toggle {
   @include icon('menu');
   display: none;
-  color: $color-black;
+  color: $color-dark-lava;
   font-size: 2em;
   padding: 0.72em;
   cursor: pointer;
@@ -33,6 +33,10 @@
   flex: 1 1 0;
 }
 
+details summary::-webkit-details-marker {
+  display:none;
+}
+
 #notifications-button {
   @include icon(bell);
   font-size: 2em;
@@ -66,6 +70,7 @@
   div {
     display: flex;
     flex-direction: row-reverse;
+    
     > * {
       vertical-align: middle;
     }
@@ -78,13 +83,22 @@
       border-radius: 100%;
       margin-right: 1rem;
     }
+
+    sib-display-div[name='first_name'] {
+      align-items: center;
+      display: flex;
+
+      div[name='first_name'] {
+        font-size: 16px;
+        font-weight: 600;
+        @include icon('arrow-down');
   
-    span {
-      color: $color-black;
-      font-size: 16px;
-      font-weight: 600;
-      letter-spacing: 0.38px;
-      padding: 0 0.5rem;
+        &::before {
+          color: color-dark-lava;
+          margin-left: 10px;
+        }
+  
+      }
     }
   }
 }
diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss
index 8615211..b3bc5d3 100644
--- a/src/styles/job-offers.scss
+++ b/src/styles/job-offers.scss
@@ -23,7 +23,7 @@
       margin: 1em 0;
       padding: 2em;
       /*&:nth-child(odd) {
-        background-color: $color-grey-light;
+        background-color: $color-anti-flash-white;
       }*/
       sib-display-div[name='title'] {
         @extend h3;
@@ -47,7 +47,7 @@
 }
 
 [name='send'] {
-  color: $color-blue-light;
+  color: $color-majorelle-blue;
   font-size: 13px;
   text-align: right;
 
@@ -73,7 +73,7 @@
 
 [name='user-thumb'] {
   align-items: center;
-  color: $color-black-light;
+  color: $color-quartz;
   display: flex;
   font-weight: 600;
   margin: -0.25em;
@@ -92,7 +92,7 @@
   div[name*='roles'] {
     border: 1px solid yellow;
     border-radius: 3px;
-    color: $color-grey2;
+    color: $color-rolling-stone;
     font-size: 15px;
     font-weight: 400;
     margin-left: 1em;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 9850483..6ee1a33 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,8 +14,8 @@ html {
   //box-sizing: border-box;
   font-family: Open Sans, sans-serif;
   font-size: 13px;
-  background-color: $color-grey-light;
-  color: $color-grey;
+  background-color: $color-anti-flash-white;
+  color: $color-taupe-gray;
 }
 // body {
 //   height: 100%;
@@ -29,7 +29,7 @@ h3,
 h4,
 h5,
 h6 {
-  color: $color-black;
+  color: $color-dark-lava;
   font-weight: 600;
   padding: 0;
   /*margin: 0.67em 0;*/
@@ -80,9 +80,9 @@ h4 {
 
   > div {
     align-items: center;
-    background-color: $color-yellow-light;
+    background-color: $color-mustard;
     border-radius: 100%;
-    color: $color-black;
+    color: $color-dark-lava;
     display: flex;
     font-size: 12px;
     height: 1.7em;
@@ -131,8 +131,8 @@ h4 {
 
     > sib-router {
       font-family: monospace;
-      color: $color-black;
-      background-color: $color-grey-light2;
+      color: $color-dark-lava;
+      background-color: $color-timberwolf;
       display: flex;
       flex-direction: column;
 
@@ -142,17 +142,17 @@ h4 {
         > div {
           position: relative;
           padding: 1.5em 3em;
-          border-bottom: 1px solid $color-grey;
+          border-bottom: 1px solid $color-taupe-gray;
         }
 
         &:hover {
-          background-color: $color-grey;
+          background-color: $color-taupe-gray;
         }
 
         &[active] {
           font-weight: bold;
-          background-color: $color-black;
-          color: $color-yellow;
+          background-color: $color-dark-lava;
+          color: $color-selective-yellow;
 
           > div:before {
             opacity: 1;
@@ -188,8 +188,8 @@ h4 {
 }
 
 #search-icon {
-  -webkit-text-stroke: 1px $color-grey-light4;
-  color: $color-grey-light4;
+  -webkit-text-stroke: 1px $color-bombay;
+  color: $color-bombay;
   pointer-events: none;
 }
 
@@ -208,7 +208,7 @@ h4 {
   -webkit-appearance: textfield;
   border-radius: 10em;
   padding: 0.4em 0.8em;
-  border: 1px solid $color-grey-light4;
+  border: 1px solid $color-bombay;
   height: 2.8rem;
   width: 22rem;
 
@@ -312,7 +312,7 @@ sib-display-lookuplist {
     border: 1px solid;
     border-radius: 2em;
     margin: 0.25em;
-    background-color: $color-yellow;
+    background-color: $color-selective-yellow;
     color: $color-white;
     font-weight: bold;
   }
diff --git a/src/styles/members.scss b/src/styles/members.scss
index 3943e8e..f4334a5 100644
--- a/src/styles/members.scss
+++ b/src/styles/members.scss
@@ -17,15 +17,14 @@
     margin-bottom: 1em;
     
     &:first-of-type {
-      color: $color-black2;
-      font-size: 20px;
-      font-weight: 600;
+      color: $color-quartz;
+      font-weight: bold;
       justify-content: center;
       margin-bottom: 2.2em;
       white-space: nowrap;
       
       &::before, &::after {
-        border-top: 1px solid $color-grey-light2;
+        border-top: 1px solid $color-timberwolf;
         content: '';
         position: relative;
         top: 0.5em;
@@ -42,7 +41,7 @@
     }
 
     > sib-display {
-      color: $color-grey2;
+      color: $color-rolling-stone;
       cursor: pointer;
       background-color: white;
       box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
@@ -59,7 +58,7 @@
       }
 
       div[name='header'] {
-        border-bottom: 1px solid $color-grey-light;
+        border-bottom: 1px solid $color-anti-flash-white;
         padding: 0.5em 0 2em;
         display: flex;
         flex-direction: column;
@@ -91,11 +90,6 @@
           }
         }
 
-        div[name='pseudonym'] {
-          font-size: 15px;
-          margin-top: 8px;
-        }
-
         sib-display-div[name$='bio'] {
           display: flex;
           flex-basis: 3.5em;
@@ -107,9 +101,9 @@
         
         [next=member-chat] {
           align-self: center;
-          border: 1px solid $color-blue-light;
+          border: 1px solid $color-majorelle-blue;
           border-radius: 2em;
-          color: $color-blue-light;
+          color: $color-majorelle-blue;
           font-size: 18px;
           font-weight: bold;
           padding: 0.6em 1.5em 0.4em;
@@ -128,7 +122,7 @@
           margin-top: 1em;
 
           &::before {
-            color: $color-yellow;
+            color: $color-selective-yellow;
             font-size: 20px;
             padding: 0 0.6em 0 1em;
           }
diff --git a/src/styles/menu.scss b/src/styles/menu.scss
index 1b5d58e..c161793 100644
--- a/src/styles/menu.scss
+++ b/src/styles/menu.scss
@@ -54,13 +54,13 @@ sib-router {
 
   .divider {
     height: 1px;
-    background-color: $color-grey-light3;
+    background-color: $color-gainsboro-a02;
   }
 
   .sub-menu {
     padding-left: 1.8em;
-    div{
-      color: $color-grey-mid;
+    div {
+      color: $color-spun-pearl;
       padding-bottom: 0.7em;
       font-size: 15px;
       cursor: pointer;
@@ -79,7 +79,7 @@ sib-router {
     font-weight: bold;
 
     &[active] {
-      background-color: $color-yellow-light;
+      background-color: $color-mustard;
       color: $color-purple-dark;
 
       .menu-icon:before {
@@ -90,7 +90,7 @@ sib-router {
 
       .menu-notification > sib-display > div:first-child {
         background-color: $color-purple-dark;
-        color: $color-yellow-light;
+        color: $color-mustard;
         font-size: 12px;
       }
     }
@@ -128,7 +128,7 @@ sib-router {
       align-items: center;
 
       > div {
-        color: $color-grey-mid;
+        color: $color-spun-pearl;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -163,14 +163,14 @@ sib-router {
 
       > sib-display {
         > div:first-of-type {
-          color: $color-black;
+          color: $color-dark-lava;
           display: flex;
           justify-content: center;
           align-items: center;
           width: 1.7em;
           height: 1.7em;
           border-radius: 100%;
-          background-color: $color-yellow-light;
+          background-color: $color-mustard;
           font-size: 12px;
         }
       }
diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss
index fd97352..7c76d42 100644
--- a/src/styles/right-panel.scss
+++ b/src/styles/right-panel.scss
@@ -16,10 +16,10 @@
 .how-link {
   @extend .right-link;
   background-color: $color-white;
-  color: $color-black;
+  color: $color-dark-lava;
   flex-wrap: nowrap;
   .icon-idea {
-    background-color: $color-yellow-light;
+    background-color: $color-mustard;
     border-radius: 100%;
     justify-content: center;
     margin-right: 0.7em;
@@ -32,7 +32,7 @@
 
 .action-link {
   @extend .right-link;
-  background-color: $color-yellow;
+  background-color: $color-selective-yellow;
   color: $color-white;
   font-weight: bold;
   text-transform: uppercase;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 98f1d58..d0cc334 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,25 +1,25 @@
-// colors
-$color-white: #fff;
-$color-black: #36383b;
-$color-black2: #4a4a4a;
-$color-black-light: #4a4a4a;
-$color-grey-dark: #36383b;
-$color-grey2: #7a7f85;
-$color-grey1: #d7dbe0;
-$color-grey: #898f95;
-$color-grey-mid: #abaaba;
-$color-grey-light5: #9ba0a7;
-$color-grey-light4: #b4b9c0;
-$color-grey-light3: hsla(59, 13%, 86%, 0.2);
-$color-grey-light2: #d8d8d8;
-$color-grey-light: #f0f3f6;
-$color-yellow: #ffb700;
-$color-yellow-light: #ffd759;
-$color-purple-dark: #3C3F57;
-$color-blue-light: #6259E5;
+//Color Variables
+$color-quartz:           hsl(0, 0%, 29%);
+$color-timberwolf:       hsl(0, 0%, 85%);
+$color-white:            hsl(0, 0%,100%);
+
+$color-selective-yellow: hsl(43, 100%, 50%);
+$color-mustard:          hsl(46, 100%, 67%);
+
+$color-rolling-stone:    hsl(210, 4%, 50%);
+$color-taupe-gray:       hsl(210, 5%, 56%);
+$color-anti-flash-white: hsl(210, 25%, 95%);
+$color-gainsboro:        hsl(213, 13%, 86%);
+$color-gainsboro-a02:    hsla(213, 13%, 86%, 0.2);
+$color-bombay:           hsl(215, 9%, 73%);
+$color-dark-lava:        hsl(216, 4%, 22%);
+$color-purple-dark:      hsl(233, 18%, 29%);
+$color-spun-pearl:       hsl(244, 10%, 70%);
+$color-majorelle-blue:   hsl(244, 73%, 62%);
+
 
 %shadow {
-  box-shadow: 0 0 8px 0 rgba(133, 140, 148, 0.19);
+  box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
 }
 
 %frame {