spree_backend 4.3.0 → 4.5.0

data/app/views/spree/admin/cms_sections/types/_side_by_side_images.html.erb

@@ -3,31 +3,18 @@
     <div id="left_image_details" class="card p-3">
       <div class="text-center">
         <h4 class="pb-2"><%= Spree.t('admin.cms.side_by_side.left_image') %></h4>
-        <%= f.field_container :image_one, class: ['form-group'] do %>
-          <% if @cms_section.image_one.attached? && @cms_section.image_one.variable? %>
-            <figure class="admin-img-holder">
-              <%= image_tag main_app.url_for(@cms_section.image_one.variant(resize: '244x104>')) %>
-            </figure>
-          <% elsif @cms_section.image_one.attached? && @cms_section.image_one.image? %>
-            <figure class="admin-img-holder">
-              <%= image_tag main_app.url_for(@cms_section.image_one) %>
-            </figure>
-          <% end %>
-          <%= f.field_container :image_one, class: ['form-group mb-0'] do %>
-            <%= f.file_field :image_one %>
-            <%= f.error_message_on :image_one %>
-          <% end %>
-          <small class="text-muted"><%= Spree.t('admin.cms.side_by_side.image_info') %></small>
-        <% end %>
+        <% @cms_section.build_image_one unless @cms_section.image_one %>
+        <%= render partial: 'image_upload_form', locals: { f: f, image: :image_one } %>
+        <small class="text-muted"><%= Spree.t('admin.cms.side_by_side.image_info') %></small>
       </div>
 
-      <%= f.field_container :title_one, class: ['form-group'] do %>
+      <%= f.field_container :title_one do %>
         <%= f.label :title_one, Spree.t('admin.cms.title') %>
         <%= f.text_field :title_one, class: 'form-control' %>
         <%= f.error_message_on :title_one %>
       <% end %>
 
-      <%= f.field_container :subtitle_one, class: ['form-group'] do %>
+      <%= f.field_container :subtitle_one do %>
         <%= f.label :subtitle_one, Spree.t('admin.cms.subtitle') %>
         <%= f.text_field :subtitle_one, class: 'form-control' %>
         <%= f.error_message_on :subtitle_one %>
@@ -35,7 +22,7 @@
 
       <div class="col-12"><hr></div>
       <% unless rails_5? %>
