Revamp the app members table

- remove some of the custom styles in the page-specific style sheet.
Instead, try to rely on default USWDS styles as much as possible.
- tweak a few values in the tables stylesheet
- move some markup around in the members template

styles/components/_portfolio_layout.scss

@@ -138,85 +138,22 @@
       color: $color-gray;
     }
 
+    .responsive-table-wrapper {
+      padding-bottom: $gap * 3;
+      margin-bottom: 0;
+    }
+
     table {
-      margin: 0;
+      min-width: 100%;
-      width: 100%;
+      margin-top: 0;
+    }
 
-      thead {
+    a.create-member {
-        th:first-child {
+      display: inherit;
-          padding-left: 3 * $gap;
+      margin-left: auto;
-        }
+      margin-right: auto;
-
+      max-width: 50%;
-        tr:first-child {
+      margin-top: 3rem;
-          padding: 0 2 * $gap 0 5 * $gap;
-        }
-
-        td {
-          font-weight: bold;
-          font-size: 1.4rem;
-          border-top: 0;
-        }
-      }
-
-      th {
-        background-color: $color-gray-lightest;
-        padding: $gap 2 * $gap;
-        border-top: none;
-        border-bottom: none;
-        color: $color-gray;
-      }
-
-      td:first-child {
-        padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap;
-      }
-
-      tbody {
-        td {
-          border-bottom: 1px solid $color-gray-lightest;
-          font-size: 1.6rem;
-          border-top: 0;
-          padding: 3 * $gap 2 * $gap;
-
-          .usa-button-disabled {
-            color: $color-gray-medium;
-            background-color: $color-gray-lightest;
-            box-shadow: inset 0 0 0 1px $color-gray-medium;
-          }
-
-          button {
-            padding: 0;
-            margin: 0;
-            font-size: 1.5rem;
-            width: 11rem;
-            height: 3rem;
-          }
-        }
-
-        .name {
-          font-weight: bold;
-
-          .you {
-            font-size: 1.2rem;
-          }
-        }
-
-        .usa-input.usa-input--success {
-          margin: 0;
-        }
-
-        select {
-          border: none;
-        }
-      }
-
-      .add-member-link {
-        text-align: right;
-      }
-
-      .usa-button-primary .usa-button {
-        padding: 2 * $gap;
-        float: right;
-      }
     }
 
     input.usa-button.usa-button-primary {

styles/elements/_tables.scss

@@ -66,7 +66,7 @@ table.atat-table {
 
         display: table-cell;
         white-space: nowrap;
-        border-bottom-style: dashed;
+        border-bottom-style: solid;
         border-top: none;
 
         &:last-child {
@@ -88,18 +88,14 @@ table.atat-table {
       th,
       td {
         @include block-list-header;
-
         display: table-cell;
         white-space: nowrap;
+        color: black;
       }
     }
   }
 
   @at-root .panel #{&} {
-    tr:last-child td {
-      border-bottom: 0;
-    }
-
     &:last-child {
       margin-bottom: 0;
     }
@@ -138,10 +134,6 @@ table.atat-table {
   }
 
   @at-root .panel #{&} {
-    tr:last-child td {
-      border-bottom: 0;
-    }
-
     &:last-child {
       margin-bottom: 0;
     }

templates/fragments/members.html

@@ -15,10 +15,16 @@
 ) %}
 
   
-  {% include "fragments/flash.html" %}
+  {% if g.matchesPath("application-members") %}
+      {% include "fragments/flash.html" %}
+  {% endif %}
 
+  <div class="subheading">
+    {{ 'portfolios.applications.settings.team_members' | translate }}
+  </div>
+  <div class="panel">
   {% if not application.members %}
-    <div class='empty-state'>
+    <div class='empty-state panel__content'>
       <p class='empty-state__message'>{{ ("portfolios.applications.team_settings.blank_slate.title" | translate) }}</p>
 
       {{ Icon('avatar') }}
@@ -45,21 +51,9 @@
     </div>
 
   {% else %}
-    <div class='subheading'>
+    {% set new_member_modal_name = "add-app-mem" %}
-      {{ 'portfolios.applications.settings.team_members' | translate }}
+    
-
+    {% for member in members %}
-      {% set new_member_modal_name = "add-app-mem" %}
-      {% if user_can_create_app_member %}
-        <a class="icon-link modal-link icon-link__add" v-on:click="openModal('{{ new_member_modal_name }}')">
-          {{ Icon("plus") }}
-          {{ "portfolios.applications.add_member" | translate }}
-        </a>
-      {% endif %}
-    </div>
-
-    <section class="member-list application-list" id="application-members">
-      <div class='responsive-table-wrapper panel'>
-        {% for member in members %}
           {% set modal_name = "edit_member-{}".format(loop.index) %}
           {% call Modal(modal_name) %}
             <div class="modal__form--header">
@@ -78,7 +72,11 @@
             </base-form>
           {% endcall %}
         {% endfor %}
-        <table>
+
+    
+    <section class="member-list application-list" id="application-members">
+      <div class='responsive-table-wrapper'>
+        <table class="atat-table">
           <thead>
             <tr>
               <th>Member</th>
@@ -92,7 +90,7 @@
               {% set modal_name = "edit_member-{}".format(loop.index) %}
               <tr>
                 <td>
-                  {{ member.user_name }}
+                  <strong>{{ member.user_name }}</strong>
                   <a class="icon-link" v-on:click="openModal('{{ modal_name }}')">
                     {{ Icon('edit') }}
                   </a>
@@ -123,6 +121,11 @@
             {% endfor %}
           </tbody>
         </table>
+        {% if user_can_create_app_member %}
+          <a class="usa-button usa-button-secondary create-member" v-on:click="openModal('{{ new_member_modal_name }}')">
+            {{ "portfolios.applications.add_member" | translate }}
+          </a>
+        {% endif %}
       </div>
 
       {% if user_can_create_app_member %}
@@ -139,5 +142,6 @@
       {% endif %}
     </section>
   {% endif %}
+  </div>
 
 {% endmacro %}