Refined members import dialog

no issue
- updated screen logic for member import
- added icons and refined styles for file upload dialog

ghost/admin/app/components/modal-import-members.hbs

@@ -3,18 +3,14 @@
         {{#if this.response}}
             Import result
         {{else}}
-            Import {{#if this.filePresent}}<a href="#" {{action "reset"}}><span>(start over)</span></a>{{/if}}
+            Import
         {{/if}}
     </h1>
 </header>
 <a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
 
-{{#if this.failureMessage}}
-    <div class="failed bg-red-l1 ba">{{this.failureMessage}}</div>
-{{/if}}
-
-<div class="modal-body bg-whitegrey-l2 ba b--whitegrey br3">
-    {{#if this.response}}
+{{#if this.response}}
+    <div class="modal-body bg-whitegrey-l2 ba b--whitegrey br3">
         <table class="gh-members-import-results">
             <tr>
                 <td>Imported:</td>
@@ -33,38 +29,53 @@
                 </tr>
             {{/if}}
         </table>
-    {{else}}
-        {{#if this.filePresent}}
+    </div>
+{{else}}
+    <div class="modal-body">
+        {{#if (and this.filePresent (not this.failureMessage))}}
             <GhFormGroup>
-                <label for="label-input">Labels</label>
-                <GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />
+                <div class="bg-whitegrey-l2 ba b--whitegrey br3">
+                    <div class="flex flex-column items-center justify-center gh-members-import-file">
+                        {{svg-jar "file-tabular-data" class="w9 h9 mb1 stroke-midgrey"}}
+                        <div class="description midgrey">{{this.file.name}}</div>
+                    </div>
+                </div>
+                <div class="mt4">
+                    <label for="label-input"><span class="fw6 f8 dib mb1">Labels</span></label>
+                    <GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />
+                    <p>Will be applied to all newly imported members</p>
+                </div>
             </GhFormGroup>
         {{else}}
-            <div class="upload-form">
-                <section class="gh-image-uploader {{this.dragClass}}">
+            {{#if this.failureMessage}}
+                <div class="failed flex items-center gh-members-upload-failuremessage">
+                    {{svg-jar "warning" class="w4 h4 fill-red mr1"}}
+                    {{this.failureMessage}}
+                </div>
+            {{/if}}
+            <div class="upload-form bg-whitegrey-l2 ba b--whitegrey br3">
+                <section class="gh-image-uploader gh-members-import-uploader {{this.dragClass}}">
                     <GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{action "fileSelected"}} @accept={{this.accept}}>
-                        <div class="description">{{this.labelText}}</div>
+                        <div class="flex flex-column items-center">
+                            {{svg-jar "upload" class="w9 h9 mb1 stroke-midgrey"}}
+                            <div class="description midgrey">{{this.labelText}}</div>
+                        </div>
                     </GhFileInput>
                 </section>
             </div>
         {{/if}}
-    {{/if}}
-</div>
+    </div>
+{{/if}}
 
-<div class="modal-footer">
-    {{#if this.response}}
+<div class="modal-footer {{if (and this.filePresent (not this.failureMessage) (not this.response)) "modal-footer-spread"}}">
+    {{#if (and this.filePresent (not this.failureMessage) (not this.response))}}
+        <button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
+            <span>Start over</span>
+        </button>
+        <button class="gh-btn gh-btn-green" {{action "upload"}} disabled={{this.importDisabled}}><span>Import</span></button>
+    {{else}}
         <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
             <span>Close</span>
         </button>
-    {{else if this.failureMessage}}
-        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
-            <span>Cancel</span>
-        </button>
-    {{else}}
-        <button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
-            <span>Cancel</span>
-        </button>
-
-        <button class="gh-btn gh-btn-green" {{action "upload"}} disabled={{this.importDisabled}}><span>Import</span></button>
     {{/if}}
 </div>

ghost/admin/app/styles/components/modals.css

@@ -145,6 +145,10 @@
     margin-top: 20px;
 }
 
+.modal-footer-spread {
+    justify-content: space-between;
+}
+
 .modal-footer button {
     margin-left: 12px;
     min-width: 100px;

ghost/admin/app/styles/layouts/members.css

@@ -394,7 +394,25 @@ textarea.gh-member-details-textarea {
 /* Import modal
 /* ---------------------------------------------------------- */
 
+.gh-members-import-uploader {
+    width: 100%;
+    min-height: 180px;
+}
+
 .gh-members-import-results {
     margin: 0;
     width: auto;
 }
+
+.gh-members-import-file {
+    min-height: 180px;
+}
+
+.gh-members-upload-failuremessage {
+    background: color-mod(var(--red) a(7%));
+    border: 1px solid var(--red);
+    border-radius: 4px;
+    padding: 8px;
+    color: var(--red);
+    margin-bottom: 20px;
+}

ghost/admin/public/assets/icons/file-tabular-data.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5px;}</style></defs><title>office-file-sheet-alternate</title><line class="a" x1="8.999" y1="10.499" x2="8.999" y2="19.499"/><line class="a" x1="4.499" y1="14.999" x2="19.499" y2="14.999"/><path class="a" d="M22.81,5.56a1.5,1.5,0,0,1,.439,1.061V21A2.25,2.25,0,0,1,21,23.249H3A2.25,2.25,0,0,1,.749,21V3A2.251,2.251,0,0,1,3,.749H17.378a1.5,1.5,0,0,1,1.061.44Z"/><path class="a" d="M17.249.749v4.5a1.5,1.5,0,0,0,1.5,1.5h4.5"/><path class="a" d="M19.5,18.749a.75.75,0,0,1-.75.75H5.249a.75.75,0,0,1-.75-.75V10.5h14.25a.75.75,0,0,1,.75.75Z"/><path class="a" d="M13.5,10.5h-9V8.249a.75.75,0,0,1,.75-.75H13.5"/></svg>

ghost/admin/public/assets/icons/upload.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.a{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2px;}</style></defs><title>upload-bottom</title><line class="a" x1="12.001" y1="15.75" x2="12.001" y2="3.75"/><polyline class="a" points="16.501 8.25 12.001 3.75 7.501 8.25"/><path class="a" d="M23.251,15.75v1.5a3,3,0,0,1-3,3H3.751a3,3,0,0,1-3-3v-1.5"/></svg>