-        <%= f.field_container :link_type_one, class: ['form-group'] do %>
+        <%= f.field_container :link_type_one do %>
           <%= f.label :link_type_one, Spree.t('admin.navigation.link_to') %>
           <%= f.select(:link_type_one,
               spree_humanize_dropdown_values('Spree::Cms::Sections::SideBySideImages',
@@ -54,31 +41,18 @@
     <div id="right_image_details" class="card p-3">
       <div class="text-center">
         <h4 class="pb-2"><%= Spree.t('admin.cms.side_by_side.right_image') %></h4>
-        <%= f.field_container :image_two, class: ['form-group'] do %>
-          <% if @cms_section.image_two.attached? && @cms_section.image_two.variable? %>
-            <figure class="admin-img-holder">
-              <%= image_tag main_app.url_for(@cms_section.image_two.variant(resize: '244x104>')) %>
-            </figure>
-          <% elsif @cms_section.image_two.attached? && @cms_section.image_two.image? %>
-            <figure class="admin-img-holder">
-              <%= image_tag main_app.url_for(@cms_section.image_two) %>
-            </figure>
-          <% end %>
-          <%= f.field_container :image_two, class: ['form-group mb-0'] do %>
-            <%= f.file_field :image_two %>
-            <%= f.error_message_on :image_two %>
-          <% end %>
-          <small class="text-muted"><%= Spree.t('admin.cms.side_by_side.image_info') %></small>
-        <% end %>
+        <% @cms_section.build_image_two unless @cms_section.image_two %>
+        <%= render partial: 'image_upload_form', locals: { f: f, image: :image_two } %>
+        <small class="text-muted"><%= Spree.t('admin.cms.side_by_side.image_info') %></small>
       </div>
 
-      <%= f.field_container :title_two, class: ['form-group'] do %>
+      <%= f.field_container :title_two do %>
         <%= f.label :title_two, Spree.t('admin.cms.title') %>
         <%= f.text_field :title_two, class: 'form-control' %>
         <%= f.error_message_on :title_two %>
       <% end %>
 
-      <%= f.field_container :subtitle_two, class: ['form-group'] do %>
+      <%= f.field_container :subtitle_two do %>
         <%= f.label :subtitle_two, Spree.t('admin.cms.subtitle') %>
         <%= f.text_field :subtitle_two, class: 'form-control' %>
         <%= f.error_message_on :subtitle_two %>
@@ -87,7 +61,7 @@
       <div class="col-12"><hr></div>
 
       <% unless rails_5? %>
-        <%= f.field_container :link_type_two, class: ['form-group'] do %>
+        <%= f.field_container :link_type_two do %>
           <%= f.label :link_type_two, Spree.t('admin.navigation.link_to') %>
           <%= f.select(:link_type_two,
               spree_humanize_dropdown_values('Spree::Cms::Sections::SideBySideImages',
@@ -104,7 +78,7 @@
 
 <div class="col-12"><hr></div>
   <div class="col-6">
-    <%= f.field_container :fit, class: ['form-group'] do %>
+    <%= f.field_container :fit do %>
       <%= f.label :fit, Spree.t('admin.cms.fit') %>
       <%= f.select(:fit, @cms_section.boundaries, {include_blank: false}, class: 'select2') %>
       <%= f.error_message_on :fit %>
@@ -112,7 +86,7 @@
   </div>
 
   <div class="col-6">
-    <%= f.field_container :gutters, class: ['form-group'] do %>
+    <%= f.field_container :gutters do %>
       <%= f.label :gutters, Spree.t('admin.cms.set_gutters') %>
       <%= f.select(:gutters, @cms_section.gutters_sizes, {include_blank: false}, class: 'select2') %>
       <%= f.error_message_on :gutters %>

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

@@ -1,23 +1,23 @@
 <div data-hook="admin_country_form_fields">
-  <%= f.field_container :name, class: ['form-group'], 'data-hook' => 'name' do %>
+  <%= f.field_container :name, 'data-hook' => 'name' do %>
     <%= f.label :name, Spree.t(:name) %>
     <%= f.text_field :name, class: 'form-control' %>
     <%= f.error_message_on :name %>
   <% end %>
 
-  <%= f.field_container :iso_name, class: ['form-group'], 'data-hook' => 'iso_name' do %>
+  <%= f.field_container :iso_name, 'data-hook' => 'iso_name' do %>
     <%= f.label :iso_name, Spree.t(:iso_name) %>
     <%= f.text_field :iso_name, class: 'form-control' %>
     <%= f.error_message_on :iso_name %>
   <% end %>
 
-  <%= f.field_container :iso, class: ['form-group'], 'data-hook' => 'iso' do %>
+  <%= f.field_container :iso, 'data-hook' => 'iso' do %>
     <%= f.label :iso, Spree.t(:iso) %>
     <%= f.text_field :iso, class: 'form-control' %>
     <%= f.error_message_on :iso %>
   <% end %>
 
-  <%= f.field_container :iso3, class: ['form-group'], 'data-hook' => 'iso3' do %>
+  <%= f.field_container :iso3, 'data-hook' => 'iso3' do %>
     <%= f.label :iso3, Spree.t(:iso3) %>
     <%= f.text_field :iso3, class: 'form-control' %>
     <%= f.error_message_on :iso3 %>

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

@@ -5,9 +5,9 @@
 <% content_for :page_actions do %>
   <%= button_link_to Spree.t(:new_country), new_object_url, { class: "btn-success", icon: 'add.svg', id: 'admin_new_country' } %>
 <% end if can? :create, Spree::Country %>
-<div class="table-responsive">
+<div class="table-responsive border rounded bg-white">
   <table class="table" id='listing_countries' data-hook>
-    <thead>
+    <thead class="text-muted">
       <tr data-hook="tax_header">
         <th><%= Spree.t(:country_name) %></th>
         <th class="text-center"><%= Spree.t(:iso3) %></th>

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

@@ -1,5 +1,5 @@
-<div class="table-responsive">
-  <table class="table table-condensed table-bordered">
+<div class="table-responsive border rounded bg-white">
+  <table class="table table-condensed border rounded">
     <thead data-hook="customer_return_header">
       <tr>
         <th><%= Spree.t(:number) %></th>

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

@@ -1,6 +1,6 @@
-<div class="table-responsive">
-  <table class="show return-items-table table table-condensed table-bordered index">
-    <thead>
+<div class="table-responsive border rounded bg-white">
+  <table class="show return-items-table table table-condensed border rounded index">
+    <thead class="text-muted">
       <tr>
         <th><%= Spree.t(:product) %></th>
         <th><%= Spree.t(:sku) %></th>

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

@@ -1,6 +1,6 @@
-<div class="table-responsive">
-  <table class="table table-condensed table-bordered">
-    <thead>
+<div class="table-responsive border rounded bg-white">
+  <table class="table table-condensed border rounded">
+    <thead class="text-muted">
       <tr>
         <th>
           <%= check_box_tag 'select-all' %>

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

@@ -1,9 +1,5 @@
 <%= render partial: 'spree/admin/shared/order_tabs', locals: { current: :customer_returns } %>
 
-<% content_for :page_title do %>
-  / <%= Spree.t(:customer_return) %> #<%= @customer_return.number %>
-<% end %>
-
 <% if @manual_intervention_return_items.any? %>
   <fieldset data-hook="manual_intervention_return_items">
     <legend><%= Spree.t(:manual_intervention_required) %></legend>
@@ -37,7 +33,7 @@
   <% if @customer_return.reimbursements.any? %>
     <%= render partial: 'reimbursements_table', locals: {reimbursements: @customer_return.reimbursements} %>
   <% 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::Reimbursement)) %>
     </div>
   <% end %>
@@ -53,7 +49,7 @@
         <% end %>
       <% end %>
     <% else %>
-      <div class="alert alert-info no-objects-found">
+      <div class="text-center no-objects-found m-5">
         <%= Spree.t(:unable_to_create_reimbursements) %>
       </div>
     <% end %>

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

@@ -6,14 +6,10 @@
   <% end %>
 <% end %>
 
-<% content_for :page_title do %>
-  / <%= plural_resource_name(Spree::CustomerReturn) %>
-<% end %>
-
 <% if @order.shipments.any?(&:shipped?) %>
 
   <% if @customer_returns.any? %>
-  <div class="table-responsive">
+  <div class="table-responsive border rounded bg-white">
     <table class="table">
       <thead data-hook="customer_return_header">
         <tr>
@@ -32,9 +28,9 @@
             <td><%= pretty_time(customer_return.created_at) %></td>
             <td>
               <% if customer_return.fully_reimbursed? %>
-                <strong class="badge badge-success text-uppercase"><%= Spree.t(:reimbursed) %></strong>
+                <small class="badge badge-pill badge-success"><%= Spree.t(:reimbursed) %></small>
               <% else %>
-                <strong class="badge badge-inactive text-uppercase"><%= Spree.t(:incomplete) %></strong>
+                <small class="badge badge-pill badge-inactive text-uppercase"><%= Spree.t(:incomplete) %></small>
               <% end %>
             </td>
             <td class='actions' data-hook="admin_orders_customer_returns_index_row_actions">
@@ -48,13 +44,13 @@
     </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)) %>,
       <%= link_to(Spree.t(:add_one), spree.new_admin_order_customer_return_path(@order)) if can?(:create, Spree::CustomerReturn) %>!
     </div>
   <% end %>
 <% else %>
