spree_backend 2.4.10 → 3.0.0.rc1

data/app/views/spree/admin/users/_sidebar.html.erb

@@ -1,36 +1,16 @@
-<% content_for :sidebar_title do %>
-  <%= Spree.t(:"admin.user.user_information") %>
-<% end %>
-
 <% content_for :sidebar do %>
-  <nav class="menu">
-    <ul data-hook="admin_user_tab_options">
-      <li<%== ' class="active"' if current == :account %>>
-        <%= link_to_with_icon 'user', Spree.t(:"admin.user.account"), edit_admin_user_path(@user) %>
-      </li>
-      <li<%== ' class="active"' if current == :address %>>
-        <%= link_to_with_icon 'user', Spree.t(:"admin.user.addresses"), addresses_admin_user_path(@user) %>
-      </li>
-      <li<%== ' class="active"' if current == :orders %>>
-        <%= link_to_with_icon 'shopping-cart', Spree.t(:"admin.user.orders"), orders_admin_user_path(@user) %>
-      </li>
-      <li<%== ' class="active"' if current == :items %>>
-        <%= link_to_with_icon 'edit', Spree.t(:"admin.user.items"), items_admin_user_path(@user) %>
-      </li>
-    </ul>
-
-    <fieldset data-hook="admin_user_lifetime_stats">
-      <legend><%= Spree.t(:lifetime_stats) %></legend>
-      <dl id="user-lifetime-stats">
-        <dt><%= Spree.t(:total_sales) %>:</dt>
-          <dd><%= @user.display_lifetime_value.to_html %></dd>
-        <dt><%= Spree.t(:num_orders) %>:</dt>
-          <dd><%= @user.order_count.to_i %></dd>
-        <dt><%= Spree.t(:average_order_value) %>:</dt>
-          <dd><%= @user.display_average_order_value.to_html %></dd>
-        <dt><%= Spree.t(:member_since) %>:</dt>
-          <dd><%= l @user.created_at.to_date %></dd>
-      </dl>
-    </fieldset>
-  </nav>
+  <ul class="nav nav-pills nav-stacked" data-hook="admin_user_tab_options">
+    <li<%== ' class="active"' if current == :account %>>
+      <%= link_to_with_icon 'user', Spree.t(:"admin.user.account"), edit_admin_user_path(@user) %>
+    </li>
+    <li<%== ' class="active"' if current == :address %>>
+      <%= link_to_with_icon 'user', Spree.t(:"admin.user.addresses"), addresses_admin_user_path(@user) %>
+    </li>
+    <li<%== ' class="active"' if current == :orders %>>
+      <%= link_to_with_icon 'shopping-cart', Spree.t(:"admin.user.orders"), orders_admin_user_path(@user) %>
+    </li>
+    <li<%== ' class="active"' if current == :items %>>
+      <%= link_to_with_icon 'edit', Spree.t(:"admin.user.items"), items_admin_user_path(@user) %>
+    </li>
+  </ul>
 <% end %>

data/app/views/spree/admin/users/_user_page_actions.html.erb

@@ -1,8 +1,4 @@
 <% content_for :page_actions do %>
-  <li>
-    <%= button_link_to Spree.t(:back_to_users_list), spree.admin_users_path, :icon => 'arrow-left' %>
-  </li>
-  <li>
-    <%= button_link_to Spree.t(:create_new_order), spree.new_admin_order_path(user_id: @user.id), :icon => 'plus' %>
-  </li>
+  <%= button_link_to Spree.t(:back_to_users_list), spree.admin_users_path, class: 'btn-primary', icon: 'chevron-left' %>
+  <%= button_link_to Spree.t(:create_new_order), spree.new_admin_order_path(user_id: @user.id), class: "btn-success", icon: 'add' %>
 <% end %>

data/app/views/spree/admin/users/addresses.html.erb

@@ -1,24 +1,25 @@
 <% content_for :page_title do %>
