Admin member index: Update pagination layout & styles (#16995)

* pagination theme for new admin view

* align pagination widget correctly in desktop view

* remove bottom pagination

* re-add pagination to the bottom

* use block styling for the links

app/assets/images/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" transform="scale(-1 1)">
+    <path d="m13.172 12-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414 4.95-4.95Z"/>
+</svg>

app/assets/stylesheets/admin.scss

@@ -22,6 +22,18 @@ label {
     padding: 8px;
   }
 }
+// New pagination styles as added in Admin Member Index view. As we roll out these styles to other admin views, the above CSS will eventually be removed.
+.admin-pagination {
+  color: var(--link-color-secondary);
+
+  &--link {
+    padding: var(--su-1);
+  }
+
+  &--inactive {
+    color: var(--base-30);
+  }
+}
 
 .bg-featured {
   background: #bbffd2;

app/views/admin/users/_member_index.html.erb

@@ -4,9 +4,10 @@
     <%= render "admin/users/index/tabs" %>
   </header>
 
-  <%= render "admin/users/index/controls" %>
+  <div class="flex justify-between">
-
+    <%= render "admin/users/index/controls" %>
-  <%= paginate @users, theme: "internal" %>
+    <%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
+  </div>
 
     <table class="crayons-table" width="100%">
       <thead>
@@ -26,5 +27,7 @@
       </tbody>
     </table>
 
-    <%= paginate @users, theme: "internal" %>
+    <div class="flex justify-end">
+      <%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
+    </div>
 </div>

app/views/kaminari/admin/_next_page.html.erb

@@ -0,0 +1,4 @@
+<li class="flex items-center">
+  <%= link_to_unless current_page.last?, crayons_icon_tag("chevron-right", aria_hidden: true, class: ("admin-pagination--inactive mx-1" if current_page.last?).to_s), url, rel: "next", remote: remote, class: "admin-pagination--link  c-link c-link--icon-alone c-link--block",
+                                                                                                                                                                           aria: { label: t("views.pagination.aria_next"), describedby: "pagination-description" } %>
+</li>

app/views/kaminari/admin/_paginator.html.erb

@@ -0,0 +1,12 @@
+<%= paginator.render do %>
+  <nav aria-label="<%= label %>" class="admin-pagination flex fs-s items-center">
+    <span id="pagination-description">
+      <span class="screen-reader-only">Currently showing: </span>
+      <%= page_entries_info scope %>
+    </span>
+    <ul class="flex">
+      <%= prev_page_tag %>
+      <%= next_page_tag %>
+    </ul>
+  </nav>
+<% end %>

app/views/kaminari/admin/_prev_page.html.erb

@@ -0,0 +1,4 @@
+<li class="flex items-center">
+  <%= link_to_unless current_page.first?, crayons_icon_tag("chevron-left", aria_hidden: true, class: ("admin-pagination--inactive mx-1" if current_page.first?).to_s), url, rel: "prev", remote: remote, class: "admin-pagination--link c-link c-link--icon-alone c-link--block",
+                                                                                                                                                                            aria: { label: t("views.pagination.aria_previous"), describedby: "pagination-description" } %>
+</li>

config/locales/kaminari.en.yml

@@ -0,0 +1,10 @@
+---
+en:
+  views:
+    pagination:
+      aria_next: "Next page"
+      aria_previous: "Previous page"
+  helpers:
+    page_entries_info:
+      more_pages:
+        display_entries: "%{first} - %{last} of %{total}"

config/locales/kaminari.fr.yml

@@ -2,8 +2,14 @@
 fr:
   views:
     pagination:
+      aria_next: "Next page"
+      aria_previous: "Previous page"
       first: "« Premier"
       last: Dernier »
       next: Suivant ›
       previous: "‹ Précédent"
       truncate: "…"
+  helpers:
+    page_entries_info:
+      more_pages:
+        display_entries: "%{first} - %{last} of %{total}"