-  <div data-hook="customer_return_cannot_create" class="alert alert-info no-objects-found">
+  <div data-hook="customer_return_cannot_create" class="text-center no-objects-found m-5">
     <%= Spree.t(:cannot_create_customer_returns) %>
   </div>
 <% end %>

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

@@ -16,14 +16,14 @@
           <% if @rma_return_items.any? %>
             <%= render partial: 'return_item_selection', locals: {f: f, return_items: @rma_return_items} %>
           <% else %>
-            <div class="alert alert-info no-objects-found">
+            <div class="text-center no-objects-found m-5">
               <%= Spree.t(:none) %>
             </div>
           <% end %>
         </fieldset>
 
-        <%= f.field_container :stock_location, class: ['form-group'] do %>
-          <%= f.label :stock_location, Spree.t(:stock_location) %> <span class="required">*</span>
+        <%= f.field_container :stock_location do %>
+          <%= f.label :stock_location, raw(Spree.t(:stock_location) + required_span_tag) %>
           <%= f.select :stock_location_id, Spree::StockLocation.order_default.active.to_a.collect{|l|[l.name.humanize, l.id]}, {include_blank: true}, {class: 'select2-clear', "data-placeholder" => Spree.t(:select_a_stock_location)} %>
           <%= f.error_message_on :stock_location %>
         <% end %>