-  <%= link_to "#{Spree.t(:editing_user)} #{@user.email}", edit_admin_user_url(@user) %>
+  <%= link_to "#{@user.email}", edit_admin_user_url(@user) %> / <%= Spree.t(:editing_resource, resource: Spree::Address.model_name.human(count: :many)) %>
 <% end %>
 
 <%= render :partial => 'spree/admin/users/sidebar', :locals => { :current => :address } %>
 <%= render :partial => 'spree/admin/users/user_page_actions' %>
 
-<fieldset data-hook="admin_user_addresses" id="admin_user_edit_addresses" class="alpha twelve columns">
-  <legend><%= Spree.t('addresses', :scope => 'admin.user') %></legend>
-
+<div data-hook="admin_user_addresses" id="admin_user_edit_addresses">
   <div data-hook="admin_user_edit_form_header">
-    <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @user } %>
+    <%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @user } %>
   </div>
 
   <div data-hook="admin_user_address_edit_form">
     <%= form_for [:admin, @user], as: :user, url: addresses_admin_user_url(@user), method: :put do |f| %>
+
       <%= render :partial => 'addresses_form', :locals => { :f => f } %>
 
-      <div data-hook="admin_user_edit_form_button">
+      <div class="form-actions text-center well" data-hook="admin_user_edit_form_button">
         <%= render :partial => 'spree/admin/shared/edit_resource_links', :locals => { :collection_url => admin_users_url } %>
       </div>
     <% end %>
   </div>
-</fieldset>
+</div>
+
+<%= render 'spree/admin/users/lifetime_stats' %>

data/app/views/spree/admin/users/edit.html.erb

@@ -1,55 +1,72 @@
 <% content_for :page_title do %>
-  <%= link_to "#{Spree.t(:editing_user)} #{@user.email}", edit_admin_user_url(@user) %>
+  <%= Spree.t(:editing_user) %> <%= @user.email %>
 <% end %>
 
 <%= render :partial => 'spree/admin/users/sidebar', :locals => { :current => :account } %>
 <%= render :partial => 'spree/admin/users/user_page_actions' %>
 
-<fieldset data-hook="admin_user_edit_general_settings" class="alpha twelve columns">
-  <legend><%= Spree.t(:general_settings) %></legend>
-
-  <div data-hook="admin_user_edit_form_header">
-    <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @user } %>
+<div data-hook="admin_user_edit_general_settings" class="panel panel-default">
+  <div class="panel-heading">
+    <h1 class="panel-title">
+      <%= Spree.t(:general_settings) %>
+    </h1>
   </div>
 
-  <div data-hook="admin_user_edit_form">
-    <%= form_for [:admin, @user], as: :user, url: admin_user_url(@user), method: :put do |f| %>
-      <%= render :partial => 'form', :locals => { :f => f } %>
+  <div class="panel-body">
+    <div data-hook="admin_user_edit_form_header">
+      <%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @user } %>
+    </div>
 
-      <div data-hook="admin_user_edit_form_button">
-        <%= render :partial => 'spree/admin/shared/edit_resource_links', :locals => { :collection_url => admin_users_url } %>
-      </div>
-    <% end %>
+    <div data-hook="admin_user_edit_form">
+      <%= form_for [:admin, @user], as: :user, url: admin_user_url(@user), method: :put do |f| %>
+        <%= render :partial => 'form', :locals => { :f => f } %>
+
+        <div data-hook="admin_user_edit_form_button">
+          <%= render :partial => 'spree/admin/shared/edit_resource_links', :locals => { :collection_url => admin_users_url } %>
+        </div>
+      <% end %>
+    </div>
   </div>
-</fieldset>
+</div>
 
-<fieldset data-hook="admin_user_api_key" id="admin_user_edit_api_key" class="alpha twelve columns">
-  <legend><%= Spree.t('access', :scope => 'api') %></legend>
+<div data-hook="admin_user_api_key" id="admin_user_edit_api_key" class="panel panel-default">
+  <div class="panel-heading">
+    <h1 class="panel-title">
+      <%= Spree.t('access', :scope => 'api') %>
+    </h1>
+  </div>
 
