From 3e02bcf9b8f6c3080655ba45f3c02b85842aad91 Mon Sep 17 00:00:00 2001
From: arcticfly <41524992+arcticfly@users.noreply.github.com>
Date: Fri, 11 Aug 2023 21:11:25 -0700
Subject: [PATCH] Update paginator styles (#142)

* Change paginator icons

* Remove horizontal spacing
---
 app/src/components/Paginator.tsx | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/app/src/components/Paginator.tsx b/app/src/components/Paginator.tsx
index d1adae9..d49b821 100644
--- a/app/src/components/Paginator.tsx
+++ b/app/src/components/Paginator.tsx
@@ -1,11 +1,6 @@
-import { HStack, IconButton, Text, Select, type StackProps } from "@chakra-ui/react";
+import { HStack, IconButton, Text, Select, type StackProps, Icon } from "@chakra-ui/react";
 import React, { useCallback } from "react";
-import {
-  BsChevronDoubleLeft,
-  BsChevronDoubleRight,
-  BsChevronLeft,
-  BsChevronRight,
-} from "react-icons/bs";
+import { FiChevronsLeft, FiChevronsRight, FiChevronLeft, FiChevronRight } from "react-icons/fi";
 import { usePageParams } from "~/utils/hooks";
 
 const pageSizeOptions = [10, 25, 50, 100];
@@ -45,7 +40,6 @@ const Paginator = ({
   return (
     <HStack
       pt={4}
-      px={4}
       spacing={8}
       justifyContent={condense ? "flex-start" : "space-between"}
       alignItems="center"
@@ -81,7 +75,7 @@ const Paginator = ({
           onClick={goToFirstPage}
           isDisabled={page === 1}
           aria-label="Go to first page"
-          icon={<BsChevronDoubleLeft />}
+          icon={<Icon as={FiChevronsLeft} boxSize={5} strokeWidth={1.5} />}
         />
         <IconButton
           variant="outline"
@@ -89,7 +83,7 @@ const Paginator = ({
           onClick={prevPage}
           isDisabled={page === 1}
           aria-label="Previous page"
-          icon={<BsChevronLeft />}
+          icon={<Icon as={FiChevronLeft} boxSize={5} strokeWidth={1.5} />}
         />
         {condense && (
           <Text>
@@ -102,7 +96,7 @@ const Paginator = ({
           onClick={nextPage}
           isDisabled={page === lastPage}
           aria-label="Next page"
-          icon={<BsChevronRight />}
+          icon={<Icon as={FiChevronRight} boxSize={5} strokeWidth={1.5} />}
         />
         <IconButton
           variant="outline"
@@ -110,7 +104,7 @@ const Paginator = ({
           onClick={goToLastPage}
           isDisabled={page === lastPage}
           aria-label="Go to last page"
-          icon={<BsChevronDoubleRight />}
+          icon={<Icon as={FiChevronsRight} boxSize={5} strokeWidth={1.5} />}
         />
       </HStack>
     </HStack>