spree_frontend 4.7.0 → 4.8.0

data/app/assets/stylesheets/spree/frontend/views/spree/shared/cart.scss

@@ -6,10 +6,6 @@
   svg {
     width: 24px;
     height: 24px;
-    @include media-breakpoint-up(xl) {
-      width: 36px;
-      height: 36px;
-    }
   }
   &,
   &:hover {
@@ -33,16 +29,6 @@
     padding: 0 2px;
     font-size: font-px-to-rem(12px);
     display: none;
-    @include media-breakpoint-up(xl) {
-      $size: 26px;
-      $border-width: 2px;
-      border-radius: $size / 2;
-      border-width: $border-width;
-      height: $size;
-      min-width: $size;
-      line-height: $size - $border-width * 2;
-      font-size: font-px-to-rem(15px);
-    }
   }
   &--visible-count {
     #{$self}-count {

data/app/assets/stylesheets/spree/frontend/views/spree/shared/header.scss

@@ -46,31 +46,6 @@ body {
       }
     }
   }
-  @include media-breakpoint-up(sm) {
-    height: $spree-header-tablet-height;
-    &-fluid {
-      &-logo {
-        img {
-          max-height: 50px;
-        }
-      }
-    }
-  }
-  @include media-breakpoint-up(xl) {
-    height: $spree-header-desktop-height;
-    &-fluid {
-      &-logo {
-        flex-basis: 0;
-        margin: 0 0 1rem;
-        img {
-          max-height: 50px;
-        }
-      }
-      &-primary-navigation {
-        flex-basis: auto;
-      }
-    }
-  }
 }
 
 #logo {

data/app/assets/stylesheets/spree/frontend/views/spree/shared/login.scss

@@ -3,28 +3,12 @@
 
   a {
     transition: basic-transition(color);
-    text-transform: uppercase;
     text-decoration: underline;
     color: theme-color('info');
-    font-size: font-px-to-rem(12px);
 
     &:hover,
     &:active {
       color: theme-color('primary');
     }
   }
-
-  @include media-breakpoint-up(sm) {
-    margin-top: font-px-to-rem(19.7px);
-    a {
-      font-size: font-px-to-rem(23px);
-    }
-  }
-
-  @include media-breakpoint-up(lg) {
-    margin-top: font-px-to-rem(20px);
-    a {
-      font-size: font-px-to-rem(16px);
-    }
-  }
 }

data/app/assets/stylesheets/spree/frontend/views/spree/shared/main_nav_bar.scss

@@ -1,8 +1,5 @@
 .main-nav-bar {
   &-item {
-    text-transform: uppercase;
-    font-size: 20px;
-    font-weight: $font-weight-medium;
     padding: 0 1.5rem;
     height: 100%;
     a {
@@ -67,7 +64,7 @@
         padding: 0;
         margin: 0;
         border: 0;
-        border-bottom: 3px solid transparent;
+        border-bottom: 2px solid transparent;
       }
     }
 
@@ -107,10 +104,6 @@
           display: none;
         }
       }
-
-      @include media-breakpoint-up(xl) {
-        top: $spree-header-desktop-height - 1px;
-      }
     }
   }
 

data/app/assets/stylesheets/spree/frontend/views/spree/shared/nav_bar.scss

