Update styling for tables across the site

styles/components/_portfolio_layout.scss

@@ -138,11 +138,6 @@
 .portfolio-content {
   margin: (4 * $gap) $gap 0 $gap;
 
-  .panel {
-    @include shadow-panel;
-    padding-bottom: $gap * 3;
-  }
-
   a.add-new-button {
     display: inherit;
     margin-left: auto;
@@ -156,11 +151,6 @@
       margin-bottom: 0;
     }
 
-    table {
-      min-width: 100%;
-      margin-top: 0;
-    }
-
     input.usa-button.usa-button-primary {
       width: 9rem;
       height: 4rem;
@@ -250,6 +240,20 @@
     .panel {
       @include shadow-panel;
       padding-bottom: 2rem;
+
+      table {
+        thead,
+        tbody {
+          tr {
+            th,
+            td {
+              &:last-child {
+                border-left: none;
+              }
+            }
+          }
+        }
+      }
     }
 
     .application-list-item {

styles/elements/_panels.scss

@@ -46,7 +46,6 @@
 }
 
 @mixin shadow-panel {
-  padding: ($gap / 2) 0;
   box-shadow: $box-shadow;
   border-top: none;
   border-bottom: none;
@@ -59,8 +58,7 @@
   @include shadow-panel;
 
   &__content {
-    margin: ($gap * 2) 0;
-    padding: 0 ($gap * 2);
+    padding: $gap * 2;
   }
 
   &__body {
@@ -110,8 +108,4 @@
   &__footer {
     padding: 3 * $gap;
   }
-
-  &__actions {
-    @include panel-actions;
-  }
 }

styles/elements/_tables.scss

@@ -6,7 +6,6 @@
 
 table.atat-table {
   @include panel-margin;
-
   min-width: 100%;
 
   @include ie-only {
@@ -42,42 +41,24 @@ table.atat-table {
     }
   }
 
+  tbody,
   thead {
-    tr th {
-      .sorting-direction {
-        position: inherit;
-        margin-right: -16px;
-        width: 16px;
-
-        .icon {
-          height: 14px;
-          width: 16px;
+    tr {
+      th,
+      td {
+        background-color: $color-white;
         margin: 0;
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      th,
-      td {
-        @include block-list-item;
-
+        padding: $gap * 2;
+        border: 1px solid $color-gray-light;
         display: table-cell;
         white-space: nowrap;
-        border-bottom-style: solid;
-        border-top: none;
 
-        &:last-child {
-          border-bottom-style: dashed;
-        }
+        &:first-child {
+          border-left: none;
         }
 
         &:last-child {
-        td,
-        th {
-          border-bottom-style: solid;
+          border-right: none;
         }
       }
     }
@@ -87,19 +68,12 @@ table.atat-table {
     tr {
       th,
       td {
-        @include block-list-header;
-        display: table-cell;
-        white-space: nowrap;
-        color: black;
+        background-color: $color-gray-lightest;
+        padding: 1rem 1.5rem;
+        border-top: none;
       }
     }
   }
-
-  @at-root .panel #{&} {
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
 }
 
 .responsive-table-wrapper {

templates/portfolios/fragments/members_edit.html

@@ -30,10 +30,9 @@
       <a v-on:click="openModal('{{ modal_id }}')" class='usa-button {{ archive_button_class }}'>
         {{ "portfolios.members.archive_button" | translate }}
       </a>
-    </td>
-
       {% if not ppoc %}
         {{ subform.member_id() }}
       {% endif %}
+    </td>
   </tr>
 {% endfor %}