-  <% if @user.spree_api_key.present? %>
-    <div class="field">
-      <div id="current-api-key"><%= Spree.t('key', :scope => 'api') %>: <%= @user.spree_api_key %></div>
-    </div>
-    <div class="filter-actions actions">
-      <%= form_tag spree.clear_api_key_admin_user_path(@user), :method => :put do %>
-        <%= button Spree.t('clear_key', :scope => 'api'), 'trash' %>
-      <% end %>
+  <div class="panel-body">
+    <% if @user.spree_api_key.present? %>
+      <div class="form-group">
+        <div id="current-api-key">
+          <label><%= Spree.t('key', :scope => 'api') %>: </label>
+          <strong><%= @user.spree_api_key %></strong>
+        </div>
+      </div>
+      <div class="form-actions">
+        <%= form_tag spree.clear_api_key_admin_user_path(@user), :method => :put do %>
+          <%= button Spree.t('clear_key', :scope => 'api'), 'delete', 'submit', class: "btn-danger" %>
+        <% end %>
 
-      <span class="or"><%= Spree.t(:or)%></span>
+        <span class="or"><%= Spree.t(:or)%></span>
 
-      <%= form_tag spree.generate_api_key_admin_user_path(@user), :method => :put do %>
-        <%= button Spree.t('regenerate_key', :scope => 'api'), 'refresh' %>
-      <% end %>
-    </div>
+        <%= form_tag spree.generate_api_key_admin_user_path(@user), :method => :put do %>
+          <%= button Spree.t('regenerate_key', :scope => 'api'), 'save' %>
+        <% end %>
+      </div>
 
-  <% else %>
+    <% else %>
 
-    <div class="no-objects-found"><%= Spree.t('no_key', :scope => 'api') %></div>
+      <div class="alert alert-warning"><%= Spree.t('no_key', :scope => 'api') %></div>
 
-    <div class="filter-actions actions">
-      <%= form_tag spree.generate_api_key_admin_user_path(@user), :method => :put do %>
-        <%= button Spree.t('generate_key', :scope => 'api'), 'key' %>
-      <% end %>
-    </div>
-  <% end %>
-</fieldset>
+      <div class="form-actions">
+        <%= form_tag spree.generate_api_key_admin_user_path(@user), :method => :put do %>
+          <%= button Spree.t('generate_key', :scope => 'api'), 'key' %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<%= render 'spree/admin/users/lifetime_stats' %>

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

@@ -1,29 +1,61 @@
 <% content_for :page_title do %>
-  <%= Spree.t(:listing_users) %>
+  <%= Spree.t(:users) %>
 <% end %>
 
 <% content_for :page_actions do %>
-  <li>
-    <%= button_link_to Spree.t(:new_user), new_admin_user_url, :icon => 'plus', :id => 'admin_new_user_link' %>
-  </li>
+  <%= button_link_to Spree.t(:new_user), new_admin_user_url, :class => "btn-success", :icon => 'add', :id => 'admin_new_user_link' %>
 <% end %>
 
-<table class="index" id="listing_users" data-hook>
-  <colgroup>
-    <col style="width: 85%">
-    <col style="width: 15%">
-  </colgroup>
+<% content_for :table_filter_title do %>
+  <%= Spree.t(:search) %>
+<% end %>
+
+<% content_for :table_filter do %>
+  <div data-hook="admin_users_index_search">
+    <%= search_form_for [:admin, @search], url: admin_users_url do |f| %>
+      <div class="form-group">
+        <%= f.label Spree.t(:email) %>
+        <%= f.text_field :email_cont, class: "form-control js-quick-search-target" %>
+      </div>
+      <div class="row">
+        <div class="col-md-6">
+          <div class="form-group">
+            <%= f.label Spree.t(:first_name) %>
+            <%= f.text_field :bill_address_firstname_cont, :class => 'form-control' %>
+          </div>
+        </div>
+        <div class="col-md-6">
+          <div class="form-group">
+            <%= f.label Spree.t(:last_name) %>
+            <%= f.text_field :bill_address_lastname_cont, :class => 'form-control' %>
+          </div>
+        </div>
+      </div>
+      <div class="form-group">
+        <%= f.label Spree.t(:company) %>
+        <%= f.text_field :bill_address_company_cont, :class => 'form-control' %>
+      </div>
+      <div data-hook="admin_users_index_search_buttons" class="form-actions">
+        <%= button Spree.t(:search), 'search' %>
+      </div>
+    <% end %>
+  </div>
+<% end %>
+
+<table class="table" id="listing_users" data-hook>
   <thead>
     <tr data-hook="admin_users_index_headers">
