spree_backend 2.4.10 → 3.0.0.rc1

data/app/views/spree/admin/option_types/index.html.erb

@@ -1,25 +1,17 @@
 <% content_for :page_title do %>
-  <%= Spree.t(:option_types) %>
+  <%= Spree::OptionType.model_name.human(count: :many) %>
 <% end %>
 
 <% content_for :page_actions do %>
-  <li id="new_ot_link">
-    <%= button_link_to Spree.t(:new_option_type), new_admin_option_type_url, { :remote => true, :icon => 'plus', :id => 'new_option_type_link' } %>
-  </li>
+  <span id="new_ot_link">
+    <%= button_link_to Spree.t(:new_option_type), new_object_url, { class: "btn-success", icon: 'add', id: 'new_option_type_link' } %>
+  </span>
 <% end %>
 
-<%= render :partial => 'spree/admin/shared/product_sub_menu' %>
-
 <div id="new_option_type"></div>
 
 <% if @option_types.any? %>
-<table class="index sortable" id="listing_option_types" data-hook data-sortable-link="<%= update_positions_admin_option_types_url %>">
-  <colgroup>
-    <col style="width: 10%">
-    <col style="width: 35%">
-    <col style="width: 40%">
-    <col style="width: 15%">
-  </colgroup>
+<table class="table sortable" id="listing_option_types" data-hook data-sortable-link="<%= update_positions_admin_option_types_url %>">
   <thead>
     <tr data-hook="option_header">
       <th class="no-border"></th>
@@ -31,20 +23,22 @@
   <tbody>
     <% @option_types.each do |option_type| %>
       <tr class="spree_option_type <%= cycle('odd', 'even')%>" id="<%= spree_dom_id option_type %>" data-hook="option_row">
-        <td class="no-border"><span class="handle"></span></td>
-        <td class="align-center"><%= option_type.name %></td>
-        <td class="align-center presentation"><%= option_type.presentation %></td>
-        <td class="actions">
-          <%= link_to_edit(option_type, :class => 'admin_edit_option_type', :no_text => true) %>
-          <%= link_to_delete(option_type, :no_text => true) %>
+        <td class="move-handle text-center">
+          <span class="icon icon-move handle"></span>
+        </td>
+        <td><%= option_type.name %></td>
+        <td class="presentation"><%= option_type.presentation %></td>
+        <td class="actions actions-2 text-right">
+          <%= link_to_edit(option_type, class: 'admin_edit_option_type', no_text: true) %>
+          <%= link_to_delete(option_type, no_text: true) %>
         </td>
       </tr>
     <% end %>
   </tbody>
 </table>
 <% else %>
-  <div class="alpha twelve columns no-objects-found">
-    <%= Spree.t(:no_resource_found, resource: I18n.t(:other, scope: 'activerecord.models.spree/option_type')) %>,
-    <%= link_to Spree.t(:add_one), spree.new_admin_option_type_path %>!
+  <div class="alert alert-info no-objects-found">
+    <%= Spree.t(:no_resource_found, resource: Spree::OptionType.model_name.human(count: :many)) %>,
+    <%= link_to Spree.t(:add_one), new_object_url %>!
   </div>
 <% end %>

data/app/views/spree/admin/option_types/new.html.erb

@@ -1,10 +1,11 @@
-<%= render :partial => 'spree/admin/shared/product_sub_menu' %>
+<% content_for :page_title do %>
+  <%= Spree.t(:new_option_type) %>
+<% end %>
 
-<%= render :partial => 'spree/shared/error_messages', :locals => { :target => @option_type } %>
+<%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @option_type } %>
 
 <%= form_for [:admin, @option_type] do |f| %>
   <fieldset>
-    <legend align="center"><%= Spree.t(:new_option_type) %></legend>
     <%= render :partial => 'form', :locals => { :f => f } %>
     <%= render :partial => 'spree/admin/shared/new_resource_links' %>
   </fieldset>

data/app/views/spree/admin/orders/_add_line_item.html.erb

@@ -2,17 +2,16 @@
 
 <%= render :partial => "spree/admin/variants/autocomplete_line_items_stock", :formats => :js %>
 
