From 98b9395c319d3f4f71881dd51e4e4d2e6516dd96 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Thu, 24 Nov 2022 16:46:22 +0100
Subject: [PATCH] Adjust table to reflect the new design

colors, size, border, padding/margin, ...
---
 .../css/admin/v2/components/tables.scss       | 79 +++++++++++++++++++
 app/webpacker/css/admin/v2/main.scss          |  1 +
 2 files changed, 80 insertions(+)
 create mode 100644 app/webpacker/css/admin/v2/components/tables.scss

diff --git a/app/webpacker/css/admin/v2/components/tables.scss b/app/webpacker/css/admin/v2/components/tables.scss
new file mode 100644
index 0000000000..a56fa31798
--- /dev/null
+++ b/app/webpacker/css/admin/v2/components/tables.scss
@@ -0,0 +1,79 @@
+/* Overide tables.scss app/webpacker/css/admin/components/tables.scss */
+
+table thead th {
+  background-color: $v2-medium-light-grey;
+  border: none;
+  color: $v2-blue;
+  text-transform: capitalize;
+  font-size: 13px;
+
+  a {
+    border: none;
+    color: $v2-blue;
+  }
+}
+
+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-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
+      display: flex;
+      column-gap: 10px;
+    }
+  }
+  &.even,
+  &.odd {
+    td {
+      background-color: transparent; // Do not use odd and even colors for background
+    }
+  }
+}
+
+table th a,
+table td a {
+  // This should probably be a default rule for all links at a general level
+  color: $v2-blue-light;
+  &:hover {
+    color: $v2-blue;
+  }
+}
+
+table th.actions,
+table td.actions {
+  // Special for icons in the actions column
+  [class*="icon-"].no-text {
+    border-color: $v2-blue-light;
+    background-color: $v2-blue-lightest;
+
+    &:hover {
+      border-color: $v2-blue;
+      background-color: $v2-blue-light;
+
+      &:before {
+        color: white;
+      }
+    }
+  }
+}
+
+table#listing_orders td {
+  // When the table is the listing of orders, we need to increase the height of the cells
+  padding: 20px 0;
+
+  &.actions {
+    padding-left: 20px;
+  }
+}
diff --git a/app/webpacker/css/admin/v2/main.scss b/app/webpacker/css/admin/v2/main.scss
index 1be324c843..08f86e3a9b 100644
--- a/app/webpacker/css/admin/v2/main.scss
+++ b/app/webpacker/css/admin/v2/main.scss
@@ -7,5 +7,6 @@ body.admin.admin-v2 {
   @import "plugins/powertip.scss";
   @import "shared/forms.scss";
   @import "components/buttons.scss";
+  @import "components/tables.scss";
   @import "components/progress.scss";
 }