diff --git a/components/Table/Pagination.tsx b/components/Table/Pagination.tsx
new file mode 100644
index 00000000..5a8ee131
--- /dev/null
+++ b/components/Table/Pagination.tsx
@@ -0,0 +1,67 @@
+import { Box, Flex } from "@livepeer/design-system";
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+
+type PaginationProps = {
+ currentPage: number;
+ totalPages: number;
+ canPrevious: boolean;
+ canNext: boolean;
+ onPrevious: () => void;
+ onNext: () => void;
+ css?: object;
+};
+
+const Pagination = ({
+ currentPage,
+ totalPages,
+ canPrevious,
+ canNext,
+ onPrevious,
+ onNext,
+ css,
+}: PaginationProps) => {
+ return (
+
+ {
+ if (canPrevious) {
+ onPrevious();
+ }
+ }}
+ />
+
+ Page {currentPage} of{" "}
+ {totalPages}
+
+ {
+ if (canNext) {
+ onNext();
+ }
+ }}
+ />
+
+ );
+};
+
+export default Pagination;
diff --git a/components/Table/index.tsx b/components/Table/index.tsx
index db3eddcf..a58a2d7b 100644
--- a/components/Table/index.tsx
+++ b/components/Table/index.tsx
@@ -8,12 +8,7 @@ import {
Thead,
Tr,
} from "@livepeer/design-system";
-import {
- ArrowLeftIcon,
- ArrowRightIcon,
- ChevronDownIcon,
- ChevronUpIcon,
-} from "@radix-ui/react-icons";
+import { ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons";
import { ReactNode } from "react";
import {
Column,
@@ -26,6 +21,8 @@ import {
useTable,
} from "react-table";
+import Pagination from "./Pagination";
+
function DataTable({
heading = null,
input = null,
@@ -243,45 +240,14 @@ function DataTable({
-
- {
- if (canPreviousPage) {
- previousPage();
- }
- }}
- />
-
- Page {pageIndex + 1} of{" "}
- {pageCount}
-
- {
- if (canNextPage) {
- nextPage();
- }
- }}
- />
-
+
>
>
diff --git a/components/Votes/VoteTable/Views/MobileVoteTable.tsx b/components/Votes/VoteTable/Views/MobileVoteTable.tsx
index badee3ef..b322c2ba 100644
--- a/components/Votes/VoteTable/Views/MobileVoteTable.tsx
+++ b/components/Votes/VoteTable/Views/MobileVoteTable.tsx
@@ -1,5 +1,5 @@
-import { Box, Button, Flex, Text } from "@livepeer/design-system";
-import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons";
+import Pagination from "@components/Table/Pagination";
+import { Box, Text } from "@livepeer/design-system";
import React from "react";
import { VoteTableProps } from "./DesktopVoteTable";
@@ -44,44 +44,14 @@ export const MobileVoteCards: React.FC = (props) => {
{/* Pagination */}
{totalPages > 1 && (
-
-
-
- Page {currentPage} of {totalPages}
-
-
-
+ 1}
+ canNext={currentPage < totalPages}
+ onPrevious={() => onPageChange?.(currentPage - 1)}
+ onNext={() => onPageChange?.(currentPage + 1)}
+ />
)}
);
diff --git a/components/Votes/VoteTable/Views/VoteItem.tsx b/components/Votes/VoteTable/Views/VoteItem.tsx
index b949b97e..f94c508e 100644
--- a/components/Votes/VoteTable/Views/VoteItem.tsx
+++ b/components/Votes/VoteTable/Views/VoteItem.tsx
@@ -106,12 +106,7 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
padding: "2px 8px",
margin: "-2px -8px",
borderRadius: "6px",
- transition: "all 0.2s ease",
- "&:hover": {
- backgroundColor: "$neutral4",
- textDecoration: "underline",
- textUnderlineOffset: "4px",
- },
+ cursor: "pointer",
"&:focus-visible": {
outline: "2px solid $primary11",
outlineOffset: "2px",
@@ -183,18 +178,9 @@ function MobileVoteView({ vote, onSelect, formatWeight }: VoteViewProps) {
backgroundColor: "transparent",
padding: "$2",
margin: "-$2",
- borderRadius: "$1",
minHeight: "44px",
fontSize: "$1",
fontWeight: 600,
- transition: "background-color 0.2s ease",
- "&:hover": {
- backgroundColor: "$neutral3",
- },
- "&:focus-visible": {
- outline: "2px solid $primary11",
- outlineOffset: "2px",
- },
}}
>