Update member list table styles

js/components/members_list.js

@@ -93,7 +93,7 @@ export default {
         displayName: 'Environments',
         attr: 'num_env',
         sortFunc: numericSort,
-        class: 'table-cell--align-right',
+        class: 'table-cell--align-center',
       },
       {
         displayName: 'Status',

styles/components/_portfolio_layout.scss

@@ -103,6 +103,36 @@
 .portfolio-content {
   margin: 6 * $gap $gap 0 $gap;
 
+  .member-list {
+    .panel {
+      padding: $gap / 2 0;
+      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+      border-top: none;
+      border-bottom: none;
+    }
+
+    table {
+      box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
+      thead {
+        th:first-child {
+          padding-left: 3 * $gap;
+        }
+      }
+
+      th {
+        background-color: $color-gray-lightest;
+        padding: $gap 2 * $gap;
+        border-top: none;
+        border-bottom: none;
+        color: $color-gray;
+      }
+
+      td {
+        border-bottom: 1px solid $color-gray-lightest;
+      }
+    }
+  }
+
   .application-content {
     .subheading {
       @include subheading;

styles/elements/_tables.scss

@@ -17,6 +17,10 @@
       text-align: right;
     }
 
+    &.table-cell--align-center {
+      text-align: center;
+    }
+
     &.table-cell--shrink {
       width: 1%;
     }

templates/portfolios/applications/members.html

@@ -29,8 +29,9 @@
 <members-list
   inline-template
   id="search-template"
+  class='member-list'
   v-bind:members='{{ members | tojson}}'>
-  <div class='responsive-table-wrapper'>
+  <div class='responsive-table-wrapper panel'>
     <table v-cloak v-if='searchedList && searchedList.length'>
       <thead>
         <tr>
@@ -51,7 +52,7 @@
           <td>
             <a :href="member.edit_link" class="icon-link icon-link--large" v-html="member.name"></a>
           </td>
-          <td class="table-cell--align-right" v-if='member.num_env'>
+          <td class="table-cell--align-center" v-if='member.num_env'>
             <span v-html="member.num_env"></span>
           </td>
           <td class='table-cell--shrink' v-else>
@@ -60,6 +61,14 @@
           <td v-html="member.status"></td>
           <td v-html="member.role"></td>
         </tr>
+        <tr>
+          <td colspan=4>
+            <a class="icon-link" href="{{ url_for('portfolios.new_member', portfolio_id=portfolio.id) }}">
+              Add A New Member
+              {{ Icon('plus') }}
+            </a>
+          </td>
+        </tr>
       </tbody>
     </table>
     <div v-else>

templates/portfolios/members/index.html

@@ -25,6 +25,7 @@
 <members-list
   inline-template
   id="search-template"
+  class='member-list'
   v-bind:members='{{ members | tojson}}'
   v-bind:role_choices='{{ role_choices | tojson}}'
   v-bind:status_choices='{{ status_choices | tojson}}'>
@@ -61,7 +62,7 @@
     </div>
   </form>
 
-  <div class='responsive-table-wrapper'>
+  <div class='responsive-table-wrapper panel'>
     <table v-cloak v-if='searchedList && searchedList.length'>
       <thead>
         <tr>
@@ -91,6 +92,14 @@
           <td v-html="member.status"></td>
           <td v-html="member.role"></td>
         </tr>
+        <tr>
+          <td colspan=4>
+            <a class="icon-link" href="{{ url_for('portfolios.new_member', portfolio_id=portfolio.id) }}">
+              Add A New Member
+              {{ Icon('plus') }}
+            </a>
+          </td>
+        </tr>
       </tbody>
     </table>
     <div v-else>