Merge pull request #2250 from oasisprotocol/kaja/uil-box-consensus

Update Boxes on Consensus related pages

Author: kaja-osojnik

.changelog/2250.trivial.md

@@ -0,0 +1 @@
+Update Boxes on Consensus related pages.

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>
         )}
       </>
     )

src/app/components/Snapshots/SnapshotCard.tsx

@@ -5,7 +5,9 @@ import CardContent from '@mui/material/CardContent'
 import CardActions from '@mui/material/CardActions'
 import { styled } from '@mui/material/styles'
 
-export const StyledCard = styled(Card)(({ theme }) => ({
+export const StyledCard = styled(Card, {
+  shouldForwardProp: prop => prop !== 'noBorder',
+})<{ noBorder?: boolean }>(({ theme, noBorder }) => ({
   display: 'flex',
   flex: 1,
   flexDirection: 'column',
@@ -15,6 +17,8 @@ export const StyledCard = styled(Card)(({ theme }) => ({
     margin: 0,
   },
   height: 186,
+  border: noBorder ? 0 : undefined,
+  backgroundColor: '#FAFAFA',
 }))
 
 const StyledCardContent = styled(CardContent, {
@@ -31,6 +35,7 @@ type SnapshotCardProps = PropsWithChildren & {
   title: ReactNode
   withContentPadding?: boolean
   alignWithCardsWithActions?: boolean
+  noBorder?: boolean
 }
 
 export const SnapshotCard: FC<SnapshotCardProps> = ({
@@ -40,20 +45,19 @@ export const SnapshotCard: FC<SnapshotCardProps> = ({
   label,
   withContentPadding = true,
   alignWithCardsWithActions = false,
+  noBorder = false,
 }) => {
   return (
-    <StyledCard>
-      <Typography variant="h4" className="pl-4 pt-4">
+    <StyledCard noBorder={noBorder}>
+      <Typography variant="h4" className="pl-4 pt-4 text-sm">
         {title}
       </Typography>
       <StyledCardContent withContentPadding={withContentPadding}>{children}</StyledCardContent>
       {(badge || label || alignWithCardsWithActions) && (
         <CardActions sx={{ minHeight: 60 }}>
           <div className="flex justify-between items-center w-full px-4 pb-4">
             <div>{badge}</div>
-            <Typography textColor="muted" className="flex-1">
-              {label}
-            </Typography>
+            <div className="flex-1 text-muted-foreground">{label}</div>
           </div>
         </CardActions>
       )}

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>
     </>
   )
 }

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 />}

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 />}

src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx

@@ -1,10 +1,9 @@
 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'
+import { Link } from '@oasisprotocol/ui-library/src/components/link'
+import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { styled } from '@mui/material/styles'
 import FilterNoneIcon from '@mui/icons-material/FilterNone'
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked'
@@ -38,55 +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,
-  color: COLORS.brandDark,
-  flex: 1,
-  minHeight: '44px',
-  display: 'flex',
-  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 +84,14 @@ export const DisabledRuntimePreview: FC<DisabledRuntimePreviewProps> = ({ runtim
   const runtimeLabel = layerLabels[runtime]
 
   return (
-    <StyledDisabledRuntime>
-      <StyledTypography>{runtimeLabel}</StyledTypography>
-      <Box>
+    <div className="flex gap-2 flex-row items-center pt-2 lg:pt-0">
+      <Typography className="text-base font-semibold text-primary flex items-center flex-1 min-h-[44px]">
+        {runtimeLabel}
+      </Typography>
+      <div>
         <Badge variant="info">{t('paratimes.inactive')}</Badge>
-      </Box>
-    </StyledDisabledRuntime>
+      </div>
+    </div>
   )
 }
 
@@ -161,28 +113,28 @@ 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 }}>
-        <StyledTypography>
+    <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">
+        <Typography className="text-base font-semibold text-primary flex items-center flex-1 min-h-[44px]">
           {status ? (
             <>
-              <Link component={RouterLink} to={dashboardLink}>
-                {runtimeLabel}
+              <Link asChild>
+                <RouterLink to={dashboardLink}>{runtimeLabel}</RouterLink>
               </Link>
               <RouterLinkCircle to={dashboardLink} />
             </>
           ) : (
             <>{runtimeLabel}</>
           )}
-        </StyledTypography>
-      </Box>
+        </Typography>
+      </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 +153,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
@@ -210,6 +162,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
                 network,
               }}
               chartDuration={ChartDuration.TODAY}
+              noBorder
             />
           )}
           {panel === 'accounts' && (
@@ -219,6 +172,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
                 network,
               }}
               chartDuration={ChartDuration.TODAY}
+              noBorder
             />
           )}
         </ChartsContainer>
@@ -230,12 +184,13 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
                 network,
               }}
               chartDuration={ChartDuration.TODAY}
+              noBorder
             />
           </ChartsContainer>
         )}
-      </Box>
+      </div>
       {!prominentItem && (
-        <Box sx={{ display: 'flex', justifyContent: 'center', paddingTop: 3 }}>
+        <div className="flex justify-center pt-2">
           {status && (
             <>
               <PanelButton
@@ -252,9 +207,9 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runti
               />
             </>
           )}
-        </Box>
+        </div>
       )}
-    </StyledEnabledRuntime>
+    </div>
   )
 }
 
@@ -296,16 +251,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>
   )
 }