spree_backend 4.1.12 → 4.2.0.rc3

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

@@ -27,7 +27,7 @@
       <div data-hook="new_product_prototype" class="col-12 col-md-4">
         <%= f.field_container :prototype, class: ['form-group'] do %>
           <%= f.label :prototype_id, Spree.t(:prototype) %>
-          <%= f.collection_select :prototype_id, Spree::Prototype.all, :id, :name, {include_blank: true}, {class: 'select2'} %>
+          <%= f.collection_select :prototype_id, Spree::Prototype.all, :id, :name, { include_blank: true }, { class: 'select2-clear w-100' } %>
         <% end %>
       </div>
 
@@ -43,14 +43,23 @@
         <%= f.field_container :available_on, class: ['form-group'] do %>
           <%= f.label :available_on, Spree.t(:available_on) %>
           <%= f.error_message_on :available_on %>
-          <%= f.text_field :available_on, class: 'datepicker form-control' %>
+
+          <div class="input-group datepicker" data-wrap="true">
+            <%= f.text_field :available_on,
+                             value: datepicker_field_value(@product.available_on),
+                             placeholder: Spree.t(:select_a_date),
+                             class: 'form-control shadow-none',
+                             'data-input':'' %>
+
+            <%= render partial: 'spree/admin/shared/cal_close' %>
+          </div>
         <% end %>
       </div>
 
       <div data-hook="new_product_shipping_category" class="col-12 col-md-4">
         <%= f.field_container :shipping_category, class: ['form-group'] do %>
           <%= f.label :shipping_category_id, Spree.t(:shipping_categories) %><span class="required">*</span>
-          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2', required: :required }) %>
+          <%= f.collection_select(:shipping_category_id, @shipping_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2 w-100' }) %>
           <%= f.error_message_on :shipping_category_id %>
         <% end %>
       </div>

data/app/views/spree/admin/products/stock.html.erb

@@ -7,8 +7,8 @@
   </div>
 <% end %>
 
-<div class="card mb-3">
-  <table class="table table-bordered" id="listing_product_stock">
+<div class="card mb-3 table-responsive">
+  <table class="table" id="listing_product_stock">
     <thead>
       <tr data-hook="admin_product_stock_management_index_headers">
         <th colspan="2"><%= Spree.t(:variant) %></th>
@@ -63,7 +63,7 @@
                         <% end if can? :update, item %>
                       </td>
                       <td class="actions actions-1 text-center">
-                        <%= link_to_with_icon('delete', Spree.t(:remove), [:admin, item], method: :delete, remote: true, class: 'icon_link btn btn-danger btn-sm', data: { action: :remove, confirm: Spree.t(:are_you_sure) }, no_text: true) if can? :destroy, item %>
+                        <%= link_to_with_icon('delete.svg', Spree.t(:remove), [:admin, item], method: :delete, remote: true, class: 'icon_link btn btn-danger btn-sm', data: { action: :remove, confirm: Spree.t(:are_you_sure) }, no_text: true) if can? :destroy, item %>
                       </td>
                     </tr>
                   <% end %>

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

@@ -3,10 +3,12 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t(:new_promotion_category), new_object_url, icon: 'add', class: 'btn-success' %>
+  <%= button_link_to Spree.t(:new_promotion_category), new_object_url, icon: 'add.svg', class: 'btn-success' %>
 <% end if can?(:create, Spree::PromotionCategory) %>
 
 <% if @promotion_categories.any? %>
+
+<div class="table-responsive">
   <table class="table">
     <thead>
       <th><%= Spree::PromotionCategory.human_attribute_name :name %></th>
@@ -26,6 +28,7 @@
       <% end %>
     </tbody>
   </table>
+</div>
 <% else %>
   <div class="alert alert-info no-objects-found">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::PromotionCategory)) %>,

data/app/views/spree/admin/promotion_rules/create.js.erb

@@ -7,4 +7,4 @@ $('.user_picker').userAutocomplete();
 $('#promotion_rule_type').html('<%= escape_javascript options_for_promotion_rule_types(@promotion) %>');
 $('#promotion_rule_type').select2();
 
-set_taxon_select('#product_taxon_ids')
+$('#product_taxon_ids').taxonAutocomplete()

