Update requests table and add temp nav link

scss/elements/_inputs.scss

@@ -28,3 +28,10 @@ select {
     padding-bottom: 0.5rem;
   }
 }
+
+.usa-search {
+  // width: 45%;
+  // float: left;
+  // padding: $gap * 2;
+  margin-right: $gap;
+}

scss/elements/_panels.scss

@@ -44,3 +44,12 @@
     }
   }
 }
+
+.panel__actions {
+  display: flex;
+  padding: $gap;
+
+  // &__search {
+  //   float: left;
+  // }
+}

scss/elements/_tables.scss

@@ -16,6 +16,11 @@ table {
 
     th {
       @include block-list-header;
+
+      &:first-child {
+        padding: $gap * 2 !important; // This overrides USWDS's no padding
+      }
+
     }
 
     td {

templates/navigation/global_navigation.html.to

@@ -5,6 +5,7 @@
     {% end %}
 
     {% module SidenavItem("Requests", href="/requests", icon="document", active=matchesPath('/requests')) %}
+    {% module SidenavItem("+ New Request", href="/requests/new", icon="", active=matchesPath('/requests/new')) %}
     {% module SidenavItem("Workspaces", href="/workspaces", icon="cloud", active=matchesPath('/workspaces')) %}
   </ul>
 </div>

templates/requests.html.to

@@ -3,35 +3,51 @@
 {% block content %}
 
 
-
-
 <div class="col col--grow">
 
   <div class="panel">
-
-    <div class="panel__content">
-
-      <div class="panel__heading">
-        <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
+    <div class="panel__actions">
+      <div class="panel__actions--search">
+        <form class="usa-search usa-search-small">
+          <label class="usa-sr-only" for="search-field-small">Search small</label>
+          <input id="search-field-small" type="search" name="search" placeholder="Search by Order ID">
+          <button type="submit">
+            <span class="usa-sr-only">Search</span>
+          </button>
+        </form>
       </div>
+      <div class="panel__actions--filter">
+        <select id="filter_status" name="filter_status" required="">
+          <option value="" selected disabled>Filter by status</option>
+          <option value="">Active</option>
+          <option value="">Pending</option>
+          <option value="">Denied</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+
+
+  <div class="panel">
 
     <table class="usa-table-borderless" width="100%">
       <thead>
         <tr>
-            <th scope="col">Order ID</th>
-            <th scope="col">Request Date</th>
-            <th scope="col">Requester</th>
-            <th scope="col">Total Apps</th>
-            <th scope="col">Status</th>
-            <th scope="col">Actions</th>
+          <th>Order ID</th>
+          <th>Request Date</th>
+          <th>Requester</th>
+          <th>Total Apps</th>
+          <th>Status</th>
+          <th>Actions</th>
         </tr>
       </thead>
       <tbody>
         {% for r in requests %}
         <tr>
-            <th scope="row"><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
+          <td><a href="{{ reverse_url('request_form_update', 1, r['order_id']) }}">{{ r['order_id'] }}</a>
             {% if r['is_new'] %}<span class="usa-label">New</span>
-            </th>
+          </td>
           {% end %}
           <td>{{ r['date'] }}</td>
           <td>{{ r['full_name'] }}</td>
@@ -42,10 +58,6 @@
         {% end %}
       </tbody>
     </table>
-
-
-
-    </div>
   </div>
 </div>