From 5a06193e6527f91efc4ec862c36870f2b6ad421a Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Mon, 16 Feb 2026 20:11:11 +0200
Subject: [PATCH] ui/pager: restyle

---
 .../src/widgets/collections/Pagination.css    | 25 +++++++++++++++++++
 .../src/widgets/collections/Pagination.tsx    | 21 +++++++++++-----
 2 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 apps/client/src/widgets/collections/Pagination.css

diff --git a/apps/client/src/widgets/collections/Pagination.css b/apps/client/src/widgets/collections/Pagination.css
new file mode 100644
index 0000000000..e51faca6e4
--- /dev/null
+++ b/apps/client/src/widgets/collections/Pagination.css
@@ -0,0 +1,25 @@
+.note-list-pager {
+    display: flex;
+    align-items: center;
+    font-size: .8rem;
+
+    .note-list-pager-page-button-container {
+        .note-list-pager-page-button {
+            min-width: 40px;
+            padding-inline: 0;
+
+            &.note-list-pager-page-button-current {
+                color: orange;
+                font-weight: bold;
+                opacity: unset;
+            }
+        }
+
+        .note-list-pager-ellipsis {
+            display: inline-block;
+            width: 20px;
+            text-align: center;
+            opacity: .5;
+        }
+    }
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/Pagination.tsx b/apps/client/src/widgets/collections/Pagination.tsx
index b152e59638..b48550e008 100644
--- a/apps/client/src/widgets/collections/Pagination.tsx
+++ b/apps/client/src/widgets/collections/Pagination.tsx
@@ -6,6 +6,8 @@ import { useNoteLabelInt } from "../react/hooks";
 import { t } from "../../services/i18n";
 import ActionButton from "../react/ActionButton";
 import Button from "../react/Button";
+import "./Pagination.css";
+import clsx from "clsx";
 
 interface PaginationContext {
     page: number;
@@ -24,16 +26,18 @@ export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<P
     return (
         <div class="note-list-pager">
             <ActionButton
-                icon="bx bx-caret-left"
+                icon="bx bx-chevron-left"
                 disabled={(page === 1)}
                 text={t("pagination.prev_page")}
                 onClick={() => {setPage(page - 1)}}
             />
 
-            {children}
+            <div class="note-list-pager-page-button-container">
+                {children}
+            </div>
             
             <ActionButton
-                icon="bx bx-caret-right"
+                icon="bx bx-chevron-right"
                 disabled={(page === pageCount)}
                 text={t("pagination.next_page")}
                 onClick={() => {setPage(page + 1)}}
@@ -74,16 +78,21 @@ function createSegment(start: number, length: number, currentPage: number, setPa
     const children: ComponentChildren[] = [];
     
     if (prependEllipsis) {
-        children.push("...");
+        children.push(<span class="note-list-pager-ellipsis">...</span>);
     }
 
     for (let i = 0; i < length; i++) {
         const pageNum = start + i;
-
+        const isCurrent = (pageNum === currentPage);
         children.push((
             <Button
                 text={pageNum.toString()}
-                disabled={(pageNum === currentPage)}
+                kind="lowProfile"
+                className={clsx(
+                    "note-list-pager-page-button",
+                    {"note-list-pager-page-button-current": isCurrent}
+                )}
+                disabled={isCurrent}
                 onClick={() => setPage(pageNum)}
             />
         ));