From a44d09e71a252b2bec1092478e21ef1d41510511 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Mon, 11 Apr 2022 19:07:59 +0100
Subject: [PATCH] Update table style for member index view (#17207)

* add minimal table style

* tweak table style vs member index specific style

* rename

* replace padding for smaller screens
---
 app/assets/stylesheets/components/tables.scss | 16 ++++++++++------
 app/assets/stylesheets/config/_generator.scss |  3 ++-
 app/views/admin/users/_member_index.html.erb  | 18 ++++++++++--------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/app/assets/stylesheets/components/tables.scss b/app/assets/stylesheets/components/tables.scss
index 879b4f135..d636b6a13 100644
--- a/app/assets/stylesheets/components/tables.scss
+++ b/app/assets/stylesheets/components/tables.scss
@@ -65,12 +65,6 @@
     }
   }
 
-  &__lowercase {
-    th {
-      text-transform: none;
-    }
-  }
-
   tbody {
     tr {
       &:first-child {
@@ -114,4 +108,14 @@
       }
     }
   }
+
+  &--minimal {
+    th {
+      text-transform: none;
+    }
+
+    td {
+      border-bottom: none;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/config/_generator.scss b/app/assets/stylesheets/config/_generator.scss
index 60f0f5eb1..440a7e153 100644
--- a/app/assets/stylesheets/config/_generator.scss
+++ b/app/assets/stylesheets/config/_generator.scss
@@ -451,7 +451,8 @@
       'inline-block': inline-block,
       'flex': flex,
       'inline-flex': inline-flex,
-      'grid': grid
+      'grid': grid,
+      'table': table
     ),
     (),
     true,
diff --git a/app/views/admin/users/_member_index.html.erb b/app/views/admin/users/_member_index.html.erb
index 85a95b712..d5ecf53ab 100644
--- a/app/views/admin/users/_member_index.html.erb
+++ b/app/views/admin/users/_member_index.html.erb
@@ -1,10 +1,12 @@
 <%= javascript_packs_with_chunks_tag "admin/users/memberIndex", defer: true %>
-<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-7">
-  <header class="flex flex-col l:flex-row justify-content-between l:items-center ">
+<div id="member-index-content" class="crayons-card overflow-admin-main-layout-padding p-4 xl:p-0">
+  <header class="p-4 xl:p-7 pb-4">
+    <div class="flex flex-col l:flex-row justify-content-between l:items-center">
     <h1 class="crayons-title ml-2 m:ml-0">Members</h1>
     <%= render "admin/users/index/tabs" %>
-  </header>
+    </div>
     <%= render "admin/users/index/controls" %>
+  </header>
 
     <!-- Responsive screen (breakpoints below XL) data view start -->
     <div class="block xl:hidden fs-s">
@@ -57,20 +59,20 @@
     <!-- Responsive screen (breakpoints below XL) data view end -->
 
     <!-- XL screen data view start -->
-    <table class="crayons-table crayons-table__lowercase hidden xl:block" width="100%">
-      <thead>
+    <table class="crayons-table crayons-table--minimal w-100 hidden xl:table">
+      <thead class="member-data-heading">
         <tr>
-          <th scope="col" class="normal-case">Member</th>
+          <th scope="col" class="pl-7">Member</th>
           <th scope="col">Status</th>
           <th scope="col">Last activity & Joined on</th>
           <th scope="col">Organizations</th>
           <th scope="col" class="screen-reader-only">Actions</th>
         </tr>
       </thead>
-      <tbody class="crayons-card">
+      <tbody>
         <% @users.includes([:organizations]).each do |user| %>
         <tr>
-          <td>
+          <td class="pl-7">
             <div class="flex s:items-start flex-col s:flex-row">
               <%= render "admin/users/index/member_data", user: user %>
             </div>