From a819837bd4f0f61ec24154a1af698c7d8c21b2b4 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peterzimon@MacBook-Pro-2.local>
Date: Tue, 7 Jul 2020 13:07:21 +0200
Subject: [PATCH] Refined members import modal dropdown

no refs.
- updated style of members import modal field dropdown
---
 .../gh-members-import-mapping-input.hbs       |  2 +-
 .../components/gh-members-import-table.hbs    | 24 +++----
 ghost/admin/app/styles/app-dark.css           |  4 ++
 ghost/admin/app/styles/layouts/members.css    | 66 +++++++++++++++++--
 ghost/admin/app/templates/members/import.hbs  |  2 +-
 5 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/ghost/admin/app/components/gh-members-import-mapping-input.hbs b/ghost/admin/app/components/gh-members-import-mapping-input.hbs
index 64b134493a..b787b270ac 100644
--- a/ghost/admin/app/components/gh-members-import-mapping-input.hbs
+++ b/ghost/admin/app/components/gh-members-import-mapping-input.hbs
@@ -1,4 +1,4 @@
-<span class="gh-select">
+<span class="gh-select gh-import-member-select {{unless this.mapTo "unmapped"}}">
     <OneWaySelect @value={{this.mapTo}}
         @options={{this.availableFields}}
         @optionValuePath="value"
diff --git a/ghost/admin/app/components/gh-members-import-table.hbs b/ghost/admin/app/components/gh-members-import-table.hbs
index e62186fe97..a98cbe4f34 100644
--- a/ghost/admin/app/components/gh-members-import-table.hbs
+++ b/ghost/admin/app/components/gh-members-import-table.hbs
@@ -1,22 +1,24 @@
 <table class="f8 gh-members-import-table ma0">
     <thead>
-        <th class="bb br b--whitegrey"><span class="f-small midgrey ttu fw5">Field</span></th>
-        <th class="bb b--whitegrey">
-            <div class="flex items-center justify-between">
-                <span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
-                <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
-                    <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
-                    <a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
+        <tr>
+            <th><span class="f-small midgrey ttu fw5">Field</span></th>
+            <th>
+                <div class="flex items-center justify-between">
+                    <span class="f-small midgrey ttu fw5 nudge-top--1">Data</span>
+                    <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
+                        <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
+                        <a href="#" {{action "next"}} class="pa1 flex items-center justify-center" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>
+                    </div>
                 </div>
-            </div>
-        </th>
-        <th class="bb b--whitegrey"><span class="f-small midgrey ttu fw5">Import as...</span></th>
+            </th>
+            <th><span class="f-small midgrey ttu fw5">Import as...</span></th>
+        </tr>
     </thead>
     <tbody>
         {{#each currentlyDisplayedData as |row|}}
             <tr>
                 <td class="middarkgrey"><span>{{row.key}}</span></td>
-                <td class="middarkgrey {{unless value "empty-cell"}}"><span>{{row.value}}</span></td>
+                <td class="middarkgrey {{unless row.value "empty-cell"}}"><span>{{row.value}}</span></td>
                 <td><span><GhMembersImportMappingInput @updateMapping={{this.updateMapping}} @mapFrom={{row.key}} @mapTo={{row.mapTo}} /></span></td>
             </tr>
         {{else}}
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 8e8bf9297c..bb1017dca8 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -528,4 +528,8 @@ input:focus,
 
 .gh-members-import-table::after {
     background: #212A2E;
+}
+.gh-import-member-select,
+.gh-import-member-select select {
+    background: none !important;
 }
\ No newline at end of file
diff --git a/ghost/admin/app/styles/layouts/members.css b/ghost/admin/app/styles/layouts/members.css
index a6c17cb284..afa4d4eda5 100644
--- a/ghost/admin/app/styles/layouts/members.css
+++ b/ghost/admin/app/styles/layouts/members.css
@@ -435,6 +435,10 @@ textarea.gh-member-details-textarea {
 /* Import modal
 /* ---------------------------------------------------------- */
 
+.fullscreen-modal-import-members {
+    max-width: 640px;
+}
+
 .gh-members-import-uploader {
     width: 100%;
     min-height: 180px;
@@ -516,7 +520,7 @@ p.gh-members-import-errordetailtext {
 
 .gh-members-import-table {
     position: relative;
-    border: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+    margin-bottom: 1px;
 }
 
 .gh-members-import-table::before {
@@ -546,6 +550,13 @@ p.gh-members-import-errordetailtext {
 .gh-members-import-table th {
     padding: 3px 8px;
     background: color-mod(var(--darkgrey) a(5%) s(+50%));
+    border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+    border-top: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+    border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+}
+
+.gh-members-import-table tr th:last-of-type {
+    border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
 }
 
 .gh-members-import-table td.empty-cell {
@@ -554,16 +565,18 @@ p.gh-members-import-errordetailtext {
 
 .gh-members-import-table td {
     padding: 6px 8px;
+    border-left: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+    border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
 }
 
 .gh-members-import-table tr td:first-of-type,
 .gh-members-import-table tr th:first-of-type {
     width: 170px;
-    border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
 }
 
-.gh-members-import-table tr:not(:last-of-type) td {
-    border-bottom: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
+.gh-members-import-table tr td:last-of-type {
+    padding: 0;
+    border-right: 1px solid color-mod(var(--darkgrey) a(7%) s(+40%));
 }
 
 .gh-members-import-datanav {
@@ -581,3 +594,48 @@ p.gh-members-import-errordetail:first-of-type {
     padding-top: 8px;
     margin-top: 8px;
 }
+
+.gh-import-member-select {
+    height: auto;
+    border: none;
+    background: none;
+    border-radius: 0;
+}
+
+.gh-import-member-select select {
+    height: 36px;
+    border: none;
+    font-size: 1.3rem;
+    line-height: 1em;
+    padding: 4px 4px 4px 8px;
+    background: none;
+    color: var(--middarkgrey);
+    font-weight: 600;
+    border-radius: 0;
+}
+
+.gh-import-member-select select option {
+    font-weight: 400;
+}
+
+.gh-import-member-select select:focus {
+    background: none;
+    color: var(--middarkgrey);
+}
+
+.gh-import-member-select.unmapped select,
+.gh-import-member-select.unmapped select:focus {
+    color: var(--midlightgrey);
+    font-weight: 400;
+}
+
+.gh-import-member-select svg {
+    right: 8px;
+}
+
+/* Fixing Firefox's select padding */
+@-moz-document url-prefix() {
+    .gh-import-member-select select {
+        padding: 4px;
+    }
+}
\ No newline at end of file
diff --git a/ghost/admin/app/templates/members/import.hbs b/ghost/admin/app/templates/members/import.hbs
index a45c8ac1a8..fd60487b45 100644
--- a/ghost/admin/app/templates/members/import.hbs
+++ b/ghost/admin/app/templates/members/import.hbs
@@ -1,4 +1,4 @@
 <GhFullscreenModal @modal="import-members"
     @confirm={{this.refreshMembers}}
     @close={{this.close}}
-    @modifier="action wide" />
+    @modifier="action wide import-members" />