-
-<div id="add-line-item" data-hook>
-  <fieldset class="no-border-bottom">
-    <legend align="center"><%= Spree.t(:add_product) %></legend>
-
-    <div data-hook="add_product_name" class="field twelve columns alpha">
+<div id="add-line-item" data-hook class="panel panel-default">
+  <div class="panel-heading">
+    <h1 class="panel-title"><%= Spree.t(:add_product) %></h1>
+  </div>
+  <div class="panel-body">
+    <div data-hook="add_product_name" class="form-group">
       <%= label_tag :add_line_item_variant_id, Spree.t(:name_or_sku) %>
-      <%= hidden_field_tag :add_line_item_variant_id, "", :class => "variant_autocomplete fullwidth" %>
+      <%= hidden_field_tag :add_line_item_variant_id, "", :class => "variant_autocomplete" %>
     </div>
 
-  </fieldset>
-
-  <div id="stock_details"></div>
+    <div id="stock_details"></div>
+  </div>  
 </div>

data/app/views/spree/admin/orders/_add_product.html.erb

@@ -1,16 +1,18 @@
 <%= render :partial => "spree/admin/variants/autocomplete", :formats => :js %>
 <%= render :partial => "spree/admin/variants/autocomplete_stock", :formats => :js %>
 
-<div id="add-line-item" data-hook>
-  <fieldset class="no-border-bottom">
-    <legend align="center"><%= Spree.t(:add_product) %></legend>
-
-    <div data-hook="add_product_name" class="field twelve columns alpha">
+<div class="panel panel-default" id="add-line-item" data-hook>
+  <div class="panel-heading">
+    <h1 class="panel-title">
+      <%= Spree.t(:add_product) %>  
+    </h1>
+  </div>
+  <div class="panel-body">
+    <div data-hook="add_product_name">
       <%= label_tag :add_variant_id, Spree.t(:name_or_sku) %>
-      <%= hidden_field_tag :add_variant_id, "", :class => "variant_autocomplete fullwidth" %>
+      <%= hidden_field_tag :add_variant_id, "", :class => "variant_autocomplete" %>
     </div>
 
-  </fieldset>
-
-  <div id="stock_details"></div>
+    <div id="stock_details"></div>
+  </div>
 </div>

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

@@ -1,19 +1,33 @@
 <% if adjustments.eligible.exists? %>
-  <fieldset class="no-border-bottom">
-    <legend><%= title %></legend>
-    <table>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h1 class="panel-title">
+        <%= title %>
+      </h1>
+    </div>
+    
+    <table class="table table-bordered">
       <thead>
         <th><%= Spree.t('name')%></th>
         <th><%= Spree.t('amount')%></th>
       </thead>
-      <tbody id="order-charges" data-hook="order_details_adjustments"  class="with-border">
+      <tbody id="order-charges" data-hook="order_details_adjustments">
         <% adjustments.eligible.group_by(&:label).each do |label, adjustments| %>
           <tr class="total">
-            <td><strong><%= label %>:</strong></td>
-            <td class="total align-center"><span><%= Spree::Money.new(adjustments.sum(&:amount), currency: adjustments.first.order.try(:currency)) %></span></td>
+            <td>
+              <strong><%= label %>:</strong>
+            </td>
+            <td class="total">
+              <span>
+                <%= Spree::Money.new(
+                  adjustments.sum(&:amount), 
+                  currency: adjustments.first.order.try(:currency)
+                ) %>
+              </span>
+            </td>
           </tr>
         <% end %>
       </tbody>
     </table>
-  </fieldset>
+  </div>
 <% end %>

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

@@ -1,6 +1,6 @@
  <div data-hook="admin_order_form_fields">
   <% if @line_item.try(:errors).present? %>
-    <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @line_item } %>
+    <%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @line_item } %>
   <% end %>
 
   <% if Spree::Order.checkout_step_names.include?(:delivery) %>
@@ -8,27 +8,30 @@
   <% else %>
     <%= render :partial => "spree/admin/orders/line_items", :locals => { :order => order } %>
   <% end %>