-      <th><%= sort_link @search,:email, Spree.t(:user), {}, {:title => 'users_email_title'} %></th>
+      <th>
+        <%= sort_link @search,:email, Spree.t(:user), {}, {:title => 'users_email_title'} %>
+      </th>
       <th data-hook="admin_users_index_header_actions" class="actions"></th>
     </tr>
   </thead>
   <tbody>
     <% @users.each do |user|%>
-      <tr id="<%= spree_dom_id user %>" data-hook="admin_users_index_rows" class="<%= cycle('odd', 'even')%>">
+      <tr id="<%= spree_dom_id user %>" data-hook="admin_users_index_rows">
         <td class='user_email'><%=link_to user.email, edit_admin_user_url(user) %></td>
-        <td data-hook="admin_users_index_row_actions" class="actions">
+        <td data-hook="admin_users_index_row_actions" class="actions actions-2 text-right">
           <%= link_to_edit user, :no_text => true %>
           <%= link_to_delete user, :no_text => true %>
         </td>
@@ -33,21 +65,3 @@
 </table>
 
 <%= paginate @users %>
-
-<% content_for :sidebar_title do %>
-  <%= Spree.t(:search) %>
-<% end %>
-
-<% content_for :sidebar do %>
-  <div class="box align-center" data-hook="admin_users_index_search">
-    <%= search_form_for [:admin, @search], url: admin_users_url do |f| %>
-      <div class="field">
-        <%= f.label :email_cont, Spree.t(:email) %> <br>
-        <%= f.text_field :email_cont, :class => 'fullwidth' %>
-      </div>
-      <div data-hook="admin_users_index_search_buttons">
-        <%= button Spree.t(:search), 'search' %>
-      </div>
-    <% end %>
-  </div>
-<% end %>

data/app/views/spree/admin/users/items.html.erb

@@ -1,28 +1,16 @@
 <% content_for :page_title do %>
-  <%= link_to "#{Spree.t(:"admin.user.items_purchased")} #{@user.email}", edit_admin_user_url(@user) %>
+  <%= link_to "#{@user.email}", edit_admin_user_url(@user) %> / <%= Spree.t(:"admin.user.items_purchased") %>
 <% end %>
 
 <%= render :partial => 'spree/admin/users/sidebar', :locals => { :current => :items } %>
 <%= render :partial => 'spree/admin/users/user_page_actions' %>
 
-<fieldset data-hook="admin_user_items_purchased" class="alpha twelve columns">
-  <legend><%= Spree.t(:"admin.user.items_purchased") %></legend>
-
+<fieldset data-hook="admin_user_items_purchased">
   <%= paginate @orders %>
 
   <% if @orders.any? %>
     <%# TODO add search interface %>
-    <table class="stock-contents index" id="listing_items" data-hook="stock-contents">
-      <colgroup>
-        <col style="width: 10%;" />
-        <col style="width: 10%;" />
-        <col style="width: 30%;" />
-        <col style="width: 8%;" />
-        <col style="width: 8%;" />
-        <col style="width: 10%;" />
-        <col style="width: 14%;" />
-      </colgroup>
-
+    <table class="table table-condensed table-bordered stock-contents" id="listing_items" data-hook="stock-contents">
       <thead>
         <th><%= sort_link @search, :completed_at, I18n.t(:completed_at, :scope => 'activerecord.attributes.spree/order'), {}, {:title => 'orders_completed_at_title'} %></th>
         <th colspan=2><%= Spree.t(:description) %></th>
