From 48f1c65a918342e487a43b2f7811332ac4b53146 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 14:33:52 +0200
Subject: [PATCH 01/46] Include `dashboard_item` into admin_v3

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../admin_v3/dashboard/dashboard_item.scss    | 240 ++++++++++++++++++
 2 files changed, 241 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/dashboard/dashboard_item.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index ab285437bf..07f534ef68 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -88,7 +88,7 @@
 @import "../admin/animations";
 @import "../admin/change_type_form";
 @import "../admin/customers";
-@import "../admin/dashboard_item";
+@import "dashboard/dashboard_item"; // admin_v3
 @import "../admin/dashboard-single-ent";
 @import "../admin/dialog";
 @import "../admin/disabled";
diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
new file mode 100644
index 0000000000..67498fa352
--- /dev/null
+++ b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
@@ -0,0 +1,240 @@
+div.dashboard_item {
+  margin-bottom: 30px;
+
+  .centered {
+    text-align: center;
+  }
+
+  .text-icon {
+    margin-top: 8px;
+    display: block;
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+    padding: 0px 6px;
+    border-radius: 10px;
+
+    &.green {
+      background-color: $spree-green;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+
+    &.orange {
+      background-color: $color-warning;
+    }
+  }
+
+  div.header {
+    height: 50px;
+    border-radius: 6px 6px 0px 0px;
+    border: 1px solid $spree-blue;
+    position: relative;
+
+    a[ofn-with-tip] {
+      position: absolute;
+      right: 5px;
+      bottom: 5px;
+    }
+
+    &.red {
+      border-color: $color-warning;
+      border-width: 3px;
+
+      h3 {
+        color: $color-warning;
+      }
+    }
+
+    &.orange {
+      border-color: $color-warning;
+      border-width: 3px;
+
+      h3 {
+        color: $color-warning;
+      }
+    }
+
+    h3.alpha {
+      height: 100%;
+      padding: 10px 5px 0px 3%;
+    }
+
+    a {
+      border-radius: 0px 4px 0px 0px;
+      height: 100%;
+      padding: 15px 2px 0px 2px;
+    }
+  }
+
+  .tabs {
+    height: 30px;
+    border: solid $spree-blue;
+    border-width: 0px 0px 1px 0px;
+    margin-top: 3px;
+
+    div.dashboard_tab {
+      cursor: pointer;
+      height: 30px;
+      color: #fff;
+      background-color: $spree-blue;
+      padding: 5px 5px 0px 5px;
+      text-align: center;
+      font-weight: bold;
+      border: solid $spree-blue;
+      border-width: 1px 1px 0px 1px;
+
+      &:hover {
+        background-color: $spree-green;
+      }
+
+      &.selected {
+        color: $spree-blue;
+        background-color: #fff;
+      }
+    }
+  }
+
+  .list {
+    max-height: 250px;
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+
+  .list-title {
+    border: solid $spree-blue;
+    border-width: 0px 1px 0px 1px;
+
+    span {
+      font-size: 105%;
+      padding: 10px 0px;
+      font-weight: bold;
+    }
+
+    span.alpha {
+      padding: 10px 2px 10px 5%;
+    }
+  }
+
+  .list-item {
+    border: solid $spree-blue;
+    border-width: 0px 1px 0px 1px;
+    height: 38px;
+
+    span.alpha {
+      font-weight: bold;
+      margin-left: -3px;
+      padding: 10px 2px 0px 5%;
+    }
+
+    span.omega {
+      padding-right: 13px;
+      margin-right: -3px;
+      text-align: right;
+    }
+
+    .icon-arrow-right {
+      padding-top: 6px;
+      font-size: 20px;
+    }
+
+    .icon-warning-sign {
+      color: $color-warning;
+      font-size: 30px;
+    }
+
+    .icon-remove-sign {
+      color: $color-warning;
+      font-size: 30px;
+    }
+
+    .icon-ok-sign {
+      color: $spree-green;
+      font-size: 30px;
+    }
+
+    &.orange {
+      color: $color-warning;
+      border: solid $color-warning;
+    }
+
+    &.red {
+      color: $color-warning;
+      border: solid $color-warning;
+    }
+
+    &.orange,
+    &.red {
+      border-width: 0px 3px 0px 3px;
+    }
+
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: $spree-light-blue;
+    }
+
+    &.even,
+    &.odd {
+      &:hover {
+        color: #ffffff;
+        background-color: $spree-green;
+
+        .icon-arrow-right {
+          color: #fff;
+        }
+
+        .icon-remove-sign {
+          color: #fff;
+        }
+
+        .icon-warning-sign {
+          color: #fff;
+        }
+
+        .icon-ok-sign {
+          color: #fff;
+        }
+
+        .text-icon {
+          &.green {
+            color: $spree-green;
+            background-color: #fff;
+          }
+        }
+      }
+    }
+  }
+
+  a.button {
+    color: #fff;
+    font-size: 110%;
+    font-weight: bold;
+    text-align: center;
+
+    &.orange {
+      background-color: $color-warning;
+    }
+
+    &.blue {
+      background-color: $spree-blue;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+
+    &:hover {
+      background-color: $spree-green;
+    }
+
+    &.bottom {
+      border-radius: 0px 0px 6px 6px;
+      padding: 15px 15px;
+    }
+  }
+}

From 03d5f8acc4171fc68d524b2cea38a18e22315a62 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 14:35:09 +0200
Subject: [PATCH 02/46] No need to specify padding when having a line height

---
 app/webpacker/css/admin_v3/dashboard/dashboard_item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
index 67498fa352..d6f8f5bd7f 100644
--- a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
+++ b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
@@ -65,6 +65,7 @@ div.dashboard_item {
     a {
       border-radius: 0px 4px 0px 0px;
       height: 100%;
+      line-height: 100%;
       padding: 15px 2px 0px 2px;
     }
   }
@@ -234,7 +235,6 @@ div.dashboard_item {
 
     &.bottom {
       border-radius: 0px 0px 6px 6px;
-      padding: 15px 15px;
     }
   }
 }

From b8406be4b92267471be8df71c9ae0ac914a08961 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 14:44:44 +0200
Subject: [PATCH 03/46] Add trix editor to admin_v3 css

That was an omission when installing trix
---
 app/webpacker/css/admin_v3/all.scss     | 1 +
 app/webpacker/packs/admin-style-v3.scss | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 07f534ef68..fe5a8ee230 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -129,3 +129,4 @@
 
 @import "app/components/help_modal_component/help_modal_component";
 @import "app/components/confirm_modal_component/confirm_modal_component";
+@import "app/webpacker/css/admin/trix.scss";
diff --git a/app/webpacker/packs/admin-style-v3.scss b/app/webpacker/packs/admin-style-v3.scss
index 4cbab328cd..170fae42e3 100644
--- a/app/webpacker/packs/admin-style-v3.scss
+++ b/app/webpacker/packs/admin-style-v3.scss
@@ -1,3 +1,5 @@
 @import "../css/admin_v3/all.scss";
 
 @import "../css/admin_v3/components/spinner.scss";
+
+@import "../../../node_modules/trix/dist/trix.css";

From 3a67f5c9d76ff499ab6b99c12b0174edbc21d694 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 15:22:12 +0200
Subject: [PATCH 04/46] Integrate `select2` to admin_v3

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../css/admin_v3/components/select2.scss      | 63 +++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/select2.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index fe5a8ee230..0c4b414587 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -111,7 +111,7 @@
 @import "../admin/question-mark-tooltip";
 @import "../admin/relationships";
 @import "../admin/reports";
-@import "../admin/select2";
+@import "components/select2"; // admin_v
 @import "../admin/sidebar-item";
 @import "../admin/side_menu";
 @import "../admin/tables";
diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
new file mode 100644
index 0000000000..f076e28335
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -0,0 +1,63 @@
+.select2-container {
+  .select2-choice {
+    .select2-search-choice-close {
+      display: none !important;
+    }
+    .select2-arrow {
+      width: 22px;
+      border: none;
+      background-image: none;
+      background-color: transparent;
+    }
+  }
+
+  &.light {
+    .select2-choice {
+      background-color: #ffffff;
+      font-weight: normal;
+      color: $spree-blue !important;
+      border: 1px solid $color-border !important;
+    }
+
+    &:hover,
+    &.select2-container-active {
+      .select2-choice {
+        background-color: #ffffff !important;
+        border: 1px solid $spree-green !important;
+
+        .select2-arrow {
+          &:before {
+            color: $spree-blue;
+          }
+        }
+      }
+    }
+  }
+
+  &.select2-container-multi {
+    .select2-search-field {
+      max-height: 20px;
+      input {
+        padding: 0 !important;
+        margin: 0 0 0 5px !important;
+      }
+    }
+    .select2-search-choice {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 7px;
+
+      .select2-search-choice-close {
+        position: relative;
+        order: -1;
+        width: auto;
+        left: 0;
+        top: 0;
+        margin: 0;
+        padding: 0;
+        font-size: 100% !important;
+      }
+    }
+  }
+}

From e5086ce0579ef82017a7f15fa0de25a0f02ed540 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 15:22:29 +0200
Subject: [PATCH 05/46] Adjust colors for select2 and remove useless ones

---
 app/webpacker/css/admin_v3/globals/variables.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index 7706a4073d..eb06e5e998 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -65,10 +65,8 @@ $color-action-mail-bg:           very-light($color-success, 5  ) !default;
 $color-action-mail-brd:          very-light($color-success, 20 ) !default;
 
 // Select2 select field colors
-$color-sel-bg:                   $teal !default;
-$color-sel-text:                 $white !default;
-$color-sel-hover-bg:             lighten($color-sel-bg, 2) !default;
-$color-sel-hover-text:           $white !default;
+$color-sel-bg:                   $lighter-grey !default;
+$color-sel-hover-bg:             $lighter-grey !default;
 
 // Text inputs styles
 $color-txt-brd:                  $color-border !default;

From 98f9303c99d4c0617706873e15010626a09df2b0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 15:40:21 +0200
Subject: [PATCH 06/46] Tweak colors, size, ... for select2 to looks like
 tom-select

One day, we'll remplace select2 by tom-select
---
 .../css/admin_v3/components/select2.scss      | 28 ++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index f076e28335..5c60863be1 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -1,13 +1,34 @@
 .select2-container {
   .select2-choice {
+    height: $btn-relaxed-height;
+    padding: 10px 15px;
+    color: $near-black !important;
+
     .select2-search-choice-close {
       display: none !important;
     }
     .select2-arrow {
-      width: 22px;
+      width: 27px; // adjust to align with tom-select
       border: none;
       background-image: none;
       background-color: transparent;
+
+      b {
+        padding-top: 11px; // adjust to align with tom-select
+        &:before {
+          content: " ";
+          display: block;
+          position: absolute;
+          top: 50%;
+          right: 15px;
+          margin-top: -3px;
+          width: 0;
+          height: 0;
+          border-style: solid;
+          border-width: 5px 5px 0 5px;
+          border-color: #808080 transparent transparent transparent;
+        }
+      }
     }
   }
 
@@ -61,3 +82,8 @@
     }
   }
 }
+
+.select2-results li.select2-highlighted .select2-result-label,
+.select2-results li.select2-highlighted .select2-result-label h6 {
+  color: $near-black !important;
+}

From 1b9a7aa81eb1818b100ff80b9f5c703b2e1e60ab Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 15:51:13 +0200
Subject: [PATCH 07/46] Adjust height, border and background colors for inputs

