spree_backend 4.1.1 → 4.5.0

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

@@ -2,15 +2,12 @@
 
 <% content_for :page_actions do %>
   <% if @order.shipments.any?(&:shipped?) && can?(:create, Spree::ReturnAuthorization) %>
-    <%= button_link_to Spree.t(:new_return_authorization), new_admin_order_return_authorization_url(@order), class: "btn-success", icon: 'add' %>
+    <%= button_link_to Spree.t(:new_return_authorization), new_admin_order_return_authorization_url(@order), class: "btn-success", icon: 'add.svg' %>
   <% end %>
 <% end %>
 
-<% content_for :page_title do %>
-  / <%= Spree.t(:return_authorizations) %>
-<% end %>
-
 <% if @order.shipments.any?(&:shipped?) && @order.return_authorizations.any? %>
+<div class="table-responsive border rounded bg-white">
   <table class="table">
     <thead data-hook="rma_header">
       <tr>
@@ -26,28 +23,31 @@
         <tr id="<%= spree_dom_id(return_authorization) %>" data-hook="rma_row">
           <td><%= return_authorization.number %></td>
           <td>
-            <span class="badge badge-<%= return_authorization.state %>">
+            <small class="badge badge-pill badge-<%= return_authorization.state %>">
               <%= Spree.t("return_authorization_states.#{return_authorization.state}") %>
-            </span>
+            </small>
           </td>
           <td><%= return_authorization.display_pre_tax_total.to_html %></td>
           <td><%= pretty_time(return_authorization.created_at) %></td>
-          <td class="actions actions-2">
-            <%= link_to_edit(return_authorization, no_text: true, class: 'edit') if can?(:edit, return_authorization) %>
-            <% if can?(:delete, return_authorization) && !return_authorization.customer_returned_items? %>
-              <%= link_to_delete return_authorization, no_text: true %>
-            <% end %>
+          <td class="actions">
+            <span class="d-flex justify-content-end">
+              <%= link_to_edit(return_authorization, no_text: true, class: 'edit') if can?(:edit, return_authorization) %>
+              <% if can?(:delete, return_authorization) && !return_authorization.customer_returned_items? %>
+                <%= link_to_delete return_authorization, no_text: true %>
+              <% end %>
+            </span>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
+</div>
 <% elsif @order.shipments.any?(&:shipped?) %>
-  <div class="alert alert-info no-objects-found">
+  <div class="text-center no-objects-found m-5">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::ReturnAuthorization)) %>
   </div>
 <% else %>
-  <div data-hook="rma_cannot_create" class="alert alert-info no-objects-found">
+  <div data-hook="rma_cannot_create" class="text-center no-objects-found m-5">
     <%= Spree.t(:cannot_create_returns) %>
   </div>
 <% end %>

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

@@ -10,9 +10,9 @@
     <%= render partial: 'form', locals: { f: f } %>
 
     <div class="form-actions" data-hook="buttons">
-      <%= button Spree.t(:create), 'save' %>
+      <%= button Spree.t(:create), 'save.svg' %>
       <span class="or"><%= Spree.t(:or) %></span>
-      <%= button_link_to Spree.t('actions.cancel'), spree.admin_order_return_authorizations_url(@order), icon: 'delete' %>
+      <%= button_link_to Spree.t('actions.cancel'), spree.admin_order_return_authorizations_url(@order), icon: 'cancel.svg' %>
     </div>
   </fieldset>
 <% end %>

data/app/views/spree/admin/return_index/customer_returns.html.erb

@@ -14,17 +14,16 @@
         </div>
       </div>
       <div data-hook="admin_return_authorisations_index_filters_buttons" class="form-actions">
-        <%= button Spree.t(:search), 'search' %>
+        <%= button Spree.t(:search), 'search.svg' %>
       </div>
     <% end %>
   </div>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/index_table_options', locals: { collection: @collection, per_page_action: :customer_returns } %>
-
 <% if @collection.any? %>
+<div class="table-responsive border rounded bg-white">
   <table class="table">
