spree_frontend 2.4.10 → 3.0.0.rc1

data/app/views/spree/checkout/_confirm.html.erb

@@ -1,12 +1,13 @@
-<fieldset id="order_details" data-hook>
-  <div class="clear"></div>
-  <legend align="center"><%= Spree.t(:confirm) %></legend>
-  <%= render :partial => 'spree/shared/order_details', :locals => { :order => @order } %>
-</fieldset>
-
-<br />
+<div class="panel panel-default" id="order_details" data-hook>
+  <div class="panel-heading">
+    <h3 class="panel-title"><%= Spree.t(:confirm) %></h3>
+  </div>
+  <div class="panel-body">
+	<%= render :partial => 'spree/shared/order_details', :locals => { :order => @order } %>
+  </div>
+</div>
 
-<div class="form-buttons" data-hook="buttons">
-  <%= submit_tag Spree.t(:place_order), :class => 'continue button primary' %>
+<div class="well text-right form-buttons" data-hook="buttons">
+  <%= submit_tag Spree.t(:place_order), :class => 'btn btn-lg btn-success' %>
   <script>Spree.disableSaveOnClick();</script>
 </div>

data/app/views/spree/checkout/_delivery.html.erb

@@ -1,16 +1,18 @@
-<fieldset id='shipping_method' data-hook>
-  <legend align="center"><%= Spree.t(:delivery) %></legend>
-  <div class="inner" data-hook="shipping_method_inner">
+<div class="panel panel-default" id='shipping_method' data-hook>
+  <div class="panel-heading">
+    <h3 class="panel-title"><%= Spree.t(:delivery) %></h3>
+  </div>
+  <div class="panel-body" data-hook="shipping_method_inner">
     <div id="methods">
       <%= form.fields_for :shipments do |ship_form| %>
 
         <div class="shipment">
-          <h3 class="stock-location" data-hook="stock-location">
+          <h4 class="stock-location" data-hook="stock-location">
             <%= Spree.t(:package_from) %>
             <strong class="stock-location-name" data-hook="stock-location-name"><%= ship_form.object.stock_location.name %></strong>
-          </h3>
+          </h4>
 
-          <table class="stock-contents" data-hook="stock-contents">
+          <table class="table stock-contents" data-hook="stock-contents">
             <colgroup>
               <col style="width: 10%;" />
               <col style="width: 60%;" />
@@ -18,10 +20,12 @@
               <col style="width: 20%;" />
             </colgroup>
             <thead>
-              <th></th>
-              <th align='left'><%= Spree.t(:item) %></th>
-              <th><%= Spree.t(:qty) %></th>
-              <th><%= Spree.t(:price) %></th>
+              <tr class="active">
+                <th></th>
+                <th align='left'><%= Spree.t(:item) %></th>
+                <th><%= Spree.t(:qty) %></th>
+                <th><%= Spree.t(:price) %></th>
+              </tr>
             </thead>
             <tbody>
               <% ship_form.object.manifest.each do |item| %>
@@ -35,14 +39,14 @@
             </tbody>
           </table>
 
-          <h5 class="stock-shipping-method-title"><%= Spree.t(:shipping_method) %></h5>
-          <ul class="field radios shipping-methods">
+          <h4 class="stock-shipping-method-title"><%= Spree.t(:shipping_method) %></h4>
+          <ul class="list-group shipping-methods">
             <% ship_form.object.shipping_rates.each do |rate| %>
-              <li class="shipping-method">
+              <li class="list-group-item shipping-method">
                 <label>
                   <%= ship_form.radio_button :selected_shipping_rate_id, rate.id %>
                   <span class="rate-name"><%= rate.name %></span>
-                  <span class="rate-cost"><%= rate.display_cost %></span>
+                  <span class="badge rate-cost"><%= rate.display_cost %></span>
                 </label>
               </li>
             <% end %>
@@ -56,7 +60,7 @@
           <h3 class="stock-location" data-hook="stock-location">
             <%= Spree.t(:unshippable_items) %>
           </h3>
-          <table class="stock-contents" data-hook="stock-missing">
+          <table class="table stock-contents" data-hook="stock-missing">
             <colgroup>
               <col style="width: 10%;" />
               <col style="width: 60%;" />