@@ -39,7 +39,7 @@
 
 <% else %>
 
-  <div class="alert alert-info no-objects-found">
+  <div class="text-center no-objects-found m-5">
     <%= Spree.t(:all_items_have_been_returned) %>,
     <%= link_to Spree.t(:back_to_resource_list, resource: Spree::CustomerReturn.model_name.human), spree.admin_order_customer_returns_path(@order) %>.
   </div>

data/app/views/spree/admin/dashboard/_apis.html.erb

@@ -0,0 +1,30 @@
+<h4 class="mb-3">APIs</h4>
+
+<ul class="list-group mb-5">
+  <li class="list-group-item">
+    Storefront API <code class="float-right"><%= current_store.formatted_url %>/api/v2/storefront</code>
+    <br />
+    <small class="text-muted">
+      <%= link_to 'Learn more', 'https://api.spreecommerce.org/docs/api-v2/api/docs/v2/storefront/index.yaml', target: :blank %>
+    </small>
+    <small class="text-muted float-right">
+      <%= link_to 'Download SDK', 'https://github.com/spree/spree-storefront-api-v2-js-sdk', class: 'btn btn-sm btn-light', target: :blank %>
+    </small>
+  </li>
+  <li class="list-group-item">
+    Platform API <code class="float-right"><%= current_store.formatted_url %>/api/v2/platform</code>
+    <br />
+    <small class="text-muted">
+      <%= link_to 'Learn more', 'https://api.spreecommerce.org/docs/api-v2/YXBpOjg3MzkxODk-platform-api', target: :blank %>
+    </small>
+    <small class="text-muted float-right">
+      <%= link_to 'Create Platform application', spree.admin_oauth_applications_path, class: 'btn btn-sm btn-light' %>
+    </small>
+  </li>
+  <li class="list-group-item">
+    Webhooks
+    <small class="text-muted float-right">
+      <%= link_to 'Create Webhook subscriber', spree.admin_webhooks_subscribers_path, class: 'btn btn-sm btn-light' %>
+    </small>
+  </li>
+</ul>

data/app/views/spree/admin/dashboard/_getting_started.html.erb