-    <thead>
+    <thead class="text-muted">
       <tr data-hook="rate_header">
         <th><%= Spree.t(:created_at) %></th>
         <th><%= Spree.t(:number) %></th>
@@ -37,26 +36,29 @@
     <tbody>
       <% @collection.each do |customer_return| %>
         <tr id="<%= spree_dom_id customer_return %>" data-hook="customer_return_row">
-          <td><%= customer_return.created_at.to_date %></td>
+          <td><%= customer_return.created_at.strftime('%F %T %Z') %></td>
           <td><%= link_to customer_return.number, spree.edit_admin_order_customer_return_path(customer_return.order, customer_return) %></td>
           <td><%= link_to customer_return.order.number, spree.edit_admin_order_path(customer_return.order) %></td>
           <td>
             <% if customer_return.fully_reimbursed? %>
-              <span class="badge badge-success"><%= Spree.t(:reimbursed) %></span>
+              <span class="badge badge-pill badge-success"><%= Spree.t(:reimbursed) %></span>
             <% else %>
-              <span class="badge badge-info"><%= Spree.t(:incomplete) %></span>
+              <span class="badge badge-pill badge-inactive"><%= Spree.t(:incomplete) %></span>
             <% end %>
           </td>
           <td><%= customer_return.display_pre_tax_total.to_html %></td>
-          <td class="actions actions-1 text-right">
-            <%= link_to_edit_url spree.edit_admin_order_customer_return_path(customer_return.order, customer_return), no_text: true if can?(:edit, customer_return) %>
+          <td class="actions">
+            <span class="d-flex justify-content-end">
+              <%= link_to_edit_url spree.edit_admin_order_customer_return_path(customer_return.order, customer_return), no_text: true if can?(:edit, customer_return) %>
+            </span>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
+</div>
 <% else %>
-  <div class="alert alert-info no-objects-found">
+  <div class="text-center no-objects-found m-5">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::CustomerReturn)) %>.  </div>
 <% end %>
 

data/app/views/spree/admin/return_index/return_authorizations.html.erb

@@ -26,29 +26,28 @@
       <div class="row">
         <div class="col-12 col-lg-6">
           <div class="form-group">
-            <%= f.label :number_cont, Spree.t(:number) %>
+            <%= f.label :number_cont, Spree.t(:return_number) %>
             <%= f.text_field :number_cont, class: "form-control js-quick-search-target js-filterable" %>
           </div>
         </div>
         <div class="col-12 col-lg-6">
           <div class="form-group">
             <%= label_tag :q_state_eq, Spree.t(:status) %>
-            <%= f.select :state_eq, Spree::ReturnAuthorization.state_machines[:state].states.collect {|s| [Spree.t("return_authorization_states.#{s.name}"), s.value]}, {include_blank: true}, class: 'select2 js-filterable' %>
+            <%= f.select :state_eq, Spree::ReturnAuthorization.state_machines[:state].states.collect {|s| [Spree.t("return_authorization_states.#{s.name}"), s.value]}, {include_blank: true}, class: 'select2-clear js-filterable' %>
           </div>
         </div>
       </div>
       <div data-hook="admin_return_authorisations_index_filters_buttons" class="form-actions">
-        <%= button Spree.t(:search), 'search' %>
+        <%= button Spree.t(:search), 'search.svg' %>
       </div>
     <% end %>
   </div>
 <% end %>
 
-<%= render partial: 'spree/admin/shared/index_table_options', locals: { collection: @collection, per_page_action: :return_authorizations } %>
-
 <% if @collection.any? %>
+<div class="table-responsive border rounded bg-white">
   <table class="table">
-    <thead>
+    <thead class="text-muted">
       <tr data-hook="rate_header">
         <th><%= Spree.t(:created_at) %></th>
         <th><%= Spree.t(:number) %></th>
@@ -60,21 +59,24 @@
     <tbody>
       <% @collection.each do |return_authorization| %>
         <tr id="<%= spree_dom_id return_authorization %>" data-hook="return_authorization_row">
