From f4766d192087fe95821c422ab394519a029472f0 Mon Sep 17 00:00:00 2001
From: Peter Zimon <zimo@ghost.org>
Date: Fri, 5 Feb 2021 18:27:40 +0100
Subject: [PATCH] Members list style cleanup

---
 ghost/admin/app/components/gh-members-chart.js |  4 ++--
 ghost/admin/app/styles/layouts/members.css     | 17 +++++++++--------
 ghost/admin/app/styles/patterns/boxes.css      |  4 ++--
 ghost/admin/app/styles/patterns/buttons.css    |  4 ++--
 ghost/admin/app/styles/patterns/global.css     |  3 ++-
 5 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-chart.js b/ghost/admin/app/components/gh-members-chart.js
index 79ac0e2e24..c8bcd0f071 100644
--- a/ghost/admin/app/components/gh-members-chart.js
+++ b/ghost/admin/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,
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 77cafd8a4c..71e5495dcf 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/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) {
diff --git a/ghost/admin/app/styles/patterns/boxes.css b/ghost/admin/app/styles/patterns/boxes.css
index e089051df9..078531032c 100644
--- a/ghost/admin/app/styles/patterns/boxes.css
+++ b/ghost/admin/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;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/styles/patterns/buttons.css b/ghost/admin/app/styles/patterns/buttons.css
index 89750307ff..48f6dc8297 100644
--- a/ghost/admin/app/styles/patterns/buttons.css
+++ b/ghost/admin/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;
diff --git a/ghost/admin/app/styles/patterns/global.css b/ghost/admin/app/styles/patterns/global.css
index 772b45577b..fe7103f61e 100644
--- a/ghost/admin/app/styles/patterns/global.css
+++ b/ghost/admin/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;