From aa953c99ef9325d9262fd13c284c3d0863e5b1c0 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Fri, 20 Dec 2024 15:41:08 +0100 Subject: [PATCH 1/3] Update basic buttons to match the style guide --- dapp/src/components/AcrePointsClaimModal.tsx | 7 +- .../ConnectWalletButton.tsx | 3 +- dapp/src/components/Footer.tsx | 14 +- dapp/src/components/Header/ConnectWallet.tsx | 2 +- dapp/src/components/MezoBeehiveModal.tsx | 18 +- .../src/components/MobileModeBanner/index.tsx | 4 +- .../StakingErrorModal/ServerErrorModal.tsx | 8 +- dapp/src/components/UnexpectedErrorModal.tsx | 8 +- .../shared/Form/FormSubmitButton.tsx | 9 +- dapp/src/components/shared/LinkButton.tsx | 36 ++ dapp/src/components/shared/LoadingButton.tsx | 18 - .../AcrePointsCard/UserPointsLabel.tsx | 11 +- .../DashboardPage/AcrePointsTemplateCard.tsx | 21 +- .../pages/DashboardPage/PositionDetails.tsx | 5 - dapp/src/theme/buttonTheme.ts | 335 ++++++++++-------- dapp/src/theme/footerTheme.ts | 16 +- 16 files changed, 247 insertions(+), 268 deletions(-) create mode 100644 dapp/src/components/shared/LinkButton.tsx delete mode 100644 dapp/src/components/shared/LoadingButton.tsx diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx index 3cb070a85..35285b56c 100644 --- a/dapp/src/components/AcrePointsClaimModal.tsx +++ b/dapp/src/components/AcrePointsClaimModal.tsx @@ -175,12 +175,7 @@ function AcrePointsClaimModalBase({ - diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx index 7ca7f2709..aecad24fe 100644 --- a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx +++ b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx @@ -205,8 +205,9 @@ export default function ConnectWalletButton({ + diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx index 695875d90..8fdd2f2bf 100644 --- a/dapp/src/components/MobileModeBanner/index.tsx +++ b/dapp/src/components/MobileModeBanner/index.tsx @@ -53,7 +53,8 @@ function MobileModeBanner(props: MobileModeBannerProps) { {!forceOpen && ( + Partial Outage + ) diff --git a/dapp/src/components/shared/Form/FormSubmitButton.tsx b/dapp/src/components/shared/Form/FormSubmitButton.tsx index f108fe945..5be14c667 100644 --- a/dapp/src/components/shared/Form/FormSubmitButton.tsx +++ b/dapp/src/components/shared/Form/FormSubmitButton.tsx @@ -1,21 +1,22 @@ import React from "react" import { useFormikContext } from "formik" -import { ButtonProps } from "@chakra-ui/react" -import LoadingButton from "../LoadingButton" +import { Button, ButtonProps } from "@chakra-ui/react" +import Spinner from "../Spinner" export default function FormSubmitButton({ children, ...props }: ButtonProps) { const { isSubmitting, isValid } = useFormikContext() return ( - } {...props} > {children} - + ) } diff --git a/dapp/src/components/shared/LinkButton.tsx b/dapp/src/components/shared/LinkButton.tsx new file mode 100644 index 000000000..5c1b4c14d --- /dev/null +++ b/dapp/src/components/shared/LinkButton.tsx @@ -0,0 +1,36 @@ +import React from "react" +import { Button, ButtonProps, Icon, Link, LinkProps } from "@chakra-ui/react" +import { IconArrowUpRight } from "@tabler/icons-react" + +export type LinkButtonProps = ButtonProps & LinkProps + +export default function LinkButton({ children, ...props }: LinkButtonProps) { + return ( + + ) +} diff --git a/dapp/src/components/shared/LoadingButton.tsx b/dapp/src/components/shared/LoadingButton.tsx deleted file mode 100644 index 9c8b83fc2..000000000 --- a/dapp/src/components/shared/LoadingButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react" -import { Button, ButtonProps, Spinner } from "@chakra-ui/react" - -export default function LoadingButton({ - isLoading, - children, - ...props -}: ButtonProps) { - return ( - - ) -} diff --git a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx index dd02bd278..dcb384a4c 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx +++ b/dapp/src/pages/DashboardPage/AcrePointsCard/UserPointsLabel.tsx @@ -25,16 +25,7 @@ function ClaimableBalanceLabel() { if (claimableBalance <= 0) return null return ( - ) diff --git a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx index 053a316cf..471d8f6a0 100644 --- a/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx +++ b/dapp/src/pages/DashboardPage/AcrePointsTemplateCard.tsx @@ -1,24 +1,19 @@ import React from "react" import { TextLg, TextMd, TextSm } from "#/components/shared/Typography" import { - Button, Card, CardBody, CardHeader, CardProps, - Icon, - Link, Tag, TagLeftIcon, VStack, } from "@chakra-ui/react" import { acrePointsCardPlaceholder } from "#/assets/images" import UserDataSkeleton from "#/components/shared/UserDataSkeleton" -import { - IconArrowUpRight, - IconPlayerTrackNextFilled, -} from "@tabler/icons-react" +import { IconPlayerTrackNextFilled } from "@tabler/icons-react" import { externalHref } from "#/constants" +import LinkButton from "#/components/shared/LinkButton" export default function AcrePointsTemplateCard(props: CardProps) { return ( @@ -65,21 +60,13 @@ export default function AcrePointsTemplateCard(props: CardProps) { Stake now to secure your spot - {/* TODO: Update `ButtonLink` component and 'link' Button theme variant */} - + diff --git a/dapp/src/pages/DashboardPage/PositionDetails.tsx b/dapp/src/pages/DashboardPage/PositionDetails.tsx index 214bfb373..d9bca9a7c 100644 --- a/dapp/src/pages/DashboardPage/PositionDetails.tsx +++ b/dapp/src/pages/DashboardPage/PositionDetails.tsx @@ -24,12 +24,7 @@ const isWithdrawalFlowEnabled = featureFlags.WITHDRAWALS_ENABLED const buttonStyles: ButtonProps = { size: "lg", - flex: 1, w: 40, - fontWeight: "bold", - lineHeight: 6, - px: 7, - h: "auto", } export default function PositionDetails() { diff --git a/dapp/src/theme/buttonTheme.ts b/dapp/src/theme/buttonTheme.ts index 4afbe95c3..b056fbbf1 100644 --- a/dapp/src/theme/buttonTheme.ts +++ b/dapp/src/theme/buttonTheme.ts @@ -1,167 +1,196 @@ -import { - ComponentSingleStyleConfig, - defineStyle, - StyleFunctionProps, -} from "@chakra-ui/react" +import { defineStyle, defineStyleConfig } from "@chakra-ui/react" -// TODO: should be updated when style guide will be ready +const baseStyle = defineStyle({ + borderRadius: "8px", +}) + +const loadingStyles = defineStyle({ + _disabled: { + bg: "ivoire.30", + color: "brown.100", + opacity: 1, + }, +}) + +const disabledStyles = defineStyle({ + opacity: 1, + color: "brown.40", + bg: "brown.20", +}) + +const variantSolidAcre = defineStyle(() => ({ + bg: "acre.50", + color: "ivoire.10", + + _loading: loadingStyles, + _disabled: disabledStyles, + _active: { bg: "acre.80" }, + _hover: { + bg: "acre.60", + _disabled: disabledStyles, + }, +})) + +const variantSolidBrown = defineStyle(() => ({ + bg: "brown.80", + color: "ivoire.10", + + _loading: loadingStyles, + _disabled: disabledStyles, + _active: { bg: "black" }, + _hover: { + bg: "brown.90", + _disabled: disabledStyles, + }, +})) + +const variantSolidIvoire = defineStyle(() => ({ + bg: "ivoire.10", + color: "brown.100", + + _loading: loadingStyles, + _disabled: disabledStyles, + _active: { bg: "brown.30" }, + _hover: { + bg: "brown.10", + _disabled: disabledStyles, + }, +})) + +const variantSolid = defineStyle(({ colorScheme }) => { + if (colorScheme === "brown") return variantSolidBrown() + + if (colorScheme === "ivoire") return variantSolidIvoire() + + return variantSolidAcre() +}) + +const variantOutline = defineStyle(() => ({ + color: "brown.100", + borderColor: "brown.20", + + _loading: loadingStyles, + _disabled: disabledStyles, + _active: { bg: "brown.30" }, + _hover: { + bg: "brown.10", + _disabled: disabledStyles, + }, +})) + +const varianLink = defineStyle(() => ({ + fontWeight: "medium", + color: "brown.100", + + _disabled: { + color: disabledStyles.color, + }, + _active: { color: "acre.70" }, + _hover: { + color: "acre.50", + textDecoration: "none", + _disabled: { + color: disabledStyles.color, + }, + }, +})) + +// TODO: Need to update styles for pagination +const variantPagination = defineStyle({ + bg: "white", + color: "oldPalette.grey.700", + ring: 0, + ringInset: "inset", + ringColor: "white", + + _hover: { + color: "oldPalette.brand.400", + bg: "oldPalette.opacity.white.6", + ring: 1, + }, + _active: { + ring: 1, + ringColor: "oldPalette.brand.400", + }, + _disabled: { + color: "oldPalette.grey.300", + bg: "white", + opacity: 1, + pointerEvents: "none", + }, +}) + +// TODO: Need to update styles for wallet connection component const variantCard = defineStyle({ h: 12, p: 3, pr: 4, fontWeight: "semibold", - bg: "surface.3", - color: "acre.50", + bg: "oldPalette.gold.200", + color: "oldPalette.brand.400", _hover: { - bg: "surface.3", + bg: "oldPalette.gold.400", textDecoration: "none", }, }) -// TODO: Update the button styles correctly when ready -const buttonTheme: ComponentSingleStyleConfig = { - baseStyle: { - // Remove a blue outline when the button is in focus. - boxShadow: "none !important", - }, - sizes: { - md: { - fontSize: "sm", - py: 2, - borderRadius: "md", - }, - lg: { - fontSize: "md", - py: 4, - borderRadius: "lg", - h: 14, - }, - }, - variants: { - solid: ({ colorScheme }: StyleFunctionProps) => { - let baseBg = `${colorScheme}.400` - let hoverBg = `${colorScheme}.500` - - if (colorScheme === "oldPalette.green") { - baseBg = `${colorScheme}.500` - hoverBg = `${colorScheme}.600` - } - - return { - bg: baseBg, - color: "white", - _hover: { - bg: hoverBg, - _disabled: { - bg: "oldPalette.grey.400", - }, - }, - _active: { - bg: baseBg, - }, - _loading: { - _disabled: { - background: "oldPalette.gold.300", - opacity: 1, - }, - }, - _disabled: { - bg: "oldPalette.grey.500", - color: "oldPalette.gold.200", - }, - } - }, - outline: ({ colorScheme }: StyleFunctionProps) => { - const defaultStyles = { - color: "oldPalette.grey.700", - borderColor: "oldPalette.grey.700", - - _hover: { - bg: "oldPalette.opacity.grey.700.05", - }, - _active: { - bg: "transparent", - }, - _loading: { - _disabled: { - borderColor: "white", - background: "oldPalette.opacity.white.5", - opacity: 1, - }, - }, - } - if (colorScheme === "oldPalette.gold") { - return { - ...defaultStyles, - bg: "oldPalette.gold.100", - borderColor: "white", - borderStyle: "solid", - - _hover: { - borderColor: "oldPalette.grey.500", - bg: "transparent", - }, - } - } - - if (colorScheme === "white") { - return { - ...defaultStyles, - color: "white", - borderColor: "white", - - _hover: { - bg: "oldPalette.opacity.black.05", - }, - } - } - return defaultStyles - }, - ghost: { - color: "inherit", - _hover: { - bg: "transparent", - }, - _active: { - bg: "transparent", - }, - }, - card: variantCard, - pagination: { - bg: "white", - color: "oldPalette.grey.700", - ring: 0, - ringInset: "inset", - ringColor: "white", - - _hover: { - color: "acre.50", - bg: "oldPalette.opacity.white.6", - ring: 1, - }, - _active: { - ring: 1, - ringColor: "acre.50", - }, - _disabled: { - color: "oldPalette.grey.300", - bg: "white", - opacity: 1, - pointerEvents: "none", - }, - }, - link: { - bg: "initial", - color: "inherit", - p: 0, - textDecoration: "underline", - fontWeight: "medium", - }, - }, - defaultProps: { - colorScheme: "oldPalette.brand", - }, +const variants = { + solid: variantSolid, + outline: variantOutline, + link: varianLink, + pagination: variantPagination, + card: variantCard, } -export default buttonTheme +const sizeLg = defineStyle({ + py: "1.063rem", // 17px + px: 6, + h: 14, + fontSize: "md", + lineHeight: "md", + fontWeight: "semibold", +}) + +const sizeMd = defineStyle({ + px: 4, + py: 3, + h: 12, + fontSize: "md", + lineHeight: "md", + fontWeight: "semibold", +}) + +const sizeSm = defineStyle({ + px: 4, + py: 2.5, + h: 10, + fontSize: "sm", + lineHeight: "sm", + fontWeight: "medium", +}) + +const sizeXs = defineStyle({ + px: 3, + py: "0.438rem", // 7px + h: 8, + fontSize: "sm", + lineHeight: "sm", + fontWeight: "medium", +}) + +const sizes = { + lg: sizeLg, + md: sizeMd, + sm: sizeSm, + xs: sizeXs, +} + +export default defineStyleConfig({ + defaultProps: { + colorScheme: "acre", + }, + baseStyle, + sizes, + variants, +}) diff --git a/dapp/src/theme/footerTheme.ts b/dapp/src/theme/footerTheme.ts index b305dcffb..39f719b41 100644 --- a/dapp/src/theme/footerTheme.ts +++ b/dapp/src/theme/footerTheme.ts @@ -1,6 +1,6 @@ import { createMultiStyleConfigHelpers, defineStyle } from "@chakra-ui/react" -const PARTS = ["container", "wrapper", "logo", "list", "link"] +const PARTS = ["container", "wrapper", "logo", "list"] const containerStyles = defineStyle({ w: "full", @@ -35,19 +35,6 @@ const listStyles = defineStyle({ }, }) -const linkStyles = defineStyle({ - display: "flex", - color: "text.primary", - fontWeight: "medium", - fontSize: { - base: "xs", - md: "sm", - }, - m: -2, - p: 2, - whiteSpace: "nowrap", -}) - const multiStyleConfig = createMultiStyleConfigHelpers(PARTS) const baseStyle = multiStyleConfig.definePartsStyle({ @@ -55,7 +42,6 @@ const baseStyle = multiStyleConfig.definePartsStyle({ wrapper: wrapperStyles, logo: logoStyles, list: listStyles, - link: linkStyles, }) export default multiStyleConfig.defineMultiStyleConfig({ From 2a62b08c652ec09d1530d9ff6bacb20860278f09 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Mon, 23 Dec 2024 10:51:19 +0100 Subject: [PATCH 2/3] Update BlockExplorerLink component --- .../TransactionModal/SuccessModal.tsx | 18 ++++++----------- .../components/shared/BlockExplorerLink.tsx | 20 +++++++++---------- .../TransactionHistory/TransactionTable.tsx | 20 +++---------------- 3 files changed, 18 insertions(+), 40 deletions(-) diff --git a/dapp/src/components/TransactionModal/SuccessModal.tsx b/dapp/src/components/TransactionModal/SuccessModal.tsx index fbca0d16a..bac912984 100644 --- a/dapp/src/components/TransactionModal/SuccessModal.tsx +++ b/dapp/src/components/TransactionModal/SuccessModal.tsx @@ -1,7 +1,5 @@ import React from "react" import { - HStack, - Icon, ModalBody, ModalCloseButton, ModalFooter, @@ -13,7 +11,6 @@ import { LoadingSpinnerSuccessIcon } from "#/assets/icons" import { useActionFlowTokenAmount, useActionFlowTxHash } from "#/hooks" import CurrencyBalanceWithConversion from "#/components/shared/CurrencyBalanceWithConversion" import { ACTION_FLOW_TYPES, ActionFlowType } from "#/types" -import { IconArrowUpRight } from "@tabler/icons-react" import { activitiesUtils } from "#/utils" import { Alert, AlertIcon, AlertDescription } from "#/components/shared/Alert" import BlockExplorerLink from "../shared/BlockExplorerLink" @@ -65,15 +62,12 @@ export default function SuccessModal({ type }: SuccessModalProps) { )} {ACTION_FLOW_TYPES.STAKE === type && txHash && ( - /* TODO: Update styles */ - - - - View on Mempool - - - - + )} diff --git a/dapp/src/components/shared/BlockExplorerLink.tsx b/dapp/src/components/shared/BlockExplorerLink.tsx index aeb28a083..4abc1bac5 100644 --- a/dapp/src/components/shared/BlockExplorerLink.tsx +++ b/dapp/src/components/shared/BlockExplorerLink.tsx @@ -1,20 +1,21 @@ import React from "react" import { Chain, ExplorerDataType } from "#/types" -import { Link, LinkProps } from "@chakra-ui/react" import { chainUtils } from "#/utils" +import LinkButton, { LinkButtonProps } from "./LinkButton" type BlockExplorerLinkProps = { id: string type: ExplorerDataType chain?: Chain -} & Omit + text?: string +} & Omit -function BlockExplorerLink({ +export default function BlockExplorerLink({ id, type, + text, chain = "bitcoin", - children, - ...restProps + ...props }: BlockExplorerLinkProps) { const { link, title } = chainUtils.createLinkToBlockExplorerForChain( chain, @@ -22,12 +23,9 @@ function BlockExplorerLink({ type, ) - // TODO: Update when ButtonLink is ready return ( - - {children ?? title} - + + {text ?? title} + ) } - -export default BlockExplorerLink diff --git a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx index 76f80c290..c986078fd 100644 --- a/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx +++ b/dapp/src/pages/DashboardPage/TransactionHistory/TransactionTable.tsx @@ -1,5 +1,5 @@ import React from "react" -import { HStack, Card, CardBody, Box, Flex, Icon, Text } from "@chakra-ui/react" +import { HStack, Card, CardBody, Box, Flex, Text } from "@chakra-ui/react" import { Pagination, PaginationButton, @@ -11,7 +11,6 @@ import CurrencyBalance from "#/components/shared/CurrencyBalance" import { timeUtils, activitiesUtils } from "#/utils" import { Activity } from "#/types" import BlockExplorerLink from "#/components/shared/BlockExplorerLink" -import { IconArrowUpRight } from "@tabler/icons-react" import { useActivities, useMobileMode } from "#/hooks" import { semanticTokens } from "#/theme/utils" import EstimatedDuration from "./EstimatedDuration" @@ -67,22 +66,9 @@ export default function TransactionTable() { id={activity.txHash} chain="bitcoin" type="transaction" - color="text.primary" - _groupHover={{ - color: "acre.50", - textDecoration: "none", - }} + text="Details" minW={BLOCK_EXPLORER_CELL_MIN_WIDTH} - > - - Details - - - + /> ) : ( )} From a2a52384bff4c0ade68c423c3ac60767fb1f54a1 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Mon, 23 Dec 2024 11:51:44 +0100 Subject: [PATCH 3/3] Set the spacing between the button elements to match style guide --- dapp/src/theme/buttonTheme.ts | 1 + dapp/src/theme/utils/styles.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/dapp/src/theme/buttonTheme.ts b/dapp/src/theme/buttonTheme.ts index 2b9e4d192..681dca581 100644 --- a/dapp/src/theme/buttonTheme.ts +++ b/dapp/src/theme/buttonTheme.ts @@ -2,6 +2,7 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react" const baseStyle = defineStyle({ borderRadius: "sm", + gap: 1, }) const loadingStyles = defineStyle({ diff --git a/dapp/src/theme/utils/styles.ts b/dapp/src/theme/utils/styles.ts index 4051d67e9..ad2a65daa 100644 --- a/dapp/src/theme/utils/styles.ts +++ b/dapp/src/theme/utils/styles.ts @@ -7,8 +7,15 @@ const bodyStyle = defineStyle((props: StyleFunctionProps) => ({ color: mode("text.primary", "text.primary")(props), })) +// To set the correct spacing between button elements, +// we need to reset the margin for the icon +const buttonIconStyle = defineStyle({ + margin: "0px !important", +}) + const globalStyle = (props: StyleFunctionProps) => ({ body: bodyStyle(props), + ".chakra-button__icon": buttonIconStyle, }) export default {