Update remaining MUI Typography instances

Author: kaja-osojnik

src/app/components/BalancesDiff/index.tsx

@@ -1,9 +1,9 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import BigNumber from 'bignumber.js'
-import { COLORS } from '../../../styles/theme/colors'
-import Typography from '@mui/material/Typography'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { RoundedBalance } from '../RoundedBalance'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
 type BalancesDiffProps = {
   before: string | undefined
@@ -22,11 +22,7 @@ export const BalancesDiff: FC<BalancesDiffProps> = ({ before, after, ticker }) =
   const isNegative = result.isNegative()
 
   return (
-    <Typography
-      sx={{
-        color: isNegative ? COLORS.error : COLORS.eucalyptus,
-      }}
-    >
+    <Typography className={cn(isNegative ? 'text-destructive' : 'text-success')}>
       <RoundedBalance compactAllNumbers showSign value={result.toFixed()} ticker={ticker} />
     </Typography>
   )

src/app/components/ContractVerificationIcon/index.tsx

@@ -1,8 +1,6 @@
 import { FC, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import { COLORS } from '../../../styles/theme/colors'
 import Link from '@mui/material/Link'
-import Typography from '@mui/material/Typography'
 import { SearchScope } from '../../../types/searchScope'
 import * as externalLinks from '../../utils/externalLinks'
 import { isLocalnet } from '../../utils/route-utils'
@@ -45,7 +43,7 @@ export const VerificationIcon: FC<{
       </Link>
       {!hideLink &&
         (verificationLevel ? (
-          <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+          <span className="text-xs">
             &nbsp; &nbsp;
             <Trans
               t={t}
@@ -55,9 +53,9 @@ export const VerificationIcon: FC<{
               }}
             />
             <AbiPlaygroundLink address_eth={address_eth} scope={scope} />
-          </Typography>
+          </span>
         ) : (
-          <Typography component="span" sx={{ fontSize: '12px', color: COLORS.brandExtraDark }}>
+          <span className="text-xs">
             &nbsp; &nbsp;
             <Trans
               t={t}
@@ -67,7 +65,7 @@ export const VerificationIcon: FC<{
               }}
             />{' '}
             {explainDelay && t('contract.verification.explainVerificationDelay')}
-          </Typography>
+          </span>
         ))}
     </>
   )

src/app/components/LayerPicker/LayerMenu.tsx

