fix(staking): base button colors not taking effect

cosmology-tech · Feb 5, 2024 · 615bb01 · 615bb01
1 parent 3071c93
commit 615bb01
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 10 deletions.
diff --git a/src/ui/liquid-staking/liquid-staking.css.ts b/src/ui/liquid-staking/liquid-staking.css.ts
@@ -5,6 +5,7 @@ import {
   createContainer,
   keyframes,
 } from "@vanilla-extract/css";
+import { baseButton } from "../button/button.css";
 import { themeVars } from "../../styles/themes.css";
 
 const EXPANDED_HEIGHT_PX = `458px`;
@@ -58,6 +59,7 @@ export const accordionPanel = styleVariants({
 const headerButtonBase = style({
   color: `${textButtonColorVar} !important`,
   backgroundColor: `${textButtonBgVar} !important`,
+  borderRadius: themeVars.radii.base,
   selectors: {
     "&:hover": {
       opacity: 0.89,
@@ -67,6 +69,7 @@ const headerButtonBase = style({
 
 export const headerButton = styleVariants({
   light: [
+    baseButton,
     headerButtonBase,
     style({
       vars: {
@@ -76,6 +79,7 @@ export const headerButton = styleVariants({
     }),
   ],
   dark: [
+    baseButton,
     headerButtonBase,
     style({
       vars: {

diff --git a/src/ui/liquid-staking/liquid-staking.lite.tsx b/src/ui/liquid-staking/liquid-staking.lite.tsx
@@ -267,33 +267,35 @@ export default function LiquidStaking(props: LiquidStakingProps) {
                   flexShrink: "1",
                 }}
               >
-                <Button
-                  variant="unstyled"
+                <Box
+                  as="button"
                   className={styles.headerButton[state.theme]}
-                  size="xs"
-                  onClick={() => state.handleStakeHalf()}
+                  attributes={{
+                    onClick: () => state.handleStakeHalf(),
+                  }}
                 >
                   <Box
                     as="span"
                     fontSize={state.isSmallSize() ? "$2xs" : "$sm"}
                   >
                     {props.halfButtonLabel}
                   </Box>
-                </Button>
+                </Box>
 
-                <Button
-                  variant="unstyled"
+                <Box
+                  as="button"
                   className={styles.headerButton[state.theme]}
-                  size="xs"
-                  onClick={() => state.handleStakeMax()}
+                  attributes={{
+                    onClick: () => state.handleStakeMax(),
+                  }}
                 >
                   <Box
                     as="span"
                     fontSize={state.isSmallSize() ? "$2xs" : "$sm"}
                   >
                     {props.maxButtonLabel}
                   </Box>
-                </Button>
+                </Box>
               </Stack>
             </Stack>
           </Stack>