styling form filters container and filter button

opentech/apply/dashboard/templates/dashboard/dashboard.html

@@ -14,9 +14,11 @@
 
 <div class="wrapper wrapper--large wrapper--top-bottom-inner-space">
     {% if filter %}
-        <form action="" method="get" class="form form-inline">
-            {{ filter.form.as_p }}
-            <button type="submit" value="Filter">Filter</button>
+        <form action="" method="get" class="form form--filters">
+            <ul class="form__filters select2">
+                {{ filter.form.as_ul }}
+                <button class="button button--primary" type="submit" value="Filter">Filter</button>
+            </ul>
         </form>
     {% endif %}
     {% render_table table %}

opentech/static_src/src/sass/apply/components/_button.scss

@@ -5,6 +5,16 @@
     border: 0;
     box-shadow: none;
 
+    &--primary {
+        @include button($color--light-blue, $color--dark-blue);
+        display: inline-block;
+
+        .form--filters & {
+            flex-basis: 125px;
+            margin-right: 0;
+        }
+    }
+
     &:hover {
         cursor: pointer;
     }

opentech/static_src/src/sass/apply/components/_form.scss

+.form {
+    &__filters {
+        @extend %h6;
+        display: flex;
+        padding: 10px 0 30px;
+
+        label {
+            display: none;
+        }
+
+        // so the form can be output in any tag
+        > * {
+            flex-basis: 215px;
+            margin-right: 10px;
+        }
+    }
+}
+

opentech/static_src/src/sass/apply/main.scss

@@ -12,6 +12,7 @@
 
 // Components
 @import 'components/button';
+@import 'components/form';
 @import 'components/icon';
 @import 'components/pagination';
 @import 'components/table';