SP-102 Spike upgrading Bootstrap in the admin panel

app/assets/stylesheets/spree/backend/components/_badges.scss

@@ -4,64 +4,64 @@
 }
 
 // Green
-.badge-completed,
-.badge-complete,
-.badge-resumed,
-.badge-considered_safe,
-.badge-paid,
-.badge-shipped,
-.badge-ready,
-.badge-active,
-.badge-success,
-.badge-sold,
-.badge-open,
-.badge-authorized,
-.badge-published,
-.badge-live,
-.badge-approved {
+.bg-completed,
+.bg-complete,
+.bg-resumed,
+.bg-considered_safe,
+.bg-paid,
+.bg-shipped,
+.bg-ready,
+.bg-active,
+.bg-success,
+.bg-sold,
+.bg-open,
+.bg-authorized,
+.bg-published,
+.bg-live,
+.bg-approved {
   @include badge-variant(theme-color('success'));
 }
 
 // Red
-.badge-failed,
-.badge-considered_risky,
-.badge-error,
-.badge-invalid,
-.badge-rejected,
-.badge-closed {
+.bg-failed,
+.bg-considered_risky,
+.bg-error,
+.bg-invalid,
+.bg-rejected,
+.bg-closed {
   @include badge-variant(theme-color('danger'));
 }
 
 // Orange
-.badge-processing,
-.badge-pending,
-.badge-awaiting_return,
-.badge-returned,
-.badge-credit_owed,
-.badge-balance_due,
-.badge-backorder,
-.badge-checkout,
-.badge-cart,
-.badge-address,
-.badge-delivery,
-.badge-payment,
-.badge-confirm,
-.badge-canceled,
-.badge-void,
-.badge-inactive,
-.badge-notice,
-.badge-suspended,
-.badge-partial {
+.bg-processing,
+.bg-pending,
+.bg-awaiting_return,
+.bg-returned,
+.bg-credit_owed,
+.bg-balance_due,
+.bg-backorder,
+.bg-checkout,
+.bg-cart,
+.bg-address,
+.bg-delivery,
+.bg-payment,
+.bg-confirm,
+.bg-canceled,
+.bg-void,
+.bg-inactive,
+.bg-notice,
+.bg-suspended,
+.bg-partial {
   @include badge-variant(theme-color('warning'));
 }
 
 // light
-.badge-disabled,
-.badge-invited {
+.bg-disabled,
+.bg-invited {
   @include badge-variant(theme-color('light'));
 }
 
 // Info
-.badge-onboarding {
+.bg-onboarding {
   @include badge-variant(theme-color('info'));
 }

app/assets/stylesheets/spree/backend/components/_sidebar.scss

@@ -29,7 +29,7 @@ body.sidebar-open {
 }
 a.sidebar-submenu-item:hover, a.sidebar-submenu-item:focus {
     text-decoration: none;
-    color: theme-color('primary') !important;
+    color: map-get($theme-colors, 'primary') !important;
     cursor: pointer;
 }
 

app/assets/stylesheets/spree/backend/components/_tables.scss

@@ -57,7 +57,7 @@ table.table {
     }
   }
 
-  .badge-secondary {
+  .bg-secondary {
     .icon {
       filter: invert(1);
     }

app/assets/stylesheets/spree/backend/global/_mixins.scss

@@ -39,40 +39,40 @@
         $baseVal: 1rem;
     }
 
-    .custom-control-label {
+    .form-control-label {
         padding-left: #{$baseVal};
         padding-bottom: #{$mainVal};
     }
 
-    .custom-control-label::before {
+    .form-control-label::before {
         height: $mainVal;
         width: calc(#{$index} + 0.75rem);
         border-radius: $mainVal * 2;
     }
 
-    .custom-control-label::after {
+    .form-control-label::after {
         width: calc(#{$mainVal} - 4px);
         height: calc(#{$mainVal} - 4px);
         border-radius: calc(#{$index} - (#{$mainVal} / 2));
     }
 
-    .custom-control-input:checked ~ .custom-control-label::after {
+    .form-control-input:checked ~ .form-control-label::after {
         transform: translateX(calc(#{$mainVal} - 0.25rem));
     }
 }
 
-.custom-switch.custom-switch-sm {
+.form-switch.form-switch-sm {
     @include switch();
 }
 
-.custom-switch.custom-switch-md {
+.form-switch.form-switch-md {
     @include switch('md');
 }
 
-.custom-switch.custom-switch-lg {
+.form-switch.form-switch-lg {
     @include switch('lg');
 }
 
-.custom-switch.custom-switch-xl {
+.form-switch.form-switch-xl {
     @include switch('xl');
 }

app/assets/stylesheets/spree/backend/global/_variables.scss

@@ -1,5 +1,7 @@
+$primary: #4C75BA;
+
 $theme-colors: (
-  "primary": #4C75BA,
+  "primary": $primary,
 );
 
 $enable-shadows: true;

app/assets/stylesheets/spree/backend/plugins/_flatpickr.scss

@@ -37,7 +37,7 @@
 
   .flatpickr-months .flatpickr-prev-month:hover svg,
   .flatpickr-months .flatpickr-next-month:hover svg {
-    fill: theme-color('primary');
+    fill: map-get($theme-colors, 'primary');
   }
 
   .flatpickr-time {

app/assets/stylesheets/spree/backend/plugins/_select2_bootstrap4.scss

@@ -75,7 +75,7 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
 }
 
 @mixin validation-state-focus($color) {
-  $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($color, 20%);
+  $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px tint-color($color, 20%);
 
   .select2-dropdown,
   .select2-selection {
@@ -85,14 +85,14 @@ $s2bs-form-control-transition: border-color ease-in-out .15s, box-shadow ease-in
   .select2-container--focus .select2-selection,
   .select2-container--open .select2-selection {
     @include box-shadow($shadow);
-    border-color: darken($color, 10%);
+    border-color: shade-color($color, 10%);
   }
 
   &.select2-drop-active {
-    border-color: darken($color, 10%);
+    border-color: shade-color($color, 10%);
 
     &.select2-drop.select2-drop-above {
-      border-top-color: darken($color, 10%);
+      border-top-color: shade-color($color, 10%);
     }
   }
 }

app/assets/stylesheets/spree/backend/plugins/_sweetalert2_custom.scss

@@ -61,7 +61,7 @@ body.swal2-toast-shown .swal2-container.swal2-bottom {
   }
 }
 
-@include media-breakpoint-down(sm) {
+@include media-breakpoint-down() {
   body.swal2-toast-shown .swal2-container.swal2-bottom {
     .swal2-popup.swal2-toast {
       button.swal2-close {

app/assets/stylesheets/spree/backend/shared/_base.scss

@@ -81,9 +81,9 @@ div.admin-product-image-container {
 }
 
 .js-remove-promo-rule-option-value {
-  color: theme-color('primary') !important;
+  color: map-get($theme-colors, 'primary') !important;
   &:hover {
-    color: darken(theme-color('primary'), 10) !important;
+    color: shade-color(map-get($theme-colors, 'primary'), 10) !important;
   }
 }
 
@@ -95,7 +95,7 @@ div.admin-product-image-container {
   cursor: grab;
 }
 
-.badge-light-muted-text {
+.bg-light-muted-text {
   color: rgba(0, 0, 0, 0.50);
 }
 

app/assets/stylesheets/spree/backend/shared/_forms.scss

@@ -45,7 +45,7 @@ input[type="file"] {
   text-overflow: ellipsis;
 }
 
-.custom-select {
+.form-select {
   background: $input-bg url(asset-path("backend-chevron-down.svg")) no-repeat right 0.5rem center/8px 10px;
   background-size: 0.7em;
 }

app/helpers/spree/admin/base_helper.rb

@@ -232,7 +232,7 @@ def order_time(time)
       end
 
       def required_span_tag
-        content_tag(:span, ' *', class: 'required font-weight-bold text-danger')
+        content_tag(:span, ' *', class: 'required fw-bold text-danger')
       end
 
       def external_page_preview_link(resource, options = {})

app/helpers/spree/admin/navigation_helper.rb

@@ -62,7 +62,7 @@ def tab(*args)
                  link_to(
                    titleized_label,
                    destination_url,
-                   class: "sidebar-submenu-item w-100 py-2 py-md-1 pl-5 d-block #{selected ? 'font-weight-bold' : 'text-muted'}"
+                   class: "sidebar-submenu-item w-100 py-2 py-md-1 ps-5 d-block #{selected ? 'fw-bold' : 'text-muted'}"
                  )
                end
 
@@ -76,11 +76,11 @@ def tab(*args)
       def main_menu_item(text, url: nil, icon: nil)
         link_to url, 'data-toggle': 'collapse', class: 'd-flex w-100 px-3 py-2 position-relative align-items-center' do
           if icon.ends_with?('.svg')
-            svg_icon(name: icon, classes: 'mr-2 text-muted', width: MENU_ICON_SIZE, height: MENU_ICON_SIZE) +
+            svg_icon(name: icon, classes: 'me-2 text-muted', width: MENU_ICON_SIZE, height: MENU_ICON_SIZE) +
               content_tag(:span, raw(" #{text}"), class: 'text-muted') +
               svg_icon(name: 'chevron-right.svg', classes: 'drop-menu-indicator text-muted position-absolute', width: (MENU_ICON_SIZE - 8), height: (MENU_ICON_SIZE - 8))
           else
-            content_tag(:span, nil, class: "icon text-muted icon-#{icon} mr-2") +
+            content_tag(:span, nil, class: "icon text-muted icon-#{icon} me-2") +
               content_tag(:span, raw(" #{text}"), class: 'text-muted') +
               svg_icon(name: 'chevron-right.svg', classes: 'drop-menu-indicator text-muted position-absolute', width: (MENU_ICON_SIZE - 8), height: (MENU_ICON_SIZE - 8))
           end
@@ -105,7 +105,7 @@ def per_page_dropdown
 
         select_tag(:per_page,
                    options_for_select(per_page_options, selected_option),
-                   class: "w-auto form-control js-per-page-select per-page-selected-#{selected_option} custom-select custom-select-sm")
+                   class: "w-auto form-control js-per-page-select per-page-selected-#{selected_option} form-select form-select-sm")
       end
 
       # helper method to create proper url to apply per page ing
@@ -177,9 +177,9 @@ def link_to_with_icon(icon_name, text, url, options = {})
         options[:height] ||= ICON_SIZE
         if icon_name
           icon = if icon_name.ends_with?('.svg')
-                   svg_icon(name: icon_name, classes: "#{'mr-2' unless text.empty?} icon icon-#{icon_name}", width: options[:width], height: options[:height])
+                   svg_icon(name: icon_name, classes: "#{'me-2' unless text.empty?} icon icon-#{icon_name}", width: options[:width], height: options[:height])
                  else
-                   content_tag(:span, '', class: "#{'mr-2' unless text.empty?} icon icon-#{icon_name}")
+                   content_tag(:span, '', class: "#{'me-2' unless text.empty?} icon icon-#{icon_name}")
                  end
           text = "#{icon} #{text}"
         end
@@ -255,18 +255,18 @@ def configurations_sidebar_menu_item(link_text, url, options = {})
           url.ends_with?("#{controller.controller_name.singularize}/edit")
 
         options[:class] = 'sidebar-menu-item d-block w-100'
-        options[:class] << ' selected font-weight-bold' if options[:is_selected]
+        options[:class] << ' selected fw-bold' if options[:is_selected]
         content_tag(:li, options) do
-          link_to(link_text, url, class: "#{'text-muted' unless options[:is_selected]} sidebar-submenu-item w-100 py-2 py-md-1 pl-5 d-block")
+          link_to(link_text, url, class: "#{'text-muted' unless options[:is_selected]} sidebar-submenu-item w-100 py-2 py-md-1 ps-5 d-block")
         end
       end
 
       def active_badge(condition, options = {})
         label = options[:label]
         label ||= condition ? Spree.t(:say_yes) : Spree.t(:say_no)
-        css_class = condition ? 'badge-active' : 'badge-inactive'
+        css_class = condition ? 'bg-active' : 'bg-inactive'
 
-        content_tag(:small, class: "badge badge-pill #{css_class}") do
+        content_tag(:small, class: "badge rounded-pill #{css_class}") do
           label
         end
       end
@@ -301,7 +301,7 @@ def wrapper_classes
       end
 
       def page_header_back_button(url)
-        link_to url, class: 'btn btn-outline-info mr-3 pr-1' do
+        link_to url, class: 'btn btn-outline-info me-3 pe-1' do
           svg_icon name: 'chevron-left.svg', width: 15, height: 15
         end
       end

app/helpers/spree/admin/webhooks_subscribers_helper.rb

@@ -3,9 +3,9 @@ module Admin
     module WebhooksSubscribersHelper
       def event_checkbox_for(resource_name, form)
         content_tag :div, class: 'col-xs-12 col-sm-6 col-md-4 col-lg-4 form-group' do
-          content_tag :div, class: 'custom-control custom-switch' do
+          content_tag :div, class: 'form-control form-switch' do
             (form.check_box resource_name, event_checkbox_opts(resource_name), true, nil) + ' ' +
-              form.label(resource_name, Spree.t("admin.webhooks_subscribers.#{resource_name.to_s.pluralize}"), class: 'custom-control-label')
+              form.label(resource_name, Spree.t("admin.webhooks_subscribers.#{resource_name.to_s.pluralize}"), class: 'form-control-label')
           end
         end
       end
@@ -18,7 +18,7 @@ def subscribe_to_all_events?
 
       def event_checkbox_opts(resource_name)
         {
-          class: 'events-checkbox custom-control-input',
+          class: 'events-checkbox form-control-input',
           checked: subscribed_to_resource?(resource_name)
         }
       end

app/views/spree/admin/adjustments/_adjustment.html.erb

@@ -14,7 +14,7 @@
     <%= adjustment.display_amount.to_html %>
   </td>
   <td class="text-center">
-    <span class="text-lowercase badge badge-pill badge-<%= adjustment.state %>">
+    <span class="text-lowercase badge rounded-pill bg-<%= adjustment.state %>">
       <%= Spree.t("state_machine_states.#{adjustment.state}") %>
     </span>
   </td>