From 64d467ce39b20c814542212e222004ac7f1988a9 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 1 Dec 2022 15:03:14 +0100
Subject: [PATCH] Specify `table#listing_orders` and be as generic as possible
 for `table`

---
 app/views/spree/admin/orders/_note.html.haml  |  7 +--
 .../spree/admin/orders/_shipment.html.haml    |  5 ++-
 .../css/admin/v2/components/tables.scss       | 44 +++++++++++--------
 3 files changed, 33 insertions(+), 23 deletions(-)

diff --git a/app/views/spree/admin/orders/_note.html.haml b/app/views/spree/admin/orders/_note.html.haml
index fb46907191..c128e812ab 100644
--- a/app/views/spree/admin/orders/_note.html.haml
+++ b/app/views/spree/admin/orders/_note.html.haml
@@ -20,7 +20,8 @@
         = t(".no_note_present")
 
     %td.actions
-      = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit')
-      - if @order.note.present?
-        = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete')
+      .flex
+        = link_to '', '', class: 'edit-note icon_link icon-edit no-text with-tip', data: { action: 'edit' }, title: Spree.t('edit')
+        - if @order.note.present?
+          = link_to '', '', class: 'delete-note icon_link icon-trash no-text with-tip', data: { action: 'remove' }, title: Spree.t('delete')
 
diff --git a/app/views/spree/admin/orders/_shipment.html.haml b/app/views/spree/admin/orders/_shipment.html.haml
index 653f93ea5c..b66d73bd0d 100644
--- a/app/views/spree/admin/orders/_shipment.html.haml
+++ b/app/views/spree/admin/orders/_shipment.html.haml
@@ -70,8 +70,9 @@
 
         %td.actions
           - if can?(:update, shipment) && !shipment.canceled?
-            = link_to '', '', :class => 'save-tracking icon_link icon-ok no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'save' }, :title => I18n.t('actions.save')
-            = link_to '', '', :class => 'cancel-tracking icon_link icon-cancel no-text with-tip', :data => { :action => 'cancel' }, :title => I18n.t('actions.cancel')
+            .flex
+              = link_to '', '', :class => 'save-tracking icon_link icon-ok no-text with-tip', :data => { 'shipment-number' => shipment.number, :action => 'save' }, :title => I18n.t('actions.save')
+              = link_to '', '', :class => 'cancel-tracking icon_link icon-cancel no-text with-tip', :data => { :action => 'cancel' }, :title => I18n.t('actions.cancel')
 
       %tr.show-tracking.total
         %td{ :colspan => "5" }
diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
index 50ed4cd048..f7b7c9e7c0 100644
--- a/app/webpacker/css/admin/v2/components/tables.scss
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -1,8 +1,6 @@
 /* Overide tables.scss app/webpacker/css/admin/components/tables.scss */
 
-table thead th,
-table thead th.actions,
-table thead td.actions {
+table thead th {
   background-color: $v2-medium-light-grey;
   border: none;
   color: $v2-blue;
@@ -15,24 +13,23 @@ table thead td.actions {
   }
 }
 
+table tr:not([class*="state"]) {
+  th:first-child,
+  td:first-child {
+    border-left: none;
+  }
+}
+
 table tbody tr {
   &:first-child th,
   &:first-child td {
     border-top: none; // Don't show the top border of the first row
   }
-  td:not(:first-child) {
-    border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
-  }
 
   td {
-    border-bottom: none; // By default, do not show the border of the cells
-    border-right: none;
-    border-top: none;
-
+    border: none;
     border-bottom: 2px solid $v2-medium-light-grey;
-    &.actions {
-      border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
-    }
+
     > .flex {
       display: flex;
       column-gap: 10px;
@@ -78,11 +75,22 @@ table td.actions {
   }
 }
 
-table#listing_orders td {
-  // When the table is the listing of orders, we need to increase the height of the cells
-  padding: 20px 0;
+table#listing_orders {
+  thead th.actions,
+  thead td.actions {
+    background-color: $v2-medium-light-grey;
+  }
+  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;
+    &.actions {
+      padding-left: 20px;
+      border-bottom: 2px solid $v2-medium-light-grey !important; // needs to be important because of already defined with important
+    }
+
+    &:not(:first-child) {
+      border-left: none; // Only show left border on the first cells, as it indicates the order state by its color
+    }
   }
 }