+
   <%= render :partial => "spree/admin/orders/adjustments", :locals => {
-        :adjustments => @order.line_item_adjustments, 
+        :adjustments => @order.line_item_adjustments,
         :order => order,
         :title => Spree.t(:line_item_adjustments)
    } %>
   <%= render :partial => "spree/admin/orders/adjustments", :locals => {
-        :adjustments => @order.shipment_adjustments, 
+        :adjustments => @order.shipment_adjustments,
         :order => order,
         :title => Spree.t(:shipment_adjustments)
    } %>
   <%= render :partial => "spree/admin/orders/adjustments", :locals => {
-        :adjustments => @order.adjustments, 
+        :adjustments => @order.adjustments,
         :order => order,
         :title => Spree.t(:order_adjustments)
    } %>
 
   <% if order.line_items.exists? %>
-    <fieldset class="no-border-bottom" id="order-total" data-hook="order_details_total">
-      <legend><%= Spree.t(:order_total) %></legend>
-      <span class="order-total"><%= order.display_total %></span>
-    </fieldset>
+    <div class="alert alert-success" id="order-total" data-hook="order_details_total">
+      <%= Spree.t(:order_total) %>: 
+      <strong class="order-total">
+        <%= order.display_total %>
+      </strong>
+    </div>
   <% end %>
 
   <%= javascript_tag do -%>
@@ -36,8 +39,18 @@
     var shipments = [];
 
     <% @order.shipments.each do |shipment| %>
-            shipments.push(<%== shipment.as_json(:root => false, :only => [:id, :tracking, :number, :state, :stock_location_id], :include => [:inventory_units, :stock_location]).to_json %>);
+      shipments.push(
+        <%== shipment.as_json(
+          :root => false, 
+          :only => [
+            :id, :tracking, :number, :state, :stock_location_id
+          ], :include => [
+            :inventory_units, :stock_location
+          ]).to_json 
+        %>
+      );
     <% end %>
+
     <%= render :partial => 'spree/admin/shared/update_order_state', :handlers => [:js] %>
-  <% end -%>
+  <% end %>
 </div>

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

@@ -1,9 +1,21 @@
-<tr id="<%= spree_dom_id(f.object) %>" data-hook="admin_order_form_line_item_row" class="<%= cycle('odd', 'even')%>">
-  <td><%=f.object.variant.product.name%> <%= "(#{f.object.variant.options_text})" unless f.object.variant.option_values.empty? %></td>
-  <td class="price align-center"><%= f.object.single_money %></td>
-  <td class="qty"><%= f.number_field :quantity, :min => 0, :class => "qty" %></td>
-  <td class="total align-center"><%= f.object.display_amount %></td>
+<tr id="<%= spree_dom_id(f.object) %>" data-hook="admin_order_form_line_item_row">
+  <td>
+    <%=f.object.variant.product.name%> 
+    <%= "(#{f.object.variant.options_text})" unless f.object.variant.option_values.empty? %>
+  </td>
+  <td class="price ">
+    <%= f.object.single_money %>
+  </td>
+  <td class="qty">
+    <%= f.number_field :quantity, min: 0, class: "qty" %>
+  </td>
+  <td class="total">
+    <%= f.object.display_amount %>
+  </td>
   <td data-hook="admin_order_form_line_item_actions" class="actions">
-    <%= link_to_delete f.object, {:url => admin_order_line_item_url(@order.number, f.object), :no_text => true} %>
+    <%= link_to_delete f.object, { 
+      url: admin_order_line_item_url(@order.number, f.object), 
+      no_text: true 
+    } %>
   </td>
 </tr>

data/app/views/spree/admin/orders/_line_items.html.erb

@@ -1,46 +1,46 @@
 <% if order.line_items.exists? %>
