Workaround: bad interaction btw Turbo and stripe iframe

Found this workaround here: https://github.com/hotwired/turbo/issues/270#issuecomment-1068130327

This js hack persists the original iframe object downloaded from stripe in the new body sent by Turbo (instead of using the new one, in the new body)

Gemfile.lock

@@ -182,7 +182,7 @@ GEM
     bugsnag (6.25.0)
       concurrent-ruby (~> 1.0)
     builder (3.2.4)
-    bullet (7.0.4)
+    bullet (7.0.7)
       activesupport (>= 3.0.0)
       uniform_notifier (~> 1.11)
     cable_ready (5.0.0.pre9)
@@ -375,7 +375,7 @@ GEM
     jsonapi-serializer (2.2.0)
       activesupport (>= 4.2)
     jwt (2.6.0)
-    knapsack_pro (3.6.0)
+    knapsack_pro (3.7.0)
       rake
     launchy (2.5.0)
       addressable (~> 2.7)
@@ -404,7 +404,7 @@ GEM
     mini_portile2 (2.8.1)
     mini_racer (0.4.0)
       libv8-node (~> 15.14.0.0)
-    minitest (5.16.3)
+    minitest (5.17.0)
     monetize (1.12.0)
       money (~> 6.12)
     money (6.16.0)
@@ -599,17 +599,17 @@ GEM
     rswag-ui (2.8.0)
       actionpack (>= 3.1, < 7.1)
       railties (>= 3.1, < 7.1)
-    rubocop (1.41.1)
+    rubocop (1.42.0)
       json (~> 2.3)
       parallel (~> 1.10)
       parser (>= 3.1.2.1)
       rainbow (>= 2.2.2, < 4.0)
       regexp_parser (>= 1.8, < 3.0)
       rexml (>= 3.2.5, < 4.0)
-      rubocop-ast (>= 1.23.0, < 2.0)
+      rubocop-ast (>= 1.24.1, < 2.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (>= 1.4.0, < 3.0)
-    rubocop-ast (1.24.0)
+    rubocop-ast (1.24.1)
       parser (>= 3.1.1.0)
     rubocop-rails (2.17.4)
       activesupport (>= 4.2.0)

app/assets/javascripts/admin/index_utils/directives/show_more.js.coffee

@@ -1,12 +0,0 @@
-angular.module("admin.indexUtils").component 'showMore',
-  templateUrl: 'admin/show_more.html'
-  bindings:
-    data: "="
-    limit: "="
-    increment: "="
-
-# For now, this component is not being used.
-# Something about binding "data" to a variable on the parent scope that is continually refreshed by
-# being assigned within an ng-repeat means that we get $digest iteration errors. Seems to be solved
-# by using the new "as" syntax for ng-repeat to assign and alias the outcome of the filters, but this
-# has the limitation of not being able to be limited AFTER the assignment has been made, which we need

app/assets/javascripts/darkswarm/directives/fill_vertical.js.coffee

@@ -1,9 +0,0 @@
-angular.module('Darkswarm').directive "fillVertical", ($window)->
-  # Makes something fill the window vertically. Used on the Google Map.
-  restrict: 'A'
-  link: (scope, element, attrs)->
-    setSize = ->
-      element.css "height", ($window.innerHeight - element.offset().top)
-    setSize()
-    angular.element($window).bind "resize", ->
-      setSize()

app/assets/javascripts/darkswarm/directives/single_line_selectors.coffee

@@ -1,82 +0,0 @@
-angular.module('Darkswarm').directive 'singleLineSelectors', ($timeout, $filter) ->
-  restrict: 'E'
-  templateUrl: "single_line_selectors.html"
-  scope:
-    selectors: "="
-    objects: "&"
-    activeSelectors: "="
-    selectorName: "@activeSelectors"
-  link: (scope, element, attrs) ->
-    scope.fitting = false
-
-    scope.refit = ->
-      if scope.allSelectors?
-        scope.fitting = true
-        selector.fits = true for selector in scope.allSelectors
-        $timeout(loadWidths, 0, true).then ->
-          $timeout fit, 0, true
-
-    fit = ->
-      used = $(element).find("li.more").outerWidth(true)
-      used += selector.width for selector in scope.allSelectors when selector.fits
-      available = $(element).parent(".filter-shopfront").innerWidth() - used
-      if available > 0
-        for selector in scope.allSelectors when !selector.fits
-          available -= selector.width
-          selector.fits = true if available > 0
-      else
-        if scope.allSelectors.length > 0
-          for i in [scope.allSelectors.length-1..0]
-            selector = scope.allSelectors[i]
-            if !selector.fits
-              continue
-            else
-              if available < 0
-                selector.fits = false
-                available += selector.width
-      scope.fitting = false
-
-    loadWidths = ->
-      $(element).find("li").not(".more").each (i) ->
-        if i < scope.allSelectors.length
-          scope.allSelectors[i].width = $(this).outerWidth(true)
-        return null # So we don't exit the loop weirdly
-
-    scope.overFlowSelectors = ->
-      return [] unless scope.allSelectors?
-      $filter('filter')(scope.allSelectors, { fits: false })
-
-    scope.selectedOverFlowSelectors = ->
-      $filter('filter')(scope.overFlowSelectors(), { active: true })
-
-    # had to duplicate this to make overflow selectors work
-    scope.emit = ->
-      scope.activeSelectors = scope.allSelectors.filter (selector)->
-        selector.active
-      .map (selector) ->
-        selector.object.id
-
-    # From: http://stackoverflow.com/questions/4298612/jquery-how-to-call-resize-event-only-once-its-finished-resizing
-    debouncer = (func, timeout) ->
-      timeoutID = undefined
-      timeout = timeout or 50
-      ->
-        subject = this
-        args = arguments
-        clearTimeout timeoutID
-        timeoutID = setTimeout(->
-          func.apply subject, Array::slice.call(args)
-        , timeout)
-
-
-    # -- Event management
-    scope.$watchCollection "allSelectors", ->
-      scope.refit()
-
-    scope.$on "filtersToggled", ->
-      scope.refit()
-
-    $(window).resize debouncer (e) ->
-      scope.fitting = true
-      if scope.allSelectors?
-        $timeout fit, 0, true

app/assets/javascripts/templates/admin/show_more.html.haml

@@ -1,3 +0,0 @@
-%div{ ng: { show: "data.length > limit" } }
-  %input{ type: 'button', value: t(:show_more), ng: { click: 'limit = limit + increment' } }
-  %input{ type: 'button', value: t(:show_all_with_more, num: '{{ data.length - limit }}'), ng: { click: 'limit = data.length' } }

app/assets/javascripts/templates/single_line_selectors.html.haml

@@ -1,14 +0,0 @@
--# In order for the single-line-selector scope to have access to the available selectors,
-%filter-selector{"selector-set" => "selectors", objects: "objects()", "active-selectors" => "activeSelectors", "all-selectors" => "allSelectors" }
-
-%ul{ ng: { if: "overFlowSelectors().length > 0 || fitting" } }
-  %li.more
-    %a.dropdown{ data: { dropdown: "{{ 'show-more-' + selectorName }}" }, ng: { class: "{active: selectedOverFlowSelectors().length > 0}" } }
-      %span
-        {{ 'js.more_items' | t:{ count: overFlowSelectors().length } }}
-      %i.ofn-i_052-point-down
-    .f-dropdown.text-right.content{ ng: { attr: { id: "{{ 'show-more-' + selectorName }}" } } }
-      %ul
-        %active-selector{ ng: { repeat: "selector in overFlowSelectors()", hide: "selector.fits" } }
-          %render-svg{path: "{{selector.object.icon}}", ng: { if: "selector.object.icon"}}
-          %span {{ selector.object.name }}

app/helpers/spree/admin/orders_helper.rb

@@ -133,7 +133,7 @@ module Spree
         event_label = I18n.t("cancel", scope: "actions")
         button_link_to(event_label,
                        fire_admin_order_url(@order, e: "cancel"),
-                       method: :put, icon: "icon-cancel", form_id: "cancel_order_form")
+                       method: :put, icon: "icon-remove", form_id: "cancel_order_form")
       end
 
       def resume_event_link

