Update Box element

Author: kaja-osojnik

src/app/components/AccountAvatar/__tests__/__snapshots__/AccountAvatar.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AccountAvatar > 0x8Bc2B030b299964eEfb5e1e0b36991352E56D2D3 1`] = `
 <div>
   <div
-    class="MuiBox-root css-u1jr60"
+    style="height: 40px; width: 40px; display: inline-block;"
   >
     <div
       style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 40px; height: 40px; display: inline-block; background: rgb(24, 176, 242);"
@@ -47,7 +47,7 @@ exports[`AccountAvatar > 0x8Bc2B030b299964eEfb5e1e0b36991352E56D2D3 1`] = `
 exports[`AccountAvatar > 0xdAC17F958D2ee523a2206206994597C13D831ec7 1`] = `
 <div>
   <div
-    class="MuiBox-root css-u1jr60"
+    style="height: 40px; width: 40px; display: inline-block;"
   >
     <div
       style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 40px; height: 40px; display: inline-block; background: rgb(200, 20, 77);"
@@ -91,7 +91,7 @@ exports[`AccountAvatar > 0xdAC17F958D2ee523a2206206994597C13D831ec7 1`] = `
 exports[`AccountAvatar > oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe 1`] = `
 <div>
   <div
-    class="MuiBox-root css-u1jr60"
+    style="height: 40px; width: 40px; display: inline-block;"
   >
     <div
       style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 40px; height: 40px; display: inline-block; background: rgb(24, 107, 242);"
@@ -135,7 +135,7 @@ exports[`AccountAvatar > oasis1qq3xrq0urs8qcffhvmhfhz4p0mu7ewc8rscnlwxe 1`] = `
 exports[`AccountAvatar > oasis1qz0k5q8vjqvu4s4nwxyj406ylnflkc4vrcjghuwk 1`] = `
 <div>
   <div
-    class="MuiBox-root css-u1jr60"
+    style="height: 40px; width: 40px; display: inline-block;"
   >
     <div
       style="border-radius: 50px; overflow: hidden; padding: 0px; margin: 0px; width: 40px; height: 40px; display: inline-block; background: rgb(250, 129, 0);"

src/app/components/EmptyState/index.tsx

@@ -1,37 +1,8 @@
 import { FC, ReactNode } from 'react'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { styled } from '@mui/material/styles'
 import lightBackgroundEmptyState from './images/background-empty-state.svg'
 import darkBackgroundEmptyState from './images/background-empty-state-dark.svg'
 import CancelIcon from '@mui/icons-material/Cancel'
-import { COLORS } from '../../../styles/theme/colors'
-
-const StyledBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  color: theme.palette.layout.main,
-  backgroundImage: `url("${darkBackgroundEmptyState}")`,
-  backgroundPosition: 'center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'cover',
-  borderRadius: 6,
-}))
-
-const StyledBoxLight = styled(Box)(() => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-  backgroundImage: `url("${lightBackgroundEmptyState}")`,
-  color: COLORS.brandExtraDark,
-  backgroundPosition: 'center',
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: 'cover',
-  height: '100%',
-}))
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
 type EmptyStateProps = {
   description: ReactNode
@@ -42,21 +13,25 @@ type EmptyStateProps = {
 
 export const EmptyState: FC<EmptyStateProps> = ({ description, title, light, minHeight = '360px' }) => {
   const content = (
-    <Box sx={{ color: light ? 'inherit' : COLORS.white, textAlign: 'center' }}>
-      <Typography component="span" sx={{ fontSize: '30px', fontWeight: 500, display: 'block' }}>
-        {title}
-      </Typography>
-      <Typography component="span" sx={{ fontSize: '16px' }}>
-        {description}
-      </Typography>
-    </Box>
+    <div className={cn('text-center', light ? 'text-inherit' : 'text-white')}>
+      <span className="block text-2xl font-medium">{title}</span>
+      <span className="text-sm">{description}</span>
+    </div>
   )
   return light ? (
-    <StyledBoxLight sx={{ minHeight }}>
+    <div
+      className="flex flex-col items-center justify-center bg-no-repeat bg-cover bg-center h-full"
+      style={{ backgroundImage: `url(${lightBackgroundEmptyState})`, minHeight }}
+    >
       <CancelIcon color="error" fontSize="large" />
       {content}
-    </StyledBoxLight>
+    </div>
   ) : (
-    <StyledBox sx={{ minHeight }}>{content}</StyledBox>
+    <div
+      className="flex flex-col items-center justify-center bg-no-repeat bg-cover bg-center rounded-md text-white"
+      style={{ backgroundImage: `url(${darkBackgroundEmptyState})`, minHeight }}
+    >
+      {content}
+    </div>
   )
 }

src/app/components/ErrorDisplay/index.tsx

@@ -6,7 +6,6 @@ import { AppError, AppErrors, ErrorPayload } from '../../../types/errors'
 import { TFunction } from 'i18next'
 import { GoToFirstPageLink } from '../Table/GoToFirstPageLink'
 import { ExploreOasisButton } from '../../pages/SearchResultsPage/ExploreOasisButton'
-import Box from '@mui/material/Box'
 import { SearchSuggestionsLinksForNoResults } from '../Search/SearchSuggestionsLinksForNoResults'
 import { SearchScope } from '../../../types/searchScope'
 import { useScopeParam } from '../../hooks/useScopeParam'
@@ -78,20 +77,16 @@ const errorMap: Record<
     title: t('errors.notFoundProposal'),
     message: t('errors.validateURL'),
   }),