@@ -86,15 +90,15 @@
     </div>
     <% if Spree::Config[:shipping_instructions] %>
       <p id="minstrs" data-hook>
-        <%= form.label :special_instructions, Spree.t(:shipping_instructions) %><br />
-        <%= form.text_area :special_instructions, :cols => 40, :rows => 7 %>
+        <h4><%= Spree.t(:shipping_instructions) %></h4>
+        <%= form.text_area :special_instructions, :cols => 40, :rows => 4, :class => "form-control" %>
       </p>
     <% end %>
   </div>
-</fieldset>
+</div>
 
 <br />
 
-<div class="form-buttons" data-hook="buttons">
-  <%= submit_tag Spree.t(:save_and_continue), :class => 'continue button primary' %>
+<div class="well text-right form-buttons" data-hook="buttons">
+  <%= submit_tag Spree.t(:save_and_continue), :class => 'btn btn-lg btn-success' %>
 </div>

data/app/views/spree/checkout/_payment.html.erb

@@ -1,6 +1,8 @@
-<fieldset id="payment" data-hook>
-  <legend align="center"><%= Spree.t(:payment_information) %></legend>
-  <div data-hook="checkout_payment_step">
+<div class="panel panel-default" id="payment" data-hook>
+  <div class="panel-heading">
+    <h3 class="panel-title"><%= Spree.t(:payment_information) %></h3>
+  </div>
+  <div class="panel-body" data-hook="checkout_payment_step">
 
     <% if @payment_sources.present? %>
       <div class="card_options">
@@ -16,15 +18,14 @@
       </div>
 
       <div id="existing_cards">
-        <p class="field" data-hook="existing_cards">
+        <p class="form-group" data-hook="existing_cards">
           <table class="existing-credit-card-list">
             <tbody>
               <% @payment_sources.each do |card| %>
                 <tr id="<%= dom_id(card,'spree')%>" class="<%= cycle('even', 'odd') %>">
                   <td><%= card.name %></td>
                   <td><%= card.display_number %></td>
-                  <td><%= card.month %></td>
-                  <td><%= card.year %></td>
+                  <td><%= card.month %> / <%= card.year %></td>
                   <td>
                     <%= radio_button_tag "order[existing_card]", card.id, (card == @payment_sources.first), { class: "existing-cc-radio" }  %>
                   </td>
@@ -36,18 +37,18 @@
       </div>
     <% end %>
 
-    <div id="payment-method-fields" data-hook>
+    <ul class="list-group" id="payment-method-fields" data-hook>
       <% @order.available_payment_methods.each do |method| %>
-      <p>
+      <li class="list-group-item">
         <label>
           <%= radio_button_tag "order[payments_attributes][][payment_method_id]", method.id, method == @order.available_payment_methods.first %>
           <%= Spree.t(method.name, :scope => :payment_methods, :default => method.name) %>
         </label>
-      </p>
+      </li>
       <% end %>
-    </div>
+    </ul>
 
-    <ul id="payment-methods" data-hook>
+    <ul class="nav" id="payment-methods" data-hook>
       <% @order.available_payment_methods.each do |method| %>
         <li id="payment_method_<%= method.id %>" class="<%= 'last' if method == @order.available_payment_methods.last %>" data-hook>
           <fieldset>
@@ -56,17 +57,15 @@
         </li>
       <% end %>
     </ul>
-    <br style="clear:both;" />
+
     <p class='field' data-hook='coupon_code'>
       <%= form.label :coupon_code %><br />
-      <%= form.text_field :coupon_code %>
+      <%= form.text_field :coupon_code, :class => 'form-control' %>
     </p>
   </div>
-</fieldset>
-
-<br class="space" />
+</div>
 
-<div class="form-buttons" data-hook="buttons">
-  <%= submit_tag Spree.t(:save_and_continue), :class => 'continue button primary' %>
+<div class="well text-right form-buttons" data-hook="buttons">
+  <%= submit_tag Spree.t(:save_and_continue), class: 'btn btn-lg btn-success primary' %>
   <script>Spree.disableSaveOnClick();</script>
 </div>

data/app/views/spree/checkout/_summary.html.erb

@@ -1,6 +1,6 @@
 <h3><%= Spree.t(:order_summary) %></h3>
 