data/app/views/spree/admin/promotions/_actions.html.erb

@@ -12,7 +12,7 @@
       <%= select_tag 'action_type', options, class: 'select2' %>
     </div>
     <div class="form-actions">
-      <%= button Spree.t(:add), 'plus', 'submit', class: "btn-success" %>
+      <%= button Spree.t(:add), 'add.svg', 'submit', class: "btn-success" %>
     </div>
 
   <% end %>
@@ -28,7 +28,7 @@
       <% end %>
     </div>
     <div class="actions promotion-update">
-      <%= button Spree.t('actions.update'), 'save' %>
+      <%= button Spree.t('actions.update'), 'save.svg' %>
     </div>
   <% end %>
 

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

@@ -1,24 +1,26 @@
 <%= render partial: 'spree/admin/shared/error_messages', locals: { target: @promotion } %>
 
 <div class="row" id="general_fields" >
-  <div class="col-6 col-md-3">
+  <div class="col-12 col-md-3">
     <%= f.field_container :name, class: ['form-group'] do %>
       <%= f.label :name %>
       <%= f.text_field :name, class: 'form-control' %>
       <%= f.error_message_on :name %>
     <% end %>
 
-    <%= f.field_container :code, class: ['form-group'] do %>
-      <%= f.label :code %>
-      <%= f.text_field :code, class: 'form-control' %>
-    <% end %>
+    <div class="form-group">
+      <%= f.field_container :code do %>
+        <%= f.label :code %>
+        <%= f.text_field :code, class: 'form-control' %>
+      <% end %>
 
-    <%= f.field_container :generate_code, class: ['checkbox'] do %>
-      <%= f.label :generate_code do %>
-        <%= f.check_box :generate_code %>
-        <%= Spree.t(:generate_code) %>
+      <%= f.field_container :generate_code, class: ['checkbox'] do %>
+        <%= f.label :generate_code do %>
+          <%= f.check_box :generate_code %>
+          <%= Spree.t(:generate_code) %>
+        <% end %>
       <% end %>
-    <% end %>
+    </div>
 
     <%= f.field_container :path, class: ['form-group'] do %>
       <%= f.label :path %>
@@ -41,27 +43,52 @@
 
     <%= f.field_container :category, class: ['form-group'] do %>
       <%= f.label :promotion_category %>