-          <td><%= return_authorization.created_at.to_date %></td>
+          <td><%= return_authorization.created_at.strftime('%F %T %Z') %></td>
           <td><%= link_to return_authorization.number, spree.edit_admin_order_return_authorization_path(return_authorization.order, return_authorization) %></td>
           <td><%= link_to return_authorization.order.number, spree.edit_admin_order_path(return_authorization.order) %></td>
           <td>
-            <span class="badge badge-<%= return_authorization.state %>"><%= Spree.t("return_authorization_states.#{return_authorization.state}") %></span>
+            <span class="badge badge-pill badge-<%= return_authorization.state %>"><%= Spree.t("return_authorization_states.#{return_authorization.state}") %></span>
           </td>
-          <td class="actions actions-1 text-right">
-            <%= link_to_edit return_authorization, url: spree.edit_admin_order_return_authorization_path(return_authorization.order, return_authorization), no_text: true if can?(:edit, return_authorization) %>
+          <td class="actions">
+            <span class="d-flex justify-content-end">
+              <%= link_to_edit return_authorization, url: spree.edit_admin_order_return_authorization_path(return_authorization.order, return_authorization), no_text: true if can?(:edit, return_authorization) %>
+            </span>
           </td>
         </tr>
       <% end %>
     </tbody>
   </table>
+  </div>
 <% else %>
-  <div class="alert alert-info no-objects-found">
+  <div class="text-center no-objects-found m-5">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::ReturnAuthorization)) %>.
   </div>
 <% end %>

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

@@ -1,6 +1,6 @@
 <div data-hook="admin_role_form_fields">
-  <%= f.field_container :name, class: ["form-group"], 'data-hook' => "role_name" do %>
-    <%= f.label :name, Spree.t(:name) %> <span class="required">*</span>
+  <%= f.field_container :name, 'data-hook' => "role_name" do %>
+    <%= f.label :name, raw(Spree.t(:name) + required_span_tag) %>
     <%= f.text_field :name, class: 'form-control' %>
     <%= f.error_message_on :name %>
   <% end %>

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

@@ -3,29 +3,33 @@
 <% end %>
 
 <% content_for :page_actions do %>
-  <%= button_link_to Spree.t(:new_role), new_object_url, class: "btn-success", icon: 'add', id: 'admin_new_role_link' %>
+  <%= button_link_to Spree.t(:new_role), new_object_url, class: "btn-success", icon: 'add.svg', id: 'admin_new_role_link' %>
 <% end if can? :create, Spree::Role %>
 
 <% if @roles.any? %>
-  <table class="table">
-    <thead>
-      <tr data-hook="admin_roles_index_headers">
-        <th><%= Spree.t(:role_id) %></th>
-        <th class="actions"></th>
-      </tr>
-    </thead>
-    <tbody>
-      <% @roles.each do |role|%>
-        <tr id="<%= spree_dom_id role %>" data-hook="admin_roles_index_rows">
-          <td><%= role.name %></td>
-          <td class="actions text-right">
-            <%= link_to_edit(role, no_text: true) if can? :edit, role %>
-            <%= link_to_delete(role, no_text: true) if can? :destroy, role %>
-          </td>
+  <div class="table-responsive border rounded bg-white">
+    <table class="table">
+      <thead class="text-muted">
+        <tr data-hook="admin_roles_index_headers">
+          <th><%= Spree.t(:role_id) %></th>
+          <th class="actions"></th>
         </tr>
-      <% end %>
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        <% @roles.each do |role| %>
+          <tr id="<%= spree_dom_id role %>" data-hook="admin_roles_index_rows">
+            <td><%= role.name %></td>
+            <td class="actions">
+              <span class="d-flex justify-content-end">
+                <%= link_to_edit(role, no_text: true) if can? :edit, role %>
+                <%= link_to_delete(role, no_text: true) if can? :destroy, role %>
+              </span>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
 <% else %>
   <div class="alert alert-warning">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Role)) %>,

data/app/views/spree/admin/shared/_account_nav.html.erb

@@ -1,73 +1,59 @@
 <% if try_spree_current_user %>