app/views/admin/customers/index.html.haml

@@ -102,7 +102,6 @@
             %td.actions
               %a{ 'ng-click' => "deleteCustomer(customer)", :class => "delete-customer icon-trash no-text" }
 
-      -# %show-more.text-center{ data: "filteredCustomers", limit: "customerLimit", increment: "20" }
       %div.text-center{ ng: { show: "filteredCustomers.length > customerLimit" } }
         %input{ type: 'button', value: t(:show_more), ng: { click: 'customerLimit = customerLimit + 20' } }
         %input{ type: 'button', value: t(:show_all_with_more, num: '{{ filteredCustomers.length - customerLimit }}'), ng: { click: 'customerLimit = filteredCustomers.length' } }

app/views/admin/variant_overrides/_show_more.html.haml

@@ -1,4 +1,3 @@
--# %show-more.text-center{ data: "filteredProducts", limit: "productLimit", increment: "10" }
 .text-center{ ng: { show: "filteredProducts.length > productLimit" } }
   %input{ type: 'button', value: t(:show_more), ng: { click: 'productLimit = productLimit + 10' } }
 

app/views/producers/_filters.html.haml

@@ -3,7 +3,7 @@
   .small-12.medium-6.columns.text-right
      
 
-.row.animate-show.filter-row{"ng-show" => "filtersActive"}
+.row.animate-show{"ng-show" => "filtersActive"}
   .small-12.columns
     .row.filter-box
       .small-12.columns

app/views/shared/_stripe_js.html.haml

@@ -3,3 +3,13 @@
     = raw render file: "spec/support/fixtures/stripejs-mock.js"
 - else
   %script{src: "https://js.stripe.com/v3/", type: "text/javascript"}
+  :javascript
+    // persist initial stripe iFrame DOM Object across turbo AJAX page requests
+    let stripeIFrameQuery = 'iframe[src^="https://js.stripe.com"]';
+    document.addEventListener('turbo:before-render', function (event) {
+      const stripeIFrame = document.querySelector(stripeIFrameQuery);
+      const newStripeIFrame = event.detail.newBody.querySelector(stripeIFrameQuery);
+      if (stripeIFrame && !newStripeIFrame){
+        event.detail.newBody.appendChild(stripeIFrame)
+      }
+    });

app/views/shops/_filters.html.haml

@@ -4,7 +4,7 @@
 .row
   = render 'shared/components/filter_controls'
 
-.row.animate-show.filter-row{"ng-show" => "filtersActive"}
+.row.animate-show{"ng-show" => "filtersActive"}
   .small-12.columns
     .row.filter-box
       .small-12.large-9.columns

app/views/spree/admin/orders/_note.html.haml

@@ -20,7 +20,8 @@
         = t(".no_note_present")
 
     %td.actions
-      = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit')
-      - if @order.note.present?
-        = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete')
+      .flex
+        = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit')
+        - if @order.note.present?
+          = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete')
 

app/views/spree/admin/orders/_shipment.html.haml

@@ -26,7 +26,7 @@
         = Spree.t(:price)
       %th
         = Spree.t(:quantity)