---
 app/webpacker/css/admin_v3/shared/forms.scss | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
index b9abfd6068..ed2675395b 100644
--- a/app/webpacker/css/admin_v3/shared/forms.scss
+++ b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -1,5 +1,13 @@
 $text-inputs: "input[type=text], input[type=password], input[type=email], input[type=url], input[type=tel]";
 
+#{$text-inputs},
+input[type="date"],
+input[type="datetime"],
+input[type="time"],
+input[type="number"] {
+  height: $btn-relaxed-height;
+}
+
 #{$text-inputs},
 input[type="date"],
 input[type="datetime"],
@@ -9,9 +17,10 @@ textarea,
 fieldset {
   @include border-radius($border-radius);
   padding: $vpadding-txt $hpadding-txt;
-  border: 1px solid $color-txt-brd;
+  border: 1px solid $lighter-grey;
   color: $color-txt-text;
   font-size: 90%;
+  background-color: $lighter-grey;
 
   &:focus {
     outline: none;

From f2941f9275be4ec6d1a7b9167cc5f99736829a7b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 16:32:19 +0200
Subject: [PATCH 08/46] form `legend` are red

---
 app/webpacker/css/admin_v3/shared/forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/shared/forms.scss b/app/webpacker/css/admin_v3/shared/forms.scss
index ed2675395b..87cbe94a82 100644
--- a/app/webpacker/css/admin_v3/shared/forms.scss
+++ b/app/webpacker/css/admin_v3/shared/forms.scss
@@ -150,7 +150,7 @@ fieldset {
 
   legend {
     background-color: $color-1;
-    color: $color-2;
+    color: $red;
     font-size: 14px;
     font-weight: 600;
     text-align: center;

From 5df211137e8583fc47ebcce3e643b86be164f389 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 17:24:55 +0200
Subject: [PATCH 09/46] Tweak stimulus pagination (used on orders) to be up to
 date

---
 .../shared/_stimulus_pagination.html.haml     | 22 +++++++++++++------
 .../css/admin_v3/components/pagination.scss   | 19 ++++++++++++++--
 2 files changed, 32 insertions(+), 9 deletions(-)

diff --git a/app/views/admin/shared/_stimulus_pagination.html.haml b/app/views/admin/shared/_stimulus_pagination.html.haml
index e7e97fc643..e7b4b9960a 100644
--- a/app/views/admin/shared/_stimulus_pagination.html.haml
+++ b/app/views/admin/shared/_stimulus_pagination.html.haml
@@ -2,21 +2,29 @@
 
 .pagination{ "data-controller": "search" }
   - if pagy.prev
-    %button{ data: { action: 'click->search#changePage', page: pagy.prev } }!= pagy_t('pagy.nav.prev')
+    %button.page.prev{ data: { action: 'click->search#changePage', page: pagy.prev } }
+      - if feature?(:admin_style_v3, spree_current_user)
+        %i.icon-chevron-left{ data: { action: 'click->search#changePage', page: pagy.prev } }
+      - else
+        != pagy_t('pagy.nav.prev')
   - else
-    %button.disabled{disabled: "disabled"}!= pagy_t('pagy.nav.prev')
+    %button.page.disabled{disabled: "disabled"}!= pagy_t('pagy.nav.prev')
 
   - pagy.series.each do |item|                      # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36]
     - if item.is_a?(Integer)                        # page link
-      %button{ data: { action: 'click->search#changePage', page: item } }= item
+      %button.page{ data: { action: 'click->search#changePage', page: item } }= item
 
     - elsif item.is_a?(String)                      # current page
-      %button.active= item
+      %button.page.current.active= item
 
     - elsif item == :gap                            # page gap
-      %span.pagination-ellipsis!= pagy_t('pagy.nav.gap')
+      %span.page.gap.pagination-ellipsis!= pagy_t('pagy.nav.gap')
 
   - if pagy.next
-    %button{ data: { action: 'click->search#changePage', page: pagy.next } }!= pagy_t('pagy.nav.next')
+    %button.page.next{ data: { action: 'click->search#changePage', page: pagy.next } }
+      - if feature?(:admin_style_v3, spree_current_user)
+        %i.icon-chevron-right{ data: { action: 'click->search#changePage', page: pagy.next } }
+      - else
+        != pagy_t('pagy.nav.next')
   - else
-    %button.disabled.pagination-next{disabled: "disabled"}!= pagy_t('pagy.nav.next')
+    %button.page.disabled.pagination-next{disabled: "disabled"}!= pagy_t('pagy.nav.next')
diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss
index 538cd8e6c1..82642f54a6 100644
--- a/app/webpacker/css/admin_v3/components/pagination.scss
+++ b/app/webpacker/css/admin_v3/components/pagination.scss
@@ -9,15 +9,20 @@
   justify-content: center;
   gap: 8px;
 
+  button.page,
   .page {
-    width: 40px;
-    line-height: 40px;
+    width: $btn-relaxed-height;
+    line-height: $btn-relaxed-height;
+    height: $btn-relaxed-height;
+    padding: 0;
+    margin: 0;
     text-align: center;
     display: inline-block;
     text-align: center;
     background-color: $color-1;
     @include defaultBoxShadow;
     border-radius: 4px;
+    border: none;
     color: $color-8;
     font-weight: 600;
 
@@ -31,6 +36,10 @@
       color: $white;
     }
 
+    &.disabled {
+      display: none;
+    }
+
     &.prev {
       margin-right: 28px; // 28+8 (the gap) = 36px : the space between the arrows and the numbers
       & > i {
@@ -45,9 +54,11 @@
       }
     }
 
+    &:hover:not(.gap):not(.disabled),
     &[href]:hover {
       background-color: $color-5;
       color: $white;
+      border: none;
     }
 
     &.gap {
@@ -55,6 +66,10 @@
       box-shadow: none;
       width: auto;
     }
+
+    &:active {
+      border: none;
+    }
   }
 
   button {

From ccc59926f177f2b8af738c0672bd3ef2e1366b8b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 5 Sep 2023 17:36:23 +0200
Subject: [PATCH 10/46] Update button background color when hovering on
 dashboard

---
 app/webpacker/css/admin_v3/dashboard/dashboard_item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
index d6f8f5bd7f..136510a91c 100644
--- a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
+++ b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
@@ -230,7 +230,7 @@ div.dashboard_item {
     }
 
     &:hover {
-      background-color: $spree-green;
+      background-color: $color-10;
     }
 
     &.bottom {

From 6ee48a04fc66b56ab912bae60bf20542a49f95bf Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 6 Sep 2023 10:17:16 +0200
Subject: [PATCH 11/46] Remove file `admin/plugins/select2` for adminV3 and
 copy content into

already used file: `components/select2`
---
 app/webpacker/css/admin_v3/all.scss           |   1 -
 .../css/admin_v3/components/select2.scss      | 190 ++++++++++++++++++
 2 files changed, 190 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 0c4b414587..04c588d3ee 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -40,7 +40,6 @@
 @import "../admin/plugins/flatpickr-customization";
 @import "../admin/plugins/powertip";
 @import "../admin/plugins/jstree";
-@import "../admin/plugins/select2";
 
 @import "../admin/sections/orders";
 @import "../admin/sections/products";
diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index 5c60863be1..ad7fec81a4 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -1,3 +1,193 @@
+.select2-container {
+  &:hover .select2-choice,
+  &.select2-container-active .select2-choice {
+    background-color: $color-sel-hover-bg !important;
+    border-color: $color-sel-hover-bg !important;
+  }
+  .select2-choice {
+    background-image: none !important;
+    background-color: $color-sel-bg;
+    border: none !important;
+    box-shadow: none !important;
+    @include border-radius($border-radius);
+    color: $color-1 !important;
+    font-size: 90%;
+    height: 31px;
+    line-height: inherit !important;
+    padding: 5px 15px 7px;
+
+    span {
+      display: block;
+      padding: 2px;
+    }
+
+    .select2-search-choice-close {
+      background-image: none !important;
+      font-size: 100% !important;
+      @extend .icon-remove;
+      @extend [class^="icon-"], :before;
+      margin-top: 2px;
+    }
+  }
+
+  &.select2-container-active {
+    .select2-choice {
+      box-shadow: none !important;
+    }
+
+    &.select2-dropdown-open .select2-choice div b {
+      @extend .icon-caret-up;
+    }
+  }
+}
+
+.select2-drop {
+  border-color: $color-sel-hover-bg;
+  box-shadow: none !important;
+  z-index: 1000000;
+
+  &.select2-drop-above {
+    border-color: $color-sel-hover-bg;
+  }
+}
+
+.select2-search {
+  @extend .icon-search;
+
+  font-size: 100%;
+  color: darken($color-border, 15);
+  padding: 0 9px 0 0;
+
+  &:before {
+    @extend [class^="icon-"], :before;
+
+    position: absolute;
+    top: 13px;
+    left: 13px;
+  }
+
+  input {
+    @extend input, [type="text"];
+
+    padding: 6px 0 6px 25px;
+    margin: 5px 0 0 5px;
+    font-family: $base-font-family;
+    font-size: 90%;
+    box-shadow: none;
+    background-image: none;
+  }
+}
+
+.select2-container .select2-choice .select2-arrow {
+  background-image: none;
+  background: transparent;
+  border: 0;
+
+  b {
+    padding-top: 7px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: none;
+    font-family: FontAwesome;
+    font-weight: 200 !important;
+
+    &:before {
+      content: "\f0d7";
+    }
+  }
+}
+
+.select2-results {
+  padding-left: 0 !important;
+
+  li {
+    font-size: 85% !important;
+
+    &.select2-highlighted {
+      .select2-result-label {
+        &,
+        h6 {
+          color: $color-1 !important;
+        }
+      }
+    }
+
+    .select2-result-label {
+      color: $color-body-text;
+      min-height: 22px;
+      clear: both;
+      overflow: auto;
+    }
+
+    &.select2-no-results,
+    &.select2-searching {
+      padding: 5px;
+      background-color: transparent;
+      color: $color-body-text;
+      text-align: center;
+      font-weight: $font-weight-bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .select2-highlighted {
+    background-color: $color-sel-bg;
+  }
+}
+
+.select2-container-multi {
+  &.select2-container-active,
+  &.select2-dropdown-open {
+    .select2-choices {
+      border-color: $color-sel-hover-bg !important;
+      box-shadow: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .select2-choices {
+    @extend input, [type="text"];
+    padding: 6px 3px 3px 3px;
+    box-shadow: none;
+    background-image: none !important;
+
+    .select2-search-choice {
+      @include border-radius($border-radius);
+      margin: 0 0 3px 3px;
+      background-image: none;
+      background-color: $color-sel-bg;
+      border: none;
+      box-shadow: none;
+      color: $color-1 !important;
+      font-size: 85%;
+
+      &:hover {
+        background-color: $color-sel-hover-bg;
+      }
+
+      .select2-search-choice-close {
+        background-image: none !important;
+        font-size: 85% !important;
+        @extend .icon-remove;
+        @extend [class^="icon-"], :before;
+        margin-left: 2px;
+        color: $color-1;
+      }
+    }
+  }
+}
+
+label .select2-container {
+  margin-top: -6px;
+  .select2-choice {
+    span {
+      text-transform: none;
+      font-weight: normal;
+    }
+  }
+}
+
 .select2-container {
   .select2-choice {
     height: $btn-relaxed-height;

From 549e9259d99f4f1cdfbac61269f60024e7ed465d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 6 Sep 2023 10:17:24 +0200
Subject: [PATCH 12/46] Fix comment

---
 app/webpacker/css/admin_v3/all.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 04c588d3ee..b7c74dd731 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -110,7 +110,7 @@
 @import "../admin/question-mark-tooltip";
 @import "../admin/relationships";
 @import "../admin/reports";
-@import "components/select2"; // admin_v
+@import "components/select2"; // admin_v3
 @import "../admin/sidebar-item";
 @import "../admin/side_menu";
 @import "../admin/tables";

From 99d0b3f09283852920c708716928edb8284f8d86 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 6 Sep 2023 10:28:39 +0200
Subject: [PATCH 13/46] Prefer to use `color-btn-hover-bg` var instead of
 `color-10`

The variable name is easier to understand.
---
 app/webpacker/css/admin_v3/components/buttons.scss       | 4 ++--
 app/webpacker/css/admin_v3/dashboard/dashboard_item.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 9b77e318d2..bfb23abc67 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -48,8 +48,8 @@ button:not(.plain):not(.trix-button),
 
     &:hover {
       background-color: $color-11;
-      border: 1px solid $color-10;
-      color: $color-10;
+      border: 1px solid $color-btn-hover-bg;
+      color: $color-btn-hover-bg;
     }
 
     &:active,
diff --git a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
index 136510a91c..3316704ef1 100644
--- a/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
+++ b/app/webpacker/css/admin_v3/dashboard/dashboard_item.scss
@@ -230,7 +230,7 @@ div.dashboard_item {
     }
 
     &:hover {
-      background-color: $color-10;
+      background-color: $color-btn-hover-bg;
     }
 
     &.bottom {

From aacdeac1e5e97e6dd1a3c28264f6250664108b93 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:15:04 +0200
Subject: [PATCH 14/46] Move dropdown into admin_v3 context

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../css/admin_v3/components/dropdown.scss     | 242 ++++++++++++++++++
 2 files changed, 243 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/dropdown.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index b7c74dd731..6e00cfe2fb 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -91,7 +91,7 @@
 @import "../admin/dashboard-single-ent";
 @import "../admin/dialog";
 @import "../admin/disabled";
-@import "../admin/dropdown";
+@import "components/dropdown"; // admin_v3
 @import "../admin/enterprise_index_panels";
 @import "../admin/enterprises";
 @import "../admin/filters_and_controls";
diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin_v3/components/dropdown.scss
new file mode 100644
index 0000000000..64c98e7ddf
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/dropdown.scss
@@ -0,0 +1,242 @@
+#content-header .ofn-drop-down {
+  border: none;
+  background-color: $spree-blue;
+  color: #fff;
+  float: none;
+  margin-left: 3px;
+}
+
+.ofn-drop-down {
+  .dropdown-content {
+    display: none;
+  }
+
+  .toggle-off {
+    display: none;
+  }
+
+  &:active:not(.disabled),
+  &:focus:not(.disabled) {
+    .dropdown-content {
+      display: inline-block;
+    }
+  }
+}
+
+.ofn-drop-down:hover,
+.ofn-drop-down.expanded {
+  border: 1px solid #adadad;
+  color: #575757;
+}
+
+@mixin ofn-drop-down-style {
+  padding: 7px 15px;
+  border-radius: 3px;
+  border: 1px solid #d4d4d4;
+  background-color: #f5f5f5;
+  display: block;
+  color: #828282;
+  cursor: pointer;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: center;
+  margin-right: 10px;
+
+  &.disabled {
+    opacity: 0.5;
+
+    &:hover {
+      cursor: default;
+      border-color: #d4d4d4;
+      color: #828282;
+    }
+  }
+}
+
+.ofn-drop-down-with-prepend {
+  display: flex;
+
+  &.right {
+    float: right;
+  }
+
+  .ofn-drop-down {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .ofn-drop-down-prepend {
+    @include ofn-drop-down-style;
+
+    border-right: none;
+    margin-left: 0;
+    margin-right: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    cursor: default;
+  }
+}
+
+.ofn-drop-down {
+  @include ofn-drop-down-style;
+
+  position: relative;
+  float: left;
+
+  &.right {
+    float: right;
+    margin-right: 0px;
+    margin-left: 10px;
+  }
+
+  &:hover,
+  &.expanded {
+    border: 1px solid #adadad;
+    color: #575757;
+  }
+
+  > span {
+    width: auto;
+    text-transform: uppercase;
+    font-size: 85%;
+    font-weight: 600;
+  }
+
+  .menu {
+    margin-top: 1px;
+    position: absolute;
+    float: none;
+    top: 100%;
+    left: 0px;
+    padding: 5px 0px;
+    border: 1px solid #adadad;
+    background-color: #ffffff;
+    box-shadow: 1px 3px 10px #888888;
+    z-index: 100;
+    white-space: nowrap;
+
+    .filter {
+      padding-left: 5px;
+      padding-right: 5px;
+      position: relative;
+
+      > input[type="text"] {
+        border: 1px solid rgba(18, 18, 18, 0.1);
+        width: 100%;
+        padding-left: 30px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-size: 13px;
+        color: #454545;
+      }
+
+      &:after {
+        content: "\f002";
+        font-family: FontAwesome;
+        position: absolute;
+        left: 15px;
+        top: 13px;
+        color: #454545;
+      }
+    }
+
+    .menu_item {
+      margin: 0px;
+      padding: 2px 10px;
+      color: #454545;
+      text-align: left;
+      display: block;
+
+      .check {
+        display: inline-block;
+        text-align: center;
+        width: 40px;
+        &:before {
+          content: "\00a0";
+        }
+      }
+
+      .name {
+        display: inline-block;
+        padding: 0px 15px 0px 0px;
+      }
+
+      &.selected {
+        .check:before {
+          content: "\2713";
+        }
+      }
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .menu_item:hover {
+      background-color: #ededed;
+    }
+  }
+}
+
+.ofn-drop-down-v2 {
+  border: 1px solid $pale-blue;
+  background-color: white;
+  padding: 0px;
+
+  &:hover {
+    border-color: $spree-blue;
+  }
+
+  .ofn-drop-down-label {
+    color: $color-3;
+    padding: 10px;
+    width: 235px;
+    display: flex;
+    justify-content: space-between;
+
+    &:hover {
+      color: $color-3;
+    }
+
+    .label {
+      padding-right: 10px;
+    }
+
+    .icon-caret-down,
+    .icon-caret-up {
+      padding-right: 0px;
+    }
+  }
+
+  .menu {
+    width: 100%;
+  }
+
+  .menu_items {
+    max-height: 200px;
+    overflow-y: scroll;
+
+    .menu_item {
+      margin-bottom: 5px;
+      color: #454545;
+      font-weight: 400;
+      cursor: pointer;
+      padding-top: 4px;
+      padding-bottom: 5px;
+      text-transform: uppercase;
+      font-size: 85%;
+    }
+  }
+}
+
+.ofn-drop-down.ofn-drop-down-v2 {
+  // Add very specific styling here for components that are in transition:
+  // ie. the ones using the two classes above
+  .ofn-drop-down-label {
+    padding-top: 7px;
+    padding-bottom: 7px;
+  }
+}

From b0e6062bec89ca287bdfa8c5807714c91fedca1b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:30:28 +0200
Subject: [PATCH 15/46] Create a `arrowDown` mixin in order to display arrow
 for select compoentns

---
 app/webpacker/css/admin_v3/components/select2.scss | 12 +-----------
 app/webpacker/css/admin_v3/mixins.scss             | 14 ++++++++++++++
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index ad7fec81a4..fd15ffa70b 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -206,17 +206,7 @@ label .select2-container {
       b {
         padding-top: 11px; // adjust to align with tom-select
         &:before {
-          content: " ";
-          display: block;
-          position: absolute;
-          top: 50%;
-          right: 15px;
-          margin-top: -3px;
-          width: 0;
-          height: 0;
-          border-style: solid;
-          border-width: 5px 5px 0 5px;
-          border-color: #808080 transparent transparent transparent;
+          @include arrowDown;
         }
       }
     }
diff --git a/app/webpacker/css/admin_v3/mixins.scss b/app/webpacker/css/admin_v3/mixins.scss
index 76f01458be..5301558d32 100644
--- a/app/webpacker/css/admin_v3/mixins.scss
+++ b/app/webpacker/css/admin_v3/mixins.scss
@@ -1,3 +1,17 @@
 @mixin defaultBoxShadow {
   box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07);
 }
+
+@mixin arrowDown {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #808080 transparent transparent transparent;
+}

From db4d6c8010a98bbda534bc1709f170be4a723424 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:31:51 +0200
Subject: [PATCH 16/46] Don't need to change background color hovering

---
 app/webpacker/css/admin_v3/components/select2.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index fd15ffa70b..9049ff0e95 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -224,7 +224,6 @@ label .select2-container {
     &.select2-container-active {
       .select2-choice {
         background-color: #ffffff !important;
-        border: 1px solid $spree-green !important;
 
         .select2-arrow {
           &:before {

From b355d8beb32ec1bb49e8d402271a5a5f3bab073e Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:35:13 +0200
Subject: [PATCH 17/46] Change colors for dropdown components

It's a bit annoying: we do have several "selector" components.
 - built-in select
 - dropdown directive
 - select2 component
 - tom-select component

Each has its own design, and having common design a loooong time job ;)
---
 app/webpacker/css/admin_v3/components/dropdown.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin_v3/components/dropdown.scss
index 64c98e7ddf..c97ffedf33 100644
--- a/app/webpacker/css/admin_v3/components/dropdown.scss
+++ b/app/webpacker/css/admin_v3/components/dropdown.scss
@@ -182,23 +182,23 @@
 }
 
 .ofn-drop-down-v2 {
-  border: 1px solid $pale-blue;
+  border: 1px solid $light-grey;
   background-color: white;
   padding: 0px;
 
   &:hover {
-    border-color: $spree-blue;
+    border-color: $light-grey;
   }
 
   .ofn-drop-down-label {
-    color: $color-3;
+    color: $near-black;
     padding: 10px;
     width: 235px;
     display: flex;
     justify-content: space-between;
 
     &:hover {
-      color: $color-3;
+      color: $near-black;
     }
 
     .label {

From 8b0fc875da726df17d918eff02975eb29d04ba33 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:35:43 +0200
Subject: [PATCH 18/46] Use the same arrow

---
 app/webpacker/css/admin_v3/components/dropdown.scss | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin_v3/components/dropdown.scss
index c97ffedf33..0fd2427d27 100644
--- a/app/webpacker/css/admin_v3/components/dropdown.scss
+++ b/app/webpacker/css/admin_v3/components/dropdown.scss
@@ -208,6 +208,16 @@
     .icon-caret-down,
     .icon-caret-up {
       padding-right: 0px;
+      &:before {
+        display: none;
+      }
+      &:after {
+        @include arrowDown;
+      }
+    }
+
+    .icon-caret-up:after {
+      transform: rotate(180deg);
     }
   }
 

From e434f7112ac5769045bbe84a3bc6061bcd6fe6f0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:39:41 +0200
Subject: [PATCH 19/46] Add sidebar to admin_v3 context

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../css/admin_v3/components/sidebar.scss      | 26 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/sidebar.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 6e00cfe2fb..f35e631585 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -65,7 +65,7 @@
 @import "../admin/components/product_autocomplete";
 @import "../admin/components/progress";
 @import "../admin/components/save_bar";
-@import "../admin/components/sidebar";
+@import "components/sidebar"; // admin_v3
 @import "../admin/components/simple_modal";
 @import "../admin/components/states";
 @import "../admin/components/stripe_connect_button";
diff --git a/app/webpacker/css/admin_v3/components/sidebar.scss b/app/webpacker/css/admin_v3/components/sidebar.scss
new file mode 100644
index 0000000000..960de96ab0
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/sidebar.scss
@@ -0,0 +1,26 @@
+// Sidebar
+//---------------------------------------------------
+#sidebar {
+  overflow: visible;
+  border-top: 1px solid $color-border;
+  margin-top: 17px;
+
+  .sidebar-title {
+    color: $color-2;
+    text-transform: uppercase;
+    text-align: center;
+    font-size: 14px;
+    font-weight: 600;
+
+    > span {
+      display: inline;
+      background: #fff;
+      padding: 5px 10px;
+      position: relative;
+      top: -14px;
+
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+  }
+}

From 0d410d27ae8225590ed0ebe8dc0bd615fe46b03c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:44:23 +0200
Subject: [PATCH 20/46] No more green but `$red` (which is almost orange btw)
 for navigation

---
 app/webpacker/css/admin_v3/components/navigation.scss | 8 ++++----
 app/webpacker/css/admin_v3/components/sidebar.scss    | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss
index 6b5a2518ae..e5d448f2d4 100644
--- a/app/webpacker/css/admin_v3/components/navigation.scss
+++ b/app/webpacker/css/admin_v3/components/navigation.scss
@@ -23,13 +23,13 @@ nav.menu {
       }
 
       &.active a {
-        color: $green;
+        color: $red;
         border-left-width: 0;
-        border-bottom-color: $green;
+        border-bottom-color: $red;
       }
 
       &:hover a {
-        color: $green;
+        color: $red;
       }
     }
   }
@@ -53,7 +53,7 @@ nav.menu {
 
       &:hover {
         i {
-          color: $green;
+          color: $red;
         }
       }
     }
diff --git a/app/webpacker/css/admin_v3/components/sidebar.scss b/app/webpacker/css/admin_v3/components/sidebar.scss
index 960de96ab0..eeb8ad80c1 100644
--- a/app/webpacker/css/admin_v3/components/sidebar.scss
+++ b/app/webpacker/css/admin_v3/components/sidebar.scss
@@ -6,7 +6,7 @@
   margin-top: 17px;
 
   .sidebar-title {
-    color: $color-2;
+    color: $red;
     text-transform: uppercase;
     text-align: center;
     font-size: 14px;

From 3cfd4cdc9bc74a8d5258429f2a8d4dd643d7e325 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:55:38 +0200
Subject: [PATCH 21/46] No need to have `light` in v3

---
 .../css/admin_v3/components/select2.scss      | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index 9049ff0e95..2032a51feb 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -212,28 +212,6 @@ label .select2-container {
     }
   }
 
-  &.light {
-    .select2-choice {
-      background-color: #ffffff;
-      font-weight: normal;
-      color: $spree-blue !important;
-      border: 1px solid $color-border !important;
-    }
-
-    &:hover,
-    &.select2-container-active {
-      .select2-choice {
-        background-color: #ffffff !important;
-
-        .select2-arrow {
-          &:before {
-            color: $spree-blue;
-          }
-        }
-      }
-    }
-  }
-
   &.select2-container-multi {
     .select2-search-field {
       max-height: 20px;

From 102f20ad9e53743a876a25e1998a2a657559a5f3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:56:01 +0200
Subject: [PATCH 22/46] Add enterprise_index_panels into admin_v3 context

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../pages/enterprise_index_panels.scss        | 120 ++++++++++++++++++
 2 files changed, 121 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index f35e631585..2300ba5527 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -92,7 +92,7 @@
 @import "../admin/dialog";
 @import "../admin/disabled";
 @import "components/dropdown"; // admin_v3
-@import "../admin/enterprise_index_panels";
+@import "pages/enterprise_index_panels"; // admin_v3
 @import "../admin/enterprises";
 @import "../admin/filters_and_controls";
 @import "../admin/grid";
diff --git a/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss b/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
new file mode 100644
index 0000000000..087f318042
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
@@ -0,0 +1,120 @@
+.enterprise_package_panel,
+.enterprise_producer_panel {
+  .info {
+    p {
+      font-size: 1rem;
+      margin: 10px 0px;
+    }
+  }
+
+  a.selector {
+    display: block;
+    position: relative;
+    margin-bottom: 20px;
+    border: 2px solid black;
+    text-align: center;
+    // width: 100%;
+    cursor: pointer;
+    &,
+    & * {
+      color: white;
+    }
+    &:hover {
+      &:after {
+        border-top-color: $spree-green;
+      }
+    }
+    &.disabled {
+      background-color: #c1c1c1;
+    }
+    .bottom {
+      background: repeating-linear-gradient(
+        60deg,
+        rgba(84, 152, 218, 0),
+        rgba(84, 152, 218, 0) 5px,
+        rgba(255, 255, 255, 0.25) 5px,
+        rgba(255, 255, 255, 0.25) 10px
+      );
+      margin-top: 1em;
+      margin-left: -15px;
+      margin-right: -15px;
+      padding: 5px;
+      text-transform: uppercase;
+    }
+    &.selected {
+      background-color: #000000;
+
+      &:after {
+        top: 50%;
+        left: 0;
+        border: solid transparent;
+        content: " ";
+        height: 0;
+        width: 0;
+        position: absolute;
+        pointer-events: none;
+
+        border-top: 20px solid transparent;
+        border-bottom: 20px solid transparent;
+        border-right: 20px solid #000000;
+        margin-top: -20px;
+        margin-left: -20px;
+      }
+    }
+  }
+}
+
+.enterprise_status_panel {
+  .status-ok {
+    margin: 30px 0px;
+    i.icon-ok-sign {
+      color: $spree-green;
+      font-size: 1.5rem;
+    }
+  }
+
+  td.description {
+    font-size: 0.9rem;
+  }
+
+  td.severity {
+    text-align: center;
+
+    i {
+      font-size: 1.5rem;
+
+      &.issue {
+        color: $color-warning;
+      }
+
+      &.warning {
+        color: #ff9848;
+      }
+    }
+  }
+}
+
+tags-input .tags li.tag-item {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  -ms-border-radius: 3px;
+  -o-border-radius: 3px;
+  border-radius: 3px;
+  margin: 2px 0 2px 3px;
+  background-image: none;
+  background-color: #5fa5e8;
+  border: none;
+  box-shadow: none;
+  color: white !important;
+  font-size: 85%;
+  height: 25px;
+}
+
+tags-input .tags .tag-item .remove-button {
+  color: white;
+}
+
+table th.actions .no-text[class*="icon-"],
+table td.actions .no-text[class*="icon-"] {
+  cursor: pointer;
+}

From 2fd53903746a8c3a1a2af478b33ed30e41e35ffb Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 15:59:19 +0200
Subject: [PATCH 23/46] Design background color of dropdown component

---
 app/webpacker/css/admin_v3/components/dropdown.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/dropdown.scss b/app/webpacker/css/admin_v3/components/dropdown.scss
index 0fd2427d27..6a93884aeb 100644
--- a/app/webpacker/css/admin_v3/components/dropdown.scss
+++ b/app/webpacker/css/admin_v3/components/dropdown.scss
@@ -182,12 +182,12 @@
 }
 
 .ofn-drop-down-v2 {
-  border: 1px solid $light-grey;
-  background-color: white;
+  border: 1px solid $lighter-grey;
+  background-color: $lighter-grey;
   padding: 0px;
 
   &:hover {
-    border-color: $light-grey;
+    border-color: $lighter-grey;
   }
 
   .ofn-drop-down-label {

From 705ec5e5f87274c65c2f864d223c4fac3b48055a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 16:00:19 +0200
Subject: [PATCH 24/46] Change color of tagging component in `admin/customers`
 page

---
 app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss b/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
index 087f318042..e9dc24eb02 100644
--- a/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
+++ b/app/webpacker/css/admin_v3/pages/enterprise_index_panels.scss
@@ -102,7 +102,7 @@ tags-input .tags li.tag-item {
   border-radius: 3px;
   margin: 2px 0 2px 3px;
   background-image: none;
-  background-color: #5fa5e8;
+  background-color: $teal;
   border: none;
   box-shadow: none;
   color: white !important;

From d72a4a758b4601b203c453711f7e6f631ab9812d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 16:11:47 +0200
Subject: [PATCH 25/46] Add border to table

---
 app/webpacker/css/admin_v3/shared/tables.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss
index 0611bd80da..c4478e30b7 100644
--- a/app/webpacker/css/admin_v3/shared/tables.scss
+++ b/app/webpacker/css/admin_v3/shared/tables.scss
@@ -19,6 +19,10 @@ table {
       border-left: 4px solid $color-border;
     }
 
+    &:last-child {
+      border-right: 4px solid $color-border;
+    }
+
     &.header {
       font-weight: $font-weight-bold;
     }

From 4b3688f87816d274406521e4f94912dce62b48bd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 16:13:22 +0200
Subject: [PATCH 26/46] Move date picker into admin_v3 context

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../css/admin_v3/components/date-picker.scss  | 20 +++++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/date-picker.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 2300ba5527..d0ff577f13 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -52,7 +52,7 @@
 @import "../admin/components/alert-box";
 @import "../admin/components/alert_row";
 @import "components/buttons"; // admin_v3
-@import "../admin/components/date-picker";
+@import "components/date-picker"; // admin_v3
 @import "../admin/components/dialogs";
 @import "../admin/components/input";
 @import "../admin/components/jquery_dialog";
diff --git a/app/webpacker/css/admin_v3/components/date-picker.scss b/app/webpacker/css/admin_v3/components/date-picker.scss
new file mode 100644
index 0000000000..a35b5a970e
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/date-picker.scss
@@ -0,0 +1,20 @@
+// scss-lint:disable QualifyingElement
+
+input.datetimepicker {
+  min-width: 12.9em;
+}
+
+.container input[readonly].flatpickr-input,
+.container input[readonly].datepicker,
+.container input[readonly].datetimepicker {
+  background-color: $white;
+  cursor: pointer;
+}
+
+img.ui-datepicker-trigger {
+  margin-left: -1.75em;
+  position: absolute;
+  margin-top: 0.5em;
+}
+
+// scss-lint:enable QualifyingElement

From 7e1c2dac4594fb1bce97cea9de82cfe14334a46c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 16:17:28 +0200
Subject: [PATCH 27/46] Move flatpickr customization into admin_v3 context

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../plugins/flatpickr-customization.scss      | 68 +++++++++++++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index d0ff577f13..20080d2490 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -37,7 +37,7 @@
 
 @import "../shared/trix";
 
-@import "../admin/plugins/flatpickr-customization";
+@import "plugins/flatpickr-customization"; // admin_v3
 @import "../admin/plugins/powertip";
 @import "../admin/plugins/jstree";
 
diff --git a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
new file mode 100644
index 0000000000..79bc735d4d
--- /dev/null
+++ b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
@@ -0,0 +1,68 @@
+$background-grey: #eceef1;
+$background-blue: $color-3;
+
+// scss-lint:disable SelectorFormat
+
+.flatpickr-calendar {
+  border-radius: 0;
+
+  // Disable animation
+  &.animate.open {
+    animation: none;
+  }
+
+  &.arrowBottom::after {
+    border-top-color: $background-grey;
+  }
+
+  &.arrowTop::after {
+    border-bottom-color: $background-blue;
+  }
+
+  .flatpickr-months .flatpickr-month {
+    border-radius: 0;
+  }
+
+  .flatpickr-months .flatpickr-month,
+  .flatpickr-current-month .flatpickr-monthDropdown-months {
+    background: $background-blue;
+  }
+
+  .flatpickr-weekdays {
+    background: $background-blue;
+
+    .flatpickr-weekday {
+      background: $background-blue;
+    }
+  }
+
+  .flatpickr-day.selected,
+  .flatpickr-day.startRange,
+  .flatpickr-day.endRange,
+  .flatpickr-day.selected.inRange,
+  .flatpickr-day.startRange.inRange,
+  .flatpickr-day.endRange.inRange,
+  .flatpickr-day.selected:focus,
+  .flatpickr-day.startRange:focus,
+  .flatpickr-day.endRange:focus,
+  .flatpickr-day.selected:hover,
+  .flatpickr-day.startRange:hover,
+  .flatpickr-day.endRange:hover,
+  .flatpickr-day.selected.prevMonthDay,
+  .flatpickr-day.startRange.prevMonthDay,
+  .flatpickr-day.endRange.prevMonthDay,
+  .flatpickr-day.selected.nextMonthDay,
+  .flatpickr-day.startRange.nextMonthDay,
+  .flatpickr-day.endRange.nextMonthDay {
+    background: $background-blue;
+    border-color: $background-blue;
+  }
+}
+
+// scss-lint:enable SelectorFormat
+
+// customization for shortcut-buttons
+.shortcut-buttons-flatpickr-wrapper > .shortcut-buttons-flatpickr-buttons {
+  justify-content: space-between;
+  flex-grow: 1;
+}

From 351fe1b4304659016ddd796ba1b3397b8fe982f8 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 7 Sep 2023 16:50:30 +0200
Subject: [PATCH 28/46] Date / date range (flatpickr) colors customization

---
 .../css/admin_v3/components/date-picker.scss  |  2 +-
 .../plugins/flatpickr-customization.scss      | 23 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/date-picker.scss b/app/webpacker/css/admin_v3/components/date-picker.scss
index a35b5a970e..e2fc0ef504 100644
--- a/app/webpacker/css/admin_v3/components/date-picker.scss
+++ b/app/webpacker/css/admin_v3/components/date-picker.scss
@@ -7,7 +7,7 @@ input.datetimepicker {
 .container input[readonly].flatpickr-input,
 .container input[readonly].datepicker,
 .container input[readonly].datetimepicker {
-  background-color: $white;
+  background-color: $lighter-grey;
   cursor: pointer;
 }
 
diff --git a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
index 79bc735d4d..92fa3f5f77 100644
--- a/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
+++ b/app/webpacker/css/admin_v3/plugins/flatpickr-customization.scss
@@ -1,4 +1,4 @@
-$background-grey: #eceef1;
+$background-grey: $lighter-grey;
 $background-blue: $color-3;
 
 // scss-lint:disable SelectorFormat
@@ -33,6 +33,7 @@ $background-blue: $color-3;
 
     .flatpickr-weekday {
       background: $background-blue;
+      color: white;
     }
   }
 
@@ -66,3 +67,23 @@ $background-blue: $color-3;
   justify-content: space-between;
   flex-grow: 1;
 }
+
+// material-ui colors customization ("~flatpickr/dist/themes/material_blue")
+.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
+.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
+  box-shadow: -10px 0 0 #e2e2e2;
+}
+
+.flatpickr-months .flatpickr-prev-month:hover svg,
+.flatpickr-months #admin-menu ul li.selected a.flatpickr-prev-month svg,
+#admin-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
+.flatpickr-months #sub-menu ul li.selected a.flatpickr-prev-month svg,
+#sub-menu ul li.selected .flatpickr-months a.flatpickr-prev-month svg,
+.flatpickr-months .flatpickr-next-month:hover svg,
+.flatpickr-months #admin-menu ul li.selected a.flatpickr-next-month svg,
+#admin-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg,
+.flatpickr-months #sub-menu ul li.selected a.flatpickr-next-month svg,
+#sub-menu ul li.selected .flatpickr-months a.flatpickr-next-month svg {
+  fill: white;
+}

From e3359dd240b9705723c626f00d438dce05b9efa1 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 12 Sep 2023 14:41:25 +0200
Subject: [PATCH 29/46] Move `text-angular` rules into its own file

---
 app/webpacker/css/admin/all.scss              |  1 +
 .../css/admin/components/text-angular.scss    | 43 ++++++++++++++++++
 app/webpacker/css/admin/openfoodnetwork.scss  | 44 -------------------
 3 files changed, 44 insertions(+), 44 deletions(-)
 create mode 100644 app/webpacker/css/admin/components/text-angular.scss

diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
index 35e4270d8f..075fe06797 100644
--- a/app/webpacker/css/admin/all.scss
+++ b/app/webpacker/css/admin/all.scss
@@ -72,6 +72,7 @@
 @import "components/todo";
 @import "components/tooltip";
 @import "components/wizard_progress";
+@import "components/text-angular";
 
 @import "pages/enterprise_form";
 @import "pages/subscription_form";
diff --git a/app/webpacker/css/admin/components/text-angular.scss b/app/webpacker/css/admin/components/text-angular.scss
new file mode 100644
index 0000000000..d6eab98151
--- /dev/null
+++ b/app/webpacker/css/admin/components/text-angular.scss
@@ -0,0 +1,43 @@
+// textAngular wysiwyg
+text-angular {
+  .ta-editor {
+    border: 1px solid $pale-blue;
+    border-radius: 3px;
+  }
+
+  .ta-toolbar {
+    border: 1px solid #cdd9e4;
+    padding: 0.4em;
+    margin-bottom: -1px;
+    background-color: #f1f1f1;
+    border-radius: 0.25em 0.25em 0 0;
+  }
+  .ta-scroll-window > .ta-bind {
+    max-height: 400px;
+    min-height: 100px;
+    outline: none;
+    p {
+      margin-bottom: 1.5rem;
+    }
+  }
+  .ta-scroll-window.form-control {
+    min-height: 100px;
+    box-shadow: none !important;
+  }
+  .btn-group {
+    display: inline;
+    margin-right: 8px;
+    button {
+      padding: 5px 10px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
+      // Hope this (text-angular) will be removed soon in order to use trix editor
+      margin-right: 0.25em;
+    }
+    button.active:not(:hover) {
+      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
+      background-color: #4583bf;
+    }
+  }
+  a {
+    color: $spree-green;
+  }
+}
diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
index b4de0d2f52..d8b077a321 100644
--- a/app/webpacker/css/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -19,11 +19,6 @@ table .blank-action {
   width: 29px;
 }
 
-text-angular .ta-editor {
-  border: 1px solid $pale-blue;
-  border-radius: 3px;
-}
-
 #header #logo {
   top: 10px;
 }
@@ -229,45 +224,6 @@ table#listing_enterprise_groups {
   border-color: $color-error;
 }
 
-// textAngular wysiwyg
-text-angular {
-  .ta-toolbar {
-    border: 1px solid #cdd9e4;
-    padding: 0.4em;
-    margin-bottom: -1px;
-    background-color: #f1f1f1;
-    border-radius: 0.25em 0.25em 0 0;
-  }
-  .ta-scroll-window > .ta-bind {
-    max-height: 400px;
-    min-height: 100px;
-    outline: none;
-    p {
-      margin-bottom: 1.5rem;
-    }
-  }
-  .ta-scroll-window.form-control {
-    min-height: 100px;
-    box-shadow: none !important;
-  }
-  .btn-group {
-    display: inline;
-    margin-right: 8px;
-    button {
-      padding: 5px 10px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
-      // Hope this (text-angular) will be removed soon in order to use trix editor
-      margin-right: 0.25em;
-    }
-    button.active:not(:hover) {
-      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
-      background-color: #4583bf;
-    }
-  }
-  a {
-    color: $spree-green;
-  }
-}
-
 span.required {
   color: $color-5;
   font-size: 110%;

From 6a771ad09c97da127b5930a03cc9efbcfc1ef429 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 12 Sep 2023 14:44:22 +0200
Subject: [PATCH 30/46] Move `text-angular` component rules to admin_style_v3
 context

---
 app/webpacker/css/admin_v3/all.scss           |  1 +
 .../css/admin_v3/components/text-angular.scss | 43 +++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 app/webpacker/css/admin_v3/components/text-angular.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 20080d2490..00df5b51e3 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -76,6 +76,7 @@
 @import "../admin/components/todo";
 @import "../admin/components/tooltip";
 @import "../admin/components/wizard_progress";
+@import "components/text-angular"; // admin_v3
 
 @import "../admin/pages/enterprise_form";
 @import "../admin/pages/subscription_form";
diff --git a/app/webpacker/css/admin_v3/components/text-angular.scss b/app/webpacker/css/admin_v3/components/text-angular.scss
new file mode 100644
index 0000000000..d6eab98151
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/text-angular.scss
@@ -0,0 +1,43 @@
+// textAngular wysiwyg
+text-angular {
+  .ta-editor {
+    border: 1px solid $pale-blue;
+    border-radius: 3px;
+  }
+
+  .ta-toolbar {
+    border: 1px solid #cdd9e4;
+    padding: 0.4em;
+    margin-bottom: -1px;
+    background-color: #f1f1f1;
+    border-radius: 0.25em 0.25em 0 0;
+  }
+  .ta-scroll-window > .ta-bind {
+    max-height: 400px;
+    min-height: 100px;
+    outline: none;
+    p {
+      margin-bottom: 1.5rem;
+    }
+  }
+  .ta-scroll-window.form-control {
+    min-height: 100px;
+    box-shadow: none !important;
+  }
+  .btn-group {
+    display: inline;
+    margin-right: 8px;
+    button {
+      padding: 5px 10px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
+      // Hope this (text-angular) will be removed soon in order to use trix editor
+      margin-right: 0.25em;
+    }
+    button.active:not(:hover) {
+      box-shadow: 0 0 0.7em rgba(0, 0, 0, 0.3) inset;
+      background-color: #4583bf;
+    }
+  }
+  a {
+    color: $spree-green;
+  }
+}

From 371e064f82c725743938a5acfd3ebaa46a3597cd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 12 Sep 2023 14:46:31 +0200
Subject: [PATCH 31/46] Adjust padding left right size for text-angular
 component in v3 context

---
 app/webpacker/css/admin_v3/components/text-angular.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/text-angular.scss b/app/webpacker/css/admin_v3/components/text-angular.scss
index d6eab98151..ca4f162d32 100644
--- a/app/webpacker/css/admin_v3/components/text-angular.scss
+++ b/app/webpacker/css/admin_v3/components/text-angular.scss
@@ -28,7 +28,7 @@ text-angular {
     display: inline;
     margin-right: 8px;
     button {
-      padding: 5px 10px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
+      padding: 0 8px !important; // Add `!important` to be more specific than the default button styles (app/webpacker/css/admin/components/buttons.scss)
       // Hope this (text-angular) will be removed soon in order to use trix editor
       margin-right: 0.25em;
     }

From beba7098274c13474202d59f4a41feaa481b23fd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 12 Sep 2023 15:01:49 +0200
Subject: [PATCH 32/46] Move buttons/input stuff into related file

And adjust design for v3 style
---
 app/webpacker/css/admin/components/buttons.scss   | 15 +++++++++++++++
 app/webpacker/css/admin/openfoodnetwork.scss      | 15 ---------------
 .../css/admin_v3/components/buttons.scss          | 10 ++++++++++
 app/webpacker/css/admin_v3/globals/variables.scss |  2 ++
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/webpacker/css/admin/components/buttons.scss b/app/webpacker/css/admin/components/buttons.scss
index c5804a76f0..1291d04e15 100644
--- a/app/webpacker/css/admin/components/buttons.scss
+++ b/app/webpacker/css/admin/components/buttons.scss
@@ -76,3 +76,18 @@ button:not(.plain):not(.trix-button),
     }
   }
 }
+
+input.red,
+a.button.red,
+button.red {
+  background-color: $color-warning;
+  margin-right: 5px;
+  color: #ffffff;
+}
+
+a.button.red {
+  &:not(:hover) {
+    color: #fff;
+    background-color: $color-warning;
+  }
+}
diff --git a/app/webpacker/css/admin/openfoodnetwork.scss b/app/webpacker/css/admin/openfoodnetwork.scss
index d8b077a321..a579c8415a 100644
--- a/app/webpacker/css/admin/openfoodnetwork.scss
+++ b/app/webpacker/css/admin/openfoodnetwork.scss
@@ -38,21 +38,6 @@ div.error:not(.flash) {
   margin-bottom: 0;
 }
 
-input.red,
-a.button.red,
-button.red {
-  background-color: $color-warning;
-  margin-right: 5px;
-  color: #ffffff;
-}
-
-a.button.red {
-  &:not(:hover) {
-    color: #fff;
-    background-color: $color-warning;
-  }
-}
-
 input.orange {
   background-color: #ff9848;
   margin-right: 5px;
diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index bfb23abc67..552735b911 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -89,6 +89,16 @@ button:not(.plain):not(.trix-button),
     height: $btn-relaxed-height;
   }
 
+  &.red {
+    background-color: $color-btn-red-bg;
+    border-color: $color-btn-red-bg;
+
+    &:hover {
+      background-color: $color-btn-red-hover-bg;
+      border-color: $color-btn-red-hover-bg;
+    }
+  }
+
   .badge {
     position: absolute;
     top: 0;
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index eb06e5e998..957b2e51c0 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -45,6 +45,8 @@ $color-btn-hover-bg:             $orient !default;
 $color-btn-hover-text:           $white !default;
 $color-btn-hover-border:         $dark-blue !default;
 $color-btn-disabled-bg:          $light-grey !default;
+$color-btn-red-bg:               $red !default;
+$color-btn-red-hover-bg:         $roof-terracotta !default;
 
 // Actions colors
 $color-action-edit-bg:           very-light($color-success, 5  ) !default;

From 8ae68b15a0272ca46a4ce20ae15b9597a83727ad Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 12 Sep 2023 15:11:08 +0200
Subject: [PATCH 33/46] Adjust select2 multiple choices colors

---
 app/webpacker/css/admin_v3/components/select2.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index 2032a51feb..7609ae6264 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -140,7 +140,7 @@
   &.select2-container-active,
   &.select2-dropdown-open {
     .select2-choices {
-      border-color: $color-sel-hover-bg !important;
+      border-color: $color-btn-hover-bg !important;
       box-shadow: none;
       border-bottom-left-radius: 0;
       border-bottom-right-radius: 0;
@@ -156,14 +156,14 @@
       @include border-radius($border-radius);
       margin: 0 0 3px 3px;
       background-image: none;
-      background-color: $color-sel-bg;
+      background-color: $color-btn-bg;
       border: none;
       box-shadow: none;
       color: $color-1 !important;
       font-size: 85%;
 
       &:hover {
-        background-color: $color-sel-hover-bg;
+        background-color: $color-btn-hover-bg;
       }
 
       .select2-search-choice-close {

From f110c55531ed369d8c5b46ff163d24a44abd223b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Tue, 12 Sep 2023 15:16:15 +0200
Subject: [PATCH 34/46] Add `product_import` into admin_v3 context and adjust
 some colors

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../css/admin_v3/pages/product_import.scss    | 299 ++++++++++++++++++
 2 files changed, 300 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/pages/product_import.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 00df5b51e3..9c4e6dc012 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -105,7 +105,7 @@
 @import "../admin/openfoodnetwork";
 @import "../admin/order_cycles";
 @import "../admin/orders";
-@import "../admin/product_import";
+@import "pages/product_import"; // admin_v3
 @import "../admin/products";
 @import "../admin/products_v3";
 @import "../admin/question-mark-tooltip";
diff --git a/app/webpacker/css/admin_v3/pages/product_import.scss b/app/webpacker/css/admin_v3/pages/product_import.scss
new file mode 100644
index 0000000000..89bbd7a7c8
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/product_import.scss
@@ -0,0 +1,299 @@
+$pi-red: $color-warning;
+$pi-green: lighten($spree-green, 10%);
+$pi-orange: $bright-orange;
+$pi-blue: lighten($orient, 10%);
+$pi-light-yellow: #faffaf;
+
+// scss-lint:disable NestingDepth
+
+div.panel-section {
+  .error {
+    color: $pi-red;
+  }
+  .warning {
+    color: $bright-orange;
+  }
+  .success {
+    color: $pi-green;
+  }
+  .info {
+    color: #68b7c0;
+  }
+
+  div.panel-header {
+    width: 100%;
+    clear: both;
+    float: left;
+    padding: 0.5em;
+
+    div {
+      font-size: 1.25em;
+      float: left;
+    }
+
+    div.header-caret {
+      width: 2em;
+      text-align: center;
+      min-height: 0.1em; //Empty div fix
+    }
+
+    div.header-icon {
+      width: 2.5em;
+      text-align: center;
+      padding-top: 0.18em;
+
+      i {
+        font-size: 1.5em;
+        line-height: 0.9em;
+      }
+    }
+
+    div.header-count {
+      min-width: 2em;
+      text-align: right;
+      padding-right: 0.5em;
+    }
+
+    div.header-description {
+      width: auto;
+    }
+  }
+
+  div.panel-header:hover {
+    cursor: pointer;
+    background-color: #f7f7f7;
+  }
+
+  div.panel-header.active {
+    background-color: #efefef;
+    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.75);
+  }
+
+  div.panel-content {
+    width: 100%;
+    clear: both;
+    margin-bottom: 0.5em;
+    background-color: #f9f9f9;
+    padding: 1.5em;
+
+    div.table-wrap {
+      width: 100%;
+      overflow: auto;
+      border-right: 1px solid #ceede3;
+      max-height: 23em;
+    }
+
+    table {
+      background-color: white;
+      margin-bottom: 0;
+      td,
+      th {
+        white-space: nowrap;
+      }
+
+      tr {
+        &.error {
+          color: #c84c4c;
+        }
+
+        &:hover td.invalid {
+          background-color: darken(#f05c51, 5%);
+        }
+
+        i {
+          display: block;
+          margin-bottom: -0.2em;
+          font-size: 1.4em !important;
+        }
+      }
+
+      td {
+        &.invalid {
+          background-color: #f05c51;
+          box-shadow: inset 0px 0px 1px red;
+          color: white;
+        }
+      }
+    }
+
+    div.import-errors {
+      margin-bottom: 0.85em;
+
+      p.line {
+        font-size: 1.15em;
+        margin-bottom: 0.2em;
+        color: #577084;
+      }
+      p.error {
+        color: #cb1b1b;
+        margin-bottom: 0.2em;
+      }
+    }
+  }
+}
+
+br.panels.clearfix {
+  clear: both;
+}
+
+.panel-section.import-settings {
+  .header-description {
+    padding-left: 1em;
+  }
+
+  span.header-error {
+    font-size: 0.85em;
+    color: $pi-red;
+  }
+
+  .select2-search {
+    display: none;
+  }
+
+  .select2-results {
+    margin: 0;
+  }
+}
+
+.post-save-results {
+  p {
+    font-size: 1.25em;
+    margin-bottom: 0.5em;
+
+    strong {
+      margin-right: 0.2em;
+      min-width: 1.8em;
+      display: inline-block;
+      text-align: right;
+    }
+
+    i {
+      font-size: 1.4em;
+      vertical-align: middle;
+      position: relative;
+    }
+
+    i.fa-check-circle {
+      color: $pi-green;
+    }
+    i.fa-info-circle {
+      color: $pi-blue;
+    }
+  }
+
+  p.save-error {
+    color: #ee4728;
+    font-size: 1.05em;
+    margin-top: 0.4em;
+  }
+}
+
+form.product-import,
+div.post-save-results,
+div.import-wrapper {
+  input[type="submit"] {
+    margin-right: 0.5em;
+  }
+  input[type="submit"],
+  button,
+  a.button {
+    min-width: 8em;
+    text-align: center;
+  }
+}
+
+div.import-wrapper {
+  .alert-box {
+    margin: 0 0 1.75em;
+  }
+
+  .ng-hide:not(.ng-hide-animate) {
+    // We have to use !important here to override angular's display properties
+    // scss-lint:disable ImportantRule
+    display: block !important;
+    position: absolute;
+    opacity: 0;
+    top: -9999px;
+    left: -9999px;
+  }
+
+  .ng-hide-add,
+  .ng-hide-remove,
+  .ng-hide-animate {
+    transition: all 0.4s ease-in-out;
+  }
+
+  form.product-import,
+  div.save-results {
+    transition: all 0.4s ease-in-out;
+  }
+
+  div.progress-interface {
+    text-align: center;
+    transition: all 0.4s ease-in-out;
+
+    button:disabled {
+      background: #ccc !important;
+    }
+  }
+
+  .post-save-results {
+    a.button {
+      float: left;
+      margin-right: 0.5em;
+    }
+  }
+}
+
+div.progress-bar {
+  height: 25px;
+  width: 30em;
+  max-width: 90%;
+  margin: 1em auto;
+  background: #f7f7f7;
+  padding: 3px;
+  border-radius: 0.3em;
+  border: 1px solid #eee;
+
+  span.progress-track {
+    display: block;
+    background: lighten($pi-green, 10%);
+    height: 100%;
+    border-radius: 0.3em;
+    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
+    transition: width 0.3s ease-in-out;
+  }
+}
+
+#upload-sidebar {
+  float: right;
+  background-color: lighten($spree-light-blue, 2.5%);
+  border: 1px solid lighten($pale-blue, 2.5%);
+  width: 50%;
+  padding: 0 1.5em 1.5em;
+
+  h4,
+  h5,
+  h6,
+  p {
+    margin: 1.25em 0 1em;
+  }
+
+  a.download {
+    display: block;
+    font-size: 1.05em;
+    margin-bottom: 0.5em;
+
+    i {
+      margin-right: 0.25em;
+    }
+  }
+
+  span.category {
+    display: inline-block;
+    background-color: $pi-blue;
+    color: white;
+    padding: 0.3em 0.6em;
+    margin: 0 0.4em 0.5em 0;
+  }
+}

From f71ace1d3917e9efe891f08923882a07cd6dfeaf Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 10:10:05 +0200
Subject: [PATCH 35/46] Move sections/orders scss file into admin v3 context

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../css/admin_v3/sections/orders.scss         | 65 +++++++++++++++++++
 2 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/sections/orders.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 9c4e6dc012..2dbafb6ad1 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -41,7 +41,7 @@
 @import "../admin/plugins/powertip";
 @import "../admin/plugins/jstree";
 
-@import "../admin/sections/orders";
+@import "sections/orders"; // admin_v3
 @import "../admin/sections/products";
 
 @import "../admin/hacks/mozilla";
diff --git a/app/webpacker/css/admin_v3/sections/orders.scss b/app/webpacker/css/admin_v3/sections/orders.scss
new file mode 100644
index 0000000000..e6e45309d3
--- /dev/null
+++ b/app/webpacker/css/admin_v3/sections/orders.scss
@@ -0,0 +1,65 @@
+// Customize orders filter
+.admin-orders-index-search {
+  select[data-placeholder="Status"] {
+    width: 100%;
+  }
+
+  .select2-container {
+    width: 100% !important;
+  }
+}
+
+// Order-total
+.order-details-total {
+  text-align: center;
+
+  .order-total {
+    font-size: 35px;
+    font-weight: 600;
+    color: $color-success;
+  }
+}
+
+.admin-order-form-fields {
+  legend.stock-location {
+    color: $color-body-text;
+
+    .shipment-number {
+      color: $color-success;
+    }
+    .stock-location-name {
+      color: $color-success;
+    }
+  }
+}
+
+.insufficient-stock-items {
+  legend {
+    color: $color-error;
+  }
+
+  table tr:last-child th {
+    border-bottom: 1px solid $color-tbl-border;
+  }
+}
+
+// Customize orduct add fieldset
+#add-line-item {
+  fieldset {
+    padding: 10px 0;
+
+    .field {
+      margin-bottom: 0;
+
+      input[type="text"],
+      input[type="number"] {
+        width: 100%;
+      }
+    }
+    .actions {
+      .button {
+        margin-top: 28px;
+      }
+    }
+  }
+}

From dfe79396f66c777364e2ad4e67e70d5f4721dd4c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 10:20:44 +0200
Subject: [PATCH 36/46] Use $teal color for some info in the order page

---
 app/webpacker/css/admin_v3/sections/orders.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/webpacker/css/admin_v3/sections/orders.scss b/app/webpacker/css/admin_v3/sections/orders.scss
index e6e45309d3..da9b274c43 100644
--- a/app/webpacker/css/admin_v3/sections/orders.scss
+++ b/app/webpacker/css/admin_v3/sections/orders.scss
@@ -16,7 +16,7 @@
   .order-total {
     font-size: 35px;
     font-weight: 600;
-    color: $color-success;
+    color: $teal;
   }
 }
 
@@ -25,10 +25,10 @@
     color: $color-body-text;
 
     .shipment-number {
-      color: $color-success;
+      color: $teal;
     }
     .stock-location-name {
-      color: $color-success;
+      color: $teal;
     }
   }
 }

From 62465b9bbc9d82010e9ce971faf54060635a515c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 10:27:02 +0200
Subject: [PATCH 37/46] Move components/actions into admin_v3 context

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../css/admin_v3/components/actions.scss      | 31 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/actions.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 2dbafb6ad1..55644ea93d 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -48,7 +48,7 @@
 @import "../admin/hacks/opera";
 @import "../admin/hacks/ie";
 
-@import "../admin/components/actions";
+@import "components/actions"; // admin_v3
 @import "../admin/components/alert-box";
 @import "../admin/components/alert_row";
 @import "components/buttons"; // admin_v3
diff --git a/app/webpacker/css/admin_v3/components/actions.scss b/app/webpacker/css/admin_v3/components/actions.scss
new file mode 100644
index 0000000000..c766a284ac
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/actions.scss
@@ -0,0 +1,31 @@
+table tbody tr {
+  &.highlight {
+    @each $action in $actions {
+      &.action-#{$action} td {
+        background-color: get-value($actions, $actions-bg-colors, $action);
+        border-color: get-value($actions, $actions-brd-colors, $action);
+      }
+    }
+
+    &.action-remove td,
+    &.action-void td {
+      text-decoration: line-through;
+
+      &.actions {
+        text-decoration: none;
+      }
+    }
+  }
+
+  &.before-highlight {
+    @each $action in $actions {
+      &.action-#{$action} td {
+        border-bottom-color: get-value($actions, $actions-brd-colors, $action);
+      }
+    }
+  }
+
+  td.actions {
+    background-color: transparent !important;
+  }
+}

From 241dbd1dedb77cf14c25e28447cea55dc946d804 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 10:43:09 +0200
Subject: [PATCH 38/46] move plugins/powertip into admin v3 context

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../css/admin_v3/plugins/powertip.scss        | 118 ++++++++++++++++++
 2 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/plugins/powertip.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 55644ea93d..55ea5839e5 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -38,7 +38,7 @@
 @import "../shared/trix";
 
 @import "plugins/flatpickr-customization"; // admin_v3
-@import "../admin/plugins/powertip";
+@import "plugins/powertip"; // admin_v3
 @import "../admin/plugins/jstree";
 
 @import "sections/orders"; // admin_v3
diff --git a/app/webpacker/css/admin_v3/plugins/powertip.scss b/app/webpacker/css/admin_v3/plugins/powertip.scss
new file mode 100644
index 0000000000..4afc7dfddb
--- /dev/null
+++ b/app/webpacker/css/admin_v3/plugins/powertip.scss
@@ -0,0 +1,118 @@
+#powerTip {
+  background-color: $color-3;
+  padding: 5px 15px;
+  @include border-radius($border-radius);
+
+  &.n:before,
+  &.ne:before,
+  &.nw:before {
+    border-top-width: 5px;
+    border-top-color: $color-3;
+    bottom: -5px;
+  }
+
+  &.e:before {
+    border-right-width: 5px;
+    border-right-color: $color-3;
+    left: -5px;
+  }
+  &.s:before,
+  &.se:before,
+  &.sw:before {
+    border-bottom-width: 5px;
+    border-bottom-color: $color-3;
+    top: -5px;
+  }
+  &.w:before {
+    border-left-width: 5px;
+    border-left-color: $color-3;
+    right: -5px;
+  }
+  &.ne:before,
+  &.se:before {
+    border-right-width: 5px;
+    border-right-color: $color-3;
+    left: -5px;
+  }
+  &.nw:before,
+  &.sw:before {
+    border-left-width: 5px;
+    border-right-color: $color-3;
+    right: -5px;
+  }
+
+  &.clone,
+  &.yellow,
+  &.cancel {
+    background-color: $color-notice;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $color-notice;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $color-notice;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $color-notice;
+    }
+    &.w:before {
+      border-left-color: $color-notice;
+    }
+  }
+  &.edit,
+  &.green,
+  &.capture,
+  &.save,
+  &.add {
+    background-color: $color-success;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $color-success;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $color-success;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $color-success;
+    }
+    &.w:before {
+      border-left-color: $color-success;
+    }
+  }
+  &.remove,
+  &.red,
+  &.void {
+    background-color: $color-error;
+
+    &.n:before,
+    &.ne:before,
+    &.nw:before {
+      border-top-color: $color-error;
+    }
+    &.e:before,
+    &.nw:before,
+    &.sw:before {
+      border-right-color: $color-error;
+    }
+    &.s:before,
+    &.se:before,
+    &.sw:before {
+      border-bottom-color: $color-error;
+    }
+    &.w:before {
+      border-left-color: $color-error;
+    }
+  }
+}

From a59c8adbbf2196773fcd2329355ef68655975f64 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 10:50:14 +0200
Subject: [PATCH 39/46] Adjust color for edit action to $teal

---
 app/webpacker/css/admin_v3/globals/variables.scss |  4 ++--
 app/webpacker/css/admin_v3/plugins/powertip.scss  | 10 +++++-----
 app/webpacker/css/admin_v3/shared/tables.scss     |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index 957b2e51c0..d584e67db9 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -49,8 +49,8 @@ $color-btn-red-bg:               $red !default;
 $color-btn-red-hover-bg:         $roof-terracotta !default;
 
 // Actions colors
-$color-action-edit-bg:           very-light($color-success, 5  ) !default;
-$color-action-edit-brd:          very-light($color-success, 20 ) !default;
+$color-action-edit-bg:           very-light($teal) !default;
+$color-action-edit-brd:          #81B4BC !default;
 $color-action-clone-bg:          very-light($color-notice,  5  ) !default;
 $color-action-clone-brd:         very-light($color-notice,  15 ) !default;
 $color-action-remove-bg:         very-light($color-error,   5  ) !default;
diff --git a/app/webpacker/css/admin_v3/plugins/powertip.scss b/app/webpacker/css/admin_v3/plugins/powertip.scss
index 4afc7dfddb..9aeda09656 100644
--- a/app/webpacker/css/admin_v3/plugins/powertip.scss
+++ b/app/webpacker/css/admin_v3/plugins/powertip.scss
@@ -70,25 +70,25 @@
   &.capture,
   &.save,
   &.add {
-    background-color: $color-success;
+    background-color: $teal;
 
     &.n:before,
     &.ne:before,
     &.nw:before {
-      border-top-color: $color-success;
+      border-top-color: $teal;
     }
     &.e:before,
     &.nw:before,
     &.sw:before {
-      border-right-color: $color-success;
+      border-right-color: $teal;
     }
     &.s:before,
     &.se:before,
     &.sw:before {
-      border-bottom-color: $color-success;
+      border-bottom-color: $teal;
     }
     &.w:before {
-      border-left-color: $color-success;
+      border-left-color: $teal;
     }
   }
   &.remove,
diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss
index c4478e30b7..44ec51060c 100644
--- a/app/webpacker/css/admin_v3/shared/tables.scss
+++ b/app/webpacker/css/admin_v3/shared/tables.scss
@@ -99,7 +99,7 @@ table {
       .icon-capture:hover,
       .icon-ok:hover,
       .icon-plus:hover {
-        background-color: $color-success;
+        background-color: $teal;
         color: $white;
       }
       .icon-copy:hover {

From 4aaf0ddc1887fed534b8f6be04916b58cdb4ad6b Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 11:04:11 +0200
Subject: [PATCH 40/46] Move dashboard-single-ent into admin v3 context

---
 app/webpacker/css/admin_v3/all.scss           |  2 +-
 .../admin_v3/pages/dashboard-single-ent.scss  | 21 +++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 55ea5839e5..be36044ebc 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -89,7 +89,7 @@
 @import "../admin/change_type_form";
 @import "../admin/customers";
 @import "dashboard/dashboard_item"; // admin_v3
-@import "../admin/dashboard-single-ent";
+@import "pages/dashboard-single-ent"; // admin_v3
 @import "../admin/dialog";
 @import "../admin/disabled";
 @import "components/dropdown"; // admin_v3
diff --git a/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss b/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
new file mode 100644
index 0000000000..93f242257b
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
@@ -0,0 +1,21 @@
+.dashboard_item.single-ent {
+  .header {
+    padding: 0.77778em 1.33333em 0.77778em 0.77778em;
+    height: auto !important;
+  }
+
+  .list {
+    .button.bottom {
+      width: 100%;
+    }
+  }
+}
+
+.button.big {
+  width: 100%;
+  font-size: 1rem;
+
+  @include border-radius(25px);
+
+  padding: 15px;
+}

From ae04063643845721a12879d9563b5dbb285c2b16 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 11:11:18 +0200
Subject: [PATCH 41/46] Create and adjust `big` button

---
 app/webpacker/css/admin_v3/components/buttons.scss       | 8 ++++++++
 .../css/admin_v3/pages/dashboard-single-ent.scss         | 9 ---------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 552735b911..d6e5b4af7f 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -89,6 +89,14 @@ button:not(.plain):not(.trix-button),
     height: $btn-relaxed-height;
   }
 
+  &.big {
+    @extend .relaxed; // use relaxed height
+    width: 100%;
+    font-size: 1rem;
+    @include border-radius(25px);
+    text-transform: uppercase;
+  }
+
   &.red {
     background-color: $color-btn-red-bg;
     border-color: $color-btn-red-bg;
diff --git a/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss b/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
index 93f242257b..ba7bf4a637 100644
--- a/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
+++ b/app/webpacker/css/admin_v3/pages/dashboard-single-ent.scss
@@ -10,12 +10,3 @@
     }
   }
 }
-
-.button.big {
-  width: 100%;
-  font-size: 1rem;
-
-  @include border-radius(25px);
-
-  padding: 15px;
-}

From 7326241c70d3fd99f9e74136dc65fc505a655bef Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 14:29:10 +0200
Subject: [PATCH 42/46] Move pages/changetypeform to admin v3 context

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../css/admin_v3/pages/change_type_form.scss  | 110 ++++++++++++++++++
 2 files changed, 111 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/pages/change_type_form.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index be36044ebc..8b0f413dcc 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -86,7 +86,7 @@
 @import "../admin/advanced_settings";
 @import "../admin/alert";
 @import "../admin/animations";
-@import "../admin/change_type_form";
+@import "pages/change_type_form"; // admin_v3
 @import "../admin/customers";
 @import "dashboard/dashboard_item"; // admin_v3
 @import "pages/dashboard-single-ent"; // admin_v3
diff --git a/app/webpacker/css/admin_v3/pages/change_type_form.scss b/app/webpacker/css/admin_v3/pages/change_type_form.scss
new file mode 100644
index 0000000000..1880f029eb
--- /dev/null
+++ b/app/webpacker/css/admin_v3/pages/change_type_form.scss
@@ -0,0 +1,110 @@
+#change_type {
+  section {
+    margin: 2em 0 0 0;
+
+    &,
+    & * {
+      color: $spree-blue;
+    }
+  }
+
+  .description {
+    background-color: $spree-light-blue;
+    margin-top: -2em;
+    padding: 4em 2em 2em 1em;
+
+    @media all and (max-width: 786px) {
+      margin-bottom: 2em;
+    }
+  }
+
+  .admin-cta {
+    border: 1px solid $spree-blue;
+
+    @include border-radius(3px);
+
+    text-align: center;
+    padding: 1em;
+  }
+
+  .error {
+    display: block;
+    color: #f57e80;
+    border: 1px solid #f57e80;
+    background-color: #fde6e7;
+
+    @include border-radius(3px);
+
+    margin-bottom: 1em;
+    padding: 0.5em;
+  }
+
+  a.selector {
+    position: relative;
+    border: 2px solid black;
+    text-align: center;
+    width: 100%;
+    cursor: pointer;
+
+    &,
+    & * {
+      color: white;
+    }
+
+    &:after,
+    &:before {
+      top: 100%;
+      left: 50%;
+      border: solid transparent;
+      content: " ";
+      height: 0;
+      width: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    &:after {
+      border-color: rgba(136, 183, 213, 0);
+      border-top-color: $spree-blue;
+      border-width: 12px;
+      margin-left: -12px;
+    }
+
+    &:hover {
+      &:after {
+        border-top-color: $spree-green;
+      }
+    }
+
+    &:before {
+      border-color: rgba(84, 152, 218, 0);
+      border-top-color: black;
+      border-width: 15px;
+      margin-left: -15px;
+    }
+
+    .bottom {
+      background: repeating-linear-gradient(
+        60deg,
+        rgba(84, 152, 218, 0),
+        rgba(84, 152, 218, 0) 5px,
+        rgba(255, 255, 255, 0.25) 5px,
+        rgba(255, 255, 255, 0.25) 10px
+      );
+      margin-top: 1em;
+      margin-left: -15px;
+      margin-right: -15px;
+      padding: 5px;
+      text-transform: uppercase;
+    }
+
+    &.selected {
+      background-color: black;
+
+      &:after,
+      &:hover &:after {
+        border-top-color: black;
+      }
+    }
+  }
+}

From 10b6df6bd7d33a42b6d2ba43f6fcf8cf5c8e449a Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 14 Sep 2023 14:31:31 +0200
Subject: [PATCH 43/46] Tweak dashboard for a hub manager

---
 app/webpacker/css/admin_v3/pages/change_type_form.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/webpacker/css/admin_v3/pages/change_type_form.scss b/app/webpacker/css/admin_v3/pages/change_type_form.scss
index 1880f029eb..0bd7c92560 100644
--- a/app/webpacker/css/admin_v3/pages/change_type_form.scss
+++ b/app/webpacker/css/admin_v3/pages/change_type_form.scss
@@ -45,6 +45,8 @@
     text-align: center;
     width: 100%;
     cursor: pointer;
+    line-height: normal;
+    height: auto;
 
     &,
     & * {

From fe819006392d4e9b2215aa22ecf06b13c8f2cd2d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Sep 2023 10:42:33 +0200
Subject: [PATCH 44/46] Update select2.scss

---
 .../css/admin_v3/components/select2.scss         | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin_v3/components/select2.scss b/app/webpacker/css/admin_v3/components/select2.scss
index 7609ae6264..5751802972 100644
--- a/app/webpacker/css/admin_v3/components/select2.scss
+++ b/app/webpacker/css/admin_v3/components/select2.scss
@@ -188,9 +188,23 @@ label .select2-container {
   }
 }
 
+.select2-container {
+  .select2-choice,
+  .select2-choices {
+    height: $btn-relaxed-height !important; // !important is needed because of vendor/assets/stylesheets/select2.css.scss
+    padding: 10px;
+  }
+}
+
+.select2-container .select2-choices {
+  input {
+    position: relative;
+    top: -10px;
+  }
+}
+
 .select2-container {
   .select2-choice {
-    height: $btn-relaxed-height;
     padding: 10px 15px;
     color: $near-black !important;
 

From 657f4d95d739a8193ddb798ffb2e89dd4005eb1c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Sep 2023 11:02:45 +0200
Subject: [PATCH 45/46] move sidebar-item into admin v3 context

---
 app/webpacker/css/admin_v3/all.scss           |   2 +-
 .../css/admin_v3/components/sidebar-item.scss | 124 ++++++++++++++++++
 2 files changed, 125 insertions(+), 1 deletion(-)
 create mode 100644 app/webpacker/css/admin_v3/components/sidebar-item.scss

diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss
index 8b0f413dcc..d9358e7a1b 100644
--- a/app/webpacker/css/admin_v3/all.scss
+++ b/app/webpacker/css/admin_v3/all.scss
@@ -112,7 +112,7 @@
 @import "../admin/relationships";
 @import "../admin/reports";
 @import "components/select2"; // admin_v3
-@import "../admin/sidebar-item";
+@import "components/sidebar-item"; // admin_v3
 @import "../admin/side_menu";
 @import "../admin/tables";
 @import "../admin/tag_rules";
diff --git a/app/webpacker/css/admin_v3/components/sidebar-item.scss b/app/webpacker/css/admin_v3/components/sidebar-item.scss
new file mode 100644
index 0000000000..499c4e76e9
--- /dev/null
+++ b/app/webpacker/css/admin_v3/components/sidebar-item.scss
@@ -0,0 +1,124 @@
+div.sidebar_item {
+  margin-bottom: 30px;
+
+  .centered {
+    text-align: center;
+  }
+
+  div.header {
+    font-size: 105%;
+    color: #fff;
+    padding: 10px 0px;
+    position: relative;
+
+    &.blue {
+      background-color: $spree-blue;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+  }
+
+  .list {
+    max-height: 400px;
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    &.red {
+      color: $color-warning;
+
+      .list-item {
+        border: solid $color-warning;
+        border-width: 0px 3px 0px 3px;
+
+        a.alpha,
+        span.alpha {
+          margin-left: -3px;
+        }
+
+        &.odd {
+          background-color: #fcf6ef;
+
+          &:hover {
+            background-color: $spree-green;
+          }
+        }
+      }
+
+      a {
+        color: $color-warning;
+      }
+    }
+  }
+
+  .list-item {
+    .icon-arrow-right {
+      padding-top: 6px;
+      font-size: 20px;
+    }
+
+    border: solid $spree-blue;
+    border-width: 0px 1px 0px 1px;
+
+    a.alpha,
+    span.alpha {
+      font-weight: bold;
+      margin-left: -1px;
+      padding: 10px 2px 10px 5%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    span.omega {
+      padding: 8px 18px 8px 0px;
+      margin-right: -3px;
+      text-align: right;
+    }
+
+    .icon-remove-sign {
+      color: $color-warning;
+      font-size: 18px;
+    }
+
+    &.even {
+      background-color: #fff;
+    }
+
+    &.odd {
+      background-color: $spree-light-blue;
+    }
+
+    &.even,
+    &.odd {
+      &:hover {
+        color: #ffffff;
+        background-color: $spree-green;
+
+        a {
+          color: #ffffff;
+        }
+      }
+    }
+  }
+
+  a.button {
+    color: #fff;
+    padding: 15px 15px;
+    font-weight: bold;
+    text-align: center;
+    border-radius: 0px;
+
+    &.blue {
+      background-color: $spree-blue;
+    }
+
+    &.red {
+      background-color: $color-warning;
+    }
+
+    &:hover {
+      background-color: $spree-green;
+    }
+  }
+}

From 02bbd9a9ba5ff10baee0867c261df80b2498e9ce Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 15 Sep 2023 11:05:59 +0200
Subject: [PATCH 46/46] Adjust colors and height for sidebar-item component

---
 app/webpacker/css/admin_v3/components/sidebar-item.scss | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/sidebar-item.scss b/app/webpacker/css/admin_v3/components/sidebar-item.scss
index 499c4e76e9..773fca5ee9 100644
--- a/app/webpacker/css/admin_v3/components/sidebar-item.scss
+++ b/app/webpacker/css/admin_v3/components/sidebar-item.scss
@@ -41,7 +41,7 @@ div.sidebar_item {
           background-color: #fcf6ef;
 
           &:hover {
-            background-color: $spree-green;
+            background-color: $color-btn-bg;
           }
         }
       }
@@ -93,7 +93,7 @@ div.sidebar_item {
     &.odd {
       &:hover {
         color: #ffffff;
-        background-color: $spree-green;
+        background-color: $color-btn-bg;
 
         a {
           color: #ffffff;
@@ -104,7 +104,6 @@ div.sidebar_item {
 
   a.button {
     color: #fff;
-    padding: 15px 15px;
     font-weight: bold;
     text-align: center;
     border-radius: 0px;
@@ -118,7 +117,7 @@ div.sidebar_item {
     }
 
     &:hover {
-      background-color: $spree-green;
+      background-color: $color-btn-hover-bg;
     }
   }
 }