Style form actions area

app/views/admin/products_v3/_table.html.haml

@@ -1,15 +1,16 @@
 = form_with url: bulk_update_admin_products_v3_index_path, method: :patch, id: "products-form",
 
             html: {'data-reflex-serialize-form': true, 'data-reflex': 'submit->products#bulk_update'} do |form|
-  .container
-    .sixteen.columns.align-right
-      #fieldset
+  %fieldset.form-actions
+    .container
+      .status.ten.columns
         / = t('.products_modified', count: 'X')
-        = form.submit t('.reset'), type: :reset
-        = form.submit t('.save')
         - if defined?(error_msg) && error_msg.present?
           .error
             = error_msg
+      .form-buttons.six.columns
+        = form.submit t('.reset'), type: :reset, class: "medium"
+        = form.submit t('.save'), class: "medium"
   %table.products
     %col{ width:"15%" }
     %col{ width:"5%", style: "max-width:5em" }

app/webpacker/css/admin_v3/components/buttons.scss

@@ -12,7 +12,6 @@ button:not(.plain):not(.trix-button),
   background-color: $color-btn-bg;
   border: 1px solid $color-btn-bg;
   color: $color-btn-text;
-  text-transform: uppercase;
   line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
   height: $btn-regular-height;
   font-weight: bold;
@@ -113,6 +112,25 @@ button:not(.plain):not(.trix-button),
   }
 }
 
+input[type="reset"] {
+  // Reset button looks like a link, but has a border the same as buttons when active.
+  background: none;
+  border: 1px solid transparent;
+  color: $color-link;
+
+  &:active {
+    color: $color-link-active;
+  }
+  &:focus {
+    color: $color-link-focus;
+  }
+  &:hover {
+    color: $color-link-hover;
+    background: none;
+    border-color: transparent;
+  }
+}
+
 a.button {
   text-decoration: none;
 }

app/webpacker/css/admin_v3/shared/forms.scss

@@ -236,6 +236,27 @@ fieldset {
   }
 }
 
+.form-actions {
+  @include defaultBoxShadow;
+  background-color: $fair-pink;
+  border: none;
+  border-left: 4px solid $red;
+  border-radius: 4px;
+  margin: 0.5em 0;
+  padding: 0;
+
+  .status {
+    font-size: 1rem;
+    font-weight: bold;
+    padding: 0.75em 1em;
+  }
+
+  .form-buttons {
+    padding: 0.5em 1em;
+    text-align: right;
+  }
+}
+
 .form-buttons {
   text-align: center;
 }