Update Boxes on Consensus pages

kaja-osojnik · kaja-osojnik · commit 16d7b16b9c8d · 2025-10-09T20:56:20.000+01:00
diff --git a/src/app/components/ConsensusEvents/ConsensusEventsList.tsx b/src/app/components/ConsensusEvents/ConsensusEventsList.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { ConsensusScope } from '../../../types/searchScope'
 import { ConsensusEvent } from '../../../oasis-nexus/api'
 import { TablePagination, TablePaginationProps } from '../Table/TablePagination'
@@ -55,9 +54,9 @@ export const ConsensusEventsList: FC<{
           </div>
         ))}
         {pagination && (
-          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+          <div className="flex justify-center">
             <TablePagination {...pagination} />
-          </Box>
+          </div>
         )}
       </>
     )
diff --git a/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx b/src/app/pages/ConsensusAccountDetailsPage/BalanceDistribution.tsx
@@ -1,6 +1,5 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardContent from '@mui/material/CardContent'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
@@ -74,7 +73,7 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
           value: totalValue,
         })}
       </Typography>
-      <Box sx={{ height: isMobile ? '100px' : '250px' }}>
+      <div className="h-[100px] md:h-[250px]">
         <PieChart
           compact={isMobile}
           data={data}
@@ -88,7 +87,7 @@ const BalanceDistributionContent: FC<BalanceDistributionContentProps> = ({ accou
             label: (label: string) => label,
           }}
         />
-      </Box>
+      </div>
     </>
   )
 }
diff --git a/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx b/src/app/pages/ConsensusAccountDetailsPage/ConsensusAccountTransactionsCard.tsx
@@ -7,7 +7,6 @@ import { ConsensusAccountDetailsContext } from './hooks'
 import { LinkableCardLayout } from 'app/components/LinkableCardLayout'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { ConsensusTransactionMethodFilter } from '../../components/Transactions/ConsensusTransactionMethodFilter'
-import Box from '@mui/material/Box'
 import { transactionsContainerId } from '../../utils/tabAnchors'
 
 export const ConsensusAccountTransactionsCard: FC<ConsensusAccountDetailsContext> = context => {
@@ -18,14 +17,9 @@ export const ConsensusAccountTransactionsCard: FC<ConsensusAccountDetailsContext
     <LinkableCardLayout
       containerId={transactionsContainerId}
       title={
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'end',
-          }}
-        >
+        <div className="flex justify-end">
           {!isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} />}
-        </Box>
+        </div>
       }
     >
       {isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} expand />}
diff --git a/src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx b/src/app/pages/ConsensusBlockDetailPage/ConsensusBlockTransactionsCard.tsx
@@ -14,7 +14,6 @@ import {
   getConsensusTransactionMethodFilteringParam,
   ConsensusTxMethodFilterOption,
 } from '../../components/ConsensusTransactionMethod'
-import Box from '@mui/material/Box'
 import { transactionsContainerId } from '../../utils/tabAnchors'
 
 const TransactionList: FC<{
@@ -66,14 +65,9 @@ export const ConsensusBlockTransactionsCard: FC<ConsensusBlockDetailsContext> =
     <LinkableCardLayout
       containerId={transactionsContainerId}
       title={
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'end',
-          }}
-        >
+        <div className="flex justify-end">
           {!isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} />}
-        </Box>
+        </div>
       }
     >
       {isMobile && <ConsensusTransactionMethodFilter value={txMethod} setValue={setTxMethod} expand />}
diff --git a/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx b/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx
@@ -1,7 +1,6 @@
 import { FC, ReactNode, useState } from 'react'
 import { Link as RouterLink } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
@@ -38,18 +37,6 @@ const StyledList = styled(InlineDescriptionList)(({ theme }) => ({
   },
 }))
 