-  <table class="line-items index" data-hook="line-items">
-    <colgroup>
-      <col style="width: 10%;" />
-      <col style="width: 20%;" />
-      <col style="width: 20%;" />
-      <col style="width: 15%;" />
-    </colgroup>
-
-    <thead>
-      <th colspan="2"><%= Spree.t(:name) %></th>
-      <th><%= Spree.t(:price) %></th>
-      <th><%= Spree.t(:quantity) %></th>
-      <th><%= Spree.t(:total_price) %></th>
-      <th class="orders-actions actions" data-hook="admin_order_form_line_items_header_actions">&nbsp;</th>
-    </thead>
-
-    <tbody>
-      <% order.line_items.each do |item| %>
-        
-        <tr class="line-item" id="line-item-<%= item.id %>">
-          <td class="line-item-image"><%= mini_image(item.variant) %></td>
-          <td class="line-item-name">
-            <%= item.variant.product.name %><br><%= "(" + variant_options(item.variant) + ")" unless item.variant.option_values.empty? %>
-          </td>
-          <td class="line-item-price align-center"><%= item.single_money.to_html %></td>
-          <td class="line-item-qty-show align-center">
-            <%= item.quantity %>
-          </td>
-          <td class="line-item-qty-edit hidden">
-            <%= number_field_tag :quantity, item.quantity, :min => 0, :class => "line_item_quantity", :size => 5 %>
-          </td>
-          <td class="line-item-total align-center"><%= line_item_shipment_price(item, item.quantity) %></td>
-          <td class="cart-line-item-delete actions" data-hook="cart_line_item_delete">
-            <% if can? :update, item %>
-              <%= link_to '', '#', :class => 'save-line-item fa fa-ok no-text with-tip', :data => { 'line-item-id' => item.id, :action => 'save'}, :title => Spree.t('actions.save'), :style => 'display: none' %>
-              <%= link_to '', '#', :class => 'cancel-line-item fa fa-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => Spree.t('actions.cancel'), :style => 'display: none' %>
-              <%= link_to '', '#', :class => 'edit-line-item fa fa-edit no-text with-tip', :data => {:action => 'edit'}, :title => Spree.t('edit') %>
-              <%= link_to '', '#', :class => 'delete-line-item fa fa-trash no-text with-tip', :data => { 'line-item-id' => item.id, :action => 'remove'}, :title => Spree.t('delete') %>
-            <% end %>
-          </td>
-        </tr>
-      <% end %>
-    </tbody>
-  </table>
-<% end %>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h1 class="panel-title">
+        <%= Spree.t(:order_line_items) %>
+      </h1>
+    </div>
+    <table class="table table-bordered line-items" data-hook="line-items">
+      <thead>
+        <th colspan="2"><%= Spree.t(:name) %></th>
+        <th class="text-center"><%= Spree.t(:price) %></th>
+        <th class="text-center"><%= Spree.t(:quantity) %></th>
+        <th class="text-center"><%= Spree.t(:total_price) %></th>
+        <th class="orders-actions text-center" data-hook="admin_order_form_line_items_header_actions"></th>
+      </thead>
+      <tbody>
+        <% order.line_items.each do |item| %>
+          <tr class="line-item" id="line-item-<%= item.id %>">
+            <td class="line-item-image image text-center">
+              <%= mini_image(item.variant) %>
+            </td>
+            <td class="line-item-name text-center">
+              <%= item.variant.product.name %><br><%= "(" + variant_options(item.variant) + ")" unless item.variant.option_values.empty? %>
+            </td>
+            <td class="line-item-price text-center"><%= item.single_money.to_html %></td>
+            <td class="line-item-qty-show text-center">
+              <%= item.quantity %>
+            </td>
+            <td class="line-item-qty-edit is-hidden">
+              <%= number_field_tag :quantity, item.quantity, :min => 0, :class => "line_item_quantity form-control", :size => 5 %>
+            </td>
+            <td class="line-item-total text-center"><%= line_item_shipment_price(item, item.quantity) %></td>
+            <td class="cart-line-item-delete actions actions-4 text-center" data-hook="cart_line_item_delete">
+              <% if can? :update, item %>
+                <%= link_to_with_icon 'save', Spree.t('actions.save'), "#", :class => 'save-line-item btn btn-success btn-sm', :no_text => true, :data => { :'line-item-id' => item.id, :action => 'save'}, :title => Spree.t('actions.save'), :style => 'display: none' %>
+                <%= link_to_with_icon 'delete', Spree.t('actions.cancel'), "#", :class => 'cancel-line-item btn btn-danger btn-sm', :data => {:action => 'cancel'}, :title => Spree.t('actions.cancel'), :style => 'display: none', :no_text => true %>
+                <%= link_to_with_icon 'edit', Spree.t('edit'), "#", :class => 'edit-line-item btn btn-primary btn-sm', :data => {:action => 'edit'}, :title => Spree.t('edit'), :no_text => true %>
+                <%= link_to_with_icon 'delete', Spree.t('delete'), "#", :class => 'delete-line-item btn btn-danger btn-sm', :data => { 'line-item-id' => item.id, :action => 'remove'}, :title => Spree.t('delete'), :no_text => true %>
+              <% end %>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/app/views/spree/admin/orders/_line_items_edit_form.html.erb

