Add a new button variant for pagination

thesis · Jan 15, 2024 · 189594b · 189594b
1 parent b60c2f7
commit 189594b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/dapp/src/components/TransactionHistory/Table/index.tsx b/dapp/src/components/TransactionHistory/Table/index.tsx
@@ -59,11 +59,9 @@ function Table({ data }: { data: StakeHistory[] }) {
       </TableContainer>
       <HStack mt={6}>
         {PAGINATION_BUTTONS.map(({ ariaLabel, onClick, isDisabled, icon }) => (
-          // TODO: Update the button styles
           <IconButton
             key={ariaLabel}
-            variant="ghost"
-            background="white"
+            variant="pagination"
             aria-label={ariaLabel}
             onClick={() => onClick(table)}
             isDisabled={isDisabled(table)}

diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts
@@ -65,6 +65,22 @@ const Button: ComponentSingleStyleConfig = {
 
       return defaultStyles
     },
+    pagination: {
+      bg: "white",
+      color: "grey.700",
+      border: "1px solid transparent",
+
+      _hover: {
+        borderColor: "white",
+        bg: "opacity.white.6",
+      },
+      _disabled: {
+        color: "grey.200",
+        bg: "white",
+        opacity: 1,
+        pointerEvents: "none",
+      },
+    },
   },
 }
 

diff --git a/dapp/src/theme/utils/colors.ts b/dapp/src/theme/utils/colors.ts
@@ -56,6 +56,7 @@ export const colors = {
   opacity: {
     white: {
       5: "rgba(255, 255, 255, 0.50)",
+      6: "rgba(255, 255, 255, 0.60)",
     },
     grey: {
       700: {