@@ -21,22 +21,14 @@
   }
   .account-icon {
     svg {
-      width: 27.6px;
+      width: 24px;
       height: 24px;
-      @include media-breakpoint-up(xl) {
-        width: 41.4px;
-        height: 36px;
-      }
     }
   }
   .search-icons {
     svg {
       width: 24px;
       height: 24px;
-      @include media-breakpoint-up(xl) {
-        width: 36px;
-        height: 36px;
-      }
     }
   }
   &-search-menu {
@@ -64,21 +56,16 @@
         input#keywords {
           background: transparent;
           color: $meganav-font-color;
-          font-size: font-px-to-rem(14px);
           width: calc(100% - 40px);
           &:focus {
             outline: none;
           }
           &::placeholder {
-            text-transform: uppercase;
             color: theme-color("borders");
           }
           &::-webkit-search-cancel-button {
             display: none;
           }
-          @include media-breakpoint-up(md) {
-            font-size: font-px-to-rem(22px);
-          }
         }
         input[type="submit"] {
           display: none;

data/app/assets/stylesheets/spree/frontend/views/spree/shared/no_product_available.scss

@@ -95,7 +95,7 @@
   &-button {
     width: 306px;
     height: 29px;
-    background-color: #0074c2;
+    background-color: theme-color("primary");
     margin: 44px auto auto auto;
 
     @include media-breakpoint-up(md) {

data/app/assets/stylesheets/spree/frontend/views/spree/shared/order_details.scss

@@ -7,7 +7,6 @@
     color: theme-color('dark-text');
     margin-top: 25px;
     font-weight: normal;
-    text-transform: uppercase;
 
     &:first-child {
       margin-top: 0;

data/app/assets/stylesheets/spree/frontend/views/spree/taxons/show.scss

@@ -41,7 +41,7 @@
       color: theme-color("dark-text");
     }
     &-selected {
-      border-bottom: 5px solid theme-color('dark-text');
+      border-bottom: 2px solid theme-color('dark-text');
     }
   }
 }

data/app/assets/stylesheets/spree/frontend/views/spree/users/show.scss

@@ -226,45 +226,17 @@
 
   &-order-status {
     order: 2;
-    font-size: font-px-to-rem(14px);
-    text-transform: uppercase;
-    @include media-breakpoint-up(md) {
-      font-size: font-px-to-rem(26px);
-    }
-    @include media-breakpoint-up(lg) {
-      font-size: font-px-to-rem(18px);
-      text-transform: initial;
-    }
   }
 
   &-order-date {
     order: 1;
     font-size: 14px;
     font-size: font-px-to-rem(14px);
-    @include media-breakpoint-up(md) {
-      font-size: font-px-to-rem(26px);
-    }
-    @include media-breakpoint-up(lg) {
-      font-size: font-px-to-rem(18px);
-    }
   }
 
   &-order-total {
     order: 4;
     font-size: font-px-to-rem(16px);
-    @include media-breakpoint-up(md) {
-      font-size: font-px-to-rem(29px);
-    }
-    @include media-breakpoint-up(lg) {
-      font-size: font-px-to-rem(18px);
-    }
-  }
-
-  &-order-payment-state,
-  &-order-shipment-state {
-    @include media-breakpoint-up(md) {
-      font-size: font-px-to-rem(18px);
-    }
   }
 
   @include media-breakpoint-between(xs, md) {

data/app/helpers/spree/addresses_helper.rb

@@ -10,13 +10,12 @@ module Spree
           method_name = I18n.t("activerecord.attributes.spree/address.#{method}")
           required = Spree.t(:required)
           form.text_field(method,
-                          class: ['spree-flat-input'].compact,
+                          class: ['form-control'].compact,
                           required: is_required,
                           placeholder: is_required ? "#{method_name} #{required}" : method_name,
                           aria: { label: method_name }) +
             form.label(method_name,
-                       is_required ? "#{method_name} #{required}" : method_name,
-                       class: 'text-uppercase')
+                       is_required ? "#{method_name} #{required}" : method_name)
         end
       end
     end
@@ -27,13 +26,12 @@ module Spree
       method_name = Spree.t(:zipcode)
       required = Spree.t(:required)
       form.text_field(:zipcode,
-                      class: ['spree-flat-input'].compact,
+                      class: ['form-control'].compact,
                       required: is_required,
                       placeholder: is_required ? "#{method_name} #{required}" : method_name,
                       aria: { label: Spree.t(:zipcode) }) +
         form.label(:zipcode,
                    is_required ? "#{method_name} #{required}" : method_name,
-                   class: 'text-uppercase',
                    id: address_id + '_zipcode_label')
     end
 
@@ -48,16 +46,14 @@ module Spree
                                aria: { label: Spree.t(:state) },
                                disabled: !have_states) +
           form.text_field(:state_name,
-                          class: ['spree-flat-input'].compact,
+                          class: ['form-control'].compact,
                           aria: { label: Spree.t(:state) },
                           disabled: have_states,
                           placeholder: Spree.t(:state) + " #{Spree.t(:required)}") +
           form.label(Spree.t(:state).downcase,
                      raw(Spree.t(:state) + content_tag(:abbr, " #{Spree.t(:required)}")),
-                     class: [have_states ? 'state-select-label' : nil, ' text-uppercase'].compact,
-                     id: address_id + '_state_label') +
-          image_tag('arrow.svg',
-                    class: [!have_states ? 'hidden' : nil, 'position-absolute spree-flat-select-arrow'].compact)
+                     class: [have_states ? 'state-select-label' : nil, ' '].compact,
+                     id: address_id + '_state_label')
       ].join.tr('"', "'").delete("\n")
 
       content_tag :span, class: 'd-block position-relative' do

