Refined styles and copy for member import dialog

no refs.
- refined copy for Stripe warnings for members import pre-validation
- updated styles for data preview for dark mode

app/components/modal-import-members.hbs

@@ -24,7 +24,7 @@
             </div>
             {{#if this.config.enableDeveloperExperiments}}
             {{#each this.importResponse.invalid.errors as |error|}}
-                <p class="gh-members-import-errordetail">{{error.message}} <span class="fw6">{{error.count}}</span></p>
+                <p class="gh-members-import-errordetail">{{error.message}} <span class="fw6">({{error.count}})</span></p>
             {{/each}}
             {{/if}}
         {{/if}}

app/services/member-import-validator.js

@@ -42,11 +42,11 @@ export default Service.extend({
         if (hasStripeId) {
             // check can be done on whole set as it won't be too slow
             if (!this.membersUtils.isStripeEnabled) {
-                validationResults.push(new MemberImportError(`You need to <a href="#/settings/labs">connect to Stripe</a> to import Stripe customers.`));
+                validationResults.push(new MemberImportError(`<strong>Missing Stripe connection</strong><br>You need to <a href="#/settings/labs">connect to Stripe</a> to import Stripe customers.`));
             } else {
                 let stripeSeverValidation = await this._checkStripeServer(validatedSet);
                 if (stripeSeverValidation !== true) {
-                    validationResults.push(new MemberImportError(`The CSV contains Stripe customers from a different Stripe account. Make sure you're connected to the correct <a href="#/settings/labs">Stripe account</a>.`));
+                    validationResults.push(new MemberImportError(`<strong>Wrong Stripe account</strong><br>The CSV contains Stripe customers from a different Stripe account. Make sure you're connected to the correct <a href="#/settings/labs">Stripe account</a>.`));
                 }
             }
         }

app/styles/app-dark.css

@@ -521,3 +521,11 @@ input:focus,
 .gh-members-chart-header .gh-contentfilter-type .gh-contentfilter-menu-trigger {
     box-shadow: 0 0 0 1px color-mod(var(--darkgrey) l(-27%) blackness(+15%) alpha(50%));
 }
+
+.gh-members-import-table::before {
+    background: #212A2E;
+}
+
+.gh-members-import-table::after {
+    background: #212A2E;
+}

app/styles/layouts/members.css

@@ -474,16 +474,16 @@ textarea.gh-member-details-textarea {
     padding: 0 32px;
     background:
         /* Shadow covers */
-        linear-gradient(white 30%, rgba(255,255,255,0)),
-        linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
+        linear-gradient(var(--white) 30%, rgba(255,255,255,0)),
+        linear-gradient(rgba(255,255,255,0), var(--white) 70%) 0 100%,
 
         /* Shadows */
         /* radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.12), rgba(0,0,0,0)) -64px 0,
         radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.12), rgba(0,0,0,0)) -64px 100%; */
         linear-gradient(rgba(0,0,0,0.08), rgba(0,0,0,0)),
         linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.08)) 0 100%;
 	background-repeat: no-repeat;
-	background-color: white;
+	background-color: var(--white);
 	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
 
 	/* Opera doesn't support this in the shorthand */
@@ -536,7 +536,7 @@ p.gh-members-import-errordetailtext {
     display: block;
     content: "";
     top: 0;
-    right: -33px;
+    right: -32px;
     bottom: 0;
     height: 100%;
     width: 32px;