diff --git a/dapp/src/assets/images/right-sidebar-bg.png b/dapp/src/assets/images/right-sidebar-bg.png new file mode 100644 index 000000000..540134e58 Binary files /dev/null and b/dapp/src/assets/images/right-sidebar-bg.png differ diff --git a/dapp/src/components/Sidebar/index.tsx b/dapp/src/components/Sidebar/index.tsx index faebd8be0..b0e46f3e5 100644 --- a/dapp/src/components/Sidebar/index.tsx +++ b/dapp/src/components/Sidebar/index.tsx @@ -1,6 +1,29 @@ import React from "react" -import { Box, Button, useMultiStyleConfig } from "@chakra-ui/react" -import { useDocsDrawer, useSidebar } from "#/hooks" +import { + Box, + Icon, + useMultiStyleConfig, + Image, + Card, + CardBody, + CardHeader, + CardFooter, + HStack, + Link, +} from "@chakra-ui/react" +import RightSidebar from "#/assets/images/right-sidebar-bg.png" +import { useSidebar, useDocsDrawer } from "#/hooks" +import { ShieldPlusIcon } from "#/static/icons" +import { TextMd, TextSm } from "../shared/Typography" +import ButtonLink from "../shared/ButtonLink" + +const readMoreEarnings = "https://#" + +const BUTTONS = [ + { label: "FAQ" }, + { label: "Token Contract" }, + { label: "Bridge Contract" }, +] export default function Sidebar() { const { isOpen } = useSidebar() @@ -11,12 +34,50 @@ export default function Sidebar() { - {/* TODO: Add a correct content for the sidebar */} - + + Docs + + + + + + + + + Maximize your earnings by using tBTC to deposit and redeem BTC in + DeFi! + + + + + + Read more + + + + + + + How we calculate fees + + + + + + Fees is software empowered by the Threshold DAO. + + + + + {BUTTONS.map(({ label }) => ( + + {label} + + ))} ) diff --git a/dapp/src/components/shared/ButtonLink/index.tsx b/dapp/src/components/shared/ButtonLink/index.tsx new file mode 100644 index 000000000..32aa81907 --- /dev/null +++ b/dapp/src/components/shared/ButtonLink/index.tsx @@ -0,0 +1,34 @@ +import React from "react" +import { Button, ButtonProps, Icon } from "@chakra-ui/react" +import { ArrowUpRight } from "#/static/icons" + +type ButtonLinkProps = ButtonProps & { + icon?: typeof Icon + iconColor?: string +} + +export default function ButtonLink({ + children, + icon = ArrowUpRight, + iconColor = "brand.400", + variant = "outline", + ...props +}: ButtonLinkProps) { + return ( + + ) +} diff --git a/dapp/src/static/icons/ShieldPlus.tsx b/dapp/src/static/icons/ShieldPlus.tsx new file mode 100644 index 000000000..b3fbea2bc --- /dev/null +++ b/dapp/src/static/icons/ShieldPlus.tsx @@ -0,0 +1,17 @@ +import React from "react" +import { createIcon } from "@chakra-ui/react" + +export const ShieldPlusIcon = createIcon({ + displayName: "ShieldPlusIcon", + viewBox: "0 0 20 20", + path: ( + + ), +}) diff --git a/dapp/src/static/icons/index.ts b/dapp/src/static/icons/index.ts index 405a03bbc..557a9e669 100644 --- a/dapp/src/static/icons/index.ts +++ b/dapp/src/static/icons/index.ts @@ -6,3 +6,4 @@ export * from "./AcreLogo" export * from "./ConnectBTCAccount" export * from "./ConnectETHAccount" export * from "./AlertInfo" +export * from "./ShieldPlus" diff --git a/dapp/src/theme/Alert.ts b/dapp/src/theme/Alert.ts index 0d41126f4..c3b42c09f 100644 --- a/dapp/src/theme/Alert.ts +++ b/dapp/src/theme/Alert.ts @@ -73,6 +73,7 @@ const variants = { subtle: variantSubtle, } -const Alert = multiStyleConfig.defineMultiStyleConfig({ baseStyle, variants }) - -export default Alert +export const alertTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, + variants, +}) diff --git a/dapp/src/theme/Button.ts b/dapp/src/theme/Button.ts index 835305a28..7e0d3a675 100644 --- a/dapp/src/theme/Button.ts +++ b/dapp/src/theme/Button.ts @@ -4,7 +4,7 @@ import { } from "@chakra-ui/react" // TODO: Update the button styles correctly when ready -const Button: ComponentSingleStyleConfig = { +export const buttonTheme: ComponentSingleStyleConfig = { baseStyle: { size: "md", borderRadius: "lg", @@ -30,17 +30,29 @@ const Button: ComponentSingleStyleConfig = { bg: "brand.400", }, }, - outline: { - color: "grey.700", - borderColor: "grey.700", - _hover: { - bg: "opacity.grey.700.05", - }, - _active: { - bg: "transparent", - }, + outline: ({ colorScheme }: StyleFunctionProps) => { + const defaultStyles = { + color: "grey.700", + borderColor: "grey.700", + _hover: { + bg: "opacity.grey.700.05", + }, + _active: { + bg: "transparent", + }, + } + if (colorScheme === "gold") { + return { + ...defaultStyles, + bg: "gold.100", + borderColor: "white", + borderStyle: "solid", + } + } + return defaultStyles }, - card: (props: StyleFunctionProps) => { + // FIXME: It should be removed and replaced by solid/outline variants + card: ({ colorScheme }: StyleFunctionProps) => { const defaultStyles = { borderWidth: "2px", borderColor: "gold.100", @@ -54,7 +66,7 @@ const Button: ComponentSingleStyleConfig = { }, } - if (props.colorScheme === "error") { + if (colorScheme === "error") { return { ...defaultStyles, color: "red.400", @@ -67,5 +79,3 @@ const Button: ComponentSingleStyleConfig = { }, }, } - -export default Button diff --git a/dapp/src/theme/Card.ts b/dapp/src/theme/Card.ts index c30266abb..f4487bd1d 100644 --- a/dapp/src/theme/Card.ts +++ b/dapp/src/theme/Card.ts @@ -1,15 +1,41 @@ -import { ComponentSingleStyleConfig } from "@chakra-ui/react" +import { + ComponentSingleStyleConfig, + StyleFunctionProps, +} from "@chakra-ui/react" -const Card: ComponentSingleStyleConfig = { +export const cardTheme: ComponentSingleStyleConfig = { baseStyle: { container: { boxShadow: "none", - borderWidth: "2px", borderColor: "gold.100", - borderRadius: "xl", bg: "gold.200", }, }, -} + variants: { + elevated: ({ colorScheme }: StyleFunctionProps) => { + if (!colorScheme) return {} -export default Card + return { + container: { + bg: "gold.100", + borderColor: "white", + }, + } + }, + }, + sizes: { + md: { + container: { + borderWidth: "1px", + }, + }, + lg: { + container: { + borderWidth: "2px", + }, + }, + }, + defaultProps: { + size: "lg", + }, +} diff --git a/dapp/src/theme/CurrencyBalance.ts b/dapp/src/theme/CurrencyBalance.ts index 109b931b3..e5897592d 100644 --- a/dapp/src/theme/CurrencyBalance.ts +++ b/dapp/src/theme/CurrencyBalance.ts @@ -100,10 +100,8 @@ const sizes = { xl: sizeXl, } -const CurrencyBalance = multiStyleConfig.defineMultiStyleConfig({ +export const currencyBalanceTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle, variants, sizes, }) - -export default CurrencyBalance diff --git a/dapp/src/theme/Drawer.ts b/dapp/src/theme/Drawer.ts index 4e38a608d..b904c74c0 100644 --- a/dapp/src/theme/Drawer.ts +++ b/dapp/src/theme/Drawer.ts @@ -28,6 +28,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({ overlay: baseStyleOverlay, }) -const Drawer = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default Drawer +export const drawerTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, +}) diff --git a/dapp/src/theme/Form.ts b/dapp/src/theme/Form.ts index 9029ca83f..f195c872d 100644 --- a/dapp/src/theme/Form.ts +++ b/dapp/src/theme/Form.ts @@ -15,6 +15,4 @@ const baseStyle = multiStyleConfig.definePartsStyle({ helperText: baseStyleHelperText, }) -const Form = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default Form +export const formTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) diff --git a/dapp/src/theme/FormError.ts b/dapp/src/theme/FormError.ts index 2fc3e5509..d9a52b265 100644 --- a/dapp/src/theme/FormError.ts +++ b/dapp/src/theme/FormError.ts @@ -13,6 +13,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({ text: baseStyleText, }) -const FormError = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default FormError +export const formErrorTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, +}) diff --git a/dapp/src/theme/FormLabel.ts b/dapp/src/theme/FormLabel.ts index 08e211903..4eb3044c8 100644 --- a/dapp/src/theme/FormLabel.ts +++ b/dapp/src/theme/FormLabel.ts @@ -20,6 +20,4 @@ const sizes = { lg: sizeLg, } -const FormLabel = defineStyleConfig({ baseStyle, sizes }) - -export default FormLabel +export const formLabelTheme = defineStyleConfig({ baseStyle, sizes }) diff --git a/dapp/src/theme/Heading.ts b/dapp/src/theme/Heading.ts index cde235594..6e45179b6 100644 --- a/dapp/src/theme/Heading.ts +++ b/dapp/src/theme/Heading.ts @@ -1,6 +1,6 @@ import { ComponentSingleStyleConfig } from "@chakra-ui/react" -const Heading: ComponentSingleStyleConfig = { +export const headingTheme: ComponentSingleStyleConfig = { sizes: { "7xl": { fontSize: "7xl", @@ -28,5 +28,3 @@ const Heading: ComponentSingleStyleConfig = { }, }, } - -export default Heading diff --git a/dapp/src/theme/Input.ts b/dapp/src/theme/Input.ts index 31529b03a..e6e9d8695 100644 --- a/dapp/src/theme/Input.ts +++ b/dapp/src/theme/Input.ts @@ -38,6 +38,4 @@ const variants = { balance: variantBalance, } -const Input = multiStyleConfig.defineMultiStyleConfig({ variants }) - -export default Input +export const inputTheme = multiStyleConfig.defineMultiStyleConfig({ variants }) diff --git a/dapp/src/theme/Modal.ts b/dapp/src/theme/Modal.ts index c6a0e7e70..027c9946b 100644 --- a/dapp/src/theme/Modal.ts +++ b/dapp/src/theme/Modal.ts @@ -50,6 +50,4 @@ const baseStyle = multiStyleConfig.definePartsStyle({ body: baseStyleBody, }) -const Modal = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default Modal +export const modalTheme = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) diff --git a/dapp/src/theme/Sidebar.ts b/dapp/src/theme/Sidebar.ts index 6b654aec0..1b1a431b1 100644 --- a/dapp/src/theme/Sidebar.ts +++ b/dapp/src/theme/Sidebar.ts @@ -15,11 +15,15 @@ const baseStyleSidebarContainer = defineStyle({ const baseStyleSidebar = defineStyle({ p: 4, height: "100%", + w: "sidebar_width", bg: "gold.200", borderTop: "2px", borderLeft: "2px", borderColor: "gold.100", borderTopLeftRadius: "xl", + display: "flex", + flexDirection: "column", + gap: 3, }) const multiStyleConfig = createMultiStyleConfigHelpers(PARTS) @@ -29,6 +33,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({ sidebar: baseStyleSidebar, }) -const Sidebar = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default Sidebar +export const sidebarTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, +}) diff --git a/dapp/src/theme/Stepper.ts b/dapp/src/theme/Stepper.ts index 37cd3e9c1..1ac1c501b 100644 --- a/dapp/src/theme/Stepper.ts +++ b/dapp/src/theme/Stepper.ts @@ -72,6 +72,6 @@ const baseStyle = multiStyleConfig.definePartsStyle((props) => ({ separator: baseStyleSeparator(props), })) -const Stepper = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default Stepper +export const stepperTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, +}) diff --git a/dapp/src/theme/Switch.ts b/dapp/src/theme/Switch.ts index c62fc6616..bde88277e 100644 --- a/dapp/src/theme/Switch.ts +++ b/dapp/src/theme/Switch.ts @@ -1,6 +1,6 @@ import { ComponentSingleStyleConfig } from "@chakra-ui/react" -const Switch: ComponentSingleStyleConfig = { +export const switchTheme: ComponentSingleStyleConfig = { baseStyle: { track: { bg: "grey.700", @@ -10,5 +10,3 @@ const Switch: ComponentSingleStyleConfig = { }, }, } - -export default Switch diff --git a/dapp/src/theme/Tabs.ts b/dapp/src/theme/Tabs.ts index e3d8fc074..bd2b915ff 100644 --- a/dapp/src/theme/Tabs.ts +++ b/dapp/src/theme/Tabs.ts @@ -45,6 +45,7 @@ const baseStyle = multiStyleConfig.definePartsStyle({ }, }) -const Tabs = multiStyleConfig.defineMultiStyleConfig({ baseStyle, variants }) - -export default Tabs +export const tabsTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, + variants, +}) diff --git a/dapp/src/theme/TokenBalanceInput.ts b/dapp/src/theme/TokenBalanceInput.ts index 9236de5a6..cea039b38 100644 --- a/dapp/src/theme/TokenBalanceInput.ts +++ b/dapp/src/theme/TokenBalanceInput.ts @@ -25,6 +25,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({ balance: baseStyleBalance, }) -const TokenBalanceInput = multiStyleConfig.defineMultiStyleConfig({ baseStyle }) - -export default TokenBalanceInput +export const tokenBalanceInputTheme = multiStyleConfig.defineMultiStyleConfig({ + baseStyle, +}) diff --git a/dapp/src/theme/Tooltip.ts b/dapp/src/theme/Tooltip.ts index e7ee1e349..83f252e48 100644 --- a/dapp/src/theme/Tooltip.ts +++ b/dapp/src/theme/Tooltip.ts @@ -14,12 +14,10 @@ ChakraTooltip.defaultProps = { ...ChakraTooltip.defaultProps, hasArrow: true } // https://github.com/chakra-ui/chakra-ui/issues/4695#issuecomment-991023319 const $arrowBg = cssVar("popper-arrow-bg") -const Tooltip: ComponentSingleStyleConfig = { +export const tooltipTheme: ComponentSingleStyleConfig = { baseStyle: { borderRadius: "md", bg: "grey.700", [$arrowBg.variable]: "colors.grey.700", }, } - -export default Tooltip diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts index 421fabe96..93bfc8c36 100644 --- a/dapp/src/theme/index.ts +++ b/dapp/src/theme/index.ts @@ -1,24 +1,24 @@ import { StyleFunctionProps, extendTheme } from "@chakra-ui/react" import { mode } from "@chakra-ui/theme-tools" -import Button from "./Button" -import Switch from "./Switch" +import { buttonTheme } from "./Button" +import { switchTheme } from "./Switch" import { colors, fonts, lineHeights, semanticTokens, zIndices } from "./utils" -import Drawer from "./Drawer" -import Modal from "./Modal" -import Card from "./Card" -import Tooltip from "./Tooltip" -import Heading from "./Heading" -import Sidebar from "./Sidebar" -import CurrencyBalance from "./CurrencyBalance" -import TokenBalanceInput from "./TokenBalanceInput" -import Input from "./Input" -import Stepper from "./Stepper" -import Alert from "./Alert" -import Form from "./Form" -import FormLabel from "./FormLabel" -import FormError from "./FormError" -import Tabs from "./Tabs" -import { spinnerTheme as Spinner } from "./Spinner" +import { drawerTheme } from "./Drawer" +import { modalTheme } from "./Modal" +import { cardTheme } from "./Card" +import { tooltipTheme } from "./Tooltip" +import { headingTheme } from "./Heading" +import { sidebarTheme } from "./Sidebar" +import { currencyBalanceTheme } from "./CurrencyBalance" +import { tokenBalanceInputTheme } from "./TokenBalanceInput" +import { inputTheme } from "./Input" +import { stepperTheme } from "./Stepper" +import { alertTheme } from "./Alert" +import { formTheme } from "./Form" +import { formLabelTheme } from "./FormLabel" +import { formErrorTheme } from "./FormError" +import { tabsTheme } from "./Tabs" +import { spinnerTheme } from "./Spinner" const defaultTheme = { colors, @@ -36,24 +36,24 @@ const defaultTheme = { }), }, components: { - Button, - Switch, - Drawer, - Sidebar, - Modal, - Heading, - CurrencyBalance, - Card, - Tooltip, - Input, - TokenBalanceInput, - Stepper, - Alert, - Form, - FormLabel, - FormError, - Tabs, - Spinner, + Alert: alertTheme, + Button: buttonTheme, + Card: cardTheme, + CurrencyBalance: currencyBalanceTheme, + Drawer: drawerTheme, + Form: formTheme, + FormLabel: formLabelTheme, + FormError: formErrorTheme, + Heading: headingTheme, + Input: inputTheme, + Modal: modalTheme, + Sidebar: sidebarTheme, + Spinner: spinnerTheme, + Stepper: stepperTheme, + Switch: switchTheme, + Tabs: tabsTheme, + TokenBalanceInput: tokenBalanceInputTheme, + Tooltip: tooltipTheme, }, } diff --git a/dapp/src/theme/utils/semanticTokens.ts b/dapp/src/theme/utils/semanticTokens.ts index 4d5421595..f58e618c6 100644 --- a/dapp/src/theme/utils/semanticTokens.ts +++ b/dapp/src/theme/utils/semanticTokens.ts @@ -3,4 +3,7 @@ export const semanticTokens = { header_height: 24, modal_shift: 36, }, + sizes: { + sidebar_width: 80, + }, }