-<table data-hook="order_summary">
+<table class="table" data-hook="order_summary">
   <tbody>
     <tr data-hook="item_total">
       <td><strong><%= Spree.t(:item_total) %>:</strong></td>
@@ -59,7 +59,7 @@
 
     <tr data-hook="order_total">
       <td><strong><%= Spree.t(:order_total) %>:</strong></td>
-      <td><strong><span id='summary-order-total'><%= order.display_total.to_html %></span></strong></td>
+      <td><strong><span id='summary-order-total' class="lead text-primary"><%= order.display_total.to_html %></span></strong></td>
     </tr>
   </tbody>
 </table>

data/app/views/spree/checkout/edit.html.erb

@@ -1,35 +1,44 @@
+<% content_for :google_analytics do %>
+  <%= render partial: 'spree/shared/google_checkout.js', locals: { order: @order, step_number: (@order.checkout_steps.index(@order.state) + 1) } %>
+<% end %>
 <div id="checkout" data-hook>
-  <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @order } %>
+  <%= render partial: 'spree/shared/error_messages', locals: { target: @order } %>
 
   <div class="row" data-hook="checkout_header">
-    <h1 class="columns three alpha" data-hook="checkout_title"><%= Spree.t(:checkout) %></h1>
-    <div class="columns thirteen omega" data-hook="checkout_progress"><%= checkout_progress %></div>
+    <div class="col-sm-3">
+      <h1 data-hook="checkout_title"><%= Spree.t(:checkout) %></h1>
+    </div>
+    <div class="col-sm-9" data-hook="checkout_progress"><%= checkout_progress %></div>
   </div>
 
   <div class="row" data-hook="checkout_content">
-    <div class="columns <%= if @order.state != 'confirm' then 'alpha twelve' else 'alpha omega sixteen' end %>" data-hook="checkout_form_wrapper">
-      <%= form_for @order, :url => update_checkout_path(@order.state), :html => { :id => "checkout_form_#{@order.state}" } do |form| %>
+    <div class="<%= if @order.state != 'confirm' then 'col-md-9' else 'col-md-12' end %>" data-hook="checkout_form_wrapper">
+      <%= form_for @order, url: update_checkout_path(@order.state), html: { id: "checkout_form_#{@order.state}" } do |form| %>
         <% if @order.state == 'address' || !@order.email? %>
-          <p class="field" style='clear: both'>
-            <%= form.label :email %><br />
-            <%= form.text_field :email %>
-          </p>
+          <div class="panel panel-default">
+            <div class="panel-body">
+              <div class="form-group">
+                <%= form.label :email %>
+                <%= form.text_field :email, class: 'form-control' %>
+              </div>
+            </div>
+          </div>
         <% end %>
         <%= form.hidden_field :state_lock_version %>
-        <%= render @order.state, :form => form %>
+        <%= render @order.state, form: form %>
       <% end %>
     </div>
     <% if @order.state != 'confirm' %>
-      <div id="checkout-summary" data-hook="checkout_summary_box" class="columns omega four">
-        <%= render :partial => 'summary', :locals => { :order => @order } %>
+      <div id="checkout-summary" data-hook="checkout_summary_box" class="col-md-3">
+        <%= render partial: 'summary', locals: { order: @order } %>
       </div>
     <% end %>
   </div>
 </div>
 
 <script>
-Spree.current_order_id = "<%= @order.number %>"
-Spree.current_order_token = "<%= @order.guest_token %>"
+  Spree.current_order_id = "<%= @order.number %>"
+  Spree.current_order_token = "<%= @order.guest_token %>"
 </script>
 
 <% if I18n.locale != :en %>

data/app/views/spree/checkout/payment/_gateway.html.erb

@@ -1,32 +1,35 @@
-<%= image_tag 'credit_cards/credit_card.gif', :id => 'credit-card-image' %>
-<% param_prefix = "payment_source[#{payment_method.id}]" %>
+<div class="well clearfix">
+  <%= image_tag 'credit_cards/credit_card.gif', :id => 'credit-card-image', :class => 'pull-right', :width => '170', :height => '28' %>
+  <% param_prefix = "payment_source[#{payment_method.id}]" %>
 