-      <%= f.collection_select(:promotion_category_id, @promotion_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2' }) %>
+      <%= f.collection_select(:promotion_category_id, @promotion_categories, :id, :name, { include_blank: Spree.t('match_choices.none') }, { class: 'select2 w-100' }) %>
     <% end %>
   </div>
 
-  <div id="expiry_fields" class="col-6 col-md-3">
-    <%= f.field_container :usage_limit do %>
-      <%= f.label :usage_limit %>
-      <%= f.number_field :usage_limit, min: 0, class: 'form-control' %>
+  <div id="expiry_fields" class="col-12 col-md-3">
+    <div class="form-group">
+      <%= f.field_container :usage_limit do %>
+        <%= f.label :usage_limit, Spree.t('limit_usage_to') %>
+        <%= f.number_field :usage_limit, min: 0, class: 'form-control hide-number-toggle' %>
+      <% end %>
       <small class="form-text text-muted">
         <%= Spree.t(:current_promotion_usage, count: @promotion.credits_count) %>
       </small>
-    <% end %>
+    </div>
 
     <div id="starts_at_field" class="form-group">
       <%= f.label :starts_at %>
-      <%= f.datetime_field :starts_at, class: 'form-control' %>
+      <div class="input-group datePickerFrom"
+           data-wrap="true"
+           data-enable-time="true"
+           data-date-format="<%= Spree.t('js_date_time', scope: 'date_picker') %>"
+           data-max-date="<%= @promotion.expires_at %>" >
+        <%= f.datetime_field :starts_at,
+                             class: 'form-control shadow-none',
+                             placeholder: Spree.t('starting_from'),
+                             'data-input':'' %>
+
+        <%= render partial: 'spree/admin/shared/cal_close' %>
+      </div>
     </div>
 
     <div id="expires_at_field" class="form-group">
       <%= f.label :expires_at %>
-      <%= f.datetime_field :expires_at, class: 'form-control' %>
+      <div class="input-group datePickerTo"
+           data-wrap="true"
+           data-enable-time= 'true'
+           data-date-format= "<%= Spree.t('js_date_time', scope: 'date_picker') %>"
+           data-min-date="<%= @promotion.starts_at %>" >
+        <%= f.datetime_field :expires_at,
+                              placeholder:Spree.t('ends_at'),
+                              class: 'form-control shadow-none',
+                              'data-input':'' %>
+
+        <%= render partial: 'spree/admin/shared/cal_close' %>
+      </div>
     </div>
+
   </div>
 </div>

data/app/views/spree/admin/promotions/_promotion_action.html.erb

@@ -1,7 +1,7 @@
 <div class="promotion_action promotion-block <%= promotion_action.type.to_s.demodulize.underscore %> card  mb-3" id="<%= dom_id promotion_action %>">
   <% type_name = promotion_action.class.name.demodulize.underscore %>
   <div class="card-header d-flex justify-content-between">
-    <%= link_to_with_icon 'delete', '', spree.admin_promotion_promotion_action_path(@promotion, promotion_action), remote: true, method: :delete, class: 'delete order-2' %>
+    <%= link_to_with_icon 'delete.svg', '', spree.admin_promotion_promotion_action_path(@promotion, promotion_action), remote: true, method: :delete, class: 'delete order-2' %>
     <h3 class="card-title h5 mb-0 promotion-title"><%= Spree.t("promotion_action_types.#{type_name}.description") %></h3>
   </div>
   <% param_prefix = "promotion[promotion_actions_attributes][#{promotion_action.id}]" %>

data/app/views/spree/admin/promotions/_promotion_rule.html.erb

@@ -1,7 +1,7 @@
 <div class="promotion_rule promotion-block card mb-3" id="<%= dom_id promotion_rule %>">
   <% type_name = promotion_rule.class.name.demodulize.underscore %>
   <div class="card-header d-flex justify-content-between">
-    <%= link_to_with_icon 'delete', '',
+    <%= link_to_with_icon 'delete.svg', '',
       spree.admin_promotion_promotion_rule_path(@promotion, promotion_rule),
       remote: true,
       method: :delete,

data/app/views/spree/admin/promotions/_rules.html.erb

@@ -6,13 +6,13 @@
 <div id="rule_fields" class="card-body">
 
   <%= form_tag spree.admin_promotion_promotion_rules_path(@promotion), remote: true, id: 'new_product_rule_form', class: 'mb-3' do %>
-    
+
     <div class="form-group">
       <%= label_tag :promotion_rule_type, Spree.t(:add_rule_of_type) %>
       <%= select_tag('promotion_rule[type]', options_for_promotion_rule_types(@promotion), class: 'select2') %>
     </div>
     <div class="form-actions">
-      <%= button Spree.t(:add), 'plus', 'submit', class: "btn-success" %>
+      <%= button Spree.t(:add), 'add.svg', 'submit', class: "btn-success" %>
     </div>
 
   <% end %>
@@ -40,7 +40,7 @@
     </div>
 
     <div class="promotion-update actions">
-      <%= button Spree.t('actions.update'), 'ok' %>
-    </div>    
+      <%= button Spree.t('actions.update'), 'save.svg' %>
+    </div>
   <% end %>
 </div>

data/app/views/spree/admin/promotions/actions/_create_line_items.html.erb

@@ -15,7 +15,7 @@
         <% line_item_prefix = "#{param_prefix}[promotion_action_line_items_attributes][#{index}]" %>
         <div class="form-group">
           <%= label_tag "#{line_item_prefix}_variant_id", Spree.t(:variant) %>
-          <%= hidden_field_tag "#{line_item_prefix}[variant_id]", line_item.variant_id, class: "variant_autocomplete" %>
+          <%= select_tag "#{line_item_prefix}[variant_id]", line_item.variant_id, class: 'variant_autocomplete d-block w-100' %>
         </div>
         <div class="form-group mb-0">
           <%= label_tag "#{line_item_prefix}_quantity", Spree.t(:quantity) %>

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

@@ -4,8 +4,8 @@
 <% end %>
 
 <%= form_for @promotion, url: object_url, method: :put do |f| %>
-  <div class="row">
-    <div class="col-12">
+<div class="card mb-4">
+  <div class="card-body">
       <%= render partial: 'form', locals: { f: f } %>
       <%= render partial: 'spree/admin/shared/edit_resource_links' %>
     </div>

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

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t(:new_promotion), new_object_url, class: "btn-success", icon: 'add' %>
+  <%= button_link_to Spree.t(:new_promotion), new_object_url, class: "btn-success", icon: 'add.svg' %>
 <% end if can?(:create, Spree::Promotion) %>
 
 <% content_for :table_filter do %>
@@ -36,15 +36,16 @@
       </div>
 
       <div data-hook="admin_promotions_index_search_buttons" class="form-actions">
-        <%= button Spree.t(:filter_results), 'search' %>
+        <%= button Spree.t(:filter_results), 'search.svg' %>
       </div>
     <% end %>
   </div>
 <% end %>
 
-<%= paginate @promotions, theme: 'twitter-bootstrap-4' %>
+<%= paginate @promotions, theme: 'admin-twitter-bootstrap-4' %>
 
 <% if @promotions.any? %>
+<div class="table-responsive">
   <table class="table">
     <thead>
       <tr>
@@ -75,6 +76,7 @@
       <% end %>
     </tbody>
   </table>
+  </div>
 <% else %>
   <div class="alert alert-info no-objects-found">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Promotion)) %>,

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

