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

@@ -4,7 +4,7 @@
  * @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
  */
 
-table {
+ table {
   @include panel-margin;
   min-width: 100%;
 
@@ -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,50 +3,62 @@
 {% block content %}
 
 
-
-
 <div class="col col--grow">
 
   <div class="panel">
-
+    <div class="panel__actions">
-    <div class="panel__content">
+      <div class="panel__actions--search">
-
+        <form class="usa-search usa-search-small">
-      <div class="panel__heading">
+          <label class="usa-sr-only" for="search-field-small">Search small</label>
-        <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
+          <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>
-
-      <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>
-          </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>
-              {% if r['is_new'] %}<span class="usa-label">New</span>
-            </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></td>
-          </tr>
-          {% end %}
-        </tbody>
-      </table>
-
-
-
     </div>
   </div>
+
+
+
+  <div class="panel">
+
+    <table class="usa-table-borderless" width="100%">
+      <thead>
+        <tr>
+          <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>
+          <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>
+          </td>
+          {% end %}
+          <td>{{ r['date'] }}</td>
+          <td>{{ r['full_name'] }}</td>
+          <td>{{ r['app_count'] }}</td>
+          <td>{{ r['status'] }}</td>
+          <td><a href="">Download</a></td>
+        </tr>
+        {% end %}
+      </tbody>
+    </table>
+  </div>
 </div>
 
 {% end %}