-<p class="field">
-  <%= label_tag "name_on_card_#{payment_method.id}", Spree.t(:name_on_card) %><span class="required">*</span><br />
-  <%= text_field_tag "#{param_prefix}[name]", "#{@order.billing_firstname} #{@order.billing_lastname}", { id: "name_on_card_#{payment_method.id}"} %>
-</p>
+  <p class="field">
+    <%= label_tag "name_on_card_#{payment_method.id}", Spree.t(:name_on_card) %><span class="required">*</span><br />
+    <%= text_field_tag "#{param_prefix}[name]", "#{@order.billing_firstname} #{@order.billing_lastname}", { id: "name_on_card_#{payment_method.id}", :class => 'form-control required'} %>
+  </p>
 
-<p class="field" data-hook="card_number">
-  <%= label_tag "card_number", Spree.t(:card_number) %><span class="required">*</span><br />
-  <% options_hash = Rails.env.production? ? {:autocomplete => 'off'} : {} %>
-  <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(:id => 'card_number', :class => 'required cardNumber', :size => 19, :maxlength => 19, :autocomplete => "off") %>
-  &nbsp;
-  <span id="card_type" style="display:none;">
-    ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
-      <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
-    )
-  </span>
-</p>
+  <p class="field" data-hook="card_number">
+    <%= label_tag "card_number", Spree.t(:card_number) %><span class="required">*</span><br />
+    <% options_hash = Rails.env.production? ? {:autocomplete => 'off'} : {} %>
+    <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(:id => 'card_number', :class => 'form-control required cardNumber', :size => 19, :maxlength => 19, :autocomplete => "off") %>
+    &nbsp;
+    <span id="card_type" style="display:none;">
+      ( <span id="looks_like" ><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
+        <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
+      )
+    </span>
+  </p>
+  <div class="row">
+    <div class="col-md-8 field" data-hook="card_expiration">
+      <%= label_tag "card_expiry", Spree.t(:expiration) %><span class="required">*</span><br />
+      <%= text_field_tag "#{param_prefix}[expiry]", '', :id => 'card_expiry', :class => "form-control required cardExpiry", :placeholder => "MM / YY" %>
+    </div>
+    <div class="col-md-4 field" data-hook="card_code">
+      <%= label_tag "card_code", Spree.t(:card_code) %><span class="required">*</span><br />
+      <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(:id => 'card_code', :class => 'form-control required cardCode', :size => 5) %>
+      <%= link_to "(#{Spree.t(:what_is_this)})", spree.content_path('cvv'), :target => '_blank', "data-hook" => "cvv_link", :id => "cvv_link" %>
+    </div>
+  </div>
 
-<p class="field" data-hook="card_expiration">
-  <%= label_tag "card_expiry", Spree.t(:expiration) %><span class="required">*</span><br />
-  <%= text_field_tag "#{param_prefix}[expiry]", '', :id => 'card_expiry', :class => "required cardExpiry", :placeholder => "MM / YY" %>
-</p>
+  <%= hidden_field_tag "#{param_prefix}[cc_type]", '', :id => "cc_type", :class => 'ccType' %>
 
-<p class="field" data-hook="card_code">
-  <%= label_tag "card_code", Spree.t(:card_code) %><span class="required">*</span><br />
-  <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(:id => 'card_code', :class => 'required cardCode', :size => 5) %>
-  <%= link_to "(#{Spree.t(:what_is_this)})", spree.content_path('cvv'), :target => '_blank', "data-hook" => "cvv_link", :id => "cvv_link" %>
-</p>
-
-<%= hidden_field_tag "#{param_prefix}[cc_type]", '', :id => "cc_type", :class => 'ccType' %>
+</div>

data/app/views/spree/layouts/spree_application.html.erb

@@ -5,33 +5,27 @@
 <!--[if IE 9 ]>    <html class="ie ie9" lang="<%= I18n.locale %>"> <![endif]-->
 <!--[if gt IE 9]><!--><html lang="<%= I18n.locale %>"><!--<![endif]-->
   <head data-hook="inside_head">
-    <%= render :partial => 'spree/shared/head' %>
+    <%= render partial: 'spree/shared/head' %>
   </head>
   <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
+    <%= render partial: 'spree/shared/google_analytics.js' %>
+    <%= render partial: 'spree/shared/header' %>
 
     <div class="container">
 