-const StyledBox = styled(Box)(() => ({
-  border: `2px solid ${COLORS.brandDark}`,
-  borderRadius: '12px',
-  height: '180px',
-  display: 'flex',
-  flex: 1,
-  justifyContent: 'center',
-  alignItems: 'center',
-  boxShadow: '0px 34px 24px -9px #324DAB1F',
-  overflow: 'hidden',
-}))
-
 const StyledTypography = styled(Typography)(() => ({
   fontSize: '18px',
   fontWeight: 700,
@@ -60,33 +47,6 @@ const StyledTypography = styled(Typography)(() => ({
   alignItems: 'center',
 }))
 
-const StyledDisabledRuntime = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  gap: 3,
-  paddingTop: theme.spacing(3),
-  flexDirection: 'row',
-  alignItems: 'center',
-  [theme.breakpoints.between('md', 'xl')]: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-}))
-
-const StyledEnabledRuntime = styled(Box)(({ theme }) => ({
-  flex: 1,
-  height: '100%',
-  paddingTop: theme.spacing(3),
-  paddingBottom: theme.spacing(3),
-  [theme.breakpoints.down('lg')]: {
-    paddingBottom: theme.spacing(5),
-    borderBottom: `1px solid ${COLORS.grayMediumLight}`,
-  },
-  [theme.breakpoints.up('lg')]: {
-    paddingRight: theme.spacing(4),
-    borderRight: `1px solid ${COLORS.grayMediumLight}`,
-  },
-}))
-
 type RuntimeProps = {
   prominentItem?: boolean
   network: Network
@@ -134,12 +94,12 @@ export const DisabledRuntimePreview: FC<DisabledRuntimePreviewProps> = ({ runtim
   const runtimeLabel = layerLabels[runtime]
 
   return (
-    <StyledDisabledRuntime>
+    <div className="flex gap-2 pt-6 flex-row items-center md:flex-col md:items-start">
       <StyledTypography>{runtimeLabel}</StyledTypography>
-      <Box>
+      <div>
         <Badge variant="info">{t('paratimes.inactive')}</Badge>
-      </Box>
-    </StyledDisabledRuntime>
+      </div>
+    </div>
   )
 }
 
@@ -161,8 +121,8 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
   const dashboardLink = RouteUtils.getDashboardRoute({ network, layer: runtime })
   const runtimeStatus = status ? (status.outOfDate ? 'outdated' : 'stable') : 'inactive'
   return (
-    <StyledEnabledRuntime>
-      <Box sx={{ marginBottom: 4 }}>
+    <div className="flex-1 h-full pb-6 border-b border-gray-200 lg:p-0 lg:pr-4 lg:border-b-0 lg:border-r">
+      <div className="mb-4">
         <StyledTypography>
           {status ? (
             <>
@@ -175,14 +135,14 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
             <>{runtimeLabel}</>
           )}
         </StyledTypography>
-      </Box>
+      </div>
       <StyledList>
         <dt>{t('common.status')}:</dt>
         <dd>
-          <Box>
+          <div>
             {runtimeStatus === 'stable' && <Badge variant="success">{t('common.online')}</Badge>}
             {runtimeStatus === 'outdated' && <Badge variant="error">{t('paratimes.outdated')}</Badge>}
-          </Box>
+          </div>
         </dd>
         <dt>{t('paratimes.blockNumber')}</dt>
         <dd>
@@ -201,7 +161,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
         <dt>{t('paratimes.nodes')} </dt>
         <dd>{status?.activeNodes ? t('paratimes.activeNodes', { nodes: status?.activeNodes }) : '-'} </dd>
       </StyledList>
-      <Box sx={{ display: 'flex', gap: 3 }}>
+      <div className="flex gap-2">
         <ChartsContainer status={status}>
           {panel === 'transactions' && (
             <TransactionsChartCard
@@ -233,9 +193,9 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
             />
           </ChartsContainer>
         )}
-      </Box>
+      </div>
       {!prominentItem && (
-        <Box sx={{ display: 'flex', justifyContent: 'center', paddingTop: 3 }}>
+        <div className="flex justify-center pt-2">
           {status && (
             <>
               <PanelButton
@@ -252,9 +212,9 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
               />
             </>
           )}
-        </Box>
+        </div>
       )}
-    </StyledEnabledRuntime>
+    </div>
   )
 }
 
@@ -296,16 +256,16 @@ const ChartsContainer: FC<ChartsContainerProps> = ({ children, status }) => {
   const { t } = useTranslation()
 
   return (
-    <StyledBox>
-      <Box gap={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-        {status && <Box sx={{ width: '100%' }}>{children}</Box>}
+    <div className="flex flex-1 items-center justify-center h-[180px] border-1 border-gray-200 rounded-md overflow-hidden">
+      <div className="flex flex-1 flex-col items-center gap-2">
+        {status && <div className="w-full">{children}</div>}
         {!status && (
           <>
             <FilterNoneIcon sx={{ color: COLORS.brandDark, fontSize: '33px' }} />
             {t('paratimes.noData')}
           </>
         )}
-      </Box>
-    </StyledBox>
+      </div>
+    </div>
   )
 }
diff --git a/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx b/src/app/pages/ConsensusDashboardPage/SnapshotStaked.tsx
@@ -1,8 +1,5 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
-import { COLORS } from '../../../styles/theme/colors'
 import { Ticker } from '../../../types/ticker'
 import { RoundedBalance } from '../../components/RoundedBalance'
 import { SnapshotTextCard } from '../../components/Snapshots/SnapshotCard'
@@ -22,14 +19,14 @@ export const SnapshotStaked: FC<SnapshotStakedProps> = ({ totalStaked, ticker })
       title={t('common.staked')}
       label={
         percentageValue !== undefined && (
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 3 }}>
-            <Typography sx={{ fontSize: 12, color: COLORS.grayMedium }}>
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-gray-400">
               <Trans
                 t={t}
                 i18nKey="consensusSnapshot.totalCirculation"
                 components={{
                   StakedPercentage: (
-                    <Typography component="span" sx={{ fontSize: '24px', color: COLORS.grayExtraDark }}>
+                    <span className="text-2xl text-gray-800">
                       {t('common.valuePair', {
                         value: percentageValue,
                         formatParams: {
@@ -39,20 +36,20 @@ export const SnapshotStaked: FC<SnapshotStakedProps> = ({ totalStaked, ticker })
                           } satisfies Intl.NumberFormatOptions,
                         },
                       })}
-                    </Typography>
+                    </span>
                   ),
                 }}
               />
-            </Typography>
-          </Box>
+            </span>
+          </div>
         )
       }
       alignWithCardsWithActions
     >
       {totalStaked && (
-        <Box sx={{ wordBreak: 'break-all', lineHeight: 1 }}>
+        <div className="break-all leading-none">
           <RoundedBalance value={totalStaked} ticker={ticker} compactLargeNumbers />
-        </Box>
+        </div>
       )}
     </SnapshotTextCard>
   )