@@ -1,6 +1,6 @@
 <div data-hook="admin_order_form_fields">
   <% if @line_item.try(:errors).present? %>
-      <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @line_item } %>
+      <%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @line_item } %>
   <% end %>
 
   <%= render :partial => "spree/admin/orders/line_items", :locals => { :order => order } %>
@@ -21,20 +21,19 @@
   } %>
 
   <% if order.line_items.exists? %>
-      <fieldset class="no-border-bottom" id="order-total" data-hook="order_details_total">
-        <legend><%= Spree.t(:order_total) %></legend>
-        <span class="order-total"><%= order.display_total %></span>
-      </fieldset>
+    <div class="alert alert-success" id="order-total" data-hook="order_details_total">
+      <%= Spree.t(:order_total) %>: <strong class="order-total"><%= order.display_total %></strong>
+    </div>
   <% end %>
 
   <%= javascript_tag do -%>
-      var order_number = '<%= @order.number %>';
-      var shipments = [];
+    var order_number = '<%= @order.number %>';
+    var shipments = [];
 
-      <% @order.shipments.each do |shipment| %>
-            shipments.push(<%== shipment.as_json(:root => false, :only => [:id, :tracking, :number, :state, :stock_location_id], :include => [:inventory_units, :stock_location]).to_json %>);
-      <% end %>
+    <% @order.shipments.each do |shipment| %>
+      shipments.push(<%== shipment.as_json(:root => false, :only => [:id, :tracking, :number, :state, :stock_location_id], :include => [:inventory_units, :stock_location]).to_json %>);
+    <% end %>
 
-      <%= render :partial => 'spree/admin/shared/update_order_state', :handlers => [:js] %>
+    <%= render :partial => 'spree/admin/shared/update_order_state', :handlers => [:js] %>
   <% end -%>
 </div>

data/app/views/spree/admin/orders/_risk_analysis.html.erb

@@ -1,26 +1,26 @@
-<fieldset class="no-border-bottom" id="risk_analysis">
+<fieldset id="risk_analysis">
   <legend><%= "#{Spree.t(:risk_analysis)}: #{Spree.t(:not) unless @order.is_risky?} #{Spree.t(:risky)}" %></legend>
-  <table>
+  <table class="table table-condensed table-bordered">
     <thead>
       <th><%= Spree.t('risk')%></th>
       <th><%= Spree.t('status')%></th>
     </thead>
     <tbody id="risk-analysis" data-hook="order_details_adjustments"  class="with-border">
       <tr class="">
-        <td><strong>
-          <%= Spree.t(:failed_payment_attempts) %>:
-        </strong></td>
-          <td class="align-center">
-            <span class="<%= @order.payments.failed.count > 0 ? 'state void' : 'state complete' %>">
-              <%= link_to "#{Spree.t 'payments_count', count: @order.payments.failed.count, default: pluralize(@order.payments.failed.count, Spree.t(:payment))}", spree.admin_order_payments_path(@order) %>
-            </span>
+        <td>
+          <strong><%= Spree.t(:failed_payment_attempts) %>:</strong>
+        </td>
+        <td>
+          <span class="label label-<%= @order.payments.failed.count > 0 ? 'void' : 'complete' %>">
+            <%= link_to "#{Spree.t 'payments_count', count: @order.payments.failed.count, default: pluralize(@order.payments.failed.count, Spree.t(:payment))}", spree.admin_order_payments_path(@order) %>
+          </span>
         </td>
       </tr>
 
       <tr>
         <td><strong><%= Spree.t(:avs_response) %>:</strong></td>
-        <td class="align-center">
-          <span class="<%= latest_payment.is_avs_risky? ? 'state void' : 'state complete' %>">
+        <td>
+          <span class="label label-<%= latest_payment.is_avs_risky? ? 'void' : 'complete' %>">
             <% if latest_payment.is_avs_risky? %>
               <%= "#{Spree.t(:error)}: #{avs_response_code[latest_payment.avs_response]}" %>
             <% else %>