@@ -2,10 +2,11 @@
   <%= link_to Spree.t(:promotions), admin_promotions_url %> /
   <%= Spree.t(:new_promotion) %>
 <% end %>
-
-<%= form_for :promotion, url: collection_url do |f| %>
-  <%= render partial: 'form', locals: { f: f } %>
-  <div class="text-center">
-    <%= render partial: 'spree/admin/shared/new_resource_links' %>
+<div class="card">
+  <div class="card-body">
+    <%= form_for :promotion, url: collection_url do |f| %>
+      <%= render partial: 'form', locals: { f: f } %>
+      <%= render partial: 'spree/admin/shared/new_resource_links' %>
+    <% end %>
   </div>
-<% end %>
+</div>

data/app/views/spree/admin/promotions/rules/_country.html.erb

@@ -1,6 +1,6 @@
 <div class="card-body">
   <div class="form-group mb-0">
     <%= label_tag Spree.t('country_rule.label') %>
-    <%= select_tag("#{param_prefix}[preferred_country_id]", options_for_select(Spree::Country.pluck(:name, :id), promotion_rule.preferred_country_id), { class: 'select_product form-control' }) %>
+    <%= select_tag("#{param_prefix}[preferred_country_id]", options_for_select(Spree::Country.pluck(:name, :id), promotion_rule.preferred_country_id), { class: 'select_product form-control custom-select' }) %>
   </div>
 </div>

data/app/views/spree/admin/promotions/rules/_item_total.html.erb

@@ -1,11 +1,11 @@
 <div class="card-body">
   <div class="row mb-0">
-    <div class="form-group col-12 col-md-6 mb-0">
-      <%= select_tag "#{param_prefix}[preferred_operator_min]", options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS_MIN.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, promotion_rule.preferred_operator_min), { class: 'select2 select_item_total marginb' } %>
-      <%= select_tag "#{param_prefix}[preferred_operator_max]", options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS_MAX.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, promotion_rule.preferred_operator_max), { class: 'select2 select_item_total' } %>
+    <div class="form-group col-6 mb-3">
+      <%= select_tag "#{param_prefix}[preferred_operator_min]", options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS_MIN.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, promotion_rule.preferred_operator_min), { class: 'custom-select select_item_total mb-3' } %>
+      <%= select_tag "#{param_prefix}[preferred_operator_max]", options_for_select(Spree::Promotion::Rules::ItemTotal::OPERATORS_MAX.map{|o| [Spree.t("item_total_rule.operators.#{o}"),o]}, promotion_rule.preferred_operator_max), { class: 'custom-select select_item_total' } %>
     </div>