@@ -0,0 +1,101 @@
+<h4 class="mb-3">Let's get you started</h4>
+
+<div class="row mb-3">
+  <div class="col-4">
+    <div class="list-group" id="list-tab" role="tablist">
+      <a class="list-group-item list-group-item-action <% if @products_added %>list-group-item-info<% elsif @active_tab == 'products' %>active<% end %>" id="list-products-list" data-toggle="list" href="#list-products" role="tab" aria-controls="products">
+        <% if @products_added %>
+          <%= svg_icon name: 'check-circle-fill', width: 20, height: 20, classes: "mr-3" %>
+        <% else %>
+          <%= svg_icon name: 'tags', width: 20, height: 20, classes: "mr-3" %>
+        <% end %>
+        Add products
+      </a>
+      <a class="list-group-item list-group-item-action <% if @shipping_methods_added %>list-group-item-info<% elsif @active_tab == 'shipping' %>active<% end %>" id="list-shipping-list" data-toggle="list" href="#list-shipping" role="tab" aria-controls="shipping">
+        <% if @shipping_methods_added %>
+          <%= svg_icon name: 'check-circle-fill', width: 20, height: 20, classes: "mr-3" %>
+        <% else %>
+          <%= svg_icon name: 'truck', width: 20, height: 20, classes: "mr-3" %>
+        <% end %>
+        Setup shipping
+      </a>
+      <a class="list-group-item list-group-item-action <% if @payment_methods_added %>list-group-item-info<% elsif @active_tab == 'payments' %>active<% end %>" id="list-payments-list" data-toggle="list" href="#list-payments" role="tab" aria-controls="payments">
+        <% if @payment_methods_added %>
+          <%= svg_icon name: 'check-circle-fill', width: 20, height: 20, classes: "mr-3" %>
+        <% else %>
+          <%= svg_icon name: 'cash-coin', width: 20, height: 20, classes: "mr-3" %>
+        <% end %>
+        Setup payment methods
+      </a>
+      <a class="list-group-item list-group-item-action <% if @taxes_added %>list-group-item-info<% elsif @active_tab == 'taxes' %>active<% end %>" id="list-taxes-list" data-toggle="list" href="#list-taxes" role="tab" aria-controls="taxes">
+        <% if @taxes_added %>
+          <%= svg_icon name: 'check-circle-fill', width: 20, height: 20, classes: "mr-3" %>
+        <% else %>
+          <%= svg_icon name: 'receipt', width: 20, height: 20, classes: "mr-3" %>
+        <% end %>
+        Setup taxes
+      </a>
+    </div>
+  </div>
+  <div class="col-8">
+    <div class="tab-content" id="nav-tabContent">
+      <div class="tab-pane fade <% if @active_tab == 'products'%>show active<% end %>" id="list-products" role="tabpanel" aria-labelledby="list-products-list">
+        <% if @products_added %>
+          <p>
+            You have added <strong><%= current_store.products.count %> products</strong> so far - good job!</p>
+        <% else %>
+          <p>
+            You can add products manually through API or import from a CSV file.
+          </p>
+          <%= link_to_with_icon 'add.svg', 'Add products', spree.admin_products_path, class: 'btn btn-success btn-sm mb-2' %>
+        <% end %>
+      </div>
+      <div class="tab-pane fade <% if @active_tab == 'shipping'%>show active<% end %>" id="list-shipping" role="tabpanel" aria-labelledby="list-shipping-list">
+        <% if @shipping_methods_added %>
+          <p>
+            You have setup shipping for:
+            <% @shippable_countries.each do |country| %>
+              <strong class="mr-2">
+                <%= country.name %>
+                <%= flag_icon(country.iso, class: 'border border-gray rounded') %>
+              </strong>
+            <% end %>
+          </p>
+        <% else %>
+          <p>
+            You can add multiple shipping methods, different for each country, continent or region.
+          </p>
+          <%= link_to_with_icon 'settings.svg', 'Setup shipping', spree.admin_shipping_methods_path, class: 'btn btn-primary btn-sm mb-2' %>
+        <% end %>
+      </div>
+      <div class="tab-pane fade <% if @active_tab == 'payments'%>show active<% end %>" id="list-payments" role="tabpanel" aria-labelledby="list-payments-list">
+        <% if @payment_methods_added %>
+          <p>
+            You're ready to accept payments!
+          </p>
+        <% else %>
+          <p>
+            You can setup multiple payment methods such as Stripe, PayPal, ApplePay, etc.
+          </p>
+          <%= link_to_with_icon 'settings.svg', 'Setup payment methods', spree.admin_payment_methods_path, class: 'btn btn-primary btn-sm mb-2' %>
+        <% end %>
+      </div>
+      <div class="tab-pane fade <% if @active_tab == 'taxes' %>show active<% end %>" id="list-taxes" role="tabpanel" aria-labelledby="list-taxes-list">
+        <% if @taxes_added %>
+          <p>
+            You're tax calculation is setup!
+          </p>
+        <% else %>
+          <p>
+            You can use tax services such as TaxJar or setup tax calculation manually
+          </p>
+          <%= link_to_with_icon 'settings.svg', 'Setup tax calculation', spree.admin_tax_rates_path, class: 'btn btn-primary btn-sm mb-2' %>
+        <% end %>
+
+      </div>
+    </div>
+  </div>
+</div>
+
+
+