@@ -32,8 +32,8 @@
 
       <tr>
         <td><strong><%= Spree.t(:cvv_response) %>:</strong></td>
-        <td class="align-center">
-          <span class="<%= latest_payment.is_cvv_risky? ? 'state void' : 'state complete' %>">
+        <td>
+          <span class="label label-<%= latest_payment.is_cvv_risky? ? 'void' : 'complete' %>">
             <% if latest_payment.is_cvv_risky? %>
               <%= "#{Spree.t(:error)}: #{cvv_response_code[latest_payment.cvv_response_code]}" %>
             <% else %>

data/app/views/spree/admin/orders/_shipment.html.erb

@@ -1,56 +1,47 @@
-<div id="<%= "shipment_#{shipment.id}" %>" data-hook="admin_shipment_form">
-  <%= render :partial => "spree/admin/variants/split", :formats => :js %>
-  <fieldset class="no-border-bottom">
-    <legend align="center" class="stock-location" data-hook="stock-location">
+<div id="<%= "shipment_#{shipment.id}" %>" data-hook="admin_shipment_form" class="panel panel-default">
+
+  <%= render partial: "spree/admin/variants/split", formats: :js %>
+
+  <div class="panel-heading stock-location no-borderb" data-hook="stock-location">
+    <h1 class="panel-title">
       <span class="shipment-number"><%= shipment.number %></span>
       -
       <span class="shipment-state"><%= Spree.t("shipment_states.#{shipment.state}") %></span>
       <%= Spree.t(:package_from) %>
       <strong class="stock-location-name" data-hook="stock-location-name">'<%= shipment.stock_location.name %>'</strong>
       <% if shipment.ready? and can? :update, shipment %>
-        -
-        <%= link_to Spree.t(:ship), '#', :class => 'ship button fa fa-arrow-right', :data => {'shipment-number' => shipment.number} %>
+        <%= link_to Spree.t(:ship), 'javascript:;', class: 'ship pull-right btn btn-success', data: { 'shipment-number' => shipment.number } %>
+        <div class='clearfix'></div>
       <% end %>
-    </legend>
-  </fieldset>
-
-  <table class="stock-contents index" data-hook="stock-contents">
-    <colgroup>
-      <col style="width: 10%;" />
-      <col style="width: 30%;" />
-      <col style="width: 15%;" />
-      <col style="width: 15%;" />
-      <col style="width: 15%;" />
-      <col style="width: 15%;" />
-    </colgroup>
+    </h1>
+  </div>
 
+  <table class="table table-bordered stock-contents" data-hook="stock-contents">
     <thead>
       <th colspan="2"><%= Spree.t(:item_description) %></th>
-      <th><%= Spree.t(:price) %></th>
-      <th><%= Spree.t(:quantity) %></th>
-      <th><%= Spree.t(:total) %></th>
-      <th class="orders-actions actions" data-hook="admin_order_form_line_items_header_actions"></th>
+      <th width="15%" class="text-center"><%= Spree.t(:price) %></th>
+      <th width="15%" class="text-center"><%= Spree.t(:quantity) %></th>
+      <th width="15%" class="text-center"><%= Spree.t(:total) %></th>
+      <th class="orders-actions actions text-center" data-hook="admin_order_form_line_items_header_actions"></th>
     </thead>
 
     <tbody data-shipment-number="<%= shipment.number %>" data-order-number="<%= order.number %>">
       <%= render 'spree/admin/orders/shipment_manifest', shipment: shipment %>
 
       <% unless shipment.shipped? %>
-        <tr class="edit-method hidden total">
+        <tr class="edit-method is-hidden total">
           <td colspan="5">
             <div class="field alpha five columns">
               <%= label_tag 'selected_shipping_rate_id', Spree.t(:shipping_method) %>
               <%= select_tag :selected_shipping_rate_id,
                     options_for_select(shipment.shipping_rates.map {|sr| ["#{sr.name} #{sr.display_price}", sr.id] }, shipment.selected_shipping_rate_id),
