From f5e7738c78dd72fa4b089b129a803a88d492d653 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 16 Aug 2023 11:27:00 +0200
Subject: [PATCH] Introduce relaxed, regular and condensed button for specify
 height

---
 app/views/admin/products_v3/_filters.html.haml    |  2 +-
 app/views/admin/products_v3/_sort.html.haml       |  2 +-
 app/webpacker/css/admin/products_v3.scss          | 10 +++++-----
 .../css/admin_v3/components/buttons.scss          | 15 ++++++++++-----
 app/webpacker/css/admin_v3/globals/variables.scss |  5 +++--
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/views/admin/products_v3/_filters.html.haml b/app/views/admin/products_v3/_filters.html.haml
index e83f0587fc..b63eb23936 100644
--- a/app/views/admin/products_v3/_filters.html.haml
+++ b/app/views/admin/products_v3/_filters.html.haml
@@ -10,4 +10,4 @@
     = select_tag :category_id, options_for_select(category_options, category_id), include_blank: t('.all_categories'),  "data-controller": "tom-select", "data-tom-select-options-value": '{ "plugins": [] }', class: "fullwidth"
   .submit
     .search-button
-      = button_tag t(".search"), class: "secondary icon-search"
+      = button_tag t(".search"), class: "secondary icon-search relaxed"
diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml
index d3daa5eaa3..3b39f3ed9f 100644
--- a/app/views/admin/products_v3/_sort.html.haml
+++ b/app/views/admin/products_v3/_sort.html.haml
@@ -2,7 +2,7 @@
   %div
     = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to)
     - if search_term.present? || producer_id.present? || category_id.present?
-      %a{ href: "#", class: "button disruptive medium", data: { reflex: "click->products#clear_search" } }
+      %a{ href: "#", class: "button disruptive condensed", data: { reflex: "click->products#clear_search" } }
         = t(".pagination.clear_search")  
   %div.with-dropdown
     = t(".pagination.per_page.show")
diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss
index e5da3584a3..a5b7d9fe62 100644
--- a/app/webpacker/css/admin/products_v3.scss
+++ b/app/webpacker/css/admin/products_v3.scss
@@ -104,8 +104,8 @@
   }
 
   #sort {
-    line-height: $btn-medium-height;
-    height: $btn-medium-height;
+    line-height: $btn-relaxed-height;
+    height: $btn-relaxed-height;
 
     .with-dropdown {
       display: flex;
@@ -150,8 +150,8 @@
         background-color: $lighter-grey;
         border: 1px solid $lighter-grey;
         border-radius: 4px;
-        height: $btn-height;
-        line-height: $btn-height;
+        height: $btn-relaxed-height;
+        line-height: $btn-relaxed-height;
 
         &:has(input:focus),
         &:has(input:active) {
@@ -176,7 +176,7 @@
     .categories {
       select {
         width: 150px;
-        height: $btn-height;
+        height: $btn-relaxed-height;
       }
     }
 
diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 71b38206b8..e37abeb6f8 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -12,8 +12,8 @@ button:not(.plain):not(.trix-button),
   border: 1px solid $color-btn-bg;
   color: $color-btn-text;
   text-transform: uppercase;
-  line-height: 40px;
-  height: 40px;
+  line-height: $btn-regular-height - 2px; // remove 2px to compensate for border
+  height: $btn-regular-height;
   font-weight: bold;
 
   &:before {
@@ -79,9 +79,14 @@ button:not(.plain):not(.trix-button),
     }
   }
 
-  &.medium {
-    line-height: $btn-medium-height;
-    height: $btn-medium-height;
+  &.condensed {
+    line-height: $btn-condensed-height - 2px; // remove 2px to compensate for border
+    height: $btn-condensed-height;
+  }
+
+  &.relaxed {
+    line-height: $btn-relaxed-height - 2px; // remove 2px to compensate for border
+    height: $btn-relaxed-height;
   }
 
   .badge {
diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index de8975e93d..cf8fa70498 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -155,5 +155,6 @@ $border-radius:                  4px !default;
 $font-weight-bold:               600 !default;
 $font-weight-normal:             400 !default;
 
-$btn-height:                     40px !default;
-$btn-medium-height:              32px !default;
+$btn-relaxed-height:             40px !default;
+$btn-regular-height:             32px !default;
+$btn-condensed-height:           26px !default;