-      %th
+      %th.force-rounded-right
         = Spree.t(:total)
       %th.orders-actions.actions{ "data-hook" => "admin_order_form_line_items_header_actions" }
 
@@ -57,8 +57,8 @@
             %span
               = shipment.fee_adjustment.display_amount
 
-        - if shipment.fee_adjustment.present? && shipment.can_modify?
-          %td.actions
+        %td.actions
+          - if shipment.fee_adjustment.present? && shipment.can_modify?
             - if can? :update, shipment
               = link_to '', '', :class => 'edit-method icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit')
 
@@ -70,8 +70,9 @@
 
         %td.actions
           - if can?(:update, shipment) && !shipment.canceled?
-            = link_to '', '', :class => 'save-tracking icon_link icon-ok no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'save' }, :title => I18n.t('actions.save')
-            = link_to '', '', :class => 'cancel-tracking icon_link icon-cancel no-text with-tip', :data => { :action => 'cancel' }, :title => I18n.t('actions.cancel')
+            .flex
+              = link_to '', '', :class => 'save-tracking icon_link icon-ok no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'save' }, :title => I18n.t('actions.save')
+              = link_to '', '', :class => 'cancel-tracking icon_link icon-cancel no-text with-tip', :data => { :action => 'cancel' }, :title => I18n.t('actions.cancel')
 
       %tr.show-tracking.total
         %td{ :colspan => "5" }
@@ -84,6 +85,7 @@
 
         %td.actions
           - if can?(:update, shipment) && shipment.can_modify?
-            = link_to '', '', :class => 'edit-tracking icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit')
-            - if shipment.tracking.present?
-              = link_to '', '', :class => 'delete-tracking icon_link icon-trash no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'remove' }, :title => Spree.t('delete')
+            .flex
+              = link_to '', '', :class => 'edit-tracking icon_link icon-edit no-text with-tip', :data => { :action => 'edit' }, :title => Spree.t('edit')
+              - if shipment.tracking.present?
+                = link_to '', '', :class => 'delete-tracking icon_link icon-trash no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'remove' }, :title => Spree.t('delete')

app/views/spree/admin/orders/_shipment_manifest.html.haml

@@ -19,10 +19,11 @@
 
       %td.cart-item-delete.actions{ "data-hook" => "cart_item_delete" }
         - if shipment.can_modify? && can?(:update, shipment)
-          = link_to '', '#', :class => 'save-item icon_link icon-ok no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'save'}, :title => t('actions.save'), :style => 'display: none'
-          = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none'
-          = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit')
-          = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete')
+          .flex
+            = link_to '', '#', :class => 'save-item icon_link icon-ok no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'save'}, :title => t('actions.save'), :style => 'display: none'
+            = link_to '', '#', :class => 'cancel-item icon_link icon-cancel no-text with-tip', :data => {:action => 'cancel'}, :title => t('actions.cancel'), :style => 'display: none'
+            = link_to '', '#', :class => 'edit-item icon_link icon-edit no-text with-tip', :data => {:action => 'edit'}, :title => t('actions.edit')
+            = link_to '', '#', :class => 'delete-item icon-trash no-text with-tip', :data => {'shipment-number' => shipment.number, 'variant-id' => item.variant.id, :action => 'remove'}, :title => t('actions.delete')
 
 = render 'spree/admin/shared/custom-alert'
 = render 'spree/admin/shared/custom-confirm'

app/views/spree/admin/payments/_list.html.haml

@@ -15,5 +15,6 @@
         %td.align-center
           %span{class: "state #{payment.state}"}= t(payment.state, scope: "spree.payment_states", default: payment.state.capitalize)
         %td.actions
-          - payment.actions.each do |action|
-            = link_to_with_icon "icon-#{action}", Spree.t(action), fire_admin_order_payment_path(@order, payment, e: action), method: :put, no_text: true, data: {action: action, disable_with: ""}
+          .flex
+            - payment.actions.each do |action|
+              = link_to_with_icon "icon-#{action}", Spree.t(action), fire_admin_order_payment_path(@order, payment, e: action), method: :put, no_text: true, data: {action: action, disable_with: ""}

app/views/spree/admin/shared/_head.html.haml

@@ -14,7 +14,10 @@
 
 %link{:href => "https://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,700&subset=latin,cyrillic,greek,vietnamese", :rel => "stylesheet", :type => "text/css"}
 
-= stylesheet_pack_tag 'admin-styles', media: "screen, print"
+- if feature?(:admin_style_v2, spree_current_user)
+  = stylesheet_pack_tag 'admin-styles-v2', media: "screen, print"
+- else
+  = stylesheet_pack_tag 'admin-styles', media: "screen, print"
 = render "layouts/bugsnag_js"
 = javascript_include_tag 'admin/all'
 

app/webpacker/css/admin/all.scss

@@ -127,5 +127,3 @@
 @import "app/components/pagination_component/pagination_component";
 @import "app/components/table_header_component/table_header_component";
 @import "app/components/search_input_component/search_input_component";
-
-@import "v2/main.scss";

app/webpacker/css/admin/globals/palette.scss

@@ -0,0 +1,16 @@
+// Basic color palette for admin
+$color-1:                        #FFFFFF !default;    // White
+$color-2:                        #9FC820 !default;    // Green
+$color-3:                        #5498DA !default;    // Light Blue
+$color-4:                        #6788A2 !default;    // Dark Blue
+$color-5:                        #C60F13 !default;    // Red
+$color-6:                        #FF9300 !default;    // Yellow
+
+@mixin basicColorPalette($color1, $color2, $color3, $color4, $color5, $color6) {
+  $color-1: $color1 !global;
+  $color-2: $color2 !global;
+  $color-3: $color3 !global;
+  $color-4: $color4 !global;
+  $color-5: $color5 !global;
+  $color-6: $color6 !global;
+}

