Start using a shared typography

thesis · Dec 6, 2023 · 70073db · 70073db
1 parent e316b91
commit 70073db
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 16 deletions.
diff --git a/dapp/src/components/Header/ConnectWallet.tsx b/dapp/src/components/Header/ConnectWallet.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   HStack,
   Icon,
-  Text,
   Tooltip,
   useColorModeValue,
 } from "@chakra-ui/react"
@@ -17,6 +16,7 @@ import {
 } from "../../hooks"
 import { truncateAddress } from "../../utils"
 import { TokenBalance } from "../TokenBalance"
+import { TextMd } from "../Typography"
 
 export type ConnectButtonsProps = {
   leftIcon: typeof Icon
@@ -62,7 +62,7 @@ export default function ConnectWallet() {
   return (
     <HStack spacing={4}>
       <HStack>
-        <Text>Balance</Text>
+        <TextMd>Balance</TextMd>
         <TokenBalance
           tokenBalance={btcAccount?.balance.toString() ?? "0"}
           currency={BITCOIN}

diff --git a/dapp/src/components/Modals/ConnectWalletModal.tsx b/dapp/src/components/Modals/ConnectWalletModal.tsx
@@ -6,27 +6,27 @@ import {
   ModalFooter,
   ModalHeader,
   VStack,
-  Text,
 } from "@chakra-ui/react"
 import { useRequestBitcoinAccount } from "../../hooks"
 import BaseModal from "./BaseModal"
 import ConnectBTCAccount from "../../static/images/ConnectBTCAccount.png"
+import { TextLg, TextMd } from "../Typography"
 
 export default function ConnectWalletModal() {
   const { requestAccount } = useRequestBitcoinAccount()
 
   return (
     <BaseModal>
       <ModalHeader textAlign="center">
-        Bitcoin account not installed
+        <TextLg>Bitcoin account not installed</TextLg>
       </ModalHeader>
       <ModalBody>
         <VStack spacing={12} mt={8}>
           <Image src={ConnectBTCAccount} />
-          <Text textAlign="center">
+          <TextMd textAlign="center">
             Bitcoin account is required to make transactions for depositing and
             staking your BTC.
-          </Text>
+          </TextMd>
         </VStack>
       </ModalBody>
       <ModalFooter>

diff --git a/dapp/src/components/Modals/StakeModal.tsx b/dapp/src/components/Modals/StakeModal.tsx
@@ -3,7 +3,6 @@ import {
   Button,
   ModalBody,
   ModalFooter,
-  Text,
   Flex,
   Tabs,
   TabList,
@@ -18,6 +17,7 @@ import { useStakingFlowContext } from "../../hooks"
 import BaseModal from "./BaseModal"
 import { TokenBalance } from "../TokenBalance"
 import { BITCOIN } from "../../constants"
+import { TextMd } from "../Typography"
 
 function StakeDetails({
   text,
@@ -30,7 +30,7 @@ function StakeDetails({
 }) {
   return (
     <Flex justifyContent="space-between">
-      <Text>{text}</Text>
+      <TextMd>{text}</TextMd>
       <TokenBalance
         tokenBalance={tokenBalance}
         currency={BITCOIN}

diff --git a/dapp/src/components/Overview/PositionDetails.tsx b/dapp/src/components/Overview/PositionDetails.tsx
@@ -1,9 +1,10 @@
 import React from "react"
-import { Text, Button, Flex } from "@chakra-ui/react"
+import { Button, Flex } from "@chakra-ui/react"
 import { BITCOIN } from "../../constants"
 import Staking from "../Staking"
 import { useStakingFlowContext } from "../../hooks"
 import { TokenBalance } from "../TokenBalance"
+import { TextMd } from "../Typography"
 
 export default function PositionDetails() {
   const { setModalType } = useStakingFlowContext()
@@ -12,7 +13,7 @@ export default function PositionDetails() {
     <>
       <Flex p={4} h="100%" direction="column" justifyContent="space-between">
         <Flex direction="column" gap={2}>
-          <Text>Your positions</Text>
+          <TextMd>Your positions</TextMd>
           {/* TODO: Use the real data */}
           <TokenBalance
             tokenBalance="132231212"

diff --git a/dapp/src/components/TokenBalance/index.tsx b/dapp/src/components/TokenBalance/index.tsx
@@ -1,8 +1,9 @@
 import React from "react"
-import { HStack, Text, Flex } from "@chakra-ui/react"
+import { HStack, Flex } from "@chakra-ui/react"
 import { Currency } from "../../types"
 import { formatTokenAmount } from "../../utils"
 import { USD } from "../../constants"
+import { TextMd, TextSm } from "../Typography"
 
 type TokenBalanceProps = {
   currency: Currency
@@ -22,16 +23,16 @@ export function TokenBalance({
   return (
     <Flex direction="column" alignItems={alignItems}>
       <HStack>
-        <Text>
+        <TextMd>
           {formatTokenAmount(tokenBalance, currency.decimals, desiredDecimals)}
-        </Text>
-        <Text>{currency.symbol}</Text>
+        </TextMd>
+        <TextMd>{currency.symbol}</TextMd>
       </HStack>
       {usdBalance && (
         // TODO: Set the correct color
         <HStack color="gray.500">
-          <Text>{usdBalance}</Text>
-          <Text>{USD.symbol}</Text>
+          <TextSm>{usdBalance}</TextSm>
+          <TextSm>{USD.symbol}</TextSm>
         </HStack>
       )}
     </Flex>