data/app/views/spree/admin/dashboard/show.html.erb

@@ -0,0 +1,3 @@
+<%= render 'getting_started' unless @onboarding_complete %>
+
+<%= render 'apis' %>

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

@@ -0,0 +1,35 @@
+<%= form_for :digital, url: admin_product_digitals_path(@product) do |f| %>
+  <% if variant.digital? %>
+    <div class="row">
+      <% variant.digitals.each do |digital| %>
+        <div class="col-12 col-md-6 mb-3 removable-dom-element">
+          <div class="d-flex flex-row align-items-center digital-container border rounded">
+            <div class="col p-0 delete-digital-icon-container">
+              <%= asset_icon(digital) %>
+            </div>
+            <div class="col p-2 delete-digital-info-container">
+              <span>Name:</span> <span class="text-secondary"><%= digital.attachment.filename %></span><br>
+              <span>Size:</span> <span class="text-secondary"><%= number_to_human_size(digital.attachment.byte_size) %></span>
+            </div>
+            <div class="col p-2 text-right delete-digital-button-container">
+              <%= link_to (svg_icon name: "close.svg", width: '20', height: '20'), admin_product_digital_url(@product, digital), data: { confirm: Spree.t('admin.digitals.delete_file_confirmation', filename: digital.attachment.filename) }, method: :delete, class: 'btn delete-resource delete-digital-asset' %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="text-center no-objects-found m-5">
+      <%= Spree.t('admin.digitals.no_digital_assets_added') %>
+    </div>
+  <% end %>
+
+  <%= f.field_container :attachment, data: {controller: "upload-button"} do %>
+    <%= f.label :file, Spree.t('admin.digitals.add_new_file'), id: "digital_attachment_#{variant.id}" %> <span class="required font-weight-bold text-danger">*</span><br>
+    <%= f.file_field :attachment, id: "digital_attachment_#{variant.id}", required: true, data: { action: "input->upload-button#buttonState" } %>
+    <%= hidden_field_tag 'digital[variant_id]', variant.id %>
+    <%= button Spree.t('admin.digitals.upload'), 'add.svg', 'submit', { data: { upload_button_target: "uploadButton" } } %>
+    <br>
+    <%= f.error_message_on :attachment %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= render partial: 'spree/admin/shared/product_tabs', locals: { current: :digitals } %>
+
+<div class="row">
+  <% if @product.has_variants? %>
+    <% @product.variants.each do |variant| %>
+      <div class="col-12 mb-5 ">
+        <div class="card">
+          <div class="card-header">
+            <h5 class="card-title mb-0"><%= variant.options_text %></h5>
+          </div>
+          <div class="card-body">
+            <%= render 'form', variant: variant %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+  <% else %>
+    <div class="col-12">
+      <%= render 'form', variant: @product.master %>
+    </div>
+  <% end %>
+</div>
+

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

@@ -5,15 +5,15 @@
 <%= form_for [:admin, @product, @image], html: { multipart: true } do |f| %>
   <div data-hook="edit_image" class="card mb-3">
     <div class="card-header">
-      <h1 class="card-title mb-0 h5">
+      <h5 class="card-title mb-0 h6">
         <%= @image.attachment_file_name %>
-      </h1>
+      </h5>
     </div>
     <div class="card-body">
       <div class="form-group">
         <div data-hook="thumbnail" class="col-12 col-lg-3 text-center">
           <%= f.label Spree.t(:thumbnail) %>