app/webpacker/css/admin/globals/variables.scss

@@ -9,14 +9,6 @@ $base-font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial,
 // Colors
 //--------------------------------------------------------------
 
-// Basic color palette for admin
-$color-1:                        #FFFFFF !default;    // White
-$color-2:                        #9FC820 !default;    // Green
-$color-3:                        #5498DA !default;    // Light Blue
-$color-4:                        #6788A2 !default;    // Dark Blue
-$color-5:                        #C60F13 !default;    // Red
-$color-6:                        #FF9300 !default;    // Yellow
-
 // Body base colors
 $color-body-bg:                  $color-1 !default;
 $color-body-text:                $color-4 !default;

app/webpacker/css/admin/v2/components/buttons.scss

@@ -11,27 +11,29 @@ select[type="submit"],
 input[type="button"],
 select[type="button"],
 .select2-container-multi [type="button"].select2-choices,
-button,
+button:not(.no-text),
 .button,
-.actions a:not([class*="icon-"]),
+.actions a:not(.no-text),
+fieldset .filter-actions button, // Be more specific to be sure to override the form button style (with a white border)
+fieldset .filter-actions .button:hover,
 .admin__section-header .ofn-drop-down // Same behavior as the button
 {
+  @include backgroundAndBorder($v2-blue-light);
+
+  &:hover {
+    @include backgroundAndBorder($v2-blue);
+    box-shadow: $v2-box-shadow;
+  }
+
   &.disabled,
   &[disabled] {
     @include backgroundAndBorder($v2-light-grey);
+    box-shadow: none;
   }
 
-  &:not(.disabled):not([disabled]):not(.secondary) {
-    // Change the color of the button only if it's not disabled
-    @include backgroundAndBorder($v2-blue-light);
-
-    &:hover {
-      @include backgroundAndBorder($v2-blue);
-      box-shadow: $v2-box-shadow;
-    }
-  }
-
-  &.secondary {
+  &.secondary,
+  &.cancel,
+  &.icon-remove {
     background-color: $white;
     border: 2px solid $v2-blue-light;
     color: $v2-blue-light;
@@ -60,7 +62,6 @@ button,
   }
 }
 
-#table-filter fieldset:has(.actions) {
-  // do not apply border to filter actions as it's drawn by the #table-filter .actions before and after pseudo elements
+#table-filter fieldset {
   border-bottom: 0;
 }

app/webpacker/css/admin/v2/components/dropdown.scss

@@ -0,0 +1,9 @@
+/* Override app/webpacker/css/admin/dropdown.scss */
+
+.ofn-drop-down,
+.ofn-drop-down-with-prepend .ofn-drop-down-prepend {
+  background-color: white;
+  &.disabled {
+    opacity: 0.9;
+  }
+}

app/webpacker/css/admin/v2/components/sidebar.scss

@@ -0,0 +1,11 @@
+/* Override file app/webpacker/css/admin/components/sidebar.scss */
+
+#sidebar {
+  border-color: #e7e7e7;
+  .sidebar-title {
+    color: $v2-blue;
+    & > span {
+      background-color: $v2-body-bg;
+    }
+  }
+}

app/webpacker/css/admin/v2/components/tables.scss

@@ -1,5 +1,17 @@
 /* Overide tables.scss app/webpacker/css/admin/components/tables.scss */
 
+table {
+  background-color: white;
+}
+
+table thead tr:first-child th:first-child {
+  border-top-left-radius: 3px;
+}
+
+table thead tr:first-child th:last-child,
+table thead th.force-rounded-right {
+  border-top-right-radius: 3px;
+}
 table thead th {
   background-color: $v2-medium-light-grey;
   border: none;
@@ -13,24 +25,23 @@ table thead th {
   }
 }
 