-  <ul class="nav navbar-nav align-items-end h-100 justify-content-center">
-    <li class="dropdown user user-menu h-100">
-      <div class="dropdown d-flex align-items-center h-100">
-        <button class="dropdown-toggle btn btn-link text-white h-100" data-toggle="dropdown">
-          <i class="glyphicon glyphicon-user"></i>
-          <span>
-            <%= try_spree_current_user.email %> <i class="caret"></i>
-          </span>
-        </button>
+  <div class="btn-group">
 
-        <ul class="dropdown-menu position-absolute mt-0 rounded-0 border-top-0">
-          <% if spree.respond_to? :root_path %>
-            <li class="dropdown-item p-0">
-              <%= link_to spree.root_path, target: :blank, class: 'd-block text-dark py-2 px-4' do %>
-                <i class="glyphicon glyphicon-new-window"></i>
-                &nbsp;
-                <%= Spree.t(:back_to_store) %>
-              <% end %>
-            </li>
-          <% end %>
+    <button id="accountNav" type="button" class="btn text-light px-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      <%= svg_icon name: "user.svg", width: '24', height: '24', classes: 'mb-0' %>
+    </button>
 
-          <% if can?(:manage, try_spree_current_user) %>
-            <li class="dropdown-item p-0">
-              <%= link_to spree.edit_admin_user_path(try_spree_current_user), class: 'd-block text-dark py-2 px-4' do %>
-                <i class="glyphicon glyphicon-user"></i>
-                &nbsp;
-                <%= Spree.t(:account) %>
-              <% end %>
-            </li>
-          <% end %>
+    <div class="dropdown-menu dropdown-menu-right overflow-hidden mt-2 p-0 mr-2">
+      <div class="dropdown-item px-0 text-center bg-light">
+        <span class="d-block py-2 px-4"><%= try_spree_current_user.email %></span>
+      </div>
+      <div class="dropdown-divider m-0"></div>
 
-          <% if defined?(spree_logout_path) %>
-            <li class="dropdown-item p-0">
-              <%= link_to spree_logout_path, class: 'd-block text-dark py-2 px-4' do %>
-                <i class="glyphicon glyphicon-log-out"></i>
-                &nbsp;
-                <%= Spree.t(:logout) %>
-              <% end %>
-            </li>
+      <% if spree.respond_to? :root_path %>
+          <%= link_to spree.root_path, target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item', data: { turbo: false } do %>
+            <%= svg_icon name: "store.svg", width: '18', height: '18' %>
+            &nbsp;
+            <%= Spree.t(:back_to_store) %>
           <% end %>
+      <% end %>
 
-          <div class="dropdown-divider"></div>
-
-          <li class="dropdown-item p-0">
-            <%= link_to 'http://guides.spreecommerce.org', target: :blank, class: 'd-block text-dark py-2 px-4' do %>
-              <i class="glyphicon glyphicon-info-sign"></i>
-              &nbsp;
-              <%= Spree.t(:help_center) %>
-            <% end %>
-          </li>
-
-          <li class="dropdown-item p-0">
-            <%= link_to 'http://slack.spreecommerce.org', target: :blank, class: 'd-block text-dark py-2 px-4' do %>
-              <i class="glyphicon glyphicon-comment"></i>
-              &nbsp;
-              <%= Spree.t(:join_slack) %>
-            <% end %>
-          </li>
-
-          <li class="dropdown-item p-0">
-            <%= link_to 'https://github.com/spree-contrib', target: :blank, class: 'd-block text-dark py-2 px-4' do %>
-              <i class="glyphicon glyphicon-download"></i>
-              &nbsp;
-              <%= Spree.t(:extensions_directory) %>
-            <% end %>
-          </li>
-        </ul>
-      </div>
+      <% if can?(:manage, try_spree_current_user) %>
+          <%= link_to spree.edit_admin_user_path(try_spree_current_user), class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
+            <%= svg_icon name: "user.svg", width: '18', height: '18' %>
+            &nbsp;
+            <%= Spree.t(:account) %>
+          <% end %>
+      <% end %>
 
