From c9ae3fcd0878083a0d549bad769c3746cdd09a31 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Thu, 18 Jun 2020 11:33:34 +0200
Subject: [PATCH] Refined members import data table design

no issues.
- refined style for members import preview table
---
 app/components/gh-members-import-table.hbs | 18 +++++++++++++-----
 app/components/modal-import-members.hbs    |  1 +
 app/styles/layouts/members.css             | 21 +++++++++++++++++++++
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/app/components/gh-members-import-table.hbs b/app/components/gh-members-import-table.hbs
index 7655204be..0f1ac4028 100644
--- a/app/components/gh-members-import-table.hbs
+++ b/app/components/gh-members-import-table.hbs
@@ -1,13 +1,21 @@
-<table class="bg-whitegrey-l2 ba b--whitegrey br3">
+<table class="ba b--whitegrey br3 f8 gh-members-import-table mt1">
     <thead>
-        <th><span class="f5">Header</span></th>
-        <th><span class="f5">Data</span><a href="#" {{action "prev"}} data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 ml2" }}</a> <a href="#" {{action "next"}} data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 ml2" }}</a></th>
+        <th class="bb br b--whitegrey bg-whitegrey-l2"><span class="f-small midgrey ttu fw5">Header</span></th>
+        <th class="bb b--whitegrey bg-whitegrey-l2">
+            <div class="flex items-center justify-between">
+                <span class="f-small midgrey ttu fw5">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>
+        </th>
     </thead>
     <tbody>
         {{#each-in currentlyDisplayedData as |key value|}}
             <tr>
-                <td><span>{{key}}</span></td>
-                <td><span>{{value}}</span></td>
+                <td class="br b--whitegrey middarkgrey"><span>{{key}}</span></td>
+                <td class="br b--whitegrey middarkgrey {{unless value "bg-whitegrey-l2"}}"><span>{{value}}</span></td>
             </tr>
         {{else}}
             <tr>
diff --git a/app/components/modal-import-members.hbs b/app/components/modal-import-members.hbs
index 08f3d34bb..5ec8d74d8 100644
--- a/app/components/modal-import-members.hbs
+++ b/app/components/modal-import-members.hbs
@@ -50,6 +50,7 @@
             {{/if}}
             <GhFormGroup>
                 {{#if this.config.enableDeveloperExperiments}}
+                    <h4 class="fw6 f8 dib mb1">Preview</h4>
                     <GhMembersImportTable @importData={{this.fileData}}/>
                 {{/if}}
 
diff --git a/app/styles/layouts/members.css b/app/styles/layouts/members.css
index 7150ac081..6177a7738 100644
--- a/app/styles/layouts/members.css
+++ b/app/styles/layouts/members.css
@@ -461,3 +461,24 @@ p.gh-members-import-errordetailtext {
     padding-bottom: 4px;
     margin-bottom: 6px;
 }
+
+.gh-members-import-table th {
+    padding: 3px 8px;
+}
+
+.gh-members-import-datanav {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.gh-members-import-table td {
+    padding: 6px 8px;
+}
+
+.gh-members-import-table tr td:first-of-type,
+.gh-members-import-table tr th:first-of-type {
+    max-width: 112px;
+}
+
+.gh-members-import-table tr:not(:last-of-type) td {
+    border-bottom: 1px solid var(--whitegrey);
+}
\ No newline at end of file