@@ -1,9 +1,7 @@
 import { FC, PropsWithChildren, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
-import { COLORS } from '../../../styles/theme/colors'
 import { Layer } from '../../../oasis-nexus/api'
 import { getLayerLabels } from '../../utils/content'
 import { isScopeHidden, mergeNetworksInLayerSelector, RouteUtils } from '../../utils/route-utils'
@@ -20,12 +18,7 @@ type BaseLayerMenuItemProps = {
 }
 
 const LayerMenuItemCaption: FC<PropsWithChildren> = ({ children }) => (
-  <Typography
-    component="span"
-    sx={{ fontSize: '10px', fontStyle: 'italic', color: COLORS.grayMedium, ml: 2 }}
-  >
-    {children}
-  </Typography>
+  <span className="text-[10px] italic text-muted-foreground ml-1">{children}</span>
 )
 
 export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, targetScope }) => {

src/app/components/LayerPicker/NetworkMenu.tsx

@@ -1,8 +1,6 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
-import { COLORS } from '../../../styles/theme/colors'
 import { Network, getNetworkNames } from '../../../types/network'
 import { RouteUtils } from '../../utils/route-utils'
 import { getNetworkIcons } from '../../utils/content'
@@ -47,12 +45,16 @@ export const NetworkMenuItem: FC<NetworkMenuItemProps> = ({
       <div className="flex-auto">
         {labels[network]}
         {isActive && (
-          <Typography
-            component="span"
-            sx={{ fontSize: '10px', fontStyle: 'italic', color: COLORS.grayMedium, ml: 2 }}
+          <span
+            className="
+              text-[10px]
+              italic
+              text-muted-foreground
+              ml-1
+            "
           >
             {t('layerPicker.active')}
-          </Typography>
+          </span>
         )}
       </div>
       {network === selectedNetwork && <KeyboardArrowRightIcon />}

src/app/components/charts/Tooltip.tsx

@@ -1,5 +1,4 @@
 import { TooltipProps } from 'recharts'
-import Typography from '@mui/material/Typography'
 import { COLORS } from 'styles/theme/colors'
 
 export type Formatters = {
@@ -31,12 +30,12 @@ export const TooltipContent = ({
       className="inline-flex flex-col px-5 py-3 shadow-lg rounded-lg text-white text-center"
       style={{ backgroundColor: COLORS.spaceCadet }}
     >
-      <Typography paragraph={false} sx={{ fontSize: 12 }}>
+      <span className="text-xs">
         {formatters?.label ? formatters.label(payload[0].payload[labelKey]) : payload[0].payload[labelKey]}
-      </Typography>
-      <Typography paragraph={false} sx={{ fontSize: 12, fontWeight: 600 }}>
+      </span>
+      <span className="text-xs font-semibold">
         {formatters?.data ? formatters.data(payload[0].value!, payload[0].payload.payload) : payload[0].value}
-      </Typography>
+      </span>
     </div>
   )
 }

src/app/pages/ValidatorDetailsPage/EscrowDistributionCard.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { TFunction } from 'i18next'
-import Typography from '@mui/material/Typography'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { Validator } from '../../../oasis-nexus/api'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
 import { PieChart } from '../../components/charts/PieChart'
@@ -46,7 +46,7 @@ export const EscrowDistributionCard: FC<BalanceDistributionCardProps> = ({ valid
             prependLegendList={
               <>
                 {t('validator.totalEscrow')}
-                <Typography sx={{ fontSize: 10 }}>
+                <Typography variant="xsmall" className="text-inherit">
                   <RoundedBalance
                     compactLargeNumbers
                     value={validator.escrow.active_balance}

src/app/pages/ValidatorDetailsPage/ExternalLinkCard.tsx

@@ -1,17 +1,10 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Typography from '@mui/material/Typography'
-import { styled } from '@mui/material/styles'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { getHostname } from '../../utils/url'
 import { SnapshotCardExternalLink } from '../../components/Snapshots/SnapshotCardExternalLink'
 
-const StyledTypography = styled(Typography)(() => ({
-  fontSize: 18,
-  fontWeight: 500,
-  textTransform: 'lowercase',
-}))
-
 type ExternalLinkCardProps = {
   link: string | undefined
 }
@@ -24,8 +17,8 @@ export const ExternalLinkCard: FC<ExternalLinkCardProps> = ({ link }) => {
       description={t('validator.externalLinkDescription')}
       label={
         <div className="flex items-center gap-1">
-          <StyledTypography>{getHostname(link)}</StyledTypography>
-          <OpenInNewIcon sx={{ fontSize: 20 }} />
+          <Typography className="font-medium lowercase">{getHostname(link)}</Typography>
+          <OpenInNewIcon sx={{ fontSize: 15 }} />
         </div>
       }
       title={t('validator.externalLink')}

src/app/pages/ValidatorDetailsPage/UptimeCard.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
 import { ValidatorUptime } from '../../../oasis-nexus/api'
 import { UptimeStatus } from '../../components/UptimeStatus'
-import Typography from '@mui/material/Typography'
-import { COLORS } from 'styles/theme/colors'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 
 type UptimeCardProps = {
   uptime?: ValidatorUptime
@@ -17,7 +16,7 @@ export const UptimeCard: FC<UptimeCardProps> = ({ uptime }) => {
     <SnapshotTextCard title={t('validator.uptime')} withContentPadding={false}>
       {uptime && (
         <div className="flex flex-col mb-8">
-          <Typography sx={{ fontSize: 12, color: COLORS.grayMedium, textAlign: 'left', paddingBottom: 3 }}>
+          <Typography variant="xsmall" textColor="muted" className="font-normal text-left pb-2">
             {t('validator.uptimeLast24')}
           </Typography>
           <div className="flex items-center justify-center mx-auto mt-2">

src/app/pages/ValidatorDetailsPage/ValidatorTitleCard.tsx

@@ -1,8 +1,6 @@
 import { FC } from 'react'
-import Typography from '@mui/material/Typography'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
 import { Validator } from '../../../oasis-nexus/api'
-import { COLORS } from 'styles/theme/colors'
 import { ValidatorImage } from 'app/components/Validators/ValidatorImage'
 import { DetailsPageTitle } from 'app/components/PageLayout/DetailsPageTitle'
 import { Network } from '../../../types/network'
@@ -56,16 +54,7 @@ export const ValidatorTitleCard: FC<ValidatorTitleCardProps> = ({ isLoading, net
                   <HighlightedText text={validator?.media?.name} />
                 )}
                 &nbsp;
-                <Typography
-                  component="span"
-                  sx={{
-                    color: COLORS.grayMedium,
-                    fontSize: '24px',
-                    fontWeight: 400,
-                  }}
-                >
-                  ({validator.rank})
-                </Typography>
+                <span className="text-muted-foreground text-2xl font-normal">({validator.rank})</span>
               </div>
             </>
           )}