Use shared CSS for portfolio members table

styles/components/_accordion_table.scss

@@ -59,8 +59,8 @@
         }
       }
 
-      th, td {
-        border-bottom: none;
+      th, td, tr {
+        border-bottom: 1px dashed $color-gray-lightest;
       }
 
       th[scope=rowgroup] {
@@ -77,7 +77,7 @@
           }
 
           border-bottom: 1px dashed $color-white;
-          background-color: $color-blue-light;
+          background-color: $color-gray-lightest;
         }
       }
     }

templates/fragments/admin/portfolio_members.html

@@ -6,7 +6,7 @@
 {% from "components/alert.html" import Alert %}
 
 <section class="member-list" id="portfolio-members">
-  <div class='responsive-table-wrapper panel'>
+  <div class='responsive-table-wrapper panel accordion-table'>
     {% if g.matchesPath("portfolio-members") %}
       {% include "fragments/flash.html" %}
     {% endif %}
@@ -14,18 +14,22 @@
       <form method='POST' id="member-perms" action='{{ url_for("portfolios.edit_portfolio_members", portfolio_id=portfolio.id) }}' autocomplete="off" enctype="multipart/form-data">
       {{ member_perms_form.csrf_token }}
 
-      <div class='member-list-header'>
-        <div class='left'>
+      <div class='application-list-item'>
+        <header>
+          <div class='accordion-table__header'>
+            <div class='accordion-table__title'>
               <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
               <div class='subheading'>
                 {{ "portfolios.admin.portfolio_members_subheading" | translate }}
               </div>
             </div>
+
             <a class='icon-link'>
               {{ Icon('info') }}
               {{ "portfolios.admin.settings_info" | translate }}
             </a>
           </div>
+        </header>
 
         {% if not portfolio.members %}
           <p>{{ "portfolios.admin.no_members" | translate }}</p>
@@ -52,6 +56,7 @@
             </tbody>
 
           </table>
+        </div>
         <div class="members-table-footer">
           <div class="action-group save">
             {% if user_can(permissions.EDIT_PORTFOLIO_USERS) %}
@@ -59,8 +64,8 @@
             {% endif %}
           </div>
         </div>
-      {% endif %}
 
+      {% endif %}
       </form>
     </base-form>
 
@@ -90,6 +95,8 @@
         {% endcall %}
       {% endfor %}
     {% endif %}
+</div>
+
 
     <div class="members-table-footer">
       <div class="action-group">