-    <div class="form-group col-12 col-md-6 mb-0">
-      <%= text_field_tag "#{param_prefix}[preferred_amount_min]", promotion_rule.preferred_amount_min, class: 'form-control marginb' %>
+    <div class="form-group col-6 mb-3">
+      <%= text_field_tag "#{param_prefix}[preferred_amount_min]", promotion_rule.preferred_amount_min, class: 'form-control mb-3' %>
       <%= text_field_tag "#{param_prefix}[preferred_amount_max]", promotion_rule.preferred_amount_max, class: 'form-control' %>
     </div>
   </div>

data/app/views/spree/admin/promotions/rules/_option_value.html.erb

@@ -1,9 +1,8 @@
 <div class="card-body">
   <div class="promo-rule-option-values">
-    <div class="js-promo-rule-option-values"></div>
-
+    <div class="js-promo-rule-option-values"></div> <!-- display div for option value select -->
     <button class="btn btn-primary btn-success js-add-promo-rule-option-value">
-      <span class="icon icon-add"></span>
+      <%= svg_icon name: "add.svg", width: '16', height: '16' %>
       <%= Spree.t(:add) %>
     </button>
   </div>
@@ -13,30 +12,25 @@
   data: { :'original-option-values' => promotion_rule.preferred_eligible_values } %>
 
 <script type="text/x-handlebars-template" id="promo-rule-option-value-option-values-select-name-template">
-  <%= param_prefix %>[preferred_eligible_values][{{productId}}]
+  <%= param_prefix %>[preferred_eligible_values][{{productId}}][]
 </script>
 
 <script type="text/x-handlebars-template" id="promo-rule-option-value-template">
-  <div class="promo-rule-option-value panel  ">
-    <div class="card-header">
+  <div class="promo-rule-option-value panel card mb-3" id="promo-rule-option-value-{{productId}}">
+    <div class="card-header d-flex justify-content-between">
+      <label><%= Spree.t(:product) %> <%= Spree.t(:option_values) %></label>
       <a class="js-remove-promo-rule-option-value delete pull-right">
-        <span class="icon icon-delete"></span>
+        <%= svg_icon name: "delete.svg", width: '16', height: '16' %>
       </a>
-      <div class="col-12 col-md-6">
-        <label><%= Spree.t(:product) %></label>
-      </div>
-      <div class="col-12 col-md-5">
-        <label><%= Spree.t(:option_values) %></label>
-      </div>
-      <div class="clearfix"></div>
     </div>
-    <div class="card-body row">
-      <div class="col-12 col-md-6">
-        <input class="js-promo-rule-option-value-product-select fullwidth" type="hidden" value="{{ productSelect.value }}">
+    <div class="card-body row p-3">
+      <div class="col-12 col-md-6 product-select">
+        <%= select_tag "product", nil, class: 'js-promo-rule-option-value-product-select d-block w-100', id: "promo-rule-option-value-product-select-{{productId}}" %>
       </div>
-      <div class="col-12 col-md-6">
-        <input class="js-promo-rule-option-value-option-values-select fullwidth" name="<%= param_prefix %>[preferred_eligible_values][{{ productSelect.value }}]" type="hidden" value={{optionValuesSelect.value}}>
+      <div class="col-12 col-md-6 option-value-select">
+        <%= select_tag "#{param_prefix}[preferred_eligible_values][{{ productId }}][]", nil, multiple: true, disabled: true, class: 'js-promo-rule-option-value-option-values-select d-none w-100', id: "promo-rule-option-value-option-values-select-{{productId}}" %>
       </div>
     </div>
   </div>
 </script>
+

data/app/views/spree/admin/promotions/rules/_product.html.erb

@@ -1,10 +1,10 @@
 <div class="card-body">
   <div class="form-group products_rule_products">
     <%= label_tag "#{param_prefix}_product_ids_string", Spree.t('product_rule.choose_products') %>
-    <%= hidden_field_tag "#{param_prefix}[product_ids_string]", promotion_rule.product_ids.join(","), class: "product_picker" %>
+    <%= select "#{param_prefix}", 'product_ids_string', options_from_collection_for_select(promotion_rule.products, :id, :name, promotion_rule.products.pluck(:id)), { include_hidden: true }, multiple: true, class: 'product_picker d-block w-100' %>
   </div>
   <div class="form-group mb-0">
     <%= label_tag Spree.t('product_rule.label') %>
