Add close button to mobile product modal, this can be reused in other modals later

app/assets/javascripts/templates/product_modal.html.haml

@@ -1,5 +1,4 @@
 .row
-
   .columns.small-12.large-6.product-header
     %h3{"ng-bind" => "::product.name"}
     %span
@@ -19,3 +18,7 @@
     %img.product-img.placeholder{ src: "/assets/noimage/large.png", "ng-if" => "::!product.largeImage"}
 
 %ng-include{src: "'partials/close.html'"}
+
+.buttons
+  .button.bottom-close-button{"ng-click" => "$close()"}
+    = t('js.shop.products.product_modal.close')

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

@@ -72,6 +72,19 @@ dialog .mobile-close-reveal-modal
   }
 }
 
+.reveal-modal .buttons {
+  margin: 0 auto;
+  text-align: center;
+
+  .bottom-close-button {
+    background-color: $orange-500;
+
+    @media only screen and (min-width: 640px) {
+      display: none;
+    }
+  }
+}
+
 // Prevent body from scrolling when a modal is open
 body.modal-open {
   overflow: hidden;

config/locales/en.yml

@@ -2736,6 +2736,10 @@ See the %{link} to find out more about %{sitename}'s features and to start using
       signup_or_login: "Start By Signing Up (or logging in)"
       have_an_account: "Already have an account?"
       action_login: "Log in now."
+    shop:
+      products:
+        product_modal:
+          close: "Close"
 
   # Singular and plural forms of commonly used words.
   # We use these entries to pluralize unit names in every language.