-      <%= render :partial => 'spree/shared/header' %>
-
-      <div id="wrapper" class="row" data-hook>
+      <div class="row" data-hook>
 
         <%= breadcrumbs(@taxon) %>
 
-        <%= render :partial => 'spree/shared/sidebar' if content_for? :sidebar %>
+        <%= render partial: 'spree/shared/sidebar' if content_for? :sidebar %>
 
-        <div id="content" class="columns <%= !content_for?(:sidebar) ? "sixteen" : "twelve omega" %>" data-hook>
+        <div id="content" class="<%= !content_for?(:sidebar) ? "col-sm-12" : "col-sm-8 col-md-9" %>" data-hook>
           <%= flash_messages %>
           <%= yield %>
         </div>
 
         <%= yield :templates %>
-
       </div>
-
-      <%= render :partial => 'spree/shared/footer' %>
-
     </div>
-
-    <%= render :partial => 'spree/shared/google_analytics' %>
   </body>
 </html>

data/app/views/spree/orders/_adjustments.html.erb

@@ -1,3 +1,8 @@
+<thead>
+  <tr data-hook="cart_adjustments_headers">
+    <th class="cart-adjustment-header" colspan="6"><%= Spree.t(:order_adjustments) %></th>
+  </tr>
+</thead>
 <tbody id="cart_adjustments" data-hook>
   <% if @order.line_item_adjustments.exists? %>
     <% @order.line_item_adjustments.promotion.eligible.group_by(&:label).each do |label, adjustments| %>

data/app/views/spree/orders/_form.html.erb

@@ -1,7 +1,7 @@
-<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @order } %>
-<table id="cart-detail" data-hook>
+<%= render partial: 'spree/shared/error_messages', locals: { target: @order } %>
+<table class="table" id="cart-detail" data-hook>
   <thead>
-    <tr data-hook="cart_items_headers">
+    <tr class="active" data-hook="cart_items_headers">
       <th class="cart-item-description-header" colspan="2"><%= Spree.t(:item) %></th>
       <th class="cart-item-price-header"><%= Spree.t(:price) %></th>
       <th class="cart-item-quantity-header"><%= Spree.t(:qty) %></th>
@@ -10,19 +10,19 @@
     </tr>
   </thead>
   <tbody id="line_items" data-hook>
-    <%= render partial: 'spree/orders/line_item', collection: order_form.object.line_items, locals: {order_form: order_form} %>
+    <%= render partial: 'spree/orders/line_item', collection: order_form.object.line_items, locals: { order_form: order_form } %>
   </tbody>
   <% if @order.adjustments.nonzero.exists? || @order.line_item_adjustments.nonzero.exists? || @order.shipment_adjustments.nonzero.exists? || @order.shipments.any? %>
     <tr class="cart-subtotal">
-      <td colspan="4" align='right'><h5><%= Spree.t(:cart_subtotal, :count => @order.line_items.sum(:quantity)) %></h5></th>
+      <td colspan="4" align='right'><h5><%= Spree.t(:cart_subtotal, count: @order.line_items.sum(:quantity)) %></h5></td>
       <td colspan><h5><%= order_form.object.display_item_total %></h5></td>
       <td></td>
     </tr>
     <%= render "spree/orders/adjustments" %>
   <% end %>
-  <tr class="cart-total">
-    <td colspan="4" align='right'><h5><%= Spree.t(:total) %></h5></th>
-    <td colspan><h5><%= order_form.object.display_total %></h5></td>
+  <tr class="warning cart-total">
+    <td colspan="4" align='right'><h5><%= Spree.t(:total) %></h5></td>
+    <td class="lead" colspan><%= order_form.object.display_total %></td>
     <td></td>
   </tr>
 </table>

data/app/views/spree/orders/_line_item.html.erb

@@ -1,6 +1,6 @@
 <% variant = line_item.variant -%>
 <%= order_form.fields_for :line_items, line_item do |item_form| -%>
-  <tr class="<%= cycle('', 'alt') %> line-item">
+  <tr class="line-item">
     <td class="cart-item-image" data-hook="cart_item_image">
       <% if variant.images.length == 0 %>
         <%= link_to small_image(variant.product), variant.product %>