-    </li>
-  </ul>
+      <% if admin_logout_link %>
+          <%= link_to admin_logout_link, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
+            <%= svg_icon name: "exit.svg", width: '18', height: '18' %>
+            &nbsp;
+            <%= Spree.t(:logout) %>
+          <% end %>
+      <% end %>
+
+      <div class="dropdown-divider m-0"></div>
+
+        <%= link_to 'http://spreecommerce.org/contact', target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
+        <%= svg_icon name: "info.svg", width: '18', height: '18' %>
+          &nbsp;
+          <%= Spree.t(:support) %>
+        <% end %>
+
+        <%= link_to 'http://slack.spreecommerce.org', target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
+        <%= svg_icon name: "slack.svg", width: '18', height: '18' %>
+          &nbsp;
+          <%= Spree.t(:join_slack) %>
+        <% end %>
+
+        <%= link_to 'https://dev-docs.spreecommerce.org/extensions/extensions', target: :blank, class: 'd-block py-2 px-4 my-1 dropdown-item' do %>
+        <%= svg_icon name: "extensions.svg", width: '18', height: '18' %>
+          &nbsp;
+          <%= Spree.t(:extensions_directory) %>
+        <% end %>
+    </div>
+  </div>
 <% end %>

data/app/views/spree/admin/shared/_address_form.html.erb

@@ -1,86 +1,44 @@
 <% s_or_b = type.chars.first %>
-
 <div id="<%= type %>" data-hook="address_fields">
-  <%= field_container f.object, :firstname, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :firstname, Spree.t(:first_name) %>
-    <%= f.text_field :firstname, class: 'form-control' %>
-    <%= error_message_on f.object, :firstname %>
-  <% end %>
-
-  <%= field_container f.object, :lastname, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :lastname, Spree.t(:last_name) %>
-    <%= f.text_field :lastname, class: 'form-control' %>
-    <%= error_message_on f.object, :lastname %>
-  <% end %>
-
-  <% if Spree::Config[:company] %>
-    <%= field_container f.object, :company, class: ["form-group", "#{type}-row"] do %>
-      <%= f.label :company, Spree.t(:company) %>
-      <%= f.text_field :company, class: 'form-control' %>
-      <%= error_message_on f.object, :company %>
-    <% end %>
-  <% end %>
-
-  <%= field_container f.object, :address1, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :address1, Spree.t(:street_address) %>
-    <%= f.text_field :address1, class: 'form-control' %>
-    <%= error_message_on f.object, :address1 %>
-  <% end %>
-
-  <%= field_container f.object, :address2, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :address2, Spree.t(:street_address_2) %>
-    <%= f.text_field :address2, class: 'form-control' %>
-    <%= error_message_on f.object, :address2 %>
-  <% end %>
-
-  <%= field_container f.object, :city, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :city, Spree.t(:city) %>
-    <%= f.text_field :city, class: 'form-control' %>
-    <%= error_message_on f.object, :city %>
-  <% end %>
-
-  <%= field_container f.object, :zipcode, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :zipcode, Spree.t(:zip) %>
-    <%= f.text_field :zipcode, class: 'form-control' %>
-    <%= error_message_on f.object, :zipcode %>
-  <% end %>
-
-  <div class="form-group <%= "#{type}-row" %>">
-    <%= f.label :country_id, Spree.t(:country) %>
-    <span id="<%= s_or_b %>country">
-      <%= f.collection_select :country_id, available_countries, :id, :name, {}, { class: 'select2' } %>
-    </span>
-  </div>
-
-  <%= field_container f.object, :state, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :state_id, Spree.t(:state) %>
-    <span id="<%= s_or_b %>state">
-      <% if f.object.country.try(:states) %>
-
-      <%= f.text_field :state_name,
-            style: "display: #{f.object.country.try(:states) && f.object.country.states.empty? ? 'block' : 'none' };",
-            disabled: !(f.object.country.try(:states) && f.object.country.states.empty?), class: 'form-control state_name' %>
-        <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, { include_blank: true }, { class: 'select2', style: "display: #{ f.object.country.states.empty? ? 'none' : 'block' };", disabled: f.object.country.states.empty? } %>
-      <% else %>
-        <div>
-          <em>No country set.</em>
+  <% Spree::Address::ADDRESS_FIELDS.each do |field| %>
+    <% if field == "country" %>
+      <%= field_container (s_or_b + '_' + field), nil, class: ["#{type}-row"] do %>
+        <%= f.label :country_id, Spree.t(:country) %>
+        <div id="<%= s_or_b %>country">
+          <%= f.collection_select :country_id, all_countries, :id, :name, {}, { class: 'select2 w-100' } %>
         </div>
       <% end %>
