Merge pull request #2252 from oasisprotocol/kaja/uil-box-various-1

Update Box elements with tailwind

Author: kaja-osojnik

.changelog/2252.trivial.md

@@ -0,0 +1 @@
+Update Box elements with tailwind.

src/app/components/AdaptiveTrimmer/AdaptiveDynamicTrimmer.tsx

@@ -1,5 +1,4 @@
 import { FC, ReactNode, useMemo } from 'react'
-import Box from '@mui/material/Box'
 import InfoIcon from '@mui/icons-material/Info'
 import { MaybeWithTooltip } from '../Tooltip/MaybeWithTooltip'
 import { getAdaptiveId, ShorteningResult, useAdaptiveSizing } from './hooks'
@@ -76,27 +75,27 @@ export const AdaptiveDynamicTrimmer: FC<AdaptiveDynamicTrimmerProps> = ({
   )
 
   const title = isTruncated ? (
-    <Box>
-      <Box>{tooltipOverride ?? fullContent}</Box>
+    <div>
+      <div>{tooltipOverride ?? fullContent}</div>
       {extraTooltip && (
-        <Box sx={{ display: 'inline-flex', alignItems: 'center', gap: 2 }}>
+        <div className="inline-flex items-center gap-1">
           <InfoIcon />
           {extraTooltip}
-        </Box>
+        </div>
       )}
-    </Box>
+    </div>
   ) : (
     extraTooltip
   )
 
   return (
-    <Box component="span" ref={textRef} sx={{ maxWidth: '100%', overflowX: 'hidden' }}>
+    <span ref={textRef} className="max-w-full overflow-x-hidden">
       <MaybeWithTooltip
         title={title}
         spanClassName={cn('whitespace-nowrap', isFinal ? 'opacity-100' : 'opacity-0')}
       >
         {currentContent}
       </MaybeWithTooltip>
-    </Box>
+    </span>
   )
 }

src/app/components/AppendMobileSearch/index.tsx

@@ -1,43 +1,14 @@
 import { FC, PropsWithChildren, ReactNode } from 'react'
-import { styled } from '@mui/material/styles'
-import Box from '@mui/material/Box'
 import { Search } from '../Search'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { SearchScope } from '../../../types/searchScope'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
 interface AppendMobileSearchProps {
   action?: ReactNode
   enableMobileSearch?: boolean
 }
 
