Various UI fixes

use .icon-link in various places

scss/elements/_block_lists.scss

@@ -58,6 +58,10 @@
 
 .block-list__header {
   @include block-list-header;
+
+  .block-list__header__link {
+    @include icon-link;
+  }
 }
 
 .block-list__title {

scss/elements/_icon_link.scss

@@ -1,4 +1,18 @@
+@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
+  color: $color;
+
+  &:hover {
+    background-color: $hover-color;
+    color: $color;
+  }
+
+  .icon {
+    @include icon-color($color);
+  }
+}
+
 @mixin icon-link {
+  @include icon-link-color($color-primary);
   @include h5;
   display: inline-flex;
   flex-direction: row;
@@ -16,6 +30,16 @@
   }
 }
 
+@mixin icon-link-large {
+  @include h4;
+  font-weight: normal;
+
+  .icon {
+    @include icon-size(16);
+    margin-right: $gap * 2;
+  }
+}
+
 @mixin icon-link-vertical {
   flex-direction: column;
 
@@ -24,19 +48,6 @@
   }
 }
 
-@mixin icon-link-color($color: $color-blue, $hover-color: $color-aqua-lightest) {
-  color: $color;
-
-  &:hover {
-    background-color: $hover-color;
-    color: $color;
-  }
-
-  .icon {
-    @include icon-color($color);
-  }
-}
-
 .icon-link {
   @include icon-link;
   @include icon-link-color($color-primary);
@@ -44,4 +55,8 @@
   &.icon-link--vertical {
     @include icon-link-vertical;
   }
+
+  &.icon-link--large {
+    @include icon-link-large;
+  }
 }

scss/elements/_inputs.scss

@@ -202,11 +202,15 @@ select {
     flex-grow: 1;
 
     &:first-child .usa-input {
+      &:first-child {
         margin-top: 0;
       }
+    }
 
     &:last-child .usa-input {
-      margin-bottom: 0;
+      &:first-child {
+        margin-top: 0;
+      }
     }
   }
 
@@ -216,7 +220,8 @@ select {
 
     .form-col {
       .usa-input {
-        margin: 0 ($gap * 4);
+        margin-left: ($gap * 4);
+        margin-right: ($gap * 4);
       }
 
       &:first-child {

scss/elements/_tables.scss

@@ -8,24 +8,24 @@
   @include panel-margin;
   min-width: 100%;
 
+  tbody {
     tr {
       th,
-    td {
-      white-space: nowrap;
-    }
-
-    th {
-      @include block-list-header;
-      display: table-cell;
-    }
-
       td {
         @include block-list-item;
         display: table-cell;
+        white-space: nowrap;
+        border-bottom-style: dashed;
+        border-top: none;
+
+        &:last-child {
+          border-bottom-style: dashed;
+        }
       }
 
       &:last-child {
-      td {
+        td,
+        th {
           border-bottom-style: solid;
         }
       }
@@ -50,6 +50,16 @@
         }
       }
     }
+  }
+
+  thead {
+    tr {
+      th {
+        @include block-list-header;
+        display: table-cell;
+      }
+    }
+  }
 
   @at-root .panel #{&} {
     tr:last-child td {

scss/sections/_projects_list.scss

@@ -5,19 +5,8 @@
     justify-content: space-between;
 
     .project-list-item__environment__link {
-      text-decoration: none;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-
-      .icon {
-        @include icon-color($color-primary);
-        margin-right: $gap;
-      }
-
-      span {
-        text-decoration: underline;
-      }
+      @include icon-link;
+      @include icon-link-large;
     }
 
     .project-list-item__environment__members {

templates/request_approval.html.to

@@ -177,7 +177,10 @@
     <div class='action-group'>
       <a href='/' class='usa-button usa-button-big'>Approve Request</a>
       <a href='/' class='usa-button usa-button-big usa-button-secondary'>Deny Request</a>
-      <a href='/'>Cancel</a>
+      <a href='/' class='icon-link'>
+        {% module Icon('x') %}
+        <span>Cancel</span>
+      </a>
     </div>
   </form>
 </article>

templates/requests.html.to

@@ -60,7 +60,6 @@
     </div>
   </div>
 
-  <div class="panel">
   <div class='responsive-table-wrapper'>
     <table>
       <thead>
@@ -70,14 +69,14 @@
           <th scope="col">Requester</th>
           <th scope="col">Total Apps</th>
           <th scope="col">Status</th>
-            <th scope="col">Actions</th>
+          <th scope="col" class="table-cell--shrink">Actions</th>
         </tr>
       </thead>
       <tbody>
         {% for r in requests %}
         <tr>
           <th scope="row">
-              <a href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
+            <a class='icon-link icon-link--large' href="{{ reverse_url('request_form_update', 1, r['order_id']) if r["status"] != "approved" else reverse_url('financial_verification', r['order_id']) }}">{{ r['order_id'] }}</a>
             {% if r['is_new'] %}<span class="usa-label">New</span>
           </th>
           {% end %}
@@ -85,16 +84,15 @@
           <td>{{ r['full_name'] }}</td>
           <td>{{ r['app_count'] }}</td>
           <td>{{ r['status'] }}</td>
-            <td>
-              <a href="">Download</a>
-              <a href="/request/approval">Approval</a>
+          <td class="table-cell--shrink">
+            <a href="" class='icon-link'>Download</a>
+            <a href="/request/approval" class='icon-link'>Approval</a>
           </td>
         </tr>
         {% end %}
       </tbody>
     </table>
   </div>
-  </div>
 </div>
 
 {% end %}

templates/workspace_members.html.to

@@ -39,7 +39,7 @@
       <thead>
         <tr>
           <th scope="col" width="50%">Name</th>
-          <th scope="col">&nbsp;<span class="hide">Status Flag</span></th>
+          <th scope="col" class='table-cell--shrink'>&nbsp;<span class="hide">Status Flag</span></th>
           <th scope="col">Status</th>
           <th scope="col">Workspace Role</th>
         </tr>
@@ -47,8 +47,8 @@
       <tbody>
         {% for m in members %}
         <tr>
-          <td><a href="#">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
-          <td>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
+          <td><a href="#" class="icon-link icon-link--large">{{ m['first_name'] }} {{ m['last_name'] }}</a></td>
+          <td class='table-cell--shrink'>{% if m['num_projects'] == '0' %} <span class="label label--info">No Project Access</span> {% end %}</td>
           <td>{{ m['status'] }}</a></td>
           <td>{{ m['workspace_role'] }}</a></td>
         </tr>

templates/workspace_projects.html.to

@@ -6,7 +6,10 @@
   <div class='block-list project-list-item'>
     <header class='block-list__header'>
       <h2 class='block-list__title'>{{ project['name'] }} ({{ len(project['environments'])}} environments)</h2>
-      <a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>edit</a>
+      <a class='block-list__header__link' href='/workspaces/123456/projects/789/edit'>
+        {% module Icon('edit') %}
+        <span>edit</span>
+      </a>
     </header>
     <ul>
       {% for environment in project['environments'] %}