-      </span>
-    <%= error_message_on f.object, :state_id %>
-  <% end %>
-
-  <%= field_container f.object, :phone, class: ["form-group", "#{type}-row"] do %>
-    <%= f.label :phone, Spree.t(:phone) %>
-    <%= f.phone_field :phone, class: 'form-control' %>
-    <%= error_message_on f.object, :phone %>
+    <% elsif field == "state" %>
+      <%= field_container (s_or_b + '_' + field), :state, class: ["#{type}-row"] do %>
+        <%= f.label :state_id, Spree.t(:state) %>
+        <div id="<%= s_or_b %>state">
+          <% if f.object.country.try(:states) %>
+            <%= f.text_field :state_name,
+                             style: "display: #{f.object.country.try(:states) && f.object.country.states.empty? ? 'block' : 'none' };",
+                             disabled: !(f.object.country.try(:states) && f.object.country.states.empty?), class: 'form-control state_name' %>
+            <%= f.collection_select :state_id, f.object.country.states.sort, :id, :name, { include_blank: true }, { class: 'select2 w-100', disabled: f.object.country.states.empty? } %>
+          <% else %>
+            <div>
+              <em><%= Spree.t(:no_country) %></em>
+            </div>
+          <% end %>
+        </div>
+        <%= error_message_on f.object, :state_id %>
+      <% end %>
+    <% else %>
+      <%= field_container (s_or_b + '_' + field), nil, class: ["#{type}-row"] do %>
+        <%= f.label field, Spree.t(field) %>
+        <%= f.text_field field, class: 'form-control' %>
+        <%= error_message_on f.object, field %>
+      <% end %>
+    <% end %>
   <% end %>
 </div>
 
 <% content_for :head do %>
-  <%= javascript_tag do %>
-    $(document).ready(function(){
-      $('span#<%= s_or_b %>country .select2').on('change', function() { update_state('<%= s_or_b %>'); });
-    });
-  <% end %>
+  <script>
+    document.addEventListener("spree:load", function() {
+      $('#<%= s_or_b %>country select').on('change', function() { updateAddressState('<%= s_or_b %>'); });
+    })
+  </script>
 <% end %>

data/app/views/spree/admin/shared/_cal_close.html.erb

@@ -0,0 +1,10 @@
+<div class="input-group-append append_over data-clear" data-clear>
+  <span class="input-group-text force-round">
+    <%= svg_icon name: "close.svg", width: '16', height: '16' %>
+  </span>
+</div>
+<div class="input-group-append append_under data-toggle" data-toggle>
+  <span class="input-group-text">
+    <%= svg_icon name: "calendar.svg", width: '16', height: '16' %>
+  </span>
+</div>

data/app/views/spree/admin/shared/_calculator_fields.html.erb

@@ -1,9 +1,9 @@
 <div id="calculator_fields" data-hook class="card mb-3">
 
   <div class="card-header">
-    <h1 class="card-title mb-0 h5">
+    <h5 class="card-title mb-0 h6">
       <%= Spree.t(:calculator) %>
-    </h1>
+    </h5>
   </div>
 
   <div id="preference-settings" data-hook class="card-body">

data/app/views/spree/admin/shared/_content_header.html.erb

