From ccfc632149f062fca546784c7c2f14708d91a08e Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 15:55:31 +0100
Subject: [PATCH 01/20] Whatever the condition, display the `td`

And put the `ng-if` inside the `td`, attached to a new `div`
---
 app/views/admin/order_cycles/_row.html.haml | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/views/admin/order_cycles/_row.html.haml b/app/views/admin/order_cycles/_row.html.haml
index 5a2e06dbb6..aea9780962 100644
--- a/app/views/admin/order_cycles/_row.html.haml
+++ b/app/views/admin/order_cycles/_row.html.haml
@@ -33,7 +33,9 @@
 
   %td.actions
     %a.edit-order-cycle.icon-edit.no-text{ ng: { href: '{{orderCycle.edit_path}}'}, 'ofn-with-tip' => t(:edit) }
-  %td.actions{ ng: { if: 'orderCycle.viewing_as_coordinator' } }
-    %a.clone-order-cycle.icon-copy.no-text{ ng: { href: '{{orderCycle.clone_path}}'}, 'ofn-with-tip' => t(:clone) }
-  %td.actions{ ng: { if: 'orderCycle.deletable && orderCycle.viewing_as_coordinator' }}
-    %a.delete-order-cycle.icon-trash.no-text{ ng: { href: '{{orderCycle.delete_path}}'}, data: { method: 'delete', confirm: t(:are_you_sure) }, 'ofn-with-tip' => t(:remove) }
+  %td.actions
+    %div{ ng: { if: 'orderCycle.viewing_as_coordinator' } }
+      %a.clone-order-cycle.icon-copy.no-text{ ng: { href: '{{orderCycle.clone_path}}'}, 'ofn-with-tip' => t(:clone) }
+  %td.actions
+    %div{ ng: { if: 'orderCycle.deletable && orderCycle.viewing_as_coordinator' }}
+      %a.delete-order-cycle.icon-trash.no-text{ ng: { href: '{{orderCycle.delete_path}}'}, data: { method: 'delete', confirm: t(:are_you_sure) }, 'ofn-with-tip' => t(:remove) }

From 6529a8d98fedeee36672e665ba8581ba3b4c7f87 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 15:57:21 +0100
Subject: [PATCH 02/20] `#clear_all_filters` button as a secondary one

---
 app/webpacker/css/admin/v2/components/buttons.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss
index 90a4a70184..452a367e96 100644
--- a/app/webpacker/css/admin/v2/components/buttons.scss
+++ b/app/webpacker/css/admin/v2/components/buttons.scss
@@ -33,7 +33,8 @@ fieldset .filter-actions .button:hover,
 
   &.secondary,
   &.cancel,
-  &.icon-remove {
+  &.icon-remove,
+  &#clear_all_filters {
     background-color: $white;
     border: 2px solid $v2-blue-light;
     color: $v2-blue-light;

From 4c172b5ace9734c3af214cb14852f03da85393bd Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:14:54 +0100
Subject: [PATCH 03/20] Adjust color and height between input type text and
 select

---
 app/webpacker/css/admin/v2/plugins/select2.scss | 3 ++-
 app/webpacker/css/admin/v2/shared/forms.scss    | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss
index fb017a890b..8c9713af2f 100644
--- a/app/webpacker/css/admin/v2/plugins/select2.scss
+++ b/app/webpacker/css/admin/v2/plugins/select2.scss
@@ -7,7 +7,7 @@
     color: $v2-medium-grey !important;
     padding-left: 5px;
     font-size: 13px;
-    padding-top: 3px;
+    height: 35px;
 
     .select2-arrow {
       color: $v2-medium-grey;
@@ -45,6 +45,7 @@
   }
   .select2-choices {
     border-color: $v2-medium-grey !important;
+    min-height: 35px;
     .select2-search-choice {
       background-color: $v2-blue-light;
     }
diff --git a/app/webpacker/css/admin/v2/shared/forms.scss b/app/webpacker/css/admin/v2/shared/forms.scss
index ac8d9bf316..a0309662dd 100644
--- a/app/webpacker/css/admin/v2/shared/forms.scss
+++ b/app/webpacker/css/admin/v2/shared/forms.scss
@@ -18,9 +18,10 @@ fieldset {
   // Change the color of all inputs
   color: $v2-medium-grey;
   border-color: $v2-light-grey !important;
+  font-size: 13px;
 
   &:focus {
-    border-color: $v2-medium-grey;
+    border-color: $v2-medium-grey !important;
   }
 }
 

From d7454ecb9fd5765a118fa2c877affeb9aaf6d2f5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:32:00 +0100
Subject: [PATCH 04/20] Adjust border radius when drop is above

---
 app/webpacker/css/admin/v2/plugins/select2.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss
index 8c9713af2f..735a2dd755 100644
--- a/app/webpacker/css/admin/v2/plugins/select2.scss
+++ b/app/webpacker/css/admin/v2/plugins/select2.scss
@@ -50,6 +50,14 @@
       background-color: $v2-blue-light;
     }
   }
