Refined members import modal dropdown

no refs.
- updated style of members import modal field dropdown

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"

ghost/admin/app/components/gh-members-import-table.hbs

@@ -1,7 +1,8 @@
 <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">
+        <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">
@@ -10,13 +11,14 @@
                     </div>
                 </div>
             </th>
-        <th class="bb b--whitegrey"><span class="f-small midgrey ttu fw5">Import as...</span></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}}

ghost/admin/app/styles/app-dark.css

@@ -529,3 +529,7 @@ input:focus,
 .gh-members-import-table::after {
     background: #212A2E;
 }
+.gh-import-member-select,
+.gh-import-member-select select {
+    background: none !important;
+}

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;
+    }
+}

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" />