From 24609da6ab54b98ed149a4c9a47eaaf54caed605 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Thu, 25 Jul 2024 11:47:34 +1000
Subject: [PATCH] feat(ui): tweak pagination styles

---
 .../ImageGrid/GalleryPagination.tsx           | 47 ++++++++++++-------
 1 file changed, 29 insertions(+), 18 deletions(-)

diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx
index 07e33d9085..27776ab77d 100644
--- a/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx
+++ b/invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx
@@ -1,7 +1,7 @@
-import { Button, Flex, Icon, IconButton } from '@invoke-ai/ui-library';
+import { Button, Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
 import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
 import { useCallback } from 'react';
-import { PiCaretLeftBold, PiCaretRightBold, PiDotsThreeBold } from 'react-icons/pi';
+import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
 
 import { JumpTo } from './JumpTo';
 
@@ -22,7 +22,7 @@ export const GalleryPagination = () => {
   }
 
   return (
-    <Flex justifyContent="center" alignItems="center" w="full" gap={1}>
+    <Flex justifyContent="center" alignItems="center" w="full" gap={1} pt={2}>
       <IconButton
         size="sm"
         aria-label="prev"
@@ -31,21 +31,11 @@ export const GalleryPagination = () => {
         isDisabled={!isPrevEnabled}
         variant="ghost"
       />
-      {pageButtons.map((page, i) => {
-        if (page === ELLIPSIS) {
-          return <Icon as={PiDotsThreeBold} boxSize="4" key={`ellipsis-${i}`} />;
-        }
-        return (
-          <Button
-            size="sm"
-            key={page}
-            onClick={goToPage.bind(null, page - 1)}
-            variant={currentPage === page - 1 ? 'solid' : 'outline'}
-          >
-            {page}
-          </Button>
-        );
-      })}
+      <Spacer />
+      {pageButtons.map((page, i) => (
+        <PageButton key={`${page}_${i}`} page={page} currentPage={currentPage} goToPage={goToPage} />
+      ))}
+      <Spacer />
       <IconButton
         size="sm"
         aria-label="next"
@@ -58,3 +48,24 @@ export const GalleryPagination = () => {
     </Flex>
   );
 };
+
+type PageButtonProps = {
+  page: number | typeof ELLIPSIS;
+  currentPage: number;
+  goToPage: (page: number) => void;
+};
+
+const PageButton = ({ page, currentPage, goToPage }: PageButtonProps) => {
+  if (page === ELLIPSIS) {
+    return (
+      <Button size="sm" variant="link" isDisabled>
+        ...
+      </Button>
+    );
+  }
+  return (
+    <Button size="sm" onClick={goToPage.bind(null, page - 1)} variant={currentPage === page - 1 ? 'solid' : 'outline'}>
+      {page}
+    </Button>
+  );
+};