Generalize table headers and titles

styles/components/_accordion_table.scss

@@ -1,24 +1,5 @@
 .accordion-table {
 
-  .accordion-table__header {
-    @include panel-base;
-    @include panel-theme-default;
-    border-top: none;
-    border-bottom: 0;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    align-items: center;
-    padding: $gap * 2;
-
-    .accordion-table__title {
-      @include h4;
-      font-size: $lead-font-size;
-      flex: 2;
-    }
-  }
-
   table {
     thead th {
       text-transform: uppercase;

styles/components/_portfolio_layout.scss

@@ -171,26 +171,6 @@
       padding-bottom: 0;
     }
 
-    .member-list-header {
-      margin: 2 * $gap 5 * $gap;
-      padding: inherit;
-      overflow: auto;
-
-      .left {
-        float: left;
-        padding-bottom: 0.8rem;
-      }
-
-      .icon-link {
-        float: right;
-        margin-top: 0.8rem;
-      }
-
-      .icon {
-
-      }
-    }
-
     .subheading {
       font-size: 1.4rem;
       color: $color-gray;

styles/elements/_tables.scss

@@ -102,6 +102,25 @@
   overflow-x: auto;
   @include panel-margin;
 
+  .responsive-table-wrapper__header {
+    @include panel-base;
+    @include panel-theme-default;
+    border-top: none;
+    border-bottom: 0;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: $gap * 2;
+
+    .responsive-table-wrapper__title {
+      @include h4;
+      font-size: $lead-font-size;
+      flex: 2;
+    }
+  }
+
   table {
     margin-bottom: 0;
   }

templates/fragments/admin/portfolio_members.html

@@ -16,8 +16,8 @@
 
       <div class='application-list-item'>
         <header>
-          <div class='accordion-table__header'>
+          <div class='responsive-table-wrapper__header'>
-            <div class='accordion-table__title'>
+            <div class='responsive-table-wrapper__title'>
               <div class='h3'>{{ "portfolios.admin.portfolio_members_title" | translate }}</div>
               <div class='subheading'>
                 {{ "portfolios.admin.portfolio_members_subheading" | translate }}

templates/fragments/applications/environments.html

@@ -2,8 +2,8 @@
 
 <div class="application-list-item">
   <header>
-    <div class="accordion-table__header">
+    <div class="responsive-table-wrapper__header">
-      <div class='accordion-table__title'>
+      <div class='responsive-table-wrapper__title'>
         <div class='h3'>{{ 'portfolios.applications.environments_heading' | translate }}</div>
       </div>
       <a class='icon-link'>

templates/portfolios/reports/index.html

@@ -347,8 +347,8 @@
     </budget-chart>
 
     <div class='accordion-table responsive-table-wrapper'>
-      <div class='accordion-table__header'>
+      <div class='responsive-table-wrapper__header'>
-        <h2 class='accordion-table__title'>Total spent per month</h2>
+        <h2 class='responsive-table-wrapper__title'>Total spent per month</h2>
 
         <select name='month' id='month' onchange='location = this.value' class='spend-table__month-select'>
           {% for m in cumulative_budget["months"] %}