Adds additional buttons and functionality to app team settings.

"Add to existing environment" table, "delete member", and environment
roles and env role edit buttons added for every user in the team
settings list. Accompanying CSS changes.

styles/components/_accordion_table.scss

@@ -91,6 +91,30 @@
           border-bottom: 1px solid $color-gray-lighter;
         }
       }
+
+      .accordion-table__item__action-group {
+        padding: 1rem 3.2rem;
+        background-color: $color-gray-lightest;
+
+        button,
+        a {
+          margin: 0;
+          font-size: $small-font-size;
+        }
+
+        .icon-link {
+          padding-top: 0.5rem;
+          float: none;
+        }
+
+        > *:first-child {
+          padding-left: 0;
+        }
+
+        > *:last-child {
+          float: right;
+        }
+      }
     }
 
     .accordion-table__item__toggler {
@@ -100,6 +124,10 @@
       color: $color-blue;
       padding: $gap;
 
+      > span {
+        margin-left: auto;
+      }
+
       .icon {
         @include icon-size(12);
 
@@ -147,6 +175,17 @@
       .accordion-table__item__expanded_first {
         float: left;
       }
+
+      .accordion-table__item__expanded-role {
+        .icon-link {
+          padding: 0;
+          vertical-align: text-top;
+
+          .icon {
+            margin: 0 0 0 0.25rem;
+          }
+        }
+      }
     }
   }
 }

styles/components/_portfolio_layout.scss

@@ -1,7 +1,6 @@
 .portfolio-panel-container {
   @include media($large-screen) {
     @include grid-row;
-
     min-height: 500px;
   }
 
@@ -38,7 +37,6 @@
     &.icon-link--disabled {
       color: $color-gray-dark;
       opacity: 1;
-
       .icon {
         @include icon-color($color-gray-dark);
       }
@@ -53,7 +51,6 @@
     .icon-link {
       color: $color-gray-medium;
       pointer-events: none;
-
       &.icon-link--disabled {
         opacity: 1;
       }
@@ -63,7 +60,6 @@
 
 .portfolio-header {
   flex-direction: column;
-
   @include media($small-screen) {
     flex-direction: row;
   }
@@ -103,10 +99,8 @@
 
     .icon-link {
       padding: 0.8rem 1.2rem;
-
       &.active {
         color: $color-gray;
-
         .icon {
           @include icon-color($color-gray);
         }
@@ -150,7 +144,6 @@
 
   .unfunded {
     color: $color-red;
-
     .icon {
       @include icon-color($color-red);
     }
@@ -166,7 +159,7 @@
 }
 
 .portfolio-content {
-  margin: (6 * $gap) $gap 0 $gap;
+  margin: 6 * $gap $gap 0 $gap;
 
   .panel {
     @include shadow-panel;
@@ -175,7 +168,6 @@
   .member-list {
     .panel {
       @include shadow-panel;
-
       padding-bottom: 0;
     }
 
@@ -191,7 +183,7 @@
         }
 
         tr:first-child {
-          padding: 0 (2 * $gap) 0 (5 * $gap);
+          padding: 0 2 * $gap 0 5 * $gap;
         }
 
         td {
@@ -203,14 +195,14 @@
 
       th {
         background-color: $color-gray-lightest;
-        padding: $gap (2 * $gap);
+        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);
+        padding: 2 * $gap 2 * $gap 2 * $gap 5 * $gap;
       }
 
       tbody {
@@ -218,7 +210,7 @@
           border-bottom: 1px solid $color-gray-lightest;
           font-size: 1.6rem;
           border-top: 0;
-          padding: (3 * $gap) (2 * $gap);
+          padding: 3 * $gap 2 * $gap;
 
           .usa-button-disabled {
             color: $color-gray-medium;
@@ -318,6 +310,11 @@
     .alert {
       margin: 4rem;
     }
+
+    .member-list__subhead {
+      font-weight: $font-normal;
+      font-size: $base-font-size;
+    }
   }
 
   .application-content {
@@ -333,7 +330,6 @@
       .block-list__footer {
         border-bottom: none;
       }
-
       .application-edit__env-list-item {
         label {
           color: $color-black;
@@ -373,7 +369,6 @@
     .portfolio-applications__header--actions {
       color: $color-blue;
       font-size: $small-font-size;
-
       .icon {
         @include icon-color($color-blue);
         @include icon-size(14);
@@ -384,7 +379,6 @@
   .application-list {
     .toggle-link {
       background-color: $color-blue-light;
-
       .icon {
         margin: $gap / 2;
       }
@@ -402,7 +396,6 @@
       .application-list-item__environment__csp_link {
         font-size: $small-font-size;
         font-weight: normal;
-
         &:hover {
           background-color: $color-aqua-light;
         }
@@ -420,7 +413,6 @@
 
   .subheading {
     @include subheading;
-
     margin-top: 6 * $gap;
     margin-bottom: 2 * $gap;
   }
@@ -431,6 +423,7 @@
 
   .pending-task-order {
     background-color: $color-gold-lightest;
+
     align-items: center;
     margin: 0;
     margin-bottom: 2 * $gap;
@@ -462,7 +455,6 @@
 
     .icon--tiny {
       @include icon-size(10);
-
       margin-left: 1rem;
     }
   }
@@ -487,7 +479,7 @@
 
     th {
       background-color: $color-gray-lightest;
-      padding: $gap (2 * $gap);
+      padding: $gap 2 * $gap;
       border-top: none;
       border-bottom: none;
       color: $color-gray;
@@ -566,7 +558,6 @@
 
   .panel {
     @include shadow-panel;
-
     margin-bottom: 4 * $gap;
   }
 }
@@ -586,7 +577,6 @@
         input {
           max-width: 30em;
         }
-
         .icon-validation {
           left: 30em;
         }
@@ -615,3 +605,7 @@
     }
   }
 }
+
+.member-list__name {
+  margin-top: 1rem;
+}