+  &.select2-drop-above {
+    .select2-choices {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-left-radius: 3px;
+      border-bottom-right-radius: 3px;
+    }
+  }
 }
 
 .select2-drop {

From d7e3e81c8ceb13439f91d0775249e2efe57162d9 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:32:11 +0100
Subject: [PATCH 05/20] Adjust border color when active

---
 app/webpacker/css/admin/v2/plugins/select2.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss
index 735a2dd755..bd461a8580 100644
--- a/app/webpacker/css/admin/v2/plugins/select2.scss
+++ b/app/webpacker/css/admin/v2/plugins/select2.scss
@@ -62,6 +62,9 @@
 
 .select2-drop {
   border-color: $v2-medium-grey;
+  &.select2-drop-above.select2-drop-active {
+    border-color: $v2-medium-grey;
+  }
 }
 
 .select2-search {

From 7c321922ad5bc2af8e1b373d59b49fd66a285951 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:34:20 +0100
Subject: [PATCH 06/20] Actually, this needs to be white since the body is no
 more white

---
 app/webpacker/css/admin/v2/plugins/select2.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin/v2/plugins/select2.scss b/app/webpacker/css/admin/v2/plugins/select2.scss
index bd461a8580..6f873fbc1a 100644
--- a/app/webpacker/css/admin/v2/plugins/select2.scss
+++ b/app/webpacker/css/admin/v2/plugins/select2.scss
@@ -17,7 +17,7 @@
   &.select2-container-active,
   &:hover {
     .select2-choice {
-      background-color: transparent !important;
+      background-color: white !important;
       border-color: $v2-medium-grey !important;
     }
   }

From 2ccb7de004b76c1273841ed0e506d96a2618bc8e Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:46:12 +0100
Subject: [PATCH 07/20] Specify cursor: default when button is disabled

---
 app/webpacker/css/admin/v2/components/buttons.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss
index 452a367e96..1b687b995e 100644
--- a/app/webpacker/css/admin/v2/components/buttons.scss
+++ b/app/webpacker/css/admin/v2/components/buttons.scss
@@ -29,6 +29,7 @@ fieldset .filter-actions .button:hover,
   &[disabled] {
     @include backgroundAndBorder($v2-light-grey);
     box-shadow: none;
+    cursor: default;
   }
 
   &.secondary,

From 26684f7db51cbaa1ac135290a52efbd0a90b1def Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:53:05 +0100
Subject: [PATCH 08/20] New colors for wizard progress

---
 .../css/admin/v2/components/wizard_progress.scss    | 13 +++++++++++++
 app/webpacker/css/admin/v2/main.scss                |  1 +
 2 files changed, 14 insertions(+)
 create mode 100644 app/webpacker/css/admin/v2/components/wizard_progress.scss

diff --git a/app/webpacker/css/admin/v2/components/wizard_progress.scss b/app/webpacker/css/admin/v2/components/wizard_progress.scss
new file mode 100644
index 0000000000..973f200127
--- /dev/null
+++ b/app/webpacker/css/admin/v2/components/wizard_progress.scss
@@ -0,0 +1,13 @@
+ul.wizard-progress li {
+  a {
+    color: white;
+  }
+
+  &.current {
+    background-color: $v2-blue-light;
+    &:before,
+    &:after {
+      background-color: $v2-blue-light;
+    }
+  }
+}
diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss
index 16d0dc59a6..07dec290ae 100644
--- a/app/webpacker/css/admin/v2/main.scss
+++ b/app/webpacker/css/admin/v2/main.scss
@@ -12,6 +12,7 @@
 @import "components/sidebar.scss";
 @import "components/tom_select.scss";
 @import "components/dropdown.scss";
+@import "components/wizard_progress.scss";
 
 body {
   background-color: $v2-body-bg;

From c5f3d3fa714ae8af5511c4af3cd49a4877941a88 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:57:14 +0100
Subject: [PATCH 09/20] Use a darker grey for disabled button

---
 app/webpacker/css/admin/v2/components/buttons.scss | 2 +-
 app/webpacker/css/admin/v2/variables.scss          | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss
index 1b687b995e..891f2f4716 100644
--- a/app/webpacker/css/admin/v2/components/buttons.scss
+++ b/app/webpacker/css/admin/v2/components/buttons.scss
@@ -27,7 +27,7 @@ fieldset .filter-actions .button:hover,
 
   &.disabled,
   &[disabled] {
-    @include backgroundAndBorder($v2-light-grey);
+    @include backgroundAndBorder($v2-dark-light-grey);
     box-shadow: none;
     cursor: default;
   }
diff --git a/app/webpacker/css/admin/v2/variables.scss b/app/webpacker/css/admin/v2/variables.scss
index b6548511de..21fedeca07 100644
--- a/app/webpacker/css/admin/v2/variables.scss
+++ b/app/webpacker/css/admin/v2/variables.scss
@@ -9,6 +9,7 @@ $v2-dark-grey: #333333;
 $v2-medium-dark-grey: #444444;
 $v2-body-grey: $color-4;
 $v2-medium-grey: #717171;
+$v2-dark-light-grey: #d9d9d9;
 $v2-medium-light-grey: #e6e6e6;
 $v2-light-grey: #e7e7e7;
 

From 274e0d0335a843f8d61e44c9473910cf2c06ce04 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 16:57:22 +0100
Subject: [PATCH 10/20] Same color but with variable

---
 app/webpacker/css/admin/v2/components/wizard_progress.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/app/webpacker/css/admin/v2/components/wizard_progress.scss b/app/webpacker/css/admin/v2/components/wizard_progress.scss
index 973f200127..83cfe8dd3f 100644
--- a/app/webpacker/css/admin/v2/components/wizard_progress.scss
+++ b/app/webpacker/css/admin/v2/components/wizard_progress.scss
@@ -3,6 +3,12 @@ ul.wizard-progress li {
     color: white;
   }
 
+  background-color: $v2-dark-light-grey;
+  &:before,
+  &:after {
+    background-color: $v2-dark-light-grey;
+  }
+
   &.current {
     background-color: $v2-blue-light;
     &:before,

From fd87013a6397e05b7360cdb694f8de923f2e9191 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 8 Dec 2022 21:26:29 +0100
Subject: [PATCH 11/20] Colorize and customize tagging componenent

---
 app/webpacker/css/admin/v2/components/tags-input.scss | 10 ++++++++++
 app/webpacker/css/admin/v2/main.scss                  |  1 +
 2 files changed, 11 insertions(+)
 create mode 100644 app/webpacker/css/admin/v2/components/tags-input.scss

diff --git a/app/webpacker/css/admin/v2/components/tags-input.scss b/app/webpacker/css/admin/v2/components/tags-input.scss
new file mode 100644
index 0000000000..c7c8634c97
--- /dev/null
+++ b/app/webpacker/css/admin/v2/components/tags-input.scss
@@ -0,0 +1,10 @@
+tags-input .tags li.tag-item {
+  background-color: $v2-blue-light;
+}
+
+tags-input .tags {
+  box-shadow: none;
+  &.focused {
+    box-shadow: none;
+  }
+}
diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss
index 07dec290ae..d33374e470 100644
--- a/app/webpacker/css/admin/v2/main.scss
+++ b/app/webpacker/css/admin/v2/main.scss
@@ -13,6 +13,7 @@
 @import "components/tom_select.scss";
 @import "components/dropdown.scss";
 @import "components/wizard_progress.scss";
+@import "components/tags-input.scss";
 
 body {
   background-color: $v2-body-bg;

From 927c1c81e5c3d525e4a36e1a8d35dc2912a7a1a0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 9 Dec 2022 09:46:04 +0100
Subject: [PATCH 12/20] Border and background for a panel

---
 app/webpacker/css/admin/v2/main.scss   | 2 ++
 app/webpacker/css/admin/v2/others.scss | 6 ++++++
 2 files changed, 8 insertions(+)
 create mode 100644 app/webpacker/css/admin/v2/others.scss

diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss
index d33374e470..2ff6321fb4 100644
--- a/app/webpacker/css/admin/v2/main.scss
+++ b/app/webpacker/css/admin/v2/main.scss
@@ -15,6 +15,8 @@
 @import "components/wizard_progress.scss";
 @import "components/tags-input.scss";
 
+@import "others.scss";
+
 body {
   background-color: $v2-body-bg;
 }
diff --git a/app/webpacker/css/admin/v2/others.scss b/app/webpacker/css/admin/v2/others.scss
new file mode 100644
index 0000000000..ad60e67342
--- /dev/null
+++ b/app/webpacker/css/admin/v2/others.scss
@@ -0,0 +1,6 @@
+/* The aim of this file is to not create a file for each small modification on components */
+
+#advanced_settings {
+  background-color: $v2-blue-lightest;
+  border-color: $v2-blue-dark;
+}

From 972e0b5d0b9f2ac6c30450227b2b16f8d23f03d8 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 9 Dec 2022 09:48:03 +0100
Subject: [PATCH 13/20] Specify color for h4. Same as others titles.

---
 app/webpacker/css/admin/v2/shared/typography.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/app/webpacker/css/admin/v2/shared/typography.scss b/app/webpacker/css/admin/v2/shared/typography.scss
index 03bdd23e5a..458558290c 100644
--- a/app/webpacker/css/admin/v2/shared/typography.scss
+++ b/app/webpacker/css/admin/v2/shared/typography.scss
@@ -12,3 +12,7 @@
 a:not(.button) {
   @include v2-link-color();
 }
+
+h4 {
+  color: $v2-medium-dark-grey;
+}

From fc6bd53720f0f132c1c71320a4a24dc3d46f0b9e Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 10:33:27 +0100
Subject: [PATCH 14/20] Put some specials rules for `listing_orders` as
 generics for all tables

- `.actions` is now integrated to the table itself, with the same design
- We have to use `!important` keyword as already defined like this...
---
 app/webpacker/css/admin/v2/components/tables.scss | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
index 143da4fb5a..8d5cfb3f3c 100644
--- a/app/webpacker/css/admin/v2/components/tables.scss
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -57,7 +57,6 @@ table tbody tr {
 
 table thead tr th.actions,
 table tbody tr td.actions {
-  background-color: $v2-body-bg !important;
   // Special for icons in the actions column
   [class*="icon-"],
   button[class*="icon-"]:not(.disabled):not([disabled]):not(.secondary):not(.cancel) {
@@ -96,7 +95,7 @@ table tbody tr td.actions {
   }
 }
 
-table#listing_orders {
+table {
   thead th.actions,
   thead td.actions {
     background-color: $v2-medium-light-grey !important;
@@ -105,13 +104,17 @@ table#listing_orders {
     background-color: white !important;
   }
   td {
-    // When the table is the listing of orders, we need to increase the height of the cells
-    padding: 20px 0;
-
     &.actions {
       padding-left: 20px;
       border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
     }
+  }
+}
+
+table#listing_orders {
+  td {
+    // When the table is the listing of orders, we need to increase the height of the cells
+    padding: 20px 0;
 
     &:not(:first-child) {
       border-left: none; // Only show left border on the first cells, as it indicates the order state by its color

From 52cb6d4eecfa5c7d8b435804f56ae77feb2d1af2 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 10:45:30 +0100
Subject: [PATCH 15/20] Put all actions in the same flex container, aligned to
 right

---
 app/views/admin/order_cycles/_header.html.haml    |  2 --
 app/views/admin/order_cycles/_row.html.haml       | 13 ++++++-------
 app/webpacker/css/admin/v2/components/tables.scss |  4 ++++
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/views/admin/order_cycles/_header.html.haml b/app/views/admin/order_cycles/_header.html.haml
index 0d3f9fba8e..c77bb3d888 100644
--- a/app/views/admin/order_cycles/_header.html.haml
+++ b/app/views/admin/order_cycles/_header.html.haml
@@ -32,5 +32,3 @@
     %th{ ng: { show: 'columns.products.visible' } }
       =t :products
     %th.actions
-    %th.actions
-    %th.actions
diff --git a/app/views/admin/order_cycles/_row.html.haml b/app/views/admin/order_cycles/_row.html.haml
index aea9780962..1fbba44186 100644
--- a/app/views/admin/order_cycles/_row.html.haml
+++ b/app/views/admin/order_cycles/_row.html.haml
@@ -32,10 +32,9 @@
       = t('.variants')
 
   %td.actions
-    %a.edit-order-cycle.icon-edit.no-text{ ng: { href: '{{orderCycle.edit_path}}'}, 'ofn-with-tip' => t(:edit) }
-  %td.actions
-    %div{ ng: { if: 'orderCycle.viewing_as_coordinator' } }
-      %a.clone-order-cycle.icon-copy.no-text{ ng: { href: '{{orderCycle.clone_path}}'}, 'ofn-with-tip' => t(:clone) }
-  %td.actions
-    %div{ ng: { if: 'orderCycle.deletable && orderCycle.viewing_as_coordinator' }}
-      %a.delete-order-cycle.icon-trash.no-text{ ng: { href: '{{orderCycle.delete_path}}'}, data: { method: 'delete', confirm: t(:are_you_sure) }, 'ofn-with-tip' => t(:remove) }
+    .flex
+      %a.edit-order-cycle.icon-edit.no-text{ ng: { href: '{{orderCycle.edit_path}}'}, 'ofn-with-tip' => t(:edit) }
+      %div{ ng: { if: 'orderCycle.viewing_as_coordinator' } }
+        %a.clone-order-cycle.icon-copy.no-text{ ng: { href: '{{orderCycle.clone_path}}'}, 'ofn-with-tip' => t(:clone) }
+      %div{ ng: { if: 'orderCycle.deletable && orderCycle.viewing_as_coordinator' }}
+        %a.delete-order-cycle.icon-trash.no-text{ ng: { href: '{{orderCycle.delete_path}}'}, data: { method: 'delete', confirm: t(:are_you_sure) }, 'ofn-with-tip' => t(:remove) }
diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
index 8d5cfb3f3c..6f7128446a 100644
--- a/app/webpacker/css/admin/v2/components/tables.scss
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -46,6 +46,10 @@ table tbody tr {
       display: flex;
       column-gap: 10px;
     }
+
+    &.actions > .flex {
+      justify-content: flex-end;
+    }
   }
   &.even,
   &.odd {

From bba1d6c725be7254d565c6b6135cb5f35e13f2b5 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 10:46:01 +0100
Subject: [PATCH 16/20] Do not specify sizes, let the browser fix the best
 layout for table

---
 app/views/admin/order_cycles/_header.html.haml | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/admin/order_cycles/_header.html.haml b/app/views/admin/order_cycles/_header.html.haml
index c77bb3d888..b867609e3c 100644
--- a/app/views/admin/order_cycles/_header.html.haml
+++ b/app/views/admin/order_cycles/_header.html.haml
@@ -1,16 +1,16 @@
 %colgroup
   %col{ ng: { show: 'columns.name.visible' } }
   %col{ ng: { show: 'columns.schedules.visible' } }
-  %col{ ng: { show: 'columns.open.visible' }, style: 'width: 20%;' }
-  %col{ ng: { show: 'columns.close.visible' }, style: 'width: 20%;' }
+  %col{ ng: { show: 'columns.open.visible' } }
+  %col{ ng: { show: 'columns.close.visible' } }
   - unless simple_index
     %col{ ng: { show: 'columns.producers.visible' } }
     %col{ ng: { show: 'columns.coordinator.visible' } }
     %col{ ng: { show: 'columns.shops.visible' } }
   %col{ ng: { show: 'columns.products.visible' } }
-  %col{ style: 'width: 5%;' }
-  %col{ style: 'width: 5%;' }
-  %col{ style: 'width: 5%;' }
+  %col
+  %col
+  %col
 
 %thead
   %tr

From c7d4c4c195af43e7682617f3d5b7e8e9d71e5fbc Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 10:59:01 +0100
Subject: [PATCH 17/20] Put action in the flex container for incoming|outgoing
 products in OC

---
 app/views/admin/order_cycles/_exchange_form.html.haml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/views/admin/order_cycles/_exchange_form.html.haml b/app/views/admin/order_cycles/_exchange_form.html.haml
index 8ab45003c5..7895cb4d0c 100644
--- a/app/views/admin/order_cycles/_exchange_form.html.haml
+++ b/app/views/admin/order_cycles/_exchange_form.html.haml
@@ -26,7 +26,8 @@
 
     = f.submit t('.add_fee'), 'ng-click' => 'addExchangeFee($event, exchange)', 'ng-hide' => '!enterprises[exchange.enterprise_id].managed && !order_cycle.viewing_as_coordinator'
   %td.actions
-    %a{'ng-click' => 'removeExchange($event, exchange)', :class => "icon-trash no-text remove-exchange"}
+    .flex
+      %a{'ng-click' => 'removeExchange($event, exchange)', :class => "icon-trash no-text remove-exchange"}
 
 - if type == 'supplier'
   %tr.panel-row{ object: "exchange",

From 73a2b90e1b52c96658d128a5ab84527a2a2d31d2 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 10:49:26 +0100
Subject: [PATCH 18/20] On hovering, all the tr should be colored

This needs to be respecified with an `!important` keyword

Even if already defined in `app/webpacker/css/admin/openfoodnetwork.scss`
---
 app/webpacker/css/admin/v2/components/tables.scss | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
index 6f7128446a..b3124cf38b 100644
--- a/app/webpacker/css/admin/v2/components/tables.scss
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -115,6 +115,10 @@ table {
   }
 }
 
+table tbody tr:hover > td {
+  background-color: #e9f3fc !important; // needs to be important because of already defined with important
+}
+
 table#listing_orders {
   td {
     // When the table is the listing of orders, we need to increase the height of the cells
@@ -125,3 +129,13 @@ table#listing_orders {
     }
   }
 }
+
+table#listing_order_cycles tr.open td {
+  background-color: #d9fccb !important; // needs to be important because of already defined with important
+}
+table#listing_order_cycles tr.closed td {
+  background-color: #eee !important; // needs to be important because of already defined with important
+}
+table#listing_order_cycles tr.upcoming td {
+  background-color: #fbfccb !important; // needs to be important because of already defined with important
+}

From 5aca76e5203f94f986b7219dd96a484942a528c0 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 11:24:36 +0100
Subject: [PATCH 19/20] OC, incoming|outgoing products, have the actions inside
 the table

---
 app/views/admin/order_cycles/_exchange_form.html.haml | 4 ++--
 app/webpacker/css/admin/v2/components/tables.scss     | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/views/admin/order_cycles/_exchange_form.html.haml b/app/views/admin/order_cycles/_exchange_form.html.haml
index 7895cb4d0c..e5aa662c60 100644
--- a/app/views/admin/order_cycles/_exchange_form.html.haml
+++ b/app/views/admin/order_cycles/_exchange_form.html.haml
@@ -33,9 +33,9 @@
   %tr.panel-row{ object: "exchange",
     panels: "{products: 'exchange_products_supplied'}",
     locals: "$index,exchangeTotalVariants,order_cycle,exchange,enterprises,setExchangeVariants,selectAllVariants,suppliedVariants,removeDistributionOfVariant,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts,productsLoading",
-    colspan: 4 }
+    colspan: if feature?(:admin_style_v2, spree_current_user) then 5 else 4 end }
 - if type == 'distributor'
   %tr.panel-row{ object: "exchange",
     panels: "{products: 'exchange_products_distributed', tags: 'exchange_tags'}",
     locals: "$index,exchangeTotalVariants,order_cycle,exchange,enterprises,setExchangeVariants,incomingExchangeVariantsFor,variantSuppliedToOrderCycle,initializeExchangeProductsPanel,loadMoreExchangeProducts,loadAllExchangeProducts,productsLoading",
-    colspan: 5 }
+    colspan: if feature?(:admin_style_v2, spree_current_user) then 6 else 5 end }
diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
index b3124cf38b..e273947f9e 100644
--- a/app/webpacker/css/admin/v2/components/tables.scss
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -139,3 +139,11 @@ table#listing_order_cycles tr.closed td {
 table#listing_order_cycles tr.upcoming td {
   background-color: #fbfccb !important; // needs to be important because of already defined with important
 }
