Merge pull request #2285 from oasisprotocol/kaja/uil-box-various-5

Convert StyledBox elements

Author: kaja-osojnik

.changelog/2285.trivial.md

@@ -0,0 +1 @@
+Convert StyledBox elements.

src/app/components/AccountSizeBadge/index.tsx

@@ -1,26 +1,6 @@
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import Tooltip from '@mui/material/Tooltip'
-import { styled } from '@mui/material/styles'
 import { FC } from 'react'
-import { COLORS } from 'styles/theme/colors'
-
-const badgeSize = '27px'
-
-export const StyledBox = styled(Box)(() => ({
-  background: 'linear-gradient(88deg, #9747FF 1.71%, #3332CB 79.56%)',
-  border: `2px solid ${COLORS.brandExtraDark}`,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: badgeSize,
-  minWidth: badgeSize,
-  height: badgeSize,
-  borderRadius: badgeSize,
-  color: COLORS.white,
-  fontSize: '10px',
-  fontWeight: 700,
-}))
 
 type AccountSizeBadgeProps = {
   size: string
@@ -31,7 +11,9 @@ export const AccountSizeBadge: FC<AccountSizeBadgeProps> = ({ size }) => {
 
   return (
     <Tooltip arrow placement="top" title={t('account.sizeTooltip', { size })}>
-      <StyledBox>{size}</StyledBox>
+      <div className="flex justify-center items-center w-9 h-9 rounded-full text-xs text-white font-semibold bg-primary">
+        {size}
+      </div>
     </Tooltip>
   )
 }

src/app/components/Balance/FiatMoneyAmount.tsx

@@ -1,21 +1,11 @@
-import { styled } from '@mui/material/styles'
 import WarningIcon from '@mui/icons-material/WarningAmber'
-import Box from '@mui/material/Box'
 import { useTranslation } from 'react-i18next'
 import { FC } from 'react'
 import { CoinGeckoReferral } from '../CoinGeckoReferral'
 import { FiatValueInfo } from './hooks'
 import Tooltip from '@mui/material/Tooltip'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 
-export const FiatMoneyAmountBox = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 4,
-  flex: 1,
-}))
-
 export const FiatMoneyWarning: FC<{ unknownTickers: string[] }> = ({ unknownTickers }) => {
   const { t } = useTranslation()
   return (
@@ -38,7 +28,7 @@ export const FiatMoneyAmount: FC<FiatValueInfo> = ({
   const { t } = useTranslation()
   const hasFailed = !!unknownTickers.length
   return (
-    <FiatMoneyAmountBox>
+    <div className="flex items-center justify-between gap-1 flex-1">
       <span>
         {!hasFailed ? (
           t('common.fiatValueInUSD', {
@@ -55,6 +45,6 @@ export const FiatMoneyAmount: FC<FiatValueInfo> = ({
         {loading && <Skeleton className="h-4" />}
       </span>
       {hasUsedCoinGecko && <CoinGeckoReferral />}
-    </FiatMoneyAmountBox>
+    </div>
   )
 }

src/app/components/CardEmptyState/index.tsx

@@ -1,44 +1,19 @@
 import { FC, ReactNode } from 'react'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { styled } from '@mui/material/styles'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import ReportProblemIcon from '@mui/icons-material/ReportProblem'
 import { COLORS } from '../../../styles/theme/colors'
 
-const StyledBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  flex: 1,
-  gap: theme.spacing(4),
-  textAlign: 'center',
-  [theme.breakpoints.down('sm')]: {
-    padding: theme.spacing(5, 2, 6),
-  },
-  [theme.breakpoints.up('sm')]: {
-    padding: theme.spacing(6, 4, 7),
-  },
-}))
-
 type CardEmptyStateProps = {
   label: string
   action?: ReactNode
 }
 
 export const CardEmptyState: FC<CardEmptyStateProps> = ({ label, action }) => (
-  <StyledBox>
+  <div className="flex flex-col justify-center items-center flex-1 gap-3 text-center px-1 pt-8 pb-16 sm:px-4 sm:pt-16 sm:pb-32">
     <ReportProblemIcon sx={{ color: COLORS.warningColor, fontSize: '60px' }} />
-    <Typography
-      sx={{
-        color: COLORS.grayDark,
-        display: 'block',
-        alignItems: 'center',
-        verticalAlign: 'middle',
-      }}
-    >
+    <Typography className="block align-middle text-gray-700">
       {label}
       {action}
     </Typography>
-  </StyledBox>
+  </div>
 )

src/app/components/Circle/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { FiatMoneyAmountBox, FiatMoneyWarning } from '../Balance/FiatMoneyAmount'
+import { FiatMoneyWarning } from '../Balance/FiatMoneyAmount'
 import Tooltip from '@mui/material/Tooltip'
 import { CoinGeckoReferral } from '../CoinGeckoReferral'
 import HelpIcon from '@mui/icons-material/Help'
@@ -21,7 +21,7 @@ export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({
 }) => {
   const { t } = useTranslation()
   return price === undefined && !hasFailed ? null : (
-    <FiatMoneyAmountBox>
+    <div className="flex items-center justify-between gap-1 flex-1">
       <div className="inline-flex items-center">
         {hasFailed ? (
           <FiatMoneyWarning unknownTickers={[ticker]} />
@@ -43,6 +43,6 @@ export const CurrentFiatValue: FC<CurrentFiatValueProps> = ({
         )}
       </div>
       {hasUsedCoinGecko && <CoinGeckoReferral />}
-    </FiatMoneyAmountBox>
+    </div>
   )
 }

src/app/components/CurrentFiatValue/index.tsx

@@ -6,7 +6,6 @@ import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import OpenInNewIcon from '@mui/icons-material/OpenInNew'
 import { Link } from '@oasisprotocol/ui-library/src/components/link'
 import { styled } from '@mui/material/styles'
-import { Circle } from '../Circle'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network, getNetworkNames } from '../../../types/network'
 import { Layer } from '../../../oasis-nexus/api'
@@ -227,17 +226,9 @@ export const LayerDetailsSection: FC<LayerDetailsSectionProps> = ({
   return (
     <div className="flex py-4 px-1 md:px-8" style={{ minHeight: contentMinHeight }}>
       <div className="pt-0.5 pr-4 text-primary">
-        <Circle
-          color={COLORS.white}
-          size={5}
-          sx={{
-            borderColor: COLORS.brandDark,
-            borderWidth: '2px',
-            borderStyle: 'solid',
-          }}
-        >
+        <div className="w-8 h-8 flex justify-center items-center text-inherit rounded-full border-2 border-solid border-primary">
           {icons[selectedScope.network]}
-        </Circle>
+        </div>
       </div>
       <div>
         <div className="flex items-center pb-2">

src/app/components/LayerPicker/LayerDetails.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import Button, { buttonClasses } from '@mui/material/Button'
 import EditIcon from '@mui/icons-material/Edit'
 import { styled } from '@mui/material/styles'
@@ -63,13 +62,6 @@ export const StyledNetworkButton = styled(Button)(({ theme }) => ({
   },
 }))
 
-export const StyledBox = styled(Box)(({ theme }) => ({
-  flex: 1,
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing(3),
-}))
-
 type NetworkButtonProps = {
   isOutOfDate?: boolean
   layer: Layer
@@ -94,10 +86,10 @@ export const NetworkButton: FC<NetworkButtonProps> = ({ isOutOfDate, layer, netw
       endIcon={<EditIcon />}
       onClick={onClick}
     >
-      <StyledBox>
+      <div className="flex flex-1 items-center gap-2">
         {getNetworkButtonLabel(t, network, layer)}
         <LayerStatus isOutOfDate={isOutOfDate} />
-      </StyledBox>
+      </div>
     </StyledNetworkButton>
   )
 }

src/app/components/PageLayout/NetworkButton.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import CancelIcon from '@mui/icons-material/Cancel'
 import { RuntimeEvent } from '../../../oasis-nexus/api'
-import { StatusDetails, StyledBox } from '../StatusIcon'
+import { StatusDetails, StatusBadge } from '../StatusIcon'
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { RuntimeEventType } from '../../../oasis-nexus/api'
@@ -33,11 +33,11 @@ export const EventError: FC<EventErrorProps> = ({ event }) => {
   const errorMessage = `${t('errors.code')} ${error.code}, ${t('errors.module')}: ${error.module}`
   return (
     <>
-      <StyledBox status="failure" withText>
+      <StatusBadge status="failure" withText>
         {t('common.failed')}
         &nbsp;
         <CancelIcon color="error" fontSize="inherit" />
-      </StyledBox>
+      </StatusBadge>
       <StatusDetails error>{errorMessage}</StatusDetails>
     </>
   )

src/app/components/RuntimeEvents/EventError.tsx

@@ -1,21 +1,9 @@
 import { FC, ReactNode } from 'react'
-import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
-import { styled } from '@mui/material/styles'
-import Typography from '@mui/material/Typography'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
-import { COLORS } from '../../../styles/theme/colors'
 import { isUrlSafe } from 'app/utils/url'
 
-const StyledBox = styled(Box)(({ theme }) => ({
-  gap: theme.spacing(5),
-  padding: '0',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'stretch',
-  justifyContent: 'space-between',
-}))
-
 type SnapshotCardExternalLinkProps = {
   description: string
   label?: ReactNode
@@ -31,21 +19,16 @@ export const SnapshotCardExternalLink: FC<SnapshotCardExternalLinkProps> = ({
 }) => {
   return (
     <SnapshotCard title={title} withContentPadding={false}>
-      <StyledBox>
-        <Typography
-          sx={{
-            fontSize: '12px',
-            color: COLORS.grayMedium,
-          }}
-        >
+      <div className="flex flex-col items-stretch justify-between gap-4">
+        <Typography textColor="muted" variant="xsmall">
           {description}
         </Typography>
         {url && isUrlSafe(url) && (
           <Button href={url} target="_blank" rel="noopener noreferrer" color="secondary" variant="outlined">
             {label}
           </Button>
         )}
-      </StyledBox>
+      </div>
     </SnapshotCard>
   )
 }