@@ -32,12 +20,11 @@
         <th><%= sort_link @search, :state, I18n.t(:state, :scope => 'activerecord.attributes.spree/order'), {}, {:title => 'orders_state_title'} %></th>
         <th><%= sort_link @search, :number, Spree.t(:order_num, :scope => 'admin.user'), {}, {:title => 'orders_number_title'} %></th>
       </thead>
-
       <tbody>
         <% @orders.each do |order| %>
           <% order.line_items.each do |item| %>
             <tr class="stock-item" data-item-quantity="<%= item.quantity %>">
-              <td class="align-center order-completed-at"><%= l(order.completed_at.to_date) if order.completed_at %></td>
+              <td class="order-completed-at"><%= l(order.completed_at.to_date) if order.completed_at %></td>
               <td class="item-image">
                 <%= mini_image(item.variant) %>
               </td>
@@ -47,10 +34,10 @@
                   <strong><%= Spree.t(:sku) %>:</strong> <%= item.variant.sku %>
                 <% end %>
               </td>
-              <td class="align-center item-price"><%= item.single_money.to_html %></td>
-              <td class="align-center item-quantity"><%= item.quantity %></td>
-              <td class="align-center item-total"><%= item.money.to_html %></td>
-              <td class="align-center order-state">
+              <td class="item-price"><%= item.single_money.to_html %></td>
+              <td class="item-quantity"><%= item.quantity %></td>
+              <td class="item-total"><%= item.money.to_html %></td>
+              <td class="order-state">
                 <div class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></div>
                 <% if order.payment_state %>
                   <div class="state <%= order.payment_state %>"><%= link_to Spree.t("payment_states.#{order.payment_state}"), admin_order_payments_path(order) %></div>
@@ -59,16 +46,18 @@
                   <div class="state <%= order.shipment_state %>"><%= Spree.t("shipment_states.#{order.shipment_state}") %></div>
                 <% end %>
               </td>
-              <td class="align-center order-number"><%= link_to order.number, edit_admin_order_url(order) %></td>
+              <td class="order-number"><%= link_to order.number, edit_admin_order_url(order) %></td>
             </tr>
           <% end %>
         <% end %>
     </table>
   <% else %>
-    <div class="alpha twelve columns no-objects-found">
-      <%= Spree.t(:no_resource_found, resource: I18n.t(:other, scope: 'activerecord.models.spree/order')) %>,
+    <div class="alert alert-info no-objects-found">
+      <%= Spree.t(:no_resource_found, resource: Spree::Order.model_name.human(count: :many)) %>,
       <%= link_to Spree.t(:add_one), spree.new_admin_order_path %>!
     </div>
   <% end %>
   <%= paginate @orders %>
 </fieldset>
+
+<%= render 'spree/admin/users/lifetime_stats' %>

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

@@ -2,14 +2,8 @@
   <%= Spree.t(:new_user) %>
 <% end %>
 
-<% content_for :page_actions do %>
-  <li>
-    <%= button_link_to Spree.t(:back_to_users_list), spree.admin_users_path, :icon => 'arrow-left' %>
-  </li>
-<% end %>
-
 <div data-hook="admin_user_new_form_header">
-  <%= render :partial => 'spree/shared/error_messages', :locals => { :target => @user } %>
+  <%= render :partial => 'spree/admin/shared/error_messages', :locals => { :target => @user } %>
 </div>
 
 <div data-hook="admin_user_new_form">

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

@@ -1,24 +1,16 @@
 <% content_for :page_title do %>
-  <%= link_to "#{Spree.t(:"admin.user.order_history")} #{@user.email}", edit_admin_user_url(@user) %>
+  <%= link_to "#{@user.email}", edit_admin_user_url(@user) %> / <%= Spree.t(:"admin.user.order_history") %>
 <% end %>
 
 <%= render :partial => 'spree/admin/users/sidebar', :locals => { :current => :orders } %>
 <%= render :partial => 'spree/admin/users/user_page_actions' %>
 