+
+tbody.panel-ctrl.expanded > tr:not(.panel-row) > td {
+  border-bottom: 1px solid #6788a2 !important; // needs to be important because of already defined with important
+}
+
+tbody.panel-ctrl.expanded > tr:not(.panel-row) > td.selected {
+  border-bottom: none !important; // it's a bit annoying to always put that important, but it's the only way to override the default style
+}

From e403a2c174def34cfa115eab038c86923482bfbf Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 6 Jan 2023 11:35:12 +0100
Subject: [PATCH 20/20] Secondary button can actually be disabled

---
 .../admin/order_cycles/_add_exchange_form.html.haml  |  2 +-
 app/webpacker/css/admin/v2/components/buttons.scss   | 12 +++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/views/admin/order_cycles/_add_exchange_form.html.haml b/app/views/admin/order_cycles/_add_exchange_form.html.haml
index 36c8e804af..72be25f5f4 100644
--- a/app/views/admin/order_cycles/_add_exchange_form.html.haml
+++ b/app/views/admin/order_cycles/_add_exchange_form.html.haml
@@ -3,4 +3,4 @@
     {{ enterprise.name }}
     = "{{ enterprise.issues_summary_#{type} ? '('+enterprise.issues_summary_#{type}+')' : '' }}"
 
-= f.submit t(".add_#{type}"), 'ng-click' => "add#{type.capitalize}($event)", 'ng-disabled' => "!new_#{type}_id || !OrderCycle.novel#{type.capitalize}(new_#{type}_id)"
+= f.submit t(".add_#{type}"), 'ng-click' => "add#{type.capitalize}($event)", 'ng-disabled' => "!new_#{type}_id || !OrderCycle.novel#{type.capitalize}(new_#{type}_id)", "class": "secondary"
diff --git a/app/webpacker/css/admin/v2/components/buttons.scss b/app/webpacker/css/admin/v2/components/buttons.scss
index 891f2f4716..6e52bd2f54 100644
--- a/app/webpacker/css/admin/v2/components/buttons.scss
+++ b/app/webpacker/css/admin/v2/components/buttons.scss
@@ -26,10 +26,20 @@ fieldset .filter-actions .button:hover,
   }
 
   &.disabled,
-  &[disabled] {
+  &[disabled],
+  &.disabled.secondary,
+  &[disabled].secondary {
     @include backgroundAndBorder($v2-dark-light-grey);
     box-shadow: none;
     cursor: default;
+    color: white;
+
+    &:hover {
+      @include backgroundAndBorder($v2-dark-light-grey);
+      box-shadow: none;
+      cursor: default;
+      color: white;
+    }
   }
 
   &.secondary,