Skip to content

Commit

Permalink
Simplify style definitions
Browse files Browse the repository at this point in the history
  • Loading branch information
kkosiorowska committed Dec 15, 2023
1 parent 94c2e9c commit ba3298b
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 69 deletions.
52 changes: 31 additions & 21 deletions dapp/src/theme/Drawer.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
import { ComponentSingleStyleConfig } from "@chakra-ui/react"
import { drawerAnatomy as parts } from "@chakra-ui/anatomy"
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"

const Drawer: ComponentSingleStyleConfig = {
baseStyle: {
dialogContainer: {
zIndex: "drawer",
},
overlay: {
bg: "none",
backdropFilter: "auto",
backdropBlur: "8px",
},
dialog: {
borderTop: "2px",
borderLeft: "2px",
boxShadow: "none",
borderColor: "white",
borderTopLeftRadius: "xl",
bg: "gold.100",
},
},
}
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys)

const baseStyleDialogContainer = defineStyle({
zIndex: "drawer",
})

const baseStyleDialog = defineStyle({
borderTop: "2px",
borderLeft: "2px",
boxShadow: "none",
borderColor: "white",
borderTopLeftRadius: "xl",
bg: "gold.100",
})

const baseStyleOverlay = defineStyle({
bg: "none",
backdropFilter: "auto",
backdropBlur: "8px",
})

const baseStyle = definePartsStyle({
dialogContainer: baseStyleDialogContainer,
dialog: baseStyleDialog,
overlay: baseStyleOverlay,
})

const Drawer = defineMultiStyleConfig({ baseStyle })

export default Drawer
58 changes: 34 additions & 24 deletions dapp/src/theme/Modal.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,37 @@
import { ComponentSingleStyleConfig } from "@chakra-ui/react"
import { modalAnatomy as parts } from "@chakra-ui/anatomy"
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"

const Modal: ComponentSingleStyleConfig = {
baseStyle: {
dialog: {
p: 4,
border: "2px",
boxShadow: "none",
borderColor: "white",
borderRadius: "xl",
bg: "gold.100",
},
closeButton: {
top: -10,
right: -10,
rounded: "100%",
bg: "opacity.white.5",
},
overlay: {
bg: "none",
backdropFilter: "auto",
backdropBlur: "8px",
},
},
}
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys)

const baseStyleDialog = defineStyle({
p: 4,
border: "2px",
boxShadow: "none",
borderColor: "white",
borderRadius: "xl",
bg: "gold.100",
})

const baseCloseButton = defineStyle({
top: -10,
right: -10,
rounded: "100%",
bg: "opacity.white.5",
})

const baseStyleOverlay = defineStyle({
bg: "none",
backdropFilter: "auto",
backdropBlur: "8px",
})

const baseStyle = definePartsStyle({
dialog: baseStyleDialog,
closeButton: baseCloseButton,
overlay: baseStyleOverlay,
})

const Modal = defineMultiStyleConfig({ baseStyle })

export default Modal
56 changes: 32 additions & 24 deletions dapp/src/theme/Sidebar.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,35 @@
import { ComponentMultiStyleConfig } from "@chakra-ui/react"
import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react"

const Sidebar: ComponentMultiStyleConfig = {
parts: ["sidebarContainer", "sidebar"],
baseStyle: {
sidebarContainer: {
top: 0,
right: 0,
h: "100vh",
position: "fixed",
overflow: "hidden",
zIndex: "sidebar",
transition: "width 0.3s",
},
sidebar: {
p: 4,
height: "100%",
bg: "gold.200",
borderTop: "2px",
borderLeft: "2px",
borderColor: "gold.100",
borderTopLeftRadius: "xl",
},
},
}
const PARTS = ["sidebarContainer", "sidebar"]

const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(PARTS)

const baseStyleSidebarContainer = defineStyle({
top: 0,
right: 0,
h: "100vh",
position: "fixed",
overflow: "hidden",
zIndex: "sidebar",
transition: "width 0.3s",
})

const baseStyleSidebar = defineStyle({
p: 4,
height: "100%",
bg: "gold.200",
borderTop: "2px",
borderLeft: "2px",
borderColor: "gold.100",
borderTopLeftRadius: "xl",
})

const baseStyle = definePartsStyle({
sidebarContainer: baseStyleSidebarContainer,
sidebar: baseStyleSidebar,
})

const Sidebar = defineMultiStyleConfig({ baseStyle })

export default Sidebar

0 comments on commit ba3298b

Please sign in to comment.