Extract button styles

app/assets/stylesheets/darkswarm/shop.css.scss

@@ -74,20 +74,7 @@ $sidebar-footer-height: 5em;
       padding: 1em;
 
       button {
-        height: 3em;
-        background-color: $grey-800;
-        color: $white;
-        border: 1px solid $grey-600;
-        border-radius: $radius-medium;
-        width: 47%;
-        margin: 0;
-        padding: 0;
-
-        &.done {
-          background-color: $orange-500;
-          border: none;
-          margin-left: 3%;
-        }
+        width: 48%;
       }
     }
 

app/assets/stylesheets/darkswarm/ui.css.scss

@@ -2,6 +2,7 @@
 @import "branding";
 @import "mixins";
 @import "typography";
+@import "variables";
 
 // Button class extensions
 
@@ -123,6 +124,25 @@ button.success, .button.success {
   }
 }
 
+button.large {
+  height: 3em;
+  font-size: 1em;
+  color: $white;
+  border-radius: $radius-medium;
+  margin: 0;
+  padding: 0;
+
+  &.dark {
+    background-color: $grey-800;
+    border: 1px solid $grey-600;
+  }
+
+  &.bright {
+    background-color: $orange-500;
+    border: none;
+  }
+}
+
 // Responsive
 @media screen and (min-width: 768px) {
   [role="main"] {

app/views/shop/products/_form.html.haml

@@ -52,7 +52,7 @@
                 = render partial: "shop/products/filters"
 
                 .sidebar-footer
-                  %button{type: 'button', ng: {click: 'clearFilters()'}}
+                  %button.large.dark.left{type: 'button', ng: {click: 'clearFilters()'}}
                     = t(:products_filter_clear)
-                  %button.done{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
+                  %button.large.bright.right{type: 'button', ng: {click: 'toggleFilterSidebar()'}}
                     = t(:products_filter_done)