-  [AppErrors.InvalidUrl]: (t, _, scope, theme) => ({
+  [AppErrors.InvalidUrl]: (t, _, scope) => ({
     title: t('errors.invalidUrl'),
     message: (
-      <Box
-        sx={{
-          a: { color: theme.palette.layout.contrastMain, textDecoration: 'underline' },
-        }}
-      >
+      <div>
         <p>
           <SearchSuggestionsLinksForNoResults scope={scope} suggestSearch />
         </p>
         <p>{t('errors.alternativelyGoExplore')}</p>
         <ExploreOasisButton />
-      </Box>
+      </div>
     ),
   }),
   [AppErrors.UnsupportedLayer]: t => ({

src/app/components/HighlightedText/index.tsx

@@ -1,39 +1,13 @@
 import * as React from 'react'
 import { findTextMatches, NormalizerOptions, PositiveMatchInfo } from './text-matching'
 import { FC, ReactNode } from 'react'
-import { SxProps } from '@mui/material/styles'
-import Box from '@mui/material/Box'
 import { useHighlightPattern } from '../PatternHighlightingContext'
 
 export interface HighlightOptions {
   /**
    * Options for identifying the matches
    */
   findOptions?: NormalizerOptions
-
-  /**
-   * Which class to use for highlighting?
-   *
-   * Please don't supply both class and style together.
-   */
-  className?: string
-
-  /**
-   * Which styles to use for highlighting?
-   *
-   * Please don't supply both class and style together.
-   */
-  sx?: SxProps
-}
-
-const defaultHighlightStyle: SxProps = {
-  background: '#FFFF5480',
-  padding: '2px',
-  margin: '-2px',
-}
-
-const defaultHighlight: HighlightOptions = {
-  sx: defaultHighlightStyle,
 }
 
 export type HighlightPattern = string[]
@@ -65,13 +39,9 @@ interface HighlightedTextProps {
 /**
  * Display a text, with potential pattern matches highlighted with html MARKs
  */
-export const HighlightedText: FC<HighlightedTextProps> = ({
-  text,
-  partsToHighlight,
-  options = defaultHighlight,
-}) => {
+export const HighlightedText: FC<HighlightedTextProps> = ({ text, partsToHighlight, options = {} }) => {
   const pattern = useHighlightPattern()
-  const { sx = defaultHighlightStyle, findOptions = {} } = options
+  const { findOptions = {} } = options
 
   // Have we been told what to highlight exactly? If not, look for the pattern
   const matches = partsToHighlight ?? findTextMatches(text, pattern, findOptions)
@@ -100,9 +70,9 @@ export const HighlightedText: FC<HighlightedTextProps> = ({
         pieces.push(text.substring(processedChars, match.startPos))
         const focus = text.substring(match.startPos, match.endPos)
         pieces.push(
-          <Box key={processedMatches} component="mark" sx={sx}>
+          <mark key={processedMatches} className="bg-yellow-200 px-0.5 -mx-0.5">
             {focus}
-          </Box>,
+          </mark>,
         )
         processedChars = match.endPos
       }

src/app/components/HoverHighlightingContext/WithHoverHighlighting.tsx

@@ -1,8 +1,7 @@
 import { FC, ReactNode, useEffect } from 'react'
 import { useHoverHighlighting } from './index'
-import { COLORS } from '../../../styles/theme/colors'
-import Box from '@mui/material/Box'
 import { useScreenSize } from '../../hooks/useScreensize'
+import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
 export const WithHoverHighlighting: FC<{ children: ReactNode; address: string }> = ({
   children,
@@ -19,24 +18,16 @@ export const WithHoverHighlighting: FC<{ children: ReactNode; address: string }>
   // so we are on tablet (or mobile), just return the wrapped contnt directly.
   const isHighlighted = !isTablet && shouldHighlight(address)
   return (
-    <Box
+    <span
       onMouseEnter={() => selectAddress(address)}
       onMouseLeave={() => releaseAddress(address)}
-      component="span"
-      sx={{
-        display: 'inline-flex',
-        ...(isHighlighted
-          ? {
-              background: COLORS.warningLight,
-              border: `1px dashed ${COLORS.warningColor}`,
-              borderRadius: '6px',
-            }
-          : {
-              border: `1px dashed transparent`,
-            }),
-      }}
+      className={cn(
+        'inline-flex',
+        'border border-dashed rounded-md',
+        isHighlighted ? 'bg-orange-50 border-orange-600' : 'border-transparent',
+      )}
     >
       {children}
-    </Box>
+    </span>
   )
 }

src/app/components/ImagePreview/index.tsx

@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { Button } from '@mui/base/Button'
 import { styled } from '@mui/material/styles'
 import { ImagePreviewDialog } from '@oasisprotocol/ui-library/src/components/dialog'
@@ -42,11 +41,11 @@ export const ImagePreview: FC<ImagePreviewProps> = ({
 
   return (
     <>
-      <Box>
+      <div>
         <StyledButton onClick={handlePreviewOpen}>
           <StyledThumbnail onError={onError} src={src} alt={label} maxThumbnailSize={maxThumbnailSize} />
         </StyledButton>
-      </Box>
+      </div>
       <ImagePreviewDialog open={previewOpen} onClose={handlePreviewClose} src={src} title={title} />
     </>
   )

src/app/components/JazzIcon/index.tsx

@@ -1,6 +1,5 @@
 import { memo, useEffect, useRef } from 'react'
 import jazzicon from '@metamask/jazzicon'
-import Box from '@mui/material/Box'
 
 interface JazzIconProps {
   diameter: number
@@ -18,5 +17,5 @@ export const JazzIcon = memo(({ diameter, seed }: JazzIconProps) => {
     }
   }, [diameter, ref, seed])
 
-  return <Box ref={ref} sx={{ height: diameter }} />
+  return <div ref={ref} style={{ height: diameter, width: diameter, display: 'inline-block' }} />
 })