-                    {:class => 'select2 fullwidth', :data => {'shipment-number' => shipment.number } } %>
+                    { class: 'select2', data: {'shipment-number' => shipment.number } } %>
             </div>
           </td>
-          <td class="actions">
+          <td class="actions text-center">
             <% if can? :update, shipment %>
-              <%= link_to '', '#', :class => 'save-method fa fa-ok no-text with-tip',
-                :data => {'shipment-number' => shipment.number, :action => 'save'}, title: Spree.t('actions.save') %>
-              <%= link_to '', '#', :class => 'cancel-method fa fa-cancel no-text with-tip',
-                :data => {:action => 'cancel'}, :title => Spree.t('actions.cancel') %>
+              <%= link_to_with_icon 'cancel', Spree.t('actions.cancel'), "#", class: 'cancel-method btn btn-primary btn-sm', data: {action: 'cancel'}, title: Spree.t('actions.cancel'), no_text: true %>
+              <%= link_to_with_icon 'save', Spree.t('actions.save'), "#", class: 'save-method btn btn-success btn-sm', data: {'shipment-number' => shipment.number, action: 'save'}, title: Spree.t('actions.save'), no_text: true %>
             <% end %>
           </td>
         </tr>
@@ -61,30 +52,30 @@
             <td colspan="4">
               <strong><%= rate.name %></strong>
             </td>
-            <td class="total" align="center">
-              <span><%= shipment.display_cost %></span>
+            <td class="total text-center">
+              <%= shipment.display_cost %>
             </td>
           <% else %>
             <td colspan='5'><%= Spree.t(:no_shipping_method_selected) %></td>
           <% end %>
 
-          <td class="actions">
+          <td class="actions text-center">
             <% if( (can? :update, shipment) and !shipment.shipped?) %>
-              <%= link_to '', '#', :class => 'edit-method fa fa-edit no-text with-tip', :data => {:action => 'edit'}, :title => Spree.t('edit') %>
+              <%= link_to_with_icon 'edit', Spree.t('edit'), "javascript:;", class: 'edit-method with-tip btn btn-sm btn-primary', data: {action: 'edit'}, no_text: true %>
             <% end %>
           </td>
         </tr>
 
 
-      <tr class="edit-tracking hidden total">
+      <tr class="edit-tracking is-hidden total">
         <td colspan="5">
           <label><%= Spree.t(:tracking_number) %>:</label>
-          <%= text_field_tag :tracking, shipment.tracking %>
+          <%= text_field_tag :tracking, shipment.tracking, class: "form-control" %>
         </td>
         <td class="actions">
           <% if can? :update, shipment %>
-            <%= link_to '', '#', :class => 'save-tracking fa fa-ok no-text with-tip', :data => {'shipment-number' => shipment.number, :action => 'save'}, :title => Spree.t('actions.save') %>
-            <%= link_to '', '#', :class => 'cancel-tracking fa fa-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => Spree.t('actions.cancel') %>
+            <%= link_to_with_icon 'cancel', Spree.t('actions.cancel'), "#", :class => 'cancel-tracking btn btn-primary btn-sm', :data => {:action => 'cancel'}, :title => Spree.t('actions.cancel'), :no_text => true %>
+            <%= link_to_with_icon 'save', Spree.t('actions.save'), "#", :class => 'save-tracking btn btn-success btn-sm', :data => {'shipment-number' => shipment.number, :action => 'save'}, :title => Spree.t('actions.save'), :no_text => true %>
           <% end %>
         </td>
       </tr>
@@ -105,12 +96,13 @@
             <%= Spree.t(:no_tracking_present) %>
           <% end %>
         </td>
-        <td class="actions">
+        <td class="actions text-center">
           <% if can? :update, shipment %>
-            <%= link_to '', '#', :class => 'edit-tracking fa fa-edit no-text with-tip', :data => {:action => 'edit'}, :title => Spree.t('edit') %>
+            <%= link_to_with_icon 'edit', Spree.t('edit'), "#", class: 'edit-tracking btn btn-primary btn-sm', data: {action: 'edit'}, title: Spree.t('edit'), no_text: true %>
           <% end %>
         </td>
       </tr>
     </tbody>
   </table>
+
 </div>