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 {
-      margin-top: 0;
+      &: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,44 +8,54 @@
   @include panel-margin;
   min-width: 100%;
 
-  tr {
+  tbody {
-    th,
+    tr {
-    td {
+      th,
-      white-space: nowrap;
-    }
-
-    th {
-      @include block-list-header;
-      display: table-cell;
-    }
-
-    td {
-      @include block-list-item;
-      display: table-cell;
-    }
-
-    &:last-child {
       td {
-        border-bottom-style: solid;
+        @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,
+        th {
+          border-bottom-style: solid;
+        }
+      }
+
+      .table-cell--align-right {
+        text-align: right;
+      }
+
+      .table-cell--shrink {
+        width: 1%;
+      }
+
+      .table-cell--expand {
+        width: 100%;
+      }
+
+      .table-cell--hide-small {
+        display: none;
+
+        @include media($medium-screen) {
+          display: table-cell;
+        }
       }
     }
+  }
 
-    .table-cell--align-right {
+  thead {
-      text-align: right;
+    tr {
-    }
+      th {
-
+        @include block-list-header;
-    .table-cell--shrink {
-      width: 1%;
-    }
-
-    .table-cell--expand {
-      width: 100%;
-    }
-
-    .table-cell--hide-small {
-      display: none;
-
-      @include media($medium-screen) {
         display: table-cell;
       }
     }

scss/sections/_projects_list.scss

@@ -5,19 +5,8 @@
     justify-content: space-between;
 
     .project-list-item__environment__link {
-      text-decoration: none;
+      @include icon-link;
-      display: flex;
+      @include icon-link-large;
-      flex-direction: row;
-      align-items: center;
-
-      .icon {
-        @include icon-color($color-primary);
-        margin-right: $gap;
-      }
-
-      span {
-        text-decoration: underline;
-      }
     }
 
     .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,40 +60,38 @@
     </div>
   </div>
 
-  <div class="panel">
+  <div class='responsive-table-wrapper'>
-    <div class='responsive-table-wrapper'>
+    <table>
-      <table>
+      <thead>
-        <thead>
+        <tr>
-          <tr>
+          <th scope="col">Order ID</th>
-            <th scope="col">Order ID</th>
+          <th scope="col">Request Date</th>
-            <th scope="col">Request Date</th>
+          <th scope="col">Requester</th>
-            <th scope="col">Requester</th>
+          <th scope="col">Total Apps</th>
-            <th scope="col">Total Apps</th>
+          <th scope="col">Status</th>
-            <th scope="col">Status</th>
+          <th scope="col" class="table-cell--shrink">Actions</th>
-            <th scope="col">Actions</th>
+        </tr>
-          </tr>
+      </thead>
-        </thead>
+      <tbody>
-        <tbody>
+        {% for r in requests %}
-          {% for r in requests %}
+        <tr>
-          <tr>
+          <th scope="row">
-            <th scope="row">
+            <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>
-              <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>
+            {% if r['is_new'] %}<span class="usa-label">New</span>
-              {% if r['is_new'] %}<span class="usa-label">New</span>
+          </th>
-            </th>
-            {% end %}
-            <td>{{ r['date'] }}</td>
-            <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>
-          </tr>
           {% end %}
-        </tbody>
+          <td>{{ r['date'] }}</td>
-      </table>
+          <td>{{ r['full_name'] }}</td>
-    </div>
+          <td>{{ r['app_count'] }}</td>
+          <td>{{ r['status'] }}</td>
+          <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>
 

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><a href="#" class="icon-link icon-link--large">{{ 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 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'] %}