@@ -20,17 +20,17 @@
         <%= line_item_description_text(line_item.description) %>
       </span>
     </td>
-    <td class="cart-item-price" data-hook="cart_item_price">
+    <td class="lead text-primary cart-item-price" data-hook="cart_item_price">
       <%= line_item.single_money.to_html %>
     </td>
-    <td class="cart-item-quantity" data-hook="cart_item_quantity">
-      <%= item_form.number_field :quantity, :min => 0, :class => "line_item_quantity", :size => 5 %>
+    <td class="cart-item-quantity" data-hook="cart_item_quantity" valign="center">
+      <%= item_form.number_field :quantity, min: 0, class: "form-control line_item_quantity", size: 5 %>
     </td>
-    <td class="cart-item-total" data-hook="cart_item_total">
+    <td class="lead text-primary cart-item-total" data-hook="cart_item_total">
       <%= line_item.display_amount.to_html unless line_item.quantity.nil? %>
     </td>
     <td class="cart-item-delete" data-hook="cart_item_delete">
-      <%= link_to image_tag('icons/delete.png'), '#', :class => 'delete', :id => "delete_#{dom_id(line_item)}" %>
+      <%= link_to content_tag(:span, '', class: 'glyphicon glyphicon-minus-sign'), '#', class: 'delete', id: "delete_#{dom_id(line_item)}" %>
     </td>
   </tr>
 <% end -%>

data/app/views/spree/orders/edit.html.erb

@@ -5,43 +5,41 @@
   <% if @order.line_items.empty? %>
 
     <div data-hook="empty_cart">
-      <p><%= Spree.t(:your_cart_is_empty) %></p>
-      <p><%= link_to Spree.t(:continue_shopping), products_path, :class => 'button continue' %></p>
+      <div class="alert alert-info"><%= Spree.t(:your_cart_is_empty) %></div>
+      <p><%= link_to Spree.t(:continue_shopping), products_path, class: 'btn btn-default' %></p>
     </div>
 
   <% else %>
 
     <div data-hook="outside_cart_form">
-      <%= form_for @order, :url => update_cart_path, :html => {:id => 'update-cart'} do |order_form| %>
+      <%= form_for @order, url: update_cart_path, html: { id: 'update-cart' } do |order_form| %>
         <div data-hook="inside_cart_form">
 
-          <div data-hook="cart_items">
-            <%= render :partial => 'form', :locals => { :order_form => order_form } %>
+          <div data-hook="cart_items" class="table-responsive">
+            <%= render partial: 'form', locals: { order_form: order_form } %>
           </div>
 
-          <div class="links columns sixteen alpha omega" data-hook="cart_buttons">
-            <%= order_form.text_field :coupon_code, :size => 10, :placeholder => Spree.t(:coupon_code) %>
-            <%= button_tag :class => 'primary', :id => 'update-button' do %>
+          <div class="links col-md-6 navbar-form pull-right text-right" data-hook="cart_buttons">
+            <div class="form-group">
+            <%= button_tag class: 'btn btn-primary', id: 'update-button' do %>
               <%= Spree.t(:update) %>
             <% end %>
-            <%= button_tag :class => 'button checkout primary', :id => 'checkout-link', :name => 'checkout' do %>
+            <%= button_tag class: 'btn btn-lg btn-success', id: 'checkout-link', name: 'checkout' do %>
               <%= Spree.t(:checkout) %>
             <% end %>
           </div>
-
         </div>
       <% end %>
     </div>
 
-    <div id="empty-cart" data-hook>
-      <%= form_tag empty_cart_path, :method => :put do %>
+    <div id="empty-cart" class="col-md-6 pull-left" data-hook>
+      <%= form_tag empty_cart_path, method: :put do %>
         <p id="clear_cart_link" data-hook>
-        <%= submit_tag Spree.t(:empty_cart), :class => 'button gray' %>
-        <%= Spree.t(:or) %>
-        <%= link_to Spree.t(:continue_shopping), products_path, :class => 'continue button gray' %>
+          <%= submit_tag Spree.t(:empty_cart), class: 'btn btn-default' %>
+          <%= Spree.t(:or) %>
+          <%= link_to Spree.t(:continue_shopping), products_path, class: 'continue' %>
         </p>
       <% end %>
     </div>
-
   <% end %>
 </div>