+table tr:not([class*="state"]) {
+  th:first-child,
+  td:first-child {
+    border-left: none;
+  }
+}
+
 table tbody tr {
   &:first-child th,
   &:first-child td {
     border-top: none; // Don't show the top border of the first row
   }
-  td:not(:first-child) {
-    border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
-  }
 
   td {
-    border-bottom: none; // By default, do not show the border of the cells
-    border-right: none;
-    border-top: none;
-
+    border: none;
     border-bottom: 2px solid $v2-medium-light-grey;
-    &.actions {
-      border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
-    }
+
     > .flex {
       display: flex;
       column-gap: 10px;
@@ -44,30 +55,66 @@ table tbody tr {
   }
 }
 
-table th.actions,
-table td.actions {
+table thead tr th.actions,
+table tbody tr td.actions {
+  background-color: $v2-body-bg !important;
   // Special for icons in the actions column
-  [class*="icon-"].no-text {
-    border: 2px solid $v2-blue-light;
-    background-color: $v2-blue-lightest;
+  [class*="icon-"],
+  button[class*="icon-"]:not(.disabled):not([disabled]):not(.secondary):not(.cancel) {
+    color: $v2-blue;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-    &:hover {
-      border-color: $v2-blue;
-      background-color: $v2-blue-light;
-      box-shadow: $v2-box-shadow;
+    &:before {
+      width: auto;
+      padding: 0;
+    }
 
-      &:before {
-        color: white;
+    &.no-text {
+      border: 2px solid $v2-blue-light;
+      display: flex; // Be sure that display: flex; is applied
+      padding-top: 0;
+
+      &:hover {
+        border-color: $v2-blue;
+        box-shadow: $v2-box-shadow;
+
+        &:before {
+          color: white;
+        }
       }
     }
   }
-}
-
-table#listing_orders td {
-  // When the table is the listing of orders, we need to increase the height of the cells
-  padding: 20px 0;
-
-  &.actions {
-    padding-left: 20px;
+  .icon-edit:hover,
+  .icon-capture:hover,
+  .icon-ok:hover,
+  .icon-plus:hover,
+  .icon-road:hover {
+    background-color: $v2-blue;
+    color: $color-1;
+  }
+}
+
+table#listing_orders {
+  thead th.actions,
+  thead td.actions {
+    background-color: $v2-medium-light-grey !important;
+  }
+  tbody tr td.actions {
+    background-color: white !important;
+  }
+  td {
+    // When the table is the listing of orders, we need to increase the height of the cells
+    padding: 20px 0;
+
+    &.actions {
+      padding-left: 20px;
+      border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
+    }
+
+    &:not(:first-child) {
+      border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
+    }
   }
 }

app/webpacker/css/admin/v2/components/tom_select.scss

@@ -0,0 +1,47 @@
+/* Override app/webpacker/css/admin/components/tom_select.scss */
+
+.ts-wrapper.primary.focus .ts-control,
+.ts-wrapper.primary .ts-control {
+  background-color: white;
+  border: 1px solid $v2-light-grey;
+  color: $v2-medium-grey;
+
+  &:after {
+    border-color: $v2-medium-grey transparent transparent transparent;
+  }
+}
+
+.ts-wrapper.dropdown-active.primary .ts-control {
+  background-color: transparent;
+  border-color: $v2-light-grey;
+  color: $v2-medium-grey;
+
+  &:after {
+    border-color: transparent transparent $v2-medium-grey transparent;
+  }
+}
+
+.ts-wrapper.dropdown-active.focus .ts-control {
+  border-color: $v2-medium-grey;
+}
+
+.dropdown-input-wrap {
+  .dropdown-input {
+    border: 1px solid $v2-light-grey;
+  }
+}
+
+.ts-dropdown .create:hover,
+.ts-dropdown #admin-menu li.selected a.create,
+#admin-menu li.selected .ts-dropdown a.create,
+.ts-dropdown .option:hover,
+.ts-dropdown #admin-menu li.selected a.option,
+#admin-menu li.selected .ts-dropdown a.option,
+.ts-dropdown .active {
+  background-color: $v2-blue;
+  color: $white;
+}
+
+.ts-dropdown.single {
+  border-color: $v2-medium-grey;
+}

app/webpacker/css/admin/v2/main.scss

@@ -1,13 +1,18 @@
 @import "variables.scss";
 @import "shared/typography.scss";
 
-body.admin.admin-v2 {
-  @import "navigation.scss";
-  @import "plugins/select2.scss";
-  @import "plugins/powertip.scss";
-  @import "plugins/flatpickr-customization.scss";
-  @import "shared/forms.scss";
-  @import "components/buttons.scss";
-  @import "components/tables.scss";
-  @import "components/progress.scss";
+@import "navigation.scss";
+@import "plugins/select2.scss";
+@import "plugins/powertip.scss";
+@import "plugins/flatpickr-customization.scss";
+@import "shared/forms.scss";
+@import "components/buttons.scss";
+@import "components/tables.scss";
+@import "components/progress.scss";
+@import "components/sidebar.scss";
+@import "components/tom_select.scss";
+@import "components/dropdown.scss";
+
+body {
+  background-color: $v2-body-bg;
 }

app/webpacker/css/admin/v2/navigation.scss

@@ -60,3 +60,25 @@
     color: $v2-medium-dark-grey;
   }
 }
+
+nav.menu ul li,
+nav.menu ul #admin-menu li,
+#admin-menu nav.menu ul li {
+  &.active {
+    a {
+      color: $v2-blue-dark;
+      border-bottom-color: $v2-blue-dark;
+    }
+  }
+
+  &.selected a,
+  a {
+    &:hover {
+      color: $v2-blue-dark;
+      border-bottom-color: $v2-blue-dark;
+      border-top-color: transparent;
+      border-right-color: transparent;
+      border-left-color: transparent;
+    }
+  }
+}

app/webpacker/css/admin/v2/plugins/powertip.scss

@@ -28,4 +28,31 @@
   &.sw:before {
     border-right-color: $v2-blue;
   }
+
+  &.edit,
+  &.green,
+  &.capture,
+  &.save,
+  &.add {
+    background-color: $v2-blue;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $v2-blue;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $v2-blue;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $v2-blue;
+    }
+    &.w:before {
+      border-left-color: $v2-blue;
+    }
+  }
 }

app/webpacker/css/admin/v2/plugins/select2.scss

@@ -2,7 +2,7 @@
 
 .select2-container {
   .select2-choice {
-    background-color: transparent;
+    background-color: white;
     border: 1px solid $v2-light-grey !important;
     color: $v2-medium-grey !important;
     padding-left: 5px;
@@ -37,6 +37,12 @@
 }
 
 .select2-container-multi {
+  &.select2-dropdown-open,
+  &.select2-container-active {
+    .select2-choices {
+      border-color: $v2-medium-grey !important;
+    }
+  }
   .select2-choices {
     border-color: $v2-medium-grey !important;
     .select2-search-choice {

app/webpacker/css/admin/v2/shared/forms.scss

@@ -25,11 +25,12 @@ fieldset {
 }
 
 fieldset label {
-  color: $v2-medium-grey;
+  color: $v2-medium-dark-grey;
 }
 
 fieldset legend {
   color: $v2-blue;
+  background-color: $v2-body-bg;
 }
 
 input[type="checkbox"],

app/webpacker/css/admin/v2/shared/typography.scss

@@ -9,10 +9,6 @@
   }
 }
 
-body.admin.admin-v2 {
-  color: $v2-body-grey;
-
-  a:not(.button) {
-    @include v2-link-color();
-  }
+a:not(.button) {
+  @include v2-link-color();
 }

app/webpacker/css/admin/v2/variables.scss

@@ -7,7 +7,7 @@ $v2-orange-lightest: #fcdbd4;
 
 $v2-dark-grey: #333333;
 $v2-medium-dark-grey: #444444;
-$v2-body-grey: #666666;
+$v2-body-grey: $color-4;
 $v2-medium-grey: #717171;
 $v2-medium-light-grey: #e6e6e6;
 $v2-light-grey: #e7e7e7;
@@ -21,3 +21,5 @@ $v2-green: #019854;
 $v2-green-light: #01cb70;
 
 $v2-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); // Default box shadow for actions stuff
+
+$v2-body-bg: #f7f9fa;

app/webpacker/css/darkswarm/_shop-filters.scss

@@ -161,13 +161,6 @@
   }
 }
 
-// singleLineSelectors directive provides a drop-down that can overlap
-// content. Ensure that the dropdown appears above the content.
-.filter-row {
-  position: relative;
-  z-index: 90;
-}
-
 .sticky-shop-filters-container {
   position: sticky;
   top: $topbar-height;

app/webpacker/packs/admin-styles-v2.scss

@@ -0,0 +1,6 @@
+@import '../css/admin/globals/palette';
+@include basicColorPalette(#FFFFFF, #69A95D, #14B6CC, #484848, #C1122B, #F27052);
+
+@import "../css/admin/all.scss";
+
+@import "../css/admin/v2/main.scss";

app/webpacker/packs/admin-styles.scss

@@ -1 +1,3 @@
+@import '../css/admin/globals/palette';
+
 @import "../css/admin/all.scss";

spec/system/admin/bulk_order_management_spec.rb

@@ -417,6 +417,7 @@ describe '
         let!(:distributor) { create(:distributor_enterprise) }
         let!(:oc1) { create(:simple_order_cycle, distributors: [distributor]) }
         let!(:oc2) { create(:simple_order_cycle, distributors: [distributor]) }
+        let!(:oc3) { create(:simple_order_cycle, distributors: [distributor]) }
         let!(:o1) {
           create(:order_with_distributor, state: 'complete', shipment_state: 'ready', completed_at: Time.zone.now,
                                           order_cycle: oc1 )
@@ -425,16 +426,27 @@ describe '
           create(:order_with_distributor, state: 'complete', shipment_state: 'ready', completed_at: Time.zone.now,
                                           order_cycle: oc2 )
         }
+        let!(:o3) {
+          create(:order_with_distributor, state: 'complete', shipment_state: 'ready', completed_at: Time.zone.now + 1.week,
+                                          order_cycle: oc3 )
+        }
+        let!(:o4) {
+          create(:order_with_distributor, state: 'complete', shipment_state: 'ready', completed_at: Time.zone.now + 2.weeks,
+                                          order_cycle: oc3 )
+        }
         let!(:li1) { create(:line_item_with_shipment, order: o1 ) }
         let!(:li2) { create(:line_item_with_shipment, order: o2 ) }
+        let!(:li3) { create(:line_item_with_shipment, order: o3 ) }
+        let!(:li4) { create(:line_item_with_shipment, order: o4 ) }
 
         before do
+          oc3.update!(orders_close_at: Time.zone.now + 2.weeks)
+          oc3.update!(orders_open_at: Time.zone.now + 1.week)
           visit_bulk_order_management
         end
 
         it "displays a select box for order cycles, which filters line items by the selected order cycle", retry: 3 do
-          expect(page).to have_selector "tr#li_#{li1.id}"
-          expect(page).to have_selector "tr#li_#{li2.id}"
+          displays_default_orders
           expect(page).to have_select2 'order_cycle_filter',
                                        with_options: OrderCycle.pluck(:name).unshift("All")
           select2_select oc1.name, from: "order_cycle_filter"
@@ -445,16 +457,45 @@ describe '
         end
 
         it "displays all line items when 'All' is selected from order_cycle filter", retry: 3 do
-          expect(page).to have_selector "tr#li_#{li1.id}"
-          expect(page).to have_selector "tr#li_#{li2.id}"
+          displays_default_orders
           select2_select oc1.name, from: "order_cycle_filter"
           page.find('.filter-actions .button.icon-search').click
           expect(page).to have_selector "tr#li_#{li1.id}"
           expect(page).to have_no_selector "tr#li_#{li2.id}"
           select2_select "All", from: "order_cycle_filter"
           page.find('.filter-actions .button.icon-search').click
+          displays_default_orders
+        end
+
+        it "selecting an OC pre-selects the date range from that OC" do
+          displays_default_orders
+          click_on_select2 oc3.name, from: "order_cycle_filter"
+          expect(find("input.datepicker").value).to eq "#{oc3.orders_open_at.strftime('%F')} to #{oc3.orders_close_at.strftime('%F')}"
+          displays_default_orders
+          click_on_select2 oc1.name, from: "order_cycle_filter"
+          displays_default_orders
+          expect(find("input.datepicker").value).to eq "#{oc1.orders_open_at.strftime('%F')} to #{oc1.orders_close_at.strftime('%F')}"
+          # only filters results after clicking the 'Filter Results' button
+          displays_default_orders
+          page.find('.filter-actions .button.icon-search').click
           expect(page).to have_selector "tr#li_#{li1.id}"
-          expect(page).to have_selector "tr#li_#{li2.id}"
+          expect(page).to_not have_selector "tr#li_#{li2.id}"
+          # only filters results after clicking the 'Clear Filters' button resets to display the default results
+          page.find("#clear_filters_button").click
+          displays_default_orders
+        end
+
+        it "allows combining the order cycle and the pre-selected date with a custom date" do
+          click_on_select2 oc3.name, from: "order_cycle_filter"
+          expect(find("input.datepicker").value).to eq "#{oc3.orders_open_at.strftime('%F')} to #{oc3.orders_close_at.strftime('%F')}"
+          page.find('.filter-actions .button.icon-search').click
+          expect(page).to have_selector "tr#li_#{li3.id}"
+          expect(page).to have_selector "tr#li_#{li4.id}"
+          find("input.datepicker").click # selecting a date range, within oc3
+          select_dates_from_daterangepicker(o4.completed_at - 1.day, o4.completed_at + 1.day)
+          page.find('.filter-actions .button.icon-search').click
+          expect(page).to have_selector "tr#li_#{li4.id}"
+          expect(page).to_not have_selector "tr#li_#{li3.id}"
         end
       end
 
@@ -992,4 +1033,9 @@ describe '
     visit spree.admin_bulk_order_management_path
     expect(page).to have_no_text 'Loading orders'
   end
+
+  def displays_default_orders
+    expect(page).to have_selector "tr#li_#{li1.id}"
+    expect(page).to have_selector "tr#li_#{li2.id}"
+  end
 end

spec/system/admin/product_import_spec.rb

@@ -136,6 +136,29 @@ describe "Product Import", js: true do
       expect(page).to have_no_selector 'input[type=submit][value="Save"]'
     end
 
+    it "displays info about inconsistent variant unit names, within the same product" do
+      csv_data = CSV.generate do |csv|
+        csv << ["name", "producer", "category", "on_hand", "price", "units", "unit_type", "variant_unit_name",
+                "shipping_category_id"]
+        csv << ["Carrots", "User Enterprise", "Vegetables", "50", "3.20", "250", "", "Bag", shipping_category_id_str]
+        csv << ["Carrots", "User Enterprise", "Vegetables", "50", "6.40", "500", "", "Big-Bag", shipping_category_id_str]
+      end
+      File.write('/tmp/test.csv', csv_data)
+
+      visit main_app.admin_product_import_path
+
+      expect(page).to have_content "Select a spreadsheet to upload"
+      attach_file 'file', '/tmp/test.csv'
+      click_button 'Upload'
+
+      proceed_to_validation
+      find('div.header-description', text: 'Items contain errors').click
+      expect(page).to have_content "Variant_unit_name must be the same for products with the same name"
+      expect(page).to have_content "Imported file contains invalid entries"
+
+      expect(page).to have_no_selector 'input[type=submit][value="Save"]'
+    end
+
     it "handles saving of named tax and shipping categories" do
       csv_data = CSV.generate do |csv|
         csv << ["name", "producer", "category", "on_hand", "price", "units", "unit_type",
@@ -382,36 +405,67 @@ describe "Product Import", js: true do
                                  with: "3.2"
     end
 
-    it "handles the Items unit for inventory import" do
-      product = create(:simple_product, supplier: enterprise, on_hand: nil, name: 'Aubergine',
-                                        unit_value: '1', variant_unit_scale: nil, variant_unit: "items", variant_unit_name: "Bag")
-      csv_data = CSV.generate do |csv|
-        csv << ["name", "distributor", "producer", "category", "on_hand", "price", "unit_type",
-                "units", "on_demand", "variant_unit_name"]
-        csv << ["Aubergine", "Another Enterprise", "User Enterprise", "Vegetables", "", "3.3",
-                "kg", "1", "true", "Bag"]
+    describe "Item type products" do
+      let!(:product) {
+        create(:simple_product, supplier: enterprise, on_hand: nil, name: 'Aubergine',
+                                unit_value: '1', variant_unit_scale: nil, variant_unit: "items", variant_unit_name: "Bag")
+      }
+      it "are sucessfully imported to inventory" do
+        csv_data = CSV.generate do |csv|
+          csv << ["name", "distributor", "producer", "category", "on_hand", "price", "unit_type",
+                  "units", "on_demand", "variant_unit_name"]
+          csv << ["Aubergine", "Another Enterprise", "User Enterprise", "Vegetables", "", "3.3",
+                  "kg", "1", "true", "Bag"]
+        end
+
+        File.write('/tmp/test.csv', csv_data)
+        visit main_app.admin_product_import_path
+        select I18n.t('admin.product_import.index.inventories'), from: "settings_import_into"
+        attach_file 'file', '/tmp/test.csv'
+        click_button 'Upload'
+        proceed_to_validation
+        expect(page).to have_selector '.item-count', text: "1"
+        expect(page).to have_no_selector '.invalid-count'
+        expect(page).to have_selector '.inv-create-count', text: '1'
+        save_data
+
+        expect(page).to have_selector '.inv-created-count', text: '1'
+
+        visit main_app.admin_inventory_path
+
+        expect(page).to have_content "Aubergine"
+        expect(page).to have_select "variant-overrides-#{Spree::Product.find_by(name: 'Aubergine').variants.first.id}-on_demand",
+                                    selected: "Yes"
+        expect(page).to have_input "variant-overrides-#{Spree::Product.find_by(name: 'Aubergine').variants.first.id}-price",
+                                   with: "3.3"
       end
 
-      File.write('/tmp/test.csv', csv_data)
-      visit main_app.admin_product_import_path
-      select I18n.t('admin.product_import.index.inventories'), from: "settings_import_into"
-      attach_file 'file', '/tmp/test.csv'
-      click_button 'Upload'
-      proceed_to_validation
-      expect(page).to have_selector '.item-count', text: "1"
-      expect(page).to have_no_selector '.invalid-count'
-      expect(page).to have_selector '.inv-create-count', text: '1'
-      save_data
+      it "displays the appropriate error message, when variant unit names are inconsistent" do
+        csv_data = CSV.generate do |csv|
+          csv << ["name", "distributor", "producer", "category", "on_hand", "price", "unit_type",
+                  "units", "on_demand", "variant_unit_name"]
+          csv << ["Aubergine", "Another Enterprise", "User Enterprise", "Vegetables", "", "3.3",
+                  "kg", "1", "true", "Bag"]
+          csv << ["Aubergine", "Another Enterprise", "User Enterprise", "Vegetables", "", "6.6",
+                  "kg", "1", "true", "Big-Bag"]
+        end
 
-      expect(page).to have_selector '.inv-created-count', text: '1'
+        File.write('/tmp/test.csv', csv_data)
+        visit main_app.admin_product_import_path
+        select I18n.t('admin.product_import.index.inventories'), from: "settings_import_into"
+        attach_file 'file', '/tmp/test.csv'
+        click_button 'Upload'
+        proceed_to_validation
 
-      visit main_app.admin_inventory_path
+        find('div.header-description', text: 'Items contain errors').click
+        expect(page).to have_content "Variant_unit_name must be the same for products with the same name"
+        expect(page).to have_content "Imported file contains invalid entries"
+        expect(page).to have_no_selector 'input[type=submit][value="Save"]'
 
-      expect(page).to have_content "Aubergine"
-      expect(page).to have_select "variant-overrides-#{Spree::Product.find_by(name: 'Aubergine').variants.first.id}-on_demand",
-                                  selected: "Yes"
-      expect(page).to have_input "variant-overrides-#{Spree::Product.find_by(name: 'Aubergine').variants.first.id}-price",
-                                 with: "3.3"
+        visit main_app.admin_inventory_path
+
+        expect(page).not_to have_content "Aubergine"
+      end
     end
 
     it "handles on_demand and on_hand validations with inventory" do

spec/system/consumer/caching/darkswarm_caching_spec.rb

@@ -47,7 +47,7 @@ describe "Darkswarm data caching", js: true, caching: true do
 
       toggle_filters
 
-      within "#hubs .filter-row" do
+      within "#hubs .filter-box" do
         expect(page).to have_content taxon.name
         expect(page).to have_content property.presentation
       end
@@ -64,7 +64,7 @@ describe "Darkswarm data caching", js: true, caching: true do
       visit shops_path
 
       # Wait for /shops page to load properly before checking for new timestamps
-      expect(page).to_not have_selector ".row.filter-row"
+      expect(page).to_not have_selector ".row.filter-box"
 
       taxon_timestamp2 = CacheService.latest_timestamp_by_class(Spree::Taxon)
       expect_cached "views/#{CacheService::FragmentCaching.ams_all_taxons[0]}"
@@ -77,7 +77,7 @@ describe "Darkswarm data caching", js: true, caching: true do
 
       toggle_filters
 
-      within "#hubs .filter-row" do
+      within "#hubs .filter-box" do
         expect(page).to have_content "Changed Taxon"
         expect(page).to have_content "Changed Property"
       end

yarn.lock

@@ -4833,9 +4833,9 @@ human-signals@^2.1.0:
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
 husky@^8.0.0:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.2.tgz#5816a60db02650f1f22c8b69b928fd6bcd77a236"
-  integrity sha512-Tkv80jtvbnkK3mYWxPZePGFpQ/tT3HNSs/sasF9P2YfkMezDl3ON37YN6jUUI4eTg5LcyVynlb6r4eyvOmspvg==
+  version "8.0.3"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
+  integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
 
 iconv-lite@0.4.24:
   version "0.4.24"
@@ -5799,9 +5799,9 @@ jquery-ui@1.13.0:
   integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
 
 js-big-decimal@^1.3.5:
-  version "1.3.13"
-  resolved "https://registry.yarnpkg.com/js-big-decimal/-/js-big-decimal-1.3.13.tgz#dc41fdda66ecebdc28e145ce82966b8974633b53"
-  integrity sha512-8kCyYBYRG1Olt8AArrCE/f7h5CdOf4+CIx/AwSEiR7fUoR6rdPQreEuZuAEBiRBYozbfhMXTTexW0/BROsqOOA==
+  version "1.3.15"
+  resolved "https://registry.yarnpkg.com/js-big-decimal/-/js-big-decimal-1.3.15.tgz#bb7a3597028cbcd1f0c657c867a287ec8a5f6236"
+  integrity sha512-M2fwKfclwyz8pjz3Gw7GOoZVChLUhbcdsJs+d6dz8jW1WMydKVGFeBaVfh/yX4+8N6BI9IHZxfNAM+piLhYz/w==
 
 js-tokens@^4.0.0:
   version "4.0.0"
@@ -5880,9 +5880,9 @@ json3@^3.3.3:
   integrity sha512-c7/8mbUsKigAbLkD5B010BK4D9LZm7A1pNItkEwiUZRpIN66exu/e7YQWysGun+TRKaJp8MhemM+VkfWv42aCA==
 
 json5@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe"
-  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.2.tgz#63d98d60f21b313b77c4d6da18bfa69d80e1d593"
+  integrity sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==
   dependencies:
     minimist "^1.2.0"
 
@@ -6317,16 +6317,11 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0:
+minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18"
   integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==
 
-minimist@^1.2.5:
-  version "1.2.6"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
-  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
-
 minipass-collect@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/minipass-collect/-/minipass-collect-1.0.2.tgz#22b813bf745dc6edba2576b940022ad6edc8c617"