-    <%= select_tag("#{param_prefix}[preferred_match_policy]", options_for_select(Spree::Promotion::Rules::Product::MATCH_POLICIES.map{|s| [Spree.t("product_rule.match_#{s}"),s] }, promotion_rule.preferred_match_policy), {class: 'select_product form-control'}) %>
+    <%= select_tag("#{param_prefix}[preferred_match_policy]", options_for_select(Spree::Promotion::Rules::Product::MATCH_POLICIES.map{|s| [Spree.t("product_rule.match_#{s}"),s] }, promotion_rule.preferred_match_policy), {class: 'select_product form-control custom-select'}) %>
   </div>
 </div>

data/app/views/spree/admin/promotions/rules/_taxon.html.erb

@@ -1,10 +1,10 @@
 <div class="card-body">
   <div class="form-group taxons_rule_taxons">
     <%= label_tag "#{param_prefix}_taxon_ids_string", Spree.t('taxon_rule.choose_taxons') %>
-    <%= hidden_field_tag "#{param_prefix}[taxon_ids_string]", promotion_rule.taxon_ids.join(","), class: "taxon_picker", id: 'product_taxon_ids' %>
+    <%= select_tag "#{param_prefix}[taxon_ids_string]", nil, class: 'taxon_picker d-block w-100', id: :product_taxon_ids  %>
   </div>
   <div class="form-group mb-0">
     <%= label_tag Spree.t('taxon_rule.label') %>
-    <%= select_tag("#{param_prefix}[preferred_match_policy]", options_for_select(Spree::Promotion::Rules::Taxon::MATCH_POLICIES.map{|s| [Spree.t("taxon_rule.match_#{s}"),s] }, promotion_rule.preferred_match_policy), {class: 'select_taxon form-control'}) %>
+    <%= select_tag("#{param_prefix}[preferred_match_policy]", options_for_select(Spree::Promotion::Rules::Taxon::MATCH_POLICIES.map{|s| [Spree.t("taxon_rule.match_#{s}"),s] }, promotion_rule.preferred_match_policy), {class: 'select_taxon form-control custom-select'}) %>
   </div>
 </div>

data/app/views/spree/admin/promotions/rules/_user.html.erb

@@ -1,6 +1,6 @@
 <div class="card-body">
   <div class="form-group mb-0">
     <%= label_tag Spree.t('user_rule.choose_users') %>
-    <input type='hidden' name='<%= param_prefix %>[user_ids_string]' class='user_picker' value='<%= promotion_rule.user_ids.join(",") %>'>
+    <%= select "#{param_prefix}", 'user_ids_string', options_from_collection_for_select(promotion_rule.users, :id, :email, promotion_rule.users.pluck(:id)), { include_hidden: true }, multiple: true, class: 'user_picker d-block w-100' %>
   </div>
 </div>

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

@@ -3,7 +3,7 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t(:new_property), new_object_url, { class: "btn-success", icon: 'add', 'data-update' => 'new_property', id: 'new_property_link' } %>
+  <%= button_link_to Spree.t(:new_property), new_object_url, { class: "btn-success", icon: 'add.svg', 'data-update' => 'new_property', id: 'new_property_link' } %>
 <% end if can?(:create, Spree::Property) %>
 
 <% content_for :table_filter do %>
@@ -29,7 +29,7 @@
       </div>
 
       <div class="form-actions" data-hook="admin_pproperties_index_search_buttons">
-        <%= button Spree.t(:search), 'search' %>
+        <%= button Spree.t(:search), 'search.svg' %>
       </div>
 
     <% end %>
@@ -37,6 +37,7 @@
 <% end %>
 
 <% if @properties.any? %>
+<div class="table-responsive">
   <table class="table" id='listing_properties' data-hook>
     <thead>
       <tr data-hook="listing_properties_header">
@@ -58,6 +59,7 @@
       <% end %>
     </tbody>
   </table>
+</div>
 <% else %>
   <div class="alert alert-info no-objects-found">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Property)) %>,
@@ -65,4 +67,4 @@
   </div>
 <% end %>
 
-<%= paginate @collection, theme: 'twitter-bootstrap-4' %>
+<%= paginate @collection, theme: 'admin-twitter-bootstrap-4' %>