From 87c5abe91baa6b9b3d64a181370c17363452b0e0 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 17 Dec 2024 09:43:11 +0100 Subject: [PATCH] Update typography to match the Style Guide --- dapp/src/components/AcrePointsClaimModal.tsx | 8 +- .../ConnectWalletButton.tsx | 10 +-- .../ConnectWalletStatusLabel.tsx | 9 +- dapp/src/components/GateModal.tsx | 13 ++- dapp/src/components/Header/ConnectWallet.tsx | 10 +-- dapp/src/components/MezoBeehiveModal.tsx | 26 +++--- .../src/components/MobileModeBanner/index.tsx | 21 +++-- .../ActionDurationEstimation.tsx | 10 +-- .../AcrePointsRewardEstimation.tsx | 12 ++- .../StakingErrorModal/RetryModal.tsx | 22 +++-- .../StakingErrorModal/ServerErrorModal.tsx | 14 +-- .../BuildTransactionModal.tsx | 4 +- .../NotEnoughFundsModal.tsx | 10 +-- .../FeesTooltip/FeesTooltipItem.tsx | 7 +- .../TransactionModal/ResumeModal.tsx | 4 +- .../TransactionModal/SuccessModal.tsx | 18 ++-- .../WalletInteractionModal.tsx | 8 +- dapp/src/components/UnexpectedErrorModal.tsx | 4 +- dapp/src/components/WelcomeModal.tsx | 18 ++-- .../components/shared/FeesDetails/index.tsx | 16 ++-- .../shared/Pagination/PaginationStatus.tsx | 7 +- .../shared/TransactionDetails/index.tsx | 15 ++-- .../components/shared/Typography/index.tsx | 56 ------------ .../AcrePointsCard/AcrePointsLabel.tsx | 7 +- .../AcrePointsCard/UserPointsLabel.tsx | 9 +- .../DashboardPage/AcrePointsCard/index.tsx | 10 +-- .../DashboardPage/AcrePointsTemplateCard.tsx | 17 ++-- .../pages/DashboardPage/AcreTVLMessage.tsx | 13 ++- .../pages/DashboardPage/AcreTVLProgress.tsx | 8 +- dapp/src/pages/DashboardPage/BeehiveCard.tsx | 12 +-- .../pages/DashboardPage/PositionDetails.tsx | 12 ++- .../TransactionHistory/TransactionTable.tsx | 14 +-- .../TransactionHistory/index.tsx | 11 ++- dapp/src/theme/headingTheme.ts | 86 +++++++++++++------ dapp/src/theme/index.ts | 2 + dapp/src/theme/progressTheme.ts | 4 +- dapp/src/theme/textTheme.ts | 62 +++++++++++++ dapp/src/theme/utils/typography.ts | 24 +++--- 38 files changed, 350 insertions(+), 263 deletions(-) delete mode 100644 dapp/src/components/shared/Typography/index.tsx create mode 100644 dapp/src/theme/textTheme.ts diff --git a/dapp/src/components/AcrePointsClaimModal.tsx b/dapp/src/components/AcrePointsClaimModal.tsx index b7836c318..e0a161be0 100644 --- a/dapp/src/components/AcrePointsClaimModal.tsx +++ b/dapp/src/components/AcrePointsClaimModal.tsx @@ -1,6 +1,6 @@ import React, { ReactNode, useEffect, useMemo, useState } from "react" import { useTimeout } from "#/hooks" -import { Box, Button, ModalBody, VStack } from "@chakra-ui/react" +import { Box, Button, ModalBody, Text, VStack } from "@chakra-ui/react" import { AnimationSequence, motion, @@ -11,7 +11,6 @@ import { logPromiseFailure, numbersUtils } from "#/utils" import { time } from "#/constants" import ConfettiExplosion from "react-confetti-explosion" import { BaseModalProps } from "#/types" -import { TextXl } from "./shared/Typography" import withBaseModal from "./ModalRoot/withBaseModal" import AnimatedNumber from "./shared/AnimatedNumber" @@ -153,12 +152,13 @@ function AcrePointsClaimModalBase({ {steps.map(([currentStepLabel, currentStepValue]) => ( - {currentStepLabel} - + - + {label} - + @@ -256,9 +256,9 @@ export default function ConnectWalletButton({ align="start" > - + Requires 2 actions: - + = { @@ -48,12 +47,14 @@ export default function ConnectWalletStatusLabel({ {icon} - {label} + + {label} + {isError && ( - Rejected by user + Rejected by user )} diff --git a/dapp/src/components/GateModal.tsx b/dapp/src/components/GateModal.tsx index 21188b9e1..7d17e0dd9 100644 --- a/dapp/src/components/GateModal.tsx +++ b/dapp/src/components/GateModal.tsx @@ -1,6 +1,11 @@ import React, { useCallback } from "react" -import { Link, ModalBody, ModalFooter, ModalHeader } from "@chakra-ui/react" -import { TextSm } from "#/components/shared/Typography" +import { + Link, + ModalBody, + ModalFooter, + ModalHeader, + Text, +} from "@chakra-ui/react" import { externalHref } from "#/constants" import { BaseModalProps } from "#/types" import { useAccessCode } from "#/hooks" @@ -29,7 +34,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) { - + Don’t have a password? Contact us on{" "} Discord - + ) diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx index d880ebbbb..c0c874c46 100644 --- a/dapp/src/components/Header/ConnectWallet.tsx +++ b/dapp/src/components/Header/ConnectWallet.tsx @@ -10,6 +10,7 @@ import { MenuItem, MenuList, StackDivider, + Text, useClipboard, useMultiStyleConfig, } from "@chakra-ui/react" @@ -21,7 +22,6 @@ import { useWallet, } from "#/hooks" import CurrencyBalance from "#/components/shared/CurrencyBalance" -import { TextMd } from "#/components/shared/Typography" import { BitcoinIcon } from "#/assets/icons" import { referralProgram, addressUtils } from "#/utils" import { motion } from "framer-motion" @@ -118,9 +118,9 @@ export default function ConnectWallet() { leftIcon={} rightIcon={isOpen ? : } > - + {addressUtils.truncateAddress(address)} - + {options.map( @@ -166,9 +166,9 @@ export default function ConnectWallet() { spacing={3} > - + {addressUtils.truncateAddress(address)} - + - Acre & Mezo + + Acre & Mezo + {data && ( -
+ {numbersUtils.numberToLocaleString(data.totalMats)} -
- MATS + + + MATS + )} - + Acre users are automatically part of the Mezo Points program as a group. - + @@ -86,11 +90,11 @@ function MezoBeehiveModalBase() { - + In the event of a reward distribution, your share is calculated by deposit amount and duration, and you can claim it directly from Acre. - + @@ -106,10 +110,10 @@ function MezoBeehiveModalBase() { rounded="lg" /> - + Mezo is the economic layer for Bitcoin with a mission to activate a trillion dollar opportunity. - + )} @@ -91,12 +96,12 @@ function MobileModeBanner(props: MobileModeBannerProps) { > -

+ Acre App live only on desktop for now. We're working with partners to bring it to mobile soon. -

+ - + Stay tuned on{" "} . We would love to hear from you. - + )} diff --git a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx index 6be471b7b..d5391a41d 100644 --- a/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx +++ b/dapp/src/components/TransactionModal/ActionDurationEstimation.tsx @@ -2,7 +2,7 @@ import React from "react" import { ActivityType } from "#/types" import { activitiesUtils } from "#/utils" import { useFormField } from "#/hooks" -import { TextMd } from "../shared/Typography" +import { Text } from "@chakra-ui/react" import { TOKEN_AMOUNT_FIELD_NAME } from "../shared/TokenAmountForm/TokenAmountFormBase" export default function ActionDurationEstimation({ @@ -15,11 +15,11 @@ export default function ActionDurationEstimation({ ) return ( - + Estimated duration  - + ~ {activitiesUtils.getEstimatedDuration(amount, type)} - - + + ) } diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx index a8b318714..5eab4cb9d 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx @@ -7,9 +7,9 @@ import { MenuItem, MenuList, StackProps, + Text, VStack, } from "@chakra-ui/react" -import { H4, TextMd } from "#/components/shared/Typography" import { numbersUtils } from "#/utils" import { IconChevronDown } from "@tabler/icons-react" import { TOKEN_AMOUNT_FIELD_NAME } from "#/components/shared/TokenAmountForm/TokenAmountFormBase" @@ -67,7 +67,9 @@ function AcrePointsRewardEstimation(props: StackProps) { return ( - Acre points you'll earn + + Acre points you'll earn + {({ isOpen }) => ( @@ -82,7 +84,7 @@ function AcrePointsRewardEstimation(props: StackProps) { _hover={{ bg: "gold.200" }} > - {selectedTierItem.label} + {selectedTierItem.label} -

+{numbersUtils.numberToLocaleString(estimatedReward)} PTS

+ + +{numbersUtils.numberToLocaleString(estimatedReward)} PTS + ) } diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx index f5b84cce0..5b591f81d 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/RetryModal.tsx @@ -8,9 +8,9 @@ import { ModalBody, ModalFooter, ModalHeader, + Text, } from "@chakra-ui/react" import { CableWithPlugIcon } from "#/assets/icons" -import { TextMd, TextSm } from "#/components/shared/Typography" import IconWrapper from "#/components/shared/IconWrapper" import { timeUtils, numbersUtils } from "#/utils" import { useCountdown } from "#/hooks" @@ -63,22 +63,24 @@ export default function RetryModal({ isLoading, retry }: RetryModalProps) { - No worries—your funds are safe. + No worries—your funds are safe. - + An error occurred while processing your transaction. - + {isLoading ? ( - Retrying transaction... + + Retrying transaction... + ) : ( - Auto-retry in - + Auto-retry in + {label} - + - Your funds are secure. + + Your funds are secure. + diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx index 27056f206..090a1c3db 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/StakingErrorModal/ServerErrorModal.tsx @@ -9,9 +9,9 @@ import { ModalCloseButton, ModalFooter, ModalHeader, + Text, } from "@chakra-ui/react" import { CableWithPlugIcon } from "#/assets/icons" -import { TextMd } from "#/components/shared/Typography" import { externalHref } from "#/constants" import IconWrapper from "#/components/shared/IconWrapper" import { @@ -38,10 +38,10 @@ export default function ServerErrorModal({ - + Your deposit didn't go through but no worries, your funds are safe. - + diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx index f1bab86e9..39e0a638c 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/NotEnoughFundsModal.tsx @@ -7,11 +7,11 @@ import { ModalCloseButton, ModalHeader, VStack, + Text, } from "@chakra-ui/react" import { setStatus } from "#/store/action-flow" import { PROCESS_STATUSES } from "#/types" import { BitcoinsStackErrorIcon } from "#/assets/icons" -import { TextMd, TextXl } from "../../shared/Typography" import { Alert, AlertIcon } from "../../shared/Alert" import CurrencyBalance from "../../shared/CurrencyBalance" @@ -30,8 +30,8 @@ export default function NotEnoughFundsModal() { <> - + After this withdrawal, your balance will fall below the{" "} {" "} minimum required to initiate a withdrawal. Subsequent withdrawals will not be possible until a new deposit is made. - + diff --git a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx index 52650b44a..7b519abd8 100644 --- a/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx +++ b/dapp/src/components/TransactionModal/FeesTooltip/FeesTooltipItem.tsx @@ -1,9 +1,8 @@ import React from "react" -import { ListItem } from "@chakra-ui/react" +import { ListItem, Text } from "@chakra-ui/react" import CurrencyBalance, { CurrencyBalanceProps, } from "#/components/shared/CurrencyBalance" -import { TextSm } from "#/components/shared/Typography" import { currencies } from "#/constants" type FeesItemType = CurrencyBalanceProps & { @@ -17,7 +16,9 @@ export default function FeesTooltipItem({ }: FeesItemType) { return ( - {label} + + {label} + - Are you sure you want to cancel? + Are you sure you want to cancel?