-<fieldset data-hook="admin_user_order_history" class="alpha twelve columns">
-  <legend><%= Spree.t(:"admin.user.order_history") %></legend>
-
+<fieldset data-hook="admin_user_order_history">
   <%= paginate @orders %>
 
   <% if @orders.any? %>
     <%# TODO add search interface %>
-    <table class="index responsive" id="listing_orders" data-hook>
-      <colgroup>
-         <col style="width: 25%;">
-         <col style="width: 25%;">
-         <col style="width: 25%;">
-         <col style="width: 25%;">
-      </colgroup>
+    <table class="table table-condensed table-bordered" id="listing_orders" data-hook>
       <thead>
         <tr data-hook="admin_orders_index_headers">
           <th><%= sort_link @search, :completed_at,   I18n.t(:completed_at, :scope => 'activerecord.attributes.spree/order'), {}, {:title => 'orders_completed_at_title'} %></th>
@@ -30,9 +22,9 @@
       <tbody>
       <% @orders.each do |order| %>
         <tr data-hook="admin_orders_index_rows" class="state-<%= order.state.downcase %> <%= cycle('odd', 'even') %>">
-          <td class="align-center order-completed-at"><%= l(order.completed_at.to_date) if order.completed_at %></td>
-          <td class="align-center order-number"><%= link_to order.number, edit_admin_order_path(order) %></td>
-          <td class="align-center order-state">
+          <td class="order-completed-at"><%= l(order.completed_at.to_date) if order.completed_at %></td>
+          <td class="order-number"><%= link_to order.number, edit_admin_order_path(order) %></td>
+          <td class="order-state">
             <div class="state <%= order.state.downcase %>"><%= Spree.t("order_state.#{order.state.downcase}") %></div>
             <% if order.payment_state %>
               <div class="state <%= order.payment_state %>"><%= link_to Spree.t("payment_states.#{order.payment_state}"), admin_order_payments_path(order) %></div>
@@ -41,17 +33,19 @@
               <div class="state <%= order.shipment_state %>"><%= Spree.t("shipment_states.#{order.shipment_state}") %></div>
             <% end %>
           </td>
-          <td class="align-center order-total"><%= order.display_total.to_html %></td>
+          <td class="order-total"><%= order.display_total.to_html %></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/order')) %>,
+    <div class="alert alert-info no-objects-found">
+      <%= Spree.t(:no_resource_found, resource: Spree::Order.model_name.human(count: :many)) %>,
       <%= link_to Spree.t(:add_one), spree.new_admin_order_path %>!
     </div>
   <% end %>
 
   <%= paginate @orders %>
 </fieldset>
+
+<%= render 'spree/admin/users/lifetime_stats' %>

data/app/views/spree/admin/variants/_autocomplete.js.erb

@@ -1,25 +1,23 @@
 <script type='text/template' id='variant_autocomplete_template'>
