spree_frontend 4.6.0 → 4.8.0

data/app/assets/stylesheets/spree/frontend/views/spree/checkout/edit.scss

@@ -229,9 +229,6 @@
       }
 
       &-field {
-        input::-webkit-input-placeholder {
-          text-transform: uppercase;
-        }
         @include media-breakpoint-up(sm) {
           margin-top: 33px;
         }

data/app/assets/stylesheets/spree/frontend/views/spree/layouts/spree_application.scss

@@ -38,7 +38,7 @@ body {
 
 .form-control,
 .form-control:focus,
-.spree-flat-input {
+.form-control {
   background: $input-background;
   color: color-yiq($input-background);
 }

data/app/assets/stylesheets/spree/frontend/views/spree/orders/edit.scss

@@ -91,19 +91,10 @@
             padding-right: 16px;
           }
         }
-        &:last-child {
-          @include media-breakpoint-up(lg) {
-            padding: 40px 0 22px 16px;
-          }
-        }
         border-top: none;
         border-bottom: 1px solid $global-border-style;
         padding: 22px 0;
         vertical-align: top;
-        @include media-breakpoint-up(lg) {
-          padding: 22px 50px 0 0;
-          vertical-align: middle;
-        }
       }
     }
   }
@@ -153,19 +144,8 @@
       }
 
       .item-details {
-        text-transform: uppercase;
-        font-size: font-px-to-rem(12px);
         font-weight: 500;
         line-height: 1.4;
-        @include media-breakpoint-up(sm) {
-          font-size: font-px-to-rem(14px);
-          margin-top: 3px;
-          margin-bottom: 3px;
-        }
-        @include media-breakpoint-up(lg) {
-          font-size: font-px-to-rem(12px);
-          margin: 0;
-        }
       }
     }
     &-price {

data/app/assets/stylesheets/spree/frontend/views/spree/products/index.scss

@@ -131,7 +131,7 @@
         font-size: font-px-to-rem(16px);
         font-weight: 500;
         &--selected {
-          border: solid 2px $secondary-color;
+          border: solid 1px $secondary-color;
         }
       }
     }
@@ -308,7 +308,7 @@
         color: $font-color;
         font-size: font-px-to-rem(13px);
         &--selected {
-          border: solid 2px $secondary-color;
+          border: solid 1px $secondary-color;
         }
       }
       &:last-of-type {

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

@@ -142,15 +142,6 @@
 }
 
 .product-description {
-  font-size: font-px-to-rem(12px);
-  @include media-breakpoint-up(sm) {
-    font-size: font-px-to-rem(16px);
-  }
-  @include media-breakpoint-up(md) {
-    font-size: font-px-to-rem(14px);
-    line-height: font-px-to-rem(26px);
-  }
-
   &-arrow {
     width: 44px;
     height: 44px;
@@ -161,17 +152,6 @@
   }
 }
 
-.product-properies {
-  font-size: font-px-to-rem(12px);
-  @include media-breakpoint-up(sm) {
-    font-size: font-px-to-rem(16px);
-  }
-  @include media-breakpoint-up(md) {
-    font-size: font-px-to-rem(14px);
-    line-height: font-px-to-rem(26px);
-  }
-}
-
 #product-details {
   .breadcrumb-item:last-of-type {
     display: none;

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

@@ -18,7 +18,7 @@ module Spree
       image_path ||= if logo_attachment&.attached? && logo_attachment&.variable?
                        main_app.cdn_image_url(logo_attachment.variant(resize: '244x104>'))
                      elsif logo_attachment&.attached? && logo_attachment&.image?
-                       main_app.cdn_image_url(current_store.logo)
+                       main_app.cdn_image_url(logo_attachment)
                      else
                        asset_path('logo/spree_50.png')
                      end
@@ -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)
@@ -251,7 +251,7 @@ module Spree
     end
 
     def price_filter_values
-      ActiveSupport::Deprecation.warn(<<-DEPRECATION, caller)
+      Spree::Deprecation.warn(<<-DEPRECATION, caller)
         `FrontendHelper#price_filter_values` is deprecated and will be removed in Spree 5.0.
         Please use `ProductsFiltersHelper#price_filters` method
       DEPRECATION

data/app/helpers/spree/navigation_helper.rb

@@ -3,7 +3,7 @@ require 'digest'
 module Spree
   module NavigationHelper
     def spree_navigation_data
-      ActiveSupport::Deprecation.warn(<<-DEPRECATION, caller)
+      Spree::Deprecation.warn(<<-DEPRECATION, caller)
         NavigationHelper#spree_navigation_data is deprecated and will be removed in Spree 5.0.
         Please migrate to the new navigation cms system.
       DEPRECATION
@@ -20,7 +20,7 @@ module Spree
     end
 
     def spree_nav_cache_key(section = 'header')
-      ActiveSupport::Deprecation.warn(<<-DEPRECATION, caller)
+      Spree::Deprecation.warn(<<-DEPRECATION, caller)
         NavigationHelper#spree_nav_cache_key is deprecated and will be removed in Spree 5.0.
         Please migrate to the new navigation cms system.
       DEPRECATION
@@ -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/helpers/spree/taxons_helper.rb

@@ -4,7 +4,7 @@ module Spree
     # that we can use configurations as well as make it easier for end users to override this determination.  One idea is
     # to show the most popular products for a particular taxon (that is an exercise left to the developer.)
     def taxon_preview(taxon, max = 4)
-      ActiveSupport::Deprecation.warn(<<-DEPRECATION, caller)
+      Spree::Deprecation.warn(<<-DEPRECATION, caller)
         TaxonsHelper is deprecated and will be removed in Spree 5.0.
         Please remove any `helper 'spree/taxons'` from your controllers.
       DEPRECATION

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/services/spree/build_localized_redirect_url.rb

@@ -118,14 +118,14 @@ module Spree
         Mobility.with_locale(default_locale) { Spree::Product.friendly.find(product_path_match[1]) }
       end
 
-      new_slug = Mobility.with_locale(locale) { product.slug(fallbacks: default_locale) }
+      new_slug = product.slug(locale: locale) || product.slug(locale: default_locale)
       new_path_slug = "/products/#{new_slug}"
       default_locale_supplied ? new_path_slug : "/#{locale}/#{new_path_slug}"
     end
 
     def generate_taxon_path(taxon_path_match, previous_locale, locale, default_locale, default_locale_supplied)
       taxon = Mobility.with_locale(previous_locale) { Spree::Taxon.friendly.find(taxon_path_match[1]) }
-      new_slug = Mobility.with_locale(locale) { taxon.permalink(fallbacks: default_locale) }
+      new_slug = taxon.permalink(locale: locale) || taxon.permalink(locale: default_locale)
       new_path_slug = "/t/#{new_slug}"
       default_locale_supplied ? new_path_slug : "/#{locale}/#{new_path_slug}"
     end

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' %>