@@ -1,26 +1,59 @@
-<% if content_for?(:page_title) || content_for?(:page_actions) %>
-  <div class="content-header <%= "with-page-tabs" if content_for?(:page_tabs) %> page-header">
-    <div class="row align-items-center  <%= if content_for?(:page_tabs) then "pb-0" else "border-bottom" end %> mb-4">
-      <% if content_for?(:page_title) %>
-        <h1 class="h4 pl-0 mb-0 col-<%= content_for?(:page_actions) ? '5' : '12'  %>">
-          <%= yield :page_title %>
-          <% if content_for?(:page_title_small) %>
-            <small><%= yield :page_title_small %></small>
-          <% end %>
-        </h1>
-      <% end %>
+<div id="contentHeader" class="row mb-0 pb-0 mt-4">
+  <% if content_for?(:page_title) || content_for?(:page_actions) %>
+    <div class="content-header col <%= "with-page-tabs" if content_for?(:page_tabs) %> page-header">
+      <div id="contentHeaderRow" class="row align-items-center  <%= if content_for?(:page_tabs) then "pb-3" else "pb-3 mb-3" end %>">
 
-      <% if content_for?(:page_actions) %>
-        <div class="page-actions col-7 pr-0" data-hook="toolbar">
-          <%= yield :page_actions %>
-        </div>
-      <% end %>
+        <% if content_for?(:page_title) %>
+          <h2 class="px-0 mb-0 col">
+            <%= yield :page_title %>
+            <% if content_for?(:page_title_small) %>
+              <small><%= yield :page_title_small %></small>
+            <% end %>
+          </h2>
+        <% end %>
+
+        <% if content_for?(:page_actions) %>
+          <div class="page-actions pl-0 pr-0 d-none d-lg-flex" data-hook="toolbar">
+            <%= yield :page_actions %>
+          </div>
+        <% end %>
+
+        <% if content_for?(:page_actions) %>
+          <div class="d-flex d-lg-none justify-content-end m-0 p-0">
+            <button type="button"
+                    id="contextual-menu-toggle"
+                    class="btn btn-light">
+                    <span class="d-none d-sm-inline">
+                      <%= Spree.t('more') %>
+                    </span>
+                    <%= svg_icon name: "chevron-down.svg", width: '16', height: '16' %>
+            </button>
+          </div>
+        <% end %>
+      </div>
 
       <% if content_for?(:page_tabs) %>
-        <ul class="nav nav-tabs w-100 mt-4">
-          <%= yield :page_tabs %>
-        </ul>
+        <div class="row my-2 mb-3 pb-1 pt-1 align-items-center" data-nav-x-wrapper>
+          <div data-nav-x-container class="w-100">
+            <ul id="spreePageTabs" class="nav nav-pills flex-nowrap" data-nav-x-content>
+              <%= yield :page_tabs %>
+            </ul>
+          </div>
+
+          <button class="nav-x_Advancer nav-x_Advancer_Left" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" />
+            </svg>
+          </button>
+
+          <button class="nav-x_Advancer nav-x_Advancer_Right" type="button">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
+              <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
+            </svg>
+          </button>
+        </div>
       <% end %>
+
     </div>
-  </div>
-<% end %>
+  <% end %>
+</div>

data/app/views/spree/admin/shared/_edit_resource_links.html.erb

@@ -1,5 +1,5 @@
 <div class="form-actions" data-hook="buttons">
-  <%= button Spree.t('actions.update'), 'refresh', 'submit', {class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
+  <%= button Spree.t('actions.update'), 'save.svg', 'submit', {class: 'btn-success', data: { disable_with: "#{ Spree.t(:saving) }..." }} %>
   <span class="or"><%= Spree.t(:or) %></span>
-  <%= button_link_to Spree.t('actions.cancel'), collection_url, icon: 'delete' %>
+  <%= button_link_to Spree.t('actions.cancel'), collection_url, icon: 'cancel.svg' %>
 </div>

data/app/views/spree/admin/shared/_error_messages.html.erb

@@ -1,7 +1,7 @@
 <% if target && target.errors.any? %>
   <div id="errorExplanation" class="errorExplanation alert alert-danger" data-hook>
     <p>
-      <strong><%= Spree.t(:errors_prohibited_this_record_from_being_saved, count: target.errors.size) %>:</strong><br/>
+      <strong><%= Spree.t(:errors_prohibited_this_record_from_being_saved, count: target.errors.size) %>:</strong><br>
     </p>
     <ul class="ul-with-markup">
      <% target.errors.full_messages.each do |msg| %>