-  <div class='variant-autocomplete-item'>
-    <figure class='variant-image'>
-      {{#if variant.image }}
-        <img src='{{variant.image}}' />
-      {{ else }}
-        <img src='<%= image_path("noimage/mini.png") %>' />
-      {{/if}}
+  <div class='variant-autocomplete-item media'>
+    <figure class='variant-image media-left'>
+      <span class="thumbnail no-marginb">
+        {{#if variant.image }}
+          <img src='{{variant.image}}' />
+        {{ else }}
+          <img src='<%= image_path("noimage/mini.png") %>' />
+        {{/if}}
+      </span>
     </figure>
 
-    <div class='variant-details'>
-
-      <h6 class="variant-name">{{variant.name}}</h6>
-
+    <div class='variant-details media-body'>
+      <h5 class="variant-name media-heading">{{variant.name}}</h5>
       {{#if variant.option_values}}
         {{#each variant.option_values}}
-          <strong>{{this.option_type_presentation}}:</strong> {{this.presentation}}<br>
+          <strong>{{this.option_type_presentation}}:</strong> {{this.presentation}}<br/>
         {{/each}}
       {{/if}}
-      
       <strong><%= Spree.t(:sku) %>:</strong> {{variant.sku}}
-
     </div>
   </div>
-</script>
+</script>

data/app/views/spree/admin/variants/_autocomplete_line_items_stock.js.erb

@@ -1,49 +1,46 @@
 <script type='text/template' id='variant_line_items_autocomplete_stock_template'>
-  <fieldset>
-    <legend align="center"><%= Spree.t(:select_stock) %></legend>
-    <table class="stock-levels" data-hook="stock-levels">
-      <colgroup>
-        <col style="width: 30%;" />
-        <col style="width: 40%;" />
-        <col style="width: 30%;" />
-      </colgroup>
-      <thead>
-        <th><%= Spree.t(:name) %></th>
-        <th><%= Spree.t(:count_on_hand) %></th>
-        <th><%= Spree.t(:quantity) %></th>
-        <th class="actions"></th>
-      </thead>
-      <tbody>
-        <tr>
-          <td>{{variant.name}}</td>
-          {{#unless variant.track_inventory}}
-            <td>
-            It doesnt track inventory
+  
+  <label><%= Spree.t(:select_stock) %></label>
+
+  <table class="stock-levels table table-bordered" data-hook="stock-levels">
+    <thead>
+      <th><%= Spree.t(:name) %></th>
+      <th class="text-center"><%= Spree.t(:count_on_hand) %></th>
+      <th class="text-center"><%= Spree.t(:quantity) %></th>
+      <th></th>
+    </thead>
+    <tbody>
+      <tr>
+        <td>{{variant.name}}</td>
+        {{#if variant.track_inventory}}
+          {{#if variant.total_on_hand}}
+            <td class="text-center">{{variant.total_on_hand}}</td>
+            <td class="text-center">
+              <input class="quantity form-control" id="variant_quantity" data-variant-id="{{variant.id}}" type="number" min="1" value="1">
             </td>
-            <td>
-              <input class="quantity" id="variant_quantity" data-variant-id="{{variant.id}}" type="number" min="1" value="1">
-            </td>
-            <td class="actions">
-              <button class="add_variant no-text fa fa-plus icon_link with-tip" data-variant-id="{{this.variant_id}}" title="<%= Spree.t(:add) %>" data-action="add"></button>
+            <td class="actions actions-1 text-center">
+              <button class="btn btn-sm btn-success add_variant with-tip" data-variant-id="{{variant.id}}" title="<%= Spree.t(:add) %>" data-action="add">
+                <span class="icon icon-add"></span>
+                </button>
             </td>
           {{else}}
-            {{#if variant.total_on_hand}}
-              <td>
-                {{variant.total_on_hand}}
-              </td>
-              <td>
-                <input class="quantity" id="variant_quantity" data-variant-id="{{variant.id}}" type="number" min="1" value="1">
-              </td>
-              <td class="actions">
-                <button class="add_variant no-text fa fa-plus icon_link with-tip" data-variant-id="{{variant.id}}" title="<%= Spree.t(:add) %>" data-action="add"></button>
-              </td>
-            {{else}}
-              <td><%= Spree.t(:out_of_stock) %></td>
-              <td>0</td>
-            {{/if}}
-          {{/unless}}
-        </tr>
-      </tbody>
-    </table>
-  </fieldset>
+            <td class="text-center"><%= Spree.t(:out_of_stock) %></td>
+            <td class="text-center">0</td>
+            <td></td>
+            <td></td>
+          {{/if}}
+        {{else}}
+          <td class="text-center"><%= Spree.t(:doesnt_track_inventory) %></td>
+          <td class="text-center">
+            <input class="quantity form-control" id="variant_quantity" data-variant-id="{{variant.id}}" type="number" min="1" value="1">
+          </td>
+          <td class="actions actions-1 text-center">
+            <button class="btn btn-sm btn-success add_variant with-tip" data-variant-id="{{variant.id}}" title="<%= Spree.t(:add) %>" data-action="add">
+              <span class="icon icon-add"></span>
+            </button>
+          </td>
+        {{/if}}
+      </tr>
+    </tbody>
+  </table>
 </script>