Members list style cleanup

app/components/gh-members-chart.js

@@ -165,8 +165,8 @@ export default Component.extend({
                     labelString: 'Date',
                     gridLines: {
                         drawTicks: false,
-                        color: (this.nightShift ? '#333F44' : '#CED4D9'),
-                        zeroLineColor: (this.nightShift ? '#333F44' : '#CED4D9')
+                        color: (this.nightShift ? '#333F44' : '#DDE1E5'),
+                        zeroLineColor: (this.nightShift ? '#333F44' : '#DDE1E5')
                     },
                     ticks: {
                         display: false,

app/styles/layouts/members.css

@@ -176,7 +176,7 @@ p.gh-members-list-email {
     flex: 1 1 auto;
     min-width: 0;
     min-height: 0;
-    border: 1px solid var(--main-color-area-divider);
+    border: 1px solid var(--list-color-divider);
     border-left: none;
 }
 
@@ -184,7 +184,7 @@ p.gh-members-list-email {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 20px 20px 12px 0;
+    padding: 16px 24px 4px 0;
     margin-bottom: 10px;
 }
 
@@ -197,6 +197,7 @@ p.gh-members-list-email {
     border-radius: 3px;
     height: 16px;
     padding: 0 8px;
+    margin-right: 0;
 }
 
 .gh-members-chart-dropdown {
@@ -215,15 +216,15 @@ p.gh-members-list-email {
     justify-content: space-between;
     font-size: 1.3rem;
     color: var(--middarkgrey);
-    padding: 0 28px 0 0;
+    padding: 0 28px 16px 0;
 }
 
 .gh-members-chart-summary {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    flex-basis: 24%;
-    min-width: 244px;
+    flex-basis: 28%;
+    min-width: 280px;
 }
 
 .gh-members-chart-summary section {
@@ -234,11 +235,11 @@ p.gh-members-list-email {
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    padding: 20px;
+    padding: 16px 24px;
 }
 
 .gh-members-chart-summary-heading {
-    font-size: 1.2rem;
+    font-size: 1.1rem;
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: 0.2px;
@@ -309,7 +310,7 @@ p.gh-members-list-email {
 }
 
 .gh-members-chart + .content-list .members-list {
-    margin-top: var(--main-layout-area-padding);
+    margin-top: var(--main-layout-section-vpadding);
 }
 
 @media (max-width: 1100px) {

app/styles/patterns/boxes.css

@@ -91,7 +91,7 @@
     background: none;
     border-left: none;
     border-right: none;
-    border-top: 1px solid var(--main-color-area-divider);
-    border-bottom: 1px solid var(--main-color-area-divider);
+    border-top: 1px solid var(--list-color-divider);
+    border-bottom: 1px solid var(--list-color-divider);
     border-radius: 0;
 }

app/styles/patterns/buttons.css

@@ -12,7 +12,7 @@
     text-decoration: none !important;
     user-select: none;
     fill: var(--white);
-    font-weight: 400;
+    font-weight: 500;
     border-radius: 3px;
     transition: all 0.2s ease;
     transition-property: color, border-color, background, width, height, box-shadow;
@@ -25,7 +25,7 @@
 .gh-btn-grey span {
     display: block;
     overflow: hidden;
-    padding: 0 11px;
+    padding: 0 14px;
     height: 33px;
     font-size: 1.35rem;
     line-height: 33px;

app/styles/patterns/global.css

@@ -132,7 +132,7 @@
     --main-color-area-divider: var(--whitegrey-d1);
     --main-color-content-greybg: color-mod(var(--whitegrey-l2) l(-1%));
 
-    --list-color-divider: color-mod(var(--black) a(5%));
+    --list-color-divider: var(--whitegrey-d1);
     
     /* Special colours */
     --transparent:transparent;
@@ -143,6 +143,7 @@
     --main-layout-content-maxwidth: 1320px;
     --main-layout-area-padding: 32px;
     --main-layout-vpanel-height: 96px;
+    --main-layout-section-vpadding: 3vw;
     
     /* Style values */
     --border-radius: 4px;