From 56d6077f487b6ddf6dd5177070e98a9864913667 Mon Sep 17 00:00:00 2001
From: Luis Cielak <luis+dds@promptworks.com>
Date: Mon, 23 Jul 2018 15:45:46 -0400
Subject: [PATCH] Use block-list instead of panel

---
 scss/elements/_inputs.scss        | 16 +++++++++++
 scss/elements/_panel_actions.scss | 33 ----------------------
 scss/elements/_tables.scss        |  5 ----
 templates/requests.html.to        | 47 ++++++++++++++++---------------
 4 files changed, 40 insertions(+), 61 deletions(-)
 delete mode 100644 scss/elements/_panel_actions.scss

diff --git a/scss/elements/_inputs.scss b/scss/elements/_inputs.scss
index 073b264e..b3151653 100644
--- a/scss/elements/_inputs.scss
+++ b/scss/elements/_inputs.scss
@@ -23,4 +23,20 @@ select {
   label:first-child {
     padding-bottom: 0.5rem;
   }
+}
+
+.usa-search {
+  padding-top: 2px;
+  margin-right: 2rem;
+
+  input[type=search] {
+    height: 4.4rem;
+    font-size: 1.7rem;
+    color: $color-black;
+  }
+
+  button {
+    min-height: 4.4rem;
+  }
+
 }
\ No newline at end of file
diff --git a/scss/elements/_panel_actions.scss b/scss/elements/_panel_actions.scss
deleted file mode 100644
index 702c5cc1..00000000
--- a/scss/elements/_panel_actions.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * Panels Actions
- * Form inputs and other actions for panels
- */
-
- .panel__actions {
-  display: flex;
-  padding: $gap;
-
-  &--filter {
-    width: 50%;
-  }
-
-  &--search {
-    width: 50%;
-  }
-
-  .usa-search {
-    padding-top: 2px;
-    margin-right: 2rem;
-
-    input[type=search] {
-      height: 4.4rem;
-      font-size: 1.7rem;
-      color: $color-black;
-    }
-
-    button {
-      min-height: 4.4rem;
-    }
-
-  }
-}
\ No newline at end of file
diff --git a/scss/elements/_tables.scss b/scss/elements/_tables.scss
index a7fabfc5..9c917286 100644
--- a/scss/elements/_tables.scss
+++ b/scss/elements/_tables.scss
@@ -16,11 +16,6 @@
 
     th {
       @include block-list-header;
-
-      &:first-child {
-        padding: $gap * 2 !important; // This overrides USWDS's no padding
-      }
-
     }
 
     td {
diff --git a/templates/requests.html.to b/templates/requests.html.to
index 52ab1ea6..5c223568 100644
--- a/templates/requests.html.to
+++ b/templates/requests.html.to
@@ -9,33 +9,34 @@
 
 <div class="col col--grow">
 
-  <div class="panel">
-    <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>
-
 
+  <section class="block-list">
+    <ul>
+      <li class="block-list__item">
+        <span>
+          <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>
+        </span>
+        <span>
+          <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>
+        </span>
+      </li>
+    </ul>
+  </section>
 
   <div class="panel">
 
-    <table class="usa-table-borderless" width="100%">
+    <table>
       <thead>
         <tr>
           <th>Order ID</th>