Update typography to match the Style Guide (#927)

Ref AENG-9 This PR updates dApp to match the style guide. In the [figma](https://www.figma.com/design/1jAHRz9Kh43x7WpjiZ1tq2/UI-Styleguide?node-id=730-1510&m=dev) we use typography sizes. Let's use the same approach without defining separate components. This will make working with figma easier. Additionally, new values for line heights have been defined. #### Example of usage: ![Screenshot 2024-12-17 at 09 55 31](https://github.com/user-attachments/assets/ee2da147-c41b-438f-afac-a2c3f6e5486e) ` <Text size="sm">...</Text>`
thesis · Dec 20, 2024 · 244553b · 244553b
2 parents 43a542c + 666803a
commit 244553b
Show file tree

Hide file tree

Showing 38 changed files with 350 additions and 263 deletions.
diff --git 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({
         <VStack data-steps-list spacing={8}>
           {steps.map(([currentStepLabel, currentStepValue]) => (
             <Box key={currentStepLabel}>
-              <TextXl
+              <Text
+                size="xl"
                 fontWeight="semibold"
                 mb="5.25rem" // 84px
               >
                 {currentStepLabel}
-              </TextXl>
+              </Text>
 
               <Box
                 data-step-value

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletButton.tsx
@@ -22,11 +22,11 @@ import {
   Image,
   ImageProps,
   VStack,
+  Text,
 } from "@chakra-ui/react"
 import { IconArrowNarrowRight } from "@tabler/icons-react"
 import { AnimatePresence, Variants, motion } from "framer-motion"
 import ArrivingSoonTooltip from "../ArrivingSoonTooltip"
-import { TextLg, TextMd } from "../shared/Typography"
 import ConnectWalletStatusLabel from "./ConnectWalletStatusLabel"
 import Spinner from "../shared/Spinner"
 import { ConnectionAlert } from "./ConnectWalletAlert"
@@ -229,9 +229,9 @@ export default function ConnectWalletButton({
             iconSpacing={4}
             isDisabled={connector.isDisabled}
           >
-            <TextLg flex={1} textAlign="start" fontWeight="semibold">
+            <Text size="lg" flex={1} textAlign="start" fontWeight="semibold">
               {label}
-            </TextLg>
+            </Text>
           </Button>
         </ArrivingSoonTooltip>
       </CardHeader>
@@ -256,9 +256,9 @@ export default function ConnectWalletButton({
               align="start"
             >
               <Flex direction="column" gap={2} w="full">
-                <TextMd fontWeight="bold" textAlign="start">
+                <Text size="md" fontWeight="bold" textAlign="start">
                   Requires 2 actions:
-                </TextMd>
+                </Text>
                 <ConnectWalletStatusLabel
                   status={connectionStatus}
                   label={`Connect ${isEmbed ? "account" : "wallet"}`}

diff --git a/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx b/dapp/src/components/ConnectWalletModal/ConnectWalletStatusLabel.tsx
@@ -1,12 +1,11 @@
 import React from "react"
 import { Status } from "#/types"
-import { Box, HStack, Icon } from "@chakra-ui/react"
+import { Box, HStack, Icon, Text } from "@chakra-ui/react"
 import {
   IconCircleCheck,
   IconCircleX,
   IconInfoCircle,
 } from "@tabler/icons-react"
-import { TextMd } from "../shared/Typography"
 import Spinner from "../shared/Spinner"
 
 const statusToLabelProps: Record<Status, { color: string }> = {
@@ -48,12 +47,14 @@ export default function ConnectWalletStatusLabel({
     <HStack spacing={3}>
       <HStack textAlign="start">
         {icon}
-        <TextMd {...statusToLabelProps[status]}>{label}</TextMd>
+        <Text size="md" {...statusToLabelProps[status]}>
+          {label}
+        </Text>
       </HStack>
       {isError && (
         <HStack color="red.400" textAlign="start">
           <Icon as={IconInfoCircle} boxSize={boxSize} />
-          <TextMd>Rejected by user</TextMd>
+          <Text size="md">Rejected by user</Text>
         </HStack>
       )}
     </HStack>

diff --git 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) {
         <PasswordForm submitButtonText="Connect" onSubmitForm={onSubmitForm} />
       </ModalBody>
       <ModalFooter pt={0}>
-        <TextSm>
+        <Text size="sm">
           Don’t have a password? Contact us on{" "}
           <Link
             fontWeight="bold"
@@ -39,7 +44,7 @@ export function GateModalBase({ closeModal }: BaseModalProps) {
           >
             Discord
           </Link>
-        </TextSm>
+        </Text>
       </ModalFooter>
     </>
   )

diff --git 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={<Icon as={BitcoinIcon} boxSize={6} color="brand.400" />}
             rightIcon={isOpen ? <IconChevronUp /> : <IconChevronDown />}
           >
-            <TextMd color="brand.400">
+            <Text size="md" color="brand.400">
               {addressUtils.truncateAddress(address)}
-            </TextMd>
+            </Text>
           </MenuButton>
           <MenuList bg="gold.200">
             {options.map(
@@ -166,9 +166,9 @@ export default function ConnectWallet() {
           spacing={3}
         >
           <Icon as={BitcoinIcon} boxSize={6} color="brand.400" />
-          <TextMd color="brand.400">
+          <Text size="md" color="brand.400">
             {addressUtils.truncateAddress(address)}
-          </TextMd>
+          </Text>
         </HStack>
 
         <HStack

diff --git a/dapp/src/components/MezoBeehiveModal.tsx b/dapp/src/components/MezoBeehiveModal.tsx
@@ -12,8 +12,8 @@ import {
   ModalCloseButton,
   Link,
   Flex,
+  Text,
 } from "@chakra-ui/react"
-import { H6, TextLg, TextMd, TextXl } from "#/components/shared/Typography"
 import { AcreSignIcon, MatsIcon, MezoSignIcon } from "#/assets/icons"
 import { IconArrowUpRight, IconChartPieFilled } from "@tabler/icons-react"
 import { externalHref } from "#/constants"
@@ -28,7 +28,9 @@ function MezoBeehiveModalBase() {
     <>
       <ModalCloseButton />
       <ModalHeader as={VStack} spacing={2.5} px={8} pt={8} pb={2.5}>
-        <TextXl fontWeight="bold">Acre & Mezo</TextXl>
+        <Text size="xl" fontWeight="bold">
+          Acre & Mezo
+        </Text>
         <Flex alignItems="center">
           <AcreSignIcon boxSize={10} rounded="full" />
           <MatsIcon
@@ -46,16 +48,18 @@ function MezoBeehiveModalBase() {
         <VStack spacing={1}>
           {data && (
             <HStack>
-              <H6 fontWeight="bold">
+              <Text size="2xl" fontWeight="bold">
                 {numbersUtils.numberToLocaleString(data.totalMats)}
-              </H6>
-              <TextLg fontWeight="bold">MATS</TextLg>
+              </Text>
+              <Text size="lg" fontWeight="bold">
+                MATS
+              </Text>
             </HStack>
           )}
-          <TextLg>
+          <Text size="lg">
             Acre users are automatically part of the Mezo Points program as a
             group.
-          </TextLg>
+          </Text>
         </VStack>
 
         <VStack>
@@ -86,11 +90,11 @@ function MezoBeehiveModalBase() {
             </CardHeader>
 
             <CardBody>
-              <TextMd lineHeight={5}>
+              <Text size="md">
                 In the event of a reward distribution, your share is calculated
                 by deposit amount and duration, and you can claim it directly
                 from Acre.
-              </TextMd>
+              </Text>
             </CardBody>
           </Card>
 
@@ -106,10 +110,10 @@ function MezoBeehiveModalBase() {
                 rounded="lg"
               />
               <VStack align="start">
-                <TextMd lineHeight={5}>
+                <Text size="md">
                   Mezo is the economic layer for Bitcoin with a mission to
                   activate a trillion dollar opportunity.
-                </TextMd>
+                </Text>
 
                 <Button
                   as={Link}

diff --git a/dapp/src/components/MobileModeBanner/index.tsx b/dapp/src/components/MobileModeBanner/index.tsx
@@ -7,12 +7,12 @@ import {
   Flex,
   Icon,
   Link,
+  Text,
   useDisclosure,
 } from "@chakra-ui/react"
 import { IconChevronDown } from "@tabler/icons-react"
 import { AnimatePresence, motion } from "framer-motion"
 import { externalHref } from "#/constants"
-import { H4, TextMd, TextXl } from "../shared/Typography"
 import AcreAnimatedBadge from "./AcreAnimatedBadge"
 import LiveTag from "../shared/LiveTag"
 
@@ -45,10 +45,15 @@ function MobileModeBanner(props: MobileModeBannerProps) {
       {...restProps}
     >
       <Flex align="center" justify="center" p={4} bg="grey.700">
-        <TextMd color="gold.300" textAlign="center" whiteSpace="break-spaces">
+        <Text
+          size="md"
+          color="gold.300"
+          textAlign="center"
+          whiteSpace="break-spaces"
+        >
           Acre App is <LiveTag color="brand.400" gap={1} px={1} py={0} /> on
           desktop!
-        </TextMd>
+        </Text>
 
         {!forceOpen && (
           <Button
@@ -67,7 +72,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
             h="auto"
             ml={2}
           >
-            <TextMd>Info</TextMd>
+            <Text size="md">Info</Text>
           </Button>
         )}
       </Flex>
@@ -91,12 +96,12 @@ function MobileModeBanner(props: MobileModeBannerProps) {
             >
               <AcreAnimatedBadge mx="auto" mb={12} boxSize={44} />
 
-              <H4 mb={9} fontWeight="500">
+              <Text size="4xl" mb={9} fontWeight="500">
                 Acre App live only on desktop for now. We&apos;re working with
                 partners to bring it to mobile soon.
-              </H4>
+              </Text>
 
-              <TextXl lineHeight={9}>
+              <Text size="xl">
                 Stay tuned on{" "}
                 <Link
                   textDecoration="underline"
@@ -114,7 +119,7 @@ function MobileModeBanner(props: MobileModeBannerProps) {
                   Discord
                 </Link>
                 . We would love to hear from you.
-              </TextXl>
+              </Text>
             </Box>
           </MotionBox>
         )}

diff --git 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 (
-    <TextMd mt={4} color="grey.400">
+    <Text size="md" mt={4} color="grey.400">
       Estimated duration&nbsp;
-      <TextMd as="span" color="grey.500">
+      <Text size="md" as="span" color="grey.500">
         ~ {activitiesUtils.getEstimatedDuration(amount, type)}
-      </TextMd>
-    </TextMd>
+      </Text>
+    </Text>
   )
 }
diff --git a/...mponents/TransactionModal/ActiveStakingStep/StakeFormModal/AcrePointsRewardEstimation.tsx b/...mponents/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 (
     <VStack spacing={2} {...props}>
       <HStack>
-        <TextMd fontWeight="semibold">Acre points you&apos;ll earn</TextMd>
+        <Text size="md" fontWeight="semibold">
+          Acre points you&apos;ll earn
+        </Text>
 
         <Menu gutter={0} matchWidth offset={[0, -32]}>
           {({ isOpen }) => (
@@ -82,7 +84,7 @@ function AcrePointsRewardEstimation(props: StackProps) {
                 _hover={{ bg: "gold.200" }}
               >
                 <HStack spacing={1}>
-                  <TextMd>{selectedTierItem.label}</TextMd>
+                  <Text size="md">{selectedTierItem.label}</Text>
                   <Icon
                     as={IconChevronDown}
                     boxSize={4}
@@ -129,7 +131,9 @@ function AcrePointsRewardEstimation(props: StackProps) {
         </Menu>
       </HStack>
 
-      <H4>+{numbersUtils.numberToLocaleString(estimatedReward)} PTS</H4>
+      <Text size="4xl">
+        +{numbersUtils.numberToLocaleString(estimatedReward)} PTS
+      </Text>
     </VStack>
   )
 }