From 4cd5ea90ebc44d4c8151ed37863da033014cb3dd Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Tue, 8 Feb 2022 14:56:19 +0100
Subject: [PATCH] Updated import-members modal

---
 .../app/components/modal-import-members.hbs   | 10 ++------
 .../modal-import-members/csv-file-select.hbs  |  6 ++---
 .../app/styles/components/modals-new.css      |  2 +-
 ghost/admin/app/styles/components/modals.css  |  2 +-
 .../admin/app/styles/components/uploader.css  |  3 ++-
 ghost/admin/app/styles/layouts/members.css    | 24 +++++++++++++++++++
 ghost/admin/app/styles/patterns/boxes.css     | 14 +++++++++--
 7 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/ghost/admin/app/components/modal-import-members.hbs b/ghost/admin/app/components/modal-import-members.hbs
index 3c5d36e05e..bf4fdb4c08 100644
--- a/ghost/admin/app/components/modal-import-members.hbs
+++ b/ghost/admin/app/components/modal-import-members.hbs
@@ -3,6 +3,7 @@
         <header class="modal-header" data-test-modal="import-members">
             <h1>Import members</h1>
         </header>
+        <p class="gh-box gh-box-green">Need some help? <a href="https://ghost.org/help/import-members/" target="_blank" rel="noopener noreferrer">Learn more</a> about importing members or <a href="https://static.ghost.org/v4.0.0/files/member-import-template.csv" target="_blank" rel="noopener noreferrer">download a sample CSV file</a>.</p>
     {{/if}}
 
     {{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
@@ -104,18 +105,11 @@
         {{/if}}
     </div>
 
-    <div class="modal-footer modal-footer-spread">
+    <div class="modal-footer">
         {{#if (eq this.state 'INIT')}}
             <button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
                 <span>Close</span>
             </button>
-            <a
-                class="gh-btn"
-                href="https://static.ghost.org/v4.0.0/files/member-import-template.csv"
-                target="_blank" rel="noopener noreferrer"
-            >
-                <span>Download sample CSV file</span>
-            </a>
         {{/if}}
 
         {{#if (eq this.state 'MAPPING')}}
diff --git a/ghost/admin/app/components/modal-import-members/csv-file-select.hbs b/ghost/admin/app/components/modal-import-members/csv-file-select.hbs
index e13ab4d9e9..ecaa3815d1 100644
--- a/ghost/admin/app/components/modal-import-members/csv-file-select.hbs
+++ b/ghost/admin/app/components/modal-import-members/csv-file-select.hbs
@@ -4,7 +4,7 @@
         <p class="ma0 pa0">{{this.error.message}}</p>
     </div>
 {{/if}}
-<div class="upload-form bg-whitegrey-l2 ba b--whitegrey br3">
+<div class="upload-form br3">
     <section class="gh-image-uploader gh-members-import-uploader {{this.dragClass}}"
         {{on "drop" this.drop}}
         {{on "dragover" this.dragOver}}
@@ -12,8 +12,8 @@
     >
         <GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{this.fileSelected}} @accept={{this.accept}}>
         <div class="flex flex-column items-center">
-            {{svg-jar "upload" class="w9 h9 mb1 stroke-midgrey"}}
-            <div class="description midgrey">{{this.labelText}}</div>
+            {{svg-jar "upload"}}
+            <div class="description">{{this.labelText}}</div>
         </div>
         </GhFileInput>
     </section>
diff --git a/ghost/admin/app/styles/components/modals-new.css b/ghost/admin/app/styles/components/modals-new.css
index 8cf377a7d9..fbd810f3a3 100644
--- a/ghost/admin/app/styles/components/modals-new.css
+++ b/ghost/admin/app/styles/components/modals-new.css
@@ -266,7 +266,7 @@
 
 .modal-body .gh-image-uploader {
     margin: 0;
-    background: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
+    background: var(--whitegrey-l2);
 }
 
 /* Modifiers
diff --git a/ghost/admin/app/styles/components/modals.css b/ghost/admin/app/styles/components/modals.css
index 73d4257b45..942067ba9f 100644
--- a/ghost/admin/app/styles/components/modals.css
+++ b/ghost/admin/app/styles/components/modals.css
@@ -249,7 +249,7 @@
 
 .modal-body .gh-image-uploader {
     margin: 0;
-    background: color-mod(var(--whitegrey) h(+7) s(-4%) l(+5%));
+    background: var(--whitegrey-l2);
 }
 
 
diff --git a/ghost/admin/app/styles/components/uploader.css b/ghost/admin/app/styles/components/uploader.css
index 298789b687..ed7977b061 100644
--- a/ghost/admin/app/styles/components/uploader.css
+++ b/ghost/admin/app/styles/components/uploader.css
@@ -10,7 +10,7 @@
     min-height: 130px;
     overflow: hidden;
     margin: 1.6em 0;
-    color: color-mod(var(--midgrey) l(-18%));
+    color: var(--middarkgrey);
     text-align: center;
     border-radius: 3px;
 }
@@ -73,6 +73,7 @@
 .gh-image-uploader .x-file-input {
     flex-grow: 1;
     display: flex;
+    width: 100%;
 }
 
 .gh-image-uploader .x-file-input label {
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index 1e86d2fc6e..7dd3810894 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -1089,6 +1089,30 @@ textarea.gh-member-details-textarea {
     min-height: 180px;
 }
 
+.gh-members-import-uploader svg {
+    width: 3.2rem;
+    height: 3.2rem;
+    margin-bottom: 1rem;
+}
+
+.gh-members-import-uploader svg path {
+    stroke: var(--midlightgrey);
+}
+
+.gh-members-import-uploader:hover svg path {
+    stroke: var(--midgrey-l1);
+}
+
+.gh-members-import-uploader .description {
+    color: var(--midgrey);
+    font-size: 1.4rem;
+    font-weight: 500;
+}
+
+.gh-members-import-uploader:hover .description {
+    color: var(--midgrey-d2);
+}
+
 .gh-members-import-file {
     min-height: 180px;
 }
diff --git a/ghost/admin/app/styles/patterns/boxes.css b/ghost/admin/app/styles/patterns/boxes.css
index 40f06cf203..774b60a300 100644
--- a/ghost/admin/app/styles/patterns/boxes.css
+++ b/ghost/admin/app/styles/patterns/boxes.css
@@ -15,19 +15,29 @@
 
 .gh-box a {
     color: var(--black);
-    font-weight: 600;
+    font-weight: 500;
 }
 
 .gh-box svg:first-of-type {
     position: absolute;
     left: 12px;
     width: auto;
+    fill: var(--blue);
 }
 
 .gh-box-tip svg:first-of-type {
     top: 12px;
     height: 2rem;
-    fill: var(--blue);
+}
+
+.gh-box-green {
+    padding: 12px 24px;
+    background: color-mod(var(--green) a(4%));
+    border-color: color-mod(var(--green) a(60%));
+}
+
+.gh-box-green a {
+    color: var(--green-d1);
 }
 
 .gh-box-alert {