-interface AppendMobileSearchLayoutProps {
-  action?: ReactNode
-  isMobile: boolean
-}
-
-const Layout = styled(Box, {
-  shouldForwardProp: prop => prop !== 'action' && prop !== 'isMobile',
-})<AppendMobileSearchLayoutProps>(({ action, isMobile }) => ({
-  position: 'relative',
-  alignItems: isMobile ? 'center' : 'flex-start',
-  width: '100%',
-  ...(action
-    ? {
-        display: 'grid',
-        gridTemplateColumns: '1fr auto 1fr',
-      }
-    : {
-        display: 'flex',
-        justifyContent: 'space-between',
-      }),
-}))
-
-const SearchWrapper = styled(Box)(() => ({
-  width: '50px',
-  height: '47px',
-  marginLeft: 'auto',
-}))
-
 export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> & { scope?: SearchScope }> = ({
   scope,
   children,
@@ -47,16 +18,22 @@ export const AppendMobileSearch: FC<PropsWithChildren<AppendMobileSearchProps> &
   const { isMobile } = useScreenSize()
 
   return (
-    <Layout action={action} isMobile={isMobile}>
-      <Box>{children}</Box>
+    <div
+      className={cn(
+        'relative w-full',
+        action ? 'grid grid-cols-[1fr_auto_1fr]' : 'flex justify-between',
+        isMobile ? 'items-center' : 'items-start',
+      )}
+    >
+      <div>{children}</div>
 
       {action}
 
       {isMobile && enableMobileSearch && (
-        <SearchWrapper>
+        <div className="w-[50px] h-[47px] ml-auto">
           <Search scope={scope} variant="expandable" />
-        </SearchWrapper>
+        </div>
       )}
-    </Layout>
+    </div>
   )
 }

src/app/components/Balance/RuntimeBalanceDisplay.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { RuntimeSdkBalance } from '../../../oasis-nexus/api'
 import { useTranslation } from 'react-i18next'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
-import Box from '@mui/material/Box'
 
 export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefined }> = ({
   balances = [],
@@ -12,7 +11,7 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
     return t('common.missing')
   }
   return (
-    <Box>
+    <div>
       {balances.map(balance => (
         <div key={balance.token_symbol}>
           {t('common.valueInToken', {
@@ -21,6 +20,6 @@ export const RuntimeBalanceDisplay: FC<{ balances: RuntimeSdkBalance[] | undefin
           })}
         </div>
       ))}
-    </Box>
+    </div>
   )
 }

src/app/components/BlockNavigationButtons/index.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { Link as RouterLink, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { PaginationNext, PaginationPrevious } from '@oasisprotocol/ui-library/src/components/pagination'
-import Box from '@mui/material/Box'
 import Tooltip from '@mui/material/Tooltip'
 import { ConsensusScope, RuntimeScope, SearchScope } from '../../../types/searchScope'
 import { useConsensusFreshness, useRuntimeFreshness } from '../OfflineBanner/hook'
@@ -38,13 +37,13 @@ const NextBlockButton: FC<{ disabled: boolean; scope: SearchScope; currentRound:
   const [searchParams] = useSearchParams()
   return (
     <Tooltip title={disabled ? t('blocks.viewingLatest') : t('blocks.viewNext')} placement="top">
-      <Box>
+      <div>
         <PaginationNext
           linkComponent={RouterLink}
           to={RouteUtils.getBlockRoute(scope, currentRound + 1, searchParams, [TX_METHOD_QUERY_ARG_NAME])}
           disabled={disabled}
         />
-      </Box>
+      </div>
     </Tooltip>
   )
 }

src/app/components/BlockStats/index.tsx

@@ -1,20 +1,21 @@
 import { ReactNode } from 'react'
-import Box from '@mui/material/Box'
 import Tooltip from '@mui/material/Tooltip'
-import { styled } from '@mui/material/styles'
-import { COLORS } from '../../../styles/theme/colors'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
-const StyledSquare = styled(Box, {
-  shouldForwardProp: prop => prop !== 'success',
-})(({ success }: { success?: boolean }) => {
-  return {
-    display: 'flex',
-    width: '24px',
-    height: '24px',
-    borderRadius: '3px',
-    backgroundColor: success ? COLORS.eucalyptus : COLORS.errorIndicatorBackground,
-  }
-})
+const Square = ({ success, size = 32 }: { success?: boolean; size?: number }) => {
+  const borderRadius = size <= 8 ? 2 : 6
+
+  return (
+    <div
+      className={cn(success ? 'bg-success' : 'bg-destructive')}
+      style={{
+        width: `${size}px`,
+        height: `${size}px`,
+        borderRadius: `${borderRadius}px`,
+      }}
+    />
+  )
+}
 
 type BlockStatsProps<T> = {
   data: T[]
@@ -39,25 +40,25 @@ export const BlockStats = <T extends { [key: string]: any }>({
 
   return (
     <>
-      <Box sx={{ display: 'flex', flexWrap: 'wrap' }} gap={2}>
+      <div className="flex flex-wrap gap-2">
         {data.map(item => {
           const title = tooltipFormatter ? tooltipFormatter(item[dataKey].toString()) : item[dataKey]
           return (
             <Tooltip key={item[dataKey]} title={title} placement="top">
-              <StyledSquare success={item[statusKey]} />
+              <Square success={item[statusKey]} />
             </Tooltip>
           )
         })}
-      </Box>
+      </div>
       {legendLabels && (
-        <Box pt={5} sx={{ display: 'flex' }}>
-          <Box gap={3} mr={4} sx={{ display: 'flex' }}>
-            <StyledSquare success /> {legendLabels.success}
-          </Box>
-          <Box gap={3} sx={{ display: 'flex' }}>
-            <StyledSquare /> {legendLabels.fail}
-          </Box>
-        </Box>
+        <div className="pt-8 flex">
+          <div className="flex gap-2 mr-4 items-center">
+            <Square success size={8} /> {legendLabels.success}
+          </div>
+          <div className="flex gap-2 items-center">
+            <Square size={8} /> {legendLabels.fail}
+          </div>
+        </div>
       )}
     </>
   )

src/app/components/ContractVerificationIcon/AbiPlaygroundLink.tsx

@@ -5,7 +5,6 @@ import { Layer } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
 import { Network } from '../../../types/network'
 import * as externalLinks from '../../utils/externalLinks'
-import Box from '@mui/material/Box'
 
 export const AbiPlaygroundLink: FC<{
   address_eth: string
@@ -38,15 +37,15 @@ export const AbiPlaygroundLink: FC<{
   return (
     <span>
       &nbsp;|&nbsp;
-      <Box sx={{ display: 'inline-block' }}>
+      <div className="inline-block">
         <Trans
           t={t}
           i18nKey={'contract.verification.openInAbiPlayground'}
           components={{
             AbiPlaygroundLink: <Link {...abiPlaygroundLinkProps} />,
           }}
         />
-      </Box>
+      </div>
     </span>
   )
 }

src/app/components/CurrentFiatValue/index.tsx

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

src/app/components/DappBanner/index.tsx

@@ -3,7 +3,6 @@ import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { COLORS } from '../../../styles/theme/colors'
-import Box from '@mui/material/Box'
 import { SearchScope } from '../../../types/searchScope'
 import Button from '@mui/material/Button'
 import { EthOrOasisAddress } from '../../../oasis-nexus/api'
@@ -25,15 +24,7 @@ export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisA
         }}
       >
         <CardContent sx={{ paddingBottom: '0!important' }}>
-          <Box
-            sx={{
-              display: 'flex',
-              flexWrap: 'wrap',
-              justifyContent: 'center',
-              alignItems: 'center',
-              gap: 3,
-            }}
-          >
+          <div className="flex flex-wrap justify-center items-center gap-2">
             <Typography variant="h3" className="text-white">
               {dApp.description}
             </Typography>
@@ -53,7 +44,7 @@ export const DappBanner: FC<{ scope: SearchScope; ethOrOasisAddress: EthOrOasisA
             >
               {dApp.button}
             </Button>
-          </Box>
+          </div>
         </CardContent>
       </Card>
     )

src/app/components/DiscordProfileWidget/index.tsx

@@ -1,7 +1,5 @@
 import React, { FC } from 'react'
 import discord from './discord-blue.svg'
-import Typography from '@mui/material/Typography'
-import Box from '@mui/material/Box'
 
 export const DiscordProfileWidget: FC<{
   handle: string
@@ -14,26 +12,11 @@ export const DiscordProfileWidget: FC<{
       : handle
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 3,
-      }}
-    >
-      <Typography
-        component="span"
-        sx={{
-          fontWeight: 'bold',
-          color: '#5865f2' /* Discord's brand color */,
-          fontSize: '16px',
-        }}
-      >
-        @{cleanHandle}
-      </Typography>
+    <div className="flex items-center gap-2">
+      <span className="font-bold text-[#5865f2]">@{cleanHandle}</span>
       at
       <img src={discord} height={24} alt="" />
       Discord
-    </Box>
+    </div>
   )
 }