data/app/helpers/spree/frontend_helper.rb

@@ -173,7 +173,7 @@ module Spree
       image_url = if image.present?
                     main_app.cdn_image_url(image.url('plp'))
                   else
-                    asset_path('noimage/plp.svg')
+                    asset_path('noimage/large.png')
                   end
 
       image_style = image&.style(:plp)

data/app/helpers/spree/navigation_helper.rb

@@ -42,7 +42,7 @@ module Spree
     end
 
     def main_nav_image(image_path, title = '')
-      image_url = asset_path(asset_exists?(image_path) ? image_path : 'noimage/plp.svg')
+      image_url = asset_path(asset_exists?(image_path) ? image_path : 'noimage/large.png')
 
       lazy_image(
         src: image_url,

data/app/helpers/spree/products_filters_helper.rb

@@ -2,10 +2,10 @@ module Spree
   module ProductsFiltersHelper
     PRICE_FILTER_NAME = 'price'.freeze
 
-    FILTER_LINK_CSS_CLASSES = 'd-inline-block text-uppercase py-1 px-2 m-1 plp-overlay-card-item'.freeze
+    FILTER_LINK_CSS_CLASSES = 'd-inline-block py-1 px-2 m-1 plp-overlay-card-item'.freeze
     ACTIVE_FILTER_LINK_CSS_CLASSES = 'plp-overlay-card-item--selected'.freeze
 
-    CLEAR_ALL_FILTERS_LINK_CSS_CLASSES = 'btn spree-btn btn-outline-primary w-100 mb-4'.freeze
+    CLEAR_ALL_FILTERS_LINK_CSS_CLASSES = 'btn spree-btn btn-sm btn-outline-primary w-100 mb-4'.freeze
 
     def price_filters
       @price_filters ||= [
@@ -38,7 +38,7 @@ module Spree
 
     def price_filter_input(name:, value:, placeholder:, **html_options)
       price_value = value&.zero? ? '' : value
-      style_class = "spree-flat-input #{html_options[:class]}"
+      style_class = "form-control form-control-sm #{html_options[:class]}"
 
       number_field_tag(
         name, price_value,

data/app/javascript/spree/frontend/application.js

@@ -0,0 +1,2 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"

data/app/views/spree/addresses/_form.html.erb

@@ -5,11 +5,10 @@
     <div class="form-group checkout-content-inner-field" id="<%= "#{address_id}country" %>">
       <div id="<%= "#{address_id}country-selection" %>" class="d-block position-relative has-float-label">
         <%= address_form.collection_select :country_id, available_countries, :id, :name,
-                                           { prompt: Spree.t(:country).upcase },
-                                           { class: 'form-control spree-flat-select',
+                                           { prompt: Spree.t(:country) },
+                                           { class: 'custom-select spree-flat-select',
                                              aria: { label: Spree.t(:country) } } %>
-        <%= image_tag 'arrow.svg', class: 'position-absolute spree-flat-select-arrow' %>
-        <%= address_form.label(Spree.t(:country), Spree.t(:country).upcase, class:'text-uppercase') %>
+        <%= address_form.label(Spree.t(:country), Spree.t(:country)) %>
       </div>
     </div>
   <% elsif field == "state" %>
@@ -29,4 +28,4 @@
   <% end %>
 <% end %>
 
-<p class="text-right text-uppercase mb-5 checkout-content-inner-field"><span id="required_marker"><%= Spree.t(:required) %></span> <%= Spree.t(:required_fields) %></p>
+<p class="text-right mb-5 checkout-content-inner-field"><span id="required_marker"><%= Spree.t(:required) %></span> <%= Spree.t(:required_fields) %></p>

data/app/views/spree/addresses/edit.html.erb

@@ -3,7 +3,7 @@
   <h3 class="spree-header spree-mb-large spree-mt-large"><%= Spree.t(:edit_address, scope: :address_book) %></h3>
   <%= form_for @address, html: { id: 'checkout_form_address' } do |f| %>
   <div class="form-group checkout-content-inner-field mb-5 has-float-label">
-    <%= f.text_field :label, class: 'spree-flat-input', placeholder: Spree.t(:address_name_placeholder, scope: :address_book) %>
+    <%= f.text_field :label, class: 'form-control', placeholder: Spree.t(:address_name_placeholder, scope: :address_book) %>
     <%= f.label :address_name, Spree.t(:label, scope: :address_book) %>
   </div>
 

data/app/views/spree/addresses/new.html.erb

@@ -3,7 +3,7 @@
   <h3 class="spree-header spree-mb-large spree-mt-large"><%= Spree.t(:new_address, scope: :address_book) %></h3>
   <%= form_for @address, url: spree.addresses_path, html: { id: 'checkout_form_address' } do |f| %>
   <div class="form-group checkout-content-inner-field mb-5 has-float-label">
-    <%= f.text_field :label, class: 'spree-flat-input', placeholder: Spree.t(:address_name_placeholder, scope: :address_book) %>
+    <%= f.text_field :label, class: 'form-control', placeholder: Spree.t(:address_name_placeholder, scope: :address_book) %>
     <%= f.label :address_name, Spree.t(:label, scope: :address_book) %>
   </div>
     <%= render 'spree/addresses/form',

data/app/views/spree/checkout/_address.html.erb

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-12 mb-4">
       <div class="form-group checkout-content-inner-field has-float-label">
-        <%= form.email_field :email, class: 'required spree-flat-input', required: true, placeholder: Spree.t(:email) %>
+        <%= form.email_field :email, class: 'required form-control', required: true, placeholder: Spree.t(:email) %>
         <%= form.label :email, class: 'text-uppercase' %>
       </div>
     </div>

data/app/views/spree/checkout/_delivery.html.erb

@@ -6,7 +6,7 @@
           <h4 class="text-uppercase checkout-content-header checkout-content-shipping-methods-header mb-1">
             <%= Spree.t('checkout_page.delivery_method') %>
           </h4>
-          <div id="shipToLocation" class="mb-4 text-uppercase">
+          <div id="shipToLocation" class="mb-4">
             <%= Spree.t(:ship_to) %>
             <span class="text-muted"><%= @order.shipping_address.address1 %></span> -
               <% if @order.shipping_address.zipcode.present? %> <span class="text-muted"><%= @order.shipping_address.zipcode %></span> - <% end %>

data/app/views/spree/checkout/_summary.html.erb

@@ -1,6 +1,6 @@
 <div class="checkout-content-summary">
   <h3 class="text-uppercase text-center checkout-content-summary-header"><%= Spree.t(:order_summary) %></h3>
-  <div class="w-100 text-uppercase checkout-content-summary-table" data-hook="order_summary">
+  <div class="w-100 checkout-content-summary-table" data-hook="order_summary">
     <div class="d-table-cell"><%= Spree.t(:subtotal) %>:</div>
     <div class="d-table-cell text-right"><%= order.display_item_total.to_html %></div>
 

data/app/views/spree/checkout/edit.html.erb

@@ -45,7 +45,7 @@ end
             <%= render partial: 'summary', locals: { order: @order } %>
             <div data-hook="buttons">
               <% submit_label_key = @order.confirm? ? :place_order : :save_and_continue %>
-              <%= submit_tag Spree.t(submit_label_key), class: 'btn btn-primary text-uppercase font-weight-bold w-100 checkout-content-save-continue-button' %>
+              <%= submit_tag Spree.t(submit_label_key), class: 'btn btn-primary font-weight-bold w-100 checkout-content-save-continue-button' %>
             </div>
           </div>
         </div>

data/app/views/spree/checkout/payment/_gateway.html.erb

@@ -4,12 +4,12 @@
 
   <div class="payment-gateway-fields">
     <div class="mb-4 payment-gateway-field checkout-content-inner-field">
-      <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card", class: 'spree-flat-input', placeholder: Spree.t(:name_on_card)} %>
+      <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card", class: 'form-control', placeholder: Spree.t(:name_on_card)} %>
     </div>
 
     <div class="mb-4 payment-gateway-field checkout-content-inner-field" data-hook="card_number">
       <% options_hash = Rails.env.production? ? {autocomplete: 'off'} : {} %>
-      <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'spree-flat-input cardNumber', size: 19, maxlength: 19, autocomplete: "off", placeholder: Spree.t(:card_number)) %>
+      <%= text_field_tag "#{param_prefix}[number]", '', options_hash.merge(id: 'card_number', class: 'form-control cardNumber', size: 19, maxlength: 19, autocomplete: "off", placeholder: Spree.t(:card_number)) %>
       <span id="card_type" style="display:none;">
         ( <span id="looks_like"><%= Spree.t(:card_type_is) %> <span id="type"></span></span>
           <span id="unrecognized"><%= Spree.t(:unrecognized_card_type) %></span>
@@ -18,10 +18,10 @@
     </div>
     <div class="payment-gateway-half-fields d-flex justify-content-between">
       <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_expiration">
-        <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: 'spree-flat-input cardExpiry', placeholder: "MM/YYYY" %>
+        <%= text_field_tag "#{param_prefix}[expiry]", '', id: 'card_expiry', class: 'form-control cardExpiry', placeholder: "MM/YYYY" %>
       </div>
       <div class="payment-gateway-field checkout-content-inner-field" data-hook="card_code">
-        <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(id: 'card_code', class: 'spree-flat-input cardCode', size: 5, placeholder: Spree.t(:cvv)) %>
+        <%= text_field_tag "#{param_prefix}[verification_value]", '', options_hash.merge(id: 'card_code', class: 'form-control cardCode', size: 5, placeholder: Spree.t(:cvv)) %>
       </div>
     </div>
 

data/app/views/spree/checkout/payment/_storecredit.html.erb

@@ -5,7 +5,7 @@
       <p><%= Spree.t('store_credit.remaining_amount', amount: @order.display_store_credit_remaining_after_capture).html_safe %></p>
     <% else %>
       <p><%= Spree.t('store_credit.additional_payment_needed', amount: @order.display_order_total_after_store_credit).html_safe %></p>
-      <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'store-credit-button continue btn btn-lg btn-primary font-weight-bold text-uppercase align-self-start' %>
+      <%= button_tag Spree.t('store_credit.remove'), name: 'remove_store_credit', class: 'store-credit-button continue btn btn-lg btn-primary font-weight-bold align-self-start' %>
     <% end %>
   </div>
 

data/app/views/spree/checkout/registration.html.erb

@@ -18,7 +18,7 @@
           <%= form_for @order, url: path, method: :put, html: { id: 'checkout_form_registration', data: { turbo: false } } do |f| %>
             <div class="form-group">
               <p class="form-group checkout-content-inner-field">
-                <%= f.email_field :email, class: 'spree-flat-input', placeholder: Spree.t(:email) %>
+                <%= f.email_field :email, class: 'form-control', placeholder: Spree.t(:email) %>
               </p>
             </div>
             <%= f.submit Spree.t(:continue_as_guest), class: 'btn btn-block btn-outline-primary spree-btn' %>

data/app/views/spree/layouts/spree_application.html.erb

@@ -5,10 +5,13 @@
 <!--[if IE 9 ]>    <html class="ie ie9" lang="<%= I18n.locale %>"> <![endif]-->
 <!--[if gt IE 9]><!--><html lang="<%= I18n.locale %>"><!--<![endif]-->
   <head data-hook="inside_head">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
+
     <%= render partial: 'spree/shared/head' %>
   </head>
   <body class="<%= body_class %>" id="<%= @body_id || 'default' %>" data-hook="body">
-    <%= render partial: 'spree/shared/get_started' %>
     <%= render partial: 'spree/shared/header' %>
     <div id="overlay" class="overlay hide-on-esc"></div>
 

data/app/views/spree/orders/_line_item_data.html.erb

@@ -10,7 +10,7 @@
 <div class="shopping-cart-item-quantity <%= additional_classes %>" data-hook="cart_item_quantity">
   <div class="d-flex align-items-center">
     <%= button_tag '-', type: 'button', class: "border-right-0 shopping-cart-item-quantity-decrease-btn", data: { id: dom_id(line_item) } %>
-    <%= item_form.number_field :quantity, min: 0, class: "form-control text-center border-left-0 border-right-0 shopping-cart-item-quantity-input", size: 5, data: { id: dom_id(line_item) }, aria: { label: Spree.t('cart_page.change_quantity') } %>
+    <%= item_form.number_field :quantity, min: 0, class: "form-control text-center border-left-0 border-right-0 rounded-0 shopping-cart-item-quantity-input", size: 5, data: { id: dom_id(line_item) }, aria: { label: Spree.t('cart_page.change_quantity') } %>
     <%= button_tag '+', type: 'button', class: "border-left-0 shopping-cart-item-quantity-increase-btn", data: { id: dom_id(line_item) } %>
   </div>
 </div>

data/app/views/spree/orders/show.html.erb

@@ -12,7 +12,7 @@
     <p class="order-show-explain w-100 text-center"><%= Spree.t(:order_success_explain) %></p>
   <% end %>
 
-  <p class="order-show-number text-uppercase w-100 text-center">
+  <p class="order-show-number w-100 text-center">
     <%= accurate_title %> / <%= pretty_date(@order.completed_at) %>
   </p>
   <%= render partial: 'spree/shared/order_details', locals: { order: @order } %>

data/app/views/spree/products/_cart_form.html.erb

@@ -37,7 +37,7 @@
       </div>
     <% end %>
 
-    <div class="text-center text-md-left add-to-cart-form-general-availability text-uppercase">
+    <div class="text-center text-md-left add-to-cart-form-general-availability">
       <%= Spree.t(:availability) %>:
       <% if !is_product_available_in_currency %>
         <%= render 'cart_form_availability_templates', type: 'not-available-in-currency' %>
@@ -74,7 +74,7 @@
           <%= render 'spree/shared/quantity_select', input_name: :quantity %>
         </div>
 
-        <%= button_tag class: 'btn btn-primary w-100 text-uppercase font-weight-bold add-to-cart-button', id: 'add-to-cart-button', type: :submit, disabled: true do %>
+        <%= button_tag class: 'btn btn-primary w-100 font-weight-bold add-to-cart-button', id: 'add-to-cart-button', type: :submit, disabled: true do %>
           <%= Spree.t(:add_to_cart) %>
         <% end %>
       </div>

data/app/views/spree/products/_color_option_type.html.erb

@@ -1,5 +1,5 @@
 <div class="product-variants-variant product-variants-variant--color" data-option-type-id="<%= option_type[:id] %>">
-  <span class="d-block mb-2 text-center text-md-left text-uppercase product-variants-variant-title">
+  <span class="d-block mb-2 text-center text-md-left product-variants-variant-title">
     <%= option_type[:presentation] %>
   </span>
 

data/app/views/spree/products/_description.html.erb

@@ -1,4 +1,4 @@
-<h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:description) %></h3>
+<h3 class="pt-4 font-weight-bold product-details-subtitle"><%= Spree.t(:description) %></h3>
 
 <% if Spree::Frontend::Config[:show_raw_product_description] || product_wysiwyg_editor_enabled? %>
   <div id="product-description-long" class="m-0 text-break product-description" data-hook="description">

data/app/views/spree/products/_filters_desktop.html.erb

@@ -85,7 +85,7 @@
                 <%= max_price_filter_input class: 'w-50 p-2' %>
               </div>
 
-              <%= link_to Spree.t('plp.done'), permitted_params, class: 'btn btn-primary spree-btn w-100', data: { params: permitted_params } %>
+              <%= link_to Spree.t('plp.done'), permitted_params, class: 'btn btn-sm btn-primary spree-btn w-100', data: { params: permitted_params } %>
             </div>
           </div>
         </div>

data/app/views/spree/products/_filters_mobile.html.erb

@@ -15,7 +15,7 @@
           <% ot_downcase_name = option_type_name.downcase %>
 
           <div class="card plp-overlay-card">
-            <div class="card-header text-uppercase <%= 'collapsed' if params[ot_downcase_name].blank? %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= option_type_name %>" data-target="#collapseFilterMobile<%= option_type_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= option_type_name %>" role="heading" aria-level="3">
+            <div class="card-header <%= 'collapsed' if params[ot_downcase_name].blank? %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= option_type_name %>" data-target="#collapseFilterMobile<%= option_type_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= option_type_name %>" role="heading" aria-level="3">
               <%= option_type.presentation %>
               <%= icon(name: 'arrow-right',
                       classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
@@ -35,7 +35,7 @@
             <% property_name = property.name %>
             <% collapsed = params.dig(:properties, property.filter_param).blank? %>
             <div class="card plp-overlay-card">
-              <div class="card-header text-uppercase <%= 'collapsed' if collapsed %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= property_name %>" data-target="#collapseFilterMobile<%= property_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= property_name %>" role="heading" aria-level="3">
+              <div class="card-header <%= 'collapsed' if collapsed %> plp-overlay-card-header" data-toggle="collapse" id="filtersMobile<%= property_name %>" data-target="#collapseFilterMobile<%= property_name %>" aria-expanded="true" aria-controls="collapseFilterMobile<%= property_name %>" role="heading" aria-level="3">
                 <%= property.presentation %>
                 <%= icon(name: 'arrow-right',
                          classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',
@@ -57,7 +57,7 @@
         <% end %>
 
         <div class="card plp-overlay-card">
-          <div class="card-header text-uppercase <%= 'collapsed' if params[:price].blank? %> plp-overlay-card-header" id="headingFour" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" role="heading" aria-level="3">
+          <div class="card-header <%= 'collapsed' if params[:price].blank? %> plp-overlay-card-header" id="headingFour" data-toggle="collapse" data-target="#collapseFour" aria-expanded="true" aria-controls="collapseFour" role="heading" aria-level="3">
             <%= Spree.t('plp.price') %>
             <%= icon(name: 'arrow-right',
                     classes: 'spree-icon-arrow spree-icon-arrow-right mt-1 float-right arrow plp-overlay-card-header-arrow',

data/app/views/spree/products/_option_type.html.erb

@@ -1,5 +1,5 @@
 <div class="product-variants-variant" data-option-type-id="<%= option_type[:id] %>">
-  <span class="d-block mb-2 text-center text-md-left text-uppercase product-variants-variant-title">
+  <span class="d-block mb-2 text-center text-md-left product-variants-variant-title">
     <%= option_type[:presentation] %>
   </span>
 

data/app/views/spree/products/_promotions.html.erb

@@ -2,7 +2,7 @@
 
 <% if promotions.any? %>
   <div id="promotions">
-    <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:promotions) %></h3>
+    <h3 class="pt-4 font-weight-bold product-details-subtitle"><%= Spree.t(:promotions) %></h3>
     <% promotions.each do |promotion| %>
       <div class="row">
         <div class="col-12 col-md-7 col-lg-6 mb-3">

data/app/views/spree/products/_properties.html.erb

@@ -1,5 +1,5 @@
 <% unless @product_properties.blank? %>
-  <h3 class="pt-4 font-weight-bold text-uppercase product-details-subtitle"><%= Spree.t(:details) %></h3>
+  <h3 class="pt-4 font-weight-bold product-details-subtitle"><%= Spree.t(:details) %></h3>
   <ul id="product-properties" class="m-0 list-unstyled product-properies" data-hook>
     <% @product_properties.each do |product_property| %>
       <% if product_property.show_property? %>