Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Init Staking flow #56

Closed
wants to merge 10 commits into from
Prev Previous commit
Next Next commit
Add a custom styles for Stepper and Tabs
  • Loading branch information
kkosiorowska committed Dec 6, 2023
commit a25c0edef3b551326fde3a00fcda9556bc1805d9
33 changes: 33 additions & 0 deletions dapp/src/theme/Stepper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { mode } from "@chakra-ui/theme-tools"
import type { StyleFunctionProps } from "@chakra-ui/styled-system"
import { ComponentSingleStyleConfig } from "@chakra-ui/react"

const Stepper: ComponentSingleStyleConfig = {
baseStyle: {
indicator: {
borderRadius: 4,
fontWeight: "500",
},
step: {
gap: 6,
},
},
variants: {
basic: (props: StyleFunctionProps) => ({
indicator: {
"&[data-status=complete]": {
// TODO: Set the correct color
background: mode("black", "purple")(props),
},
},
separator: {
"&[data-status=complete]": {
// TODO: Set the correct color
background: mode("black", "purple")(props),
},
},
}),
},
}

export default Stepper
30 changes: 30 additions & 0 deletions dapp/src/theme/Tabs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { mode } from "@chakra-ui/theme-tools"
import type { StyleFunctionProps } from "@chakra-ui/styled-system"
import { ComponentSingleStyleConfig } from "@chakra-ui/react"

const Tabs: ComponentSingleStyleConfig = {
variants: {
underline: (props: StyleFunctionProps) => ({
tab: {
padding: 0,
fontWeight: 700,
borderBottom: "4px solid",
borderColor: "transparent",
background: "transparent",
_selected: {
// TODO: Set the correct color
color: mode("black", "black")(props),
borderColor: mode("#F34900", "#F34900")(props),
},
// TODO: Set the correct color
color: mode("#675E60", "#675E60")(props),
},
tablist: {
borderBottom: "none",
gap: 8,
},
}),
},
}

export default Tabs
4 changes: 4 additions & 0 deletions dapp/src/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import Button from "./Button"
import Switch from "./Switch"
import { colors, zIndices } from "./utils"
import Drawer from "./Drawer"
import Stepper from "./Stepper"
import Tabs from "./Tabs"

// Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
// Let's override the defaultProps as follows.
Expand All @@ -24,6 +26,8 @@ const defaultTheme = {
Button,
Switch,
Drawer,
Stepper,
Tabs,
},
}

Expand Down
Loading