-          <%= link_to image_tag(main_app.url_for(@image.url(:small))), main_app.rails_blob_url(@image.attachment) %>
+          <%= link_to image_tag(main_app.cdn_image_url(@image.url(:small))), main_app.cdn_image_url(@image.attachment) %>
         </div>
         <div class="col-12 col-lg-9">
           <%= render partial: 'form', locals: { f: f } %>

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

@@ -2,26 +2,27 @@
 
 <% content_for :page_actions do %>
   <%= yield :page_actions %>
-  <%= product_preview_link(@product) %>
+  <%= external_page_preview_link(@product) %>
   <%= button_link_to(Spree.t(:new_image), spree.new_admin_product_image_url(@product), { class: "btn-success", icon: 'add.svg', id: 'new_image_link' }) if can? :create, Spree::Image %>
 <% end %>
 
 <% has_variants = @product.has_variants? %>
 
 <% unless @product.variant_images.any? %>
-  <div class="alert alert-warning">
+  <div class="text-center no-objects-found m-5">
     <%= Spree.t(:no_resource_found, resource: plural_resource_name(Spree::Image)) %>.
   </div>
 <% else %>
-<div class="table-responsive">
+<div class="table-responsive border rounded bg-white">
   <table class="table sortable" data-hook="images_table" data-sortable-link="<%= update_positions_admin_product_images_url(@product) %>">
-    <thead>
+    <thead class="text-muted">
       <tr data-hook="images_header">
-        <th colspan="2">
+        <th></th>
+        <th class="text-center">
           <%= Spree.t(:thumbnail) %>
         </th>
         <% if has_variants %>
-          <th>
+          <th class="text-center">
             <%= Spree::Variant.model_name.human %>
           </th>
         <% end %>
@@ -37,21 +38,21 @@
         <tr id="<%= spree_dom_id image %>" data-hook="images_row">
           <td class="move-handle text-center">
             <% if can? :edit, image %>
-              <%= svg_icon name: "sort.svg", width: '18', height: '18' %>
+              <%= svg_icon name: "grip-vertical.svg", width: '18', height: '18' %>
             <% end %>
           </td>
-          <td class="image">
+          <td class="image text-center">
             <div class="admin-product-image-container small-img">
-              <%= link_to image_tag(main_app.url_for(image.url(:product))), main_app.rails_blob_url(image.attachment) %>
+              <%= link_to image_tag(main_app.cdn_image_url(image.url(:product))), main_app.cdn_image_url(image.attachment), target: :blank %>
             </div>
           </td>
           <% if has_variants %>
-            <td><%= options_text_for(image) %></td>
+            <td class="text-center"><%= options_text_for(image) %></td>
           <% end %>
           <td><%= image.alt %></td>
           <td class="actions">
             <span class="d-flex justify-content-end">
-              <%= link_to_with_icon('edit.svg', Spree.t(:edit), spree.edit_admin_product_image_url(@product, image), class: 'btn btn-primary btn-sm', no_text: true, data: { action: 'edit' }) if can? :edit, image %>
+              <%= link_to_with_icon('edit.svg', Spree.t(:edit), spree.edit_admin_product_image_url(@product, image), class: 'btn btn-light btn-sm', no_text: true, data: { action: 'edit' }) if can? :edit, image %>
               <%= link_to_delete(image, { url: spree.admin_product_image_url(@product, image), no_text: true }) if can? :destroy, image %>
             </span>
           </td>

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

@@ -10,10 +10,10 @@
 <% content_for :page_actions do %>
   <%= button_link_to Spree.t(:logs), spree.admin_order_payment_log_entries_url(@order, @payment), icon: 'file.svg' %>
 <% end %>
-<div class="table-responsive">
+<div class="table-responsive border rounded bg-white">
 <table class="table" id='listing_log_entries'>
   <% @log_entries.each do |entry| %>
-      <thead>
+      <thead class="text-muted">
         <tr class="log_entry <%= entry.parsed_details.success? ? 'success' : 'fail' %>">
           <td colspan="2">
             <h4>