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] 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 {