From 6236fb8a1a503c3be6ed6f6dcc7d9dd900c3cf17 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Fri, 13 Dec 2024 11:20:52 +0100
Subject: [PATCH] Re-style runtimes in ParaTime dashboard section

---
 .changelog/1651.bugfix.md                     |   1 +
 .../ConsensusDashboardPage/ParaTimesCard.tsx  |  68 +++----
 .../ConsensusDashboardPage/RuntimePreview.tsx | 178 +++++++++++++-----
 3 files changed, 156 insertions(+), 91 deletions(-)
 create mode 100644 .changelog/1651.bugfix.md

diff --git a/.changelog/1651.bugfix.md b/.changelog/1651.bugfix.md
new file mode 100644
index 000000000..41dbea673
--- /dev/null
+++ b/.changelog/1651.bugfix.md
@@ -0,0 +1 @@
+Increase visibility of Sapphire in ParaTimes section
diff --git a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
index e16fa1381..9fb6cfb2e 100644
--- a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
+++ b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
@@ -1,53 +1,36 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
+import Grid from '@mui/material/Unstable_Grid2'
 import { styled } from '@mui/material/styles'
 import { Layer, Runtime } from '../../../oasis-nexus/api'
-import { COLORS } from '../../../styles/theme/colors'
 import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
 import { isNotOnHiddenLayer, RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
-import { EnabledRuntimePreview, InactiveRuntimePreview } from './RuntimePreview'
-
-const StyledBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  [theme.breakpoints.up('md')]: {
-    paddingRight: theme.spacing(4),
-    paddingLeft: theme.spacing(4),
-  },
-  [theme.breakpoints.down('md')]: {
-    flexDirection: 'column',
-  },
-  '> div:not(:last-child)': {
-    [theme.breakpoints.down('md')]: {
-      paddingBottom: theme.spacing(4),
-      borderBottom: `1px solid ${COLORS.grayMediumLight}`,
-    },
-    [theme.breakpoints.up('md')]: {
-      paddingRight: theme.spacing(5),
-      marginRight: theme.spacing(5),
-      borderRight: `1px solid ${COLORS.grayMediumLight}`,
-    },
-  },
-}))
+import { EnabledRuntimePreview, DisabledRuntimePreview } from './RuntimePreview'
 
 function shouldIncludeLayer(layer: Layer) {
   return layer !== Layer.consensus && isNotOnHiddenLayer({ layer })
 }
 
+const StyledInnerGrid = styled(Grid)(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    paddingTop: 0,
+  },
+}))
+
 type ParaTimesCardProps = { scope: SearchScope }
 
 export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
   const { t } = useTranslation()
   const { network } = scope
   const { enabled, disabled } = RouteUtils.getAllLayersForNetwork(network)
-  const enabledOasisRuntimes = enabled.filter(shouldIncludeLayer) as Runtime[]
-  const disabledOasisRuntimes = disabled.filter(shouldIncludeLayer) as Runtime[]
-  const runtimesNumber = enabledOasisRuntimes.length + disabledOasisRuntimes.length
-
+  const enabledRuntimes = enabled.filter(shouldIncludeLayer) as Runtime[]
+  const disabledRuntimes = disabled.filter(shouldIncludeLayer) as Runtime[]
+  const runtimesNumber = enabledRuntimes.length + disabledRuntimes.length
+  const [firstEnabledRuntime, ...restEnabledRuntimes] = enabledRuntimes
   return (
     <Card>
       <CardHeader
@@ -62,16 +45,23 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
         }
       />
       <CardContent>
-        <StyledBox>
-          {!!enabledOasisRuntimes.length &&
-            enabledOasisRuntimes.map(runtime => (
-              <EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
-            ))}
-          {!!disabledOasisRuntimes.length &&
-            disabledOasisRuntimes.map(runtime => (
-              <InactiveRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
-            ))}
-        </StyledBox>
+        <Grid container spacing={5}>
+          <Grid xs={12} md={6}>
+            <EnabledRuntimePreview prominentItem network={scope.network} runtime={firstEnabledRuntime} />
+          </Grid>
+          <Grid xs={12} md={6} container>
+            <StyledInnerGrid xs={12} md={8}>
+              {!!restEnabledRuntimes.length &&
+                restEnabledRuntimes.map(runtime => (
+                  <EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
+                ))}
+            </StyledInnerGrid>
+            <StyledInnerGrid xs={12} md={4}>
+              {!!disabledRuntimes.length &&
+                disabledRuntimes.map(runtime => <DisabledRuntimePreview key={runtime} runtime={runtime} />)}
+            </StyledInnerGrid>
+          </Grid>
+        </Grid>
       </CardContent>
     </Card>
   )
diff --git a/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx b/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx
index 4d918fcef..df6660a17 100644
--- a/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx
+++ b/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx
@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+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'
@@ -42,6 +42,7 @@ const StyledBox = styled(Box)(() => ({
   borderRadius: '12px',
   height: '180px',
   display: 'flex',
+  flex: 1,
   justifyContent: 'center',
   alignItems: 'center',
   boxShadow: '0px 34px 24px -9px #324DAB1F',
@@ -58,12 +59,39 @@ 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 }) => ({
+  height: '100%',
+  paddingTop: theme.spacing(3),
+  paddingBottom: theme.spacing(3),
+  [theme.breakpoints.down('md')]: {
+    paddingBottom: theme.spacing(5),
+    borderBottom: `1px solid ${COLORS.grayMediumLight}`,
+  },
+  [theme.breakpoints.up('md')]: {
+    paddingRight: theme.spacing(5),
+    borderRight: `1px solid ${COLORS.grayMediumLight}`,
+  },
+}))
+
 type RuntimeProps = {
+  prominentItem?: boolean
   network: Network
   runtime: Runtime
 }
 
-export const EnabledRuntimePreview: FC<RuntimeProps> = ({ network, runtime }) => {
+export const EnabledRuntimePreview: FC<RuntimeProps> = ({ prominentItem, network, runtime }) => {
   const query = useGetRuntimeStatus(network, runtime)
   const { outOfDate } = useRuntimeFreshness({
     network,
@@ -73,6 +101,7 @@ export const EnabledRuntimePreview: FC<RuntimeProps> = ({ network, runtime }) =>
 
   return (
     <RuntimePreview
+      prominentItem={prominentItem}
       network={network}
       runtime={runtime}
       status={{
@@ -84,8 +113,23 @@ export const EnabledRuntimePreview: FC<RuntimeProps> = ({ network, runtime }) =>
   )
 }
 
-export const InactiveRuntimePreview: FC<RuntimeProps> = ({ network, runtime }) => {
-  return <RuntimePreview network={network} runtime={runtime} />
+type DisabledRuntimePreviewProps = {
+  runtime: Runtime
+}
+
+export const DisabledRuntimePreview: FC<DisabledRuntimePreviewProps> = ({ runtime }) => {
+  const { t } = useTranslation()
+  const layerLabels = getLayerLabels(t)
+  const runtimeLabel = layerLabels[runtime]
+
+  return (
+    <StyledDisabledRuntime>
+      <StyledTypography>{runtimeLabel}</StyledTypography>
+      <Box>
+        <RuntimeStatusIcon status="inactive" />
+      </Box>
+    </StyledDisabledRuntime>
+  )
 }
 
 type RuntimePreviewProps = RuntimeProps & {
@@ -98,7 +142,7 @@ type RuntimePreviewProps = RuntimeProps & {
 
 type Panels = 'transactions' | 'accounts'
 
-const RuntimePreview: FC<RuntimePreviewProps> = ({ network, runtime, status }) => {
+const RuntimePreview: FC<RuntimePreviewProps> = ({ prominentItem, network, runtime, status }) => {
   const { t } = useTranslation()
   const [panel, setPanel] = useState<Panels>('transactions')
   const layerLabels = getLayerLabels(t)
@@ -106,7 +150,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ network, runtime, status }) =
   const dashboardLink = RouteUtils.getDashboardRoute({ network, layer: runtime })
   const runtimeStatus = status ? (status.outOfDate ? 'outdated' : 'stable') : 'inactive'
   return (
-    <Box sx={{ flex: 1, paddingY: 3 }}>
+    <StyledEnabledRuntime>
       <Box sx={{ marginBottom: 4 }}>
         <StyledTypography>
           {status ? (
@@ -145,57 +189,60 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ network, runtime, status }) =
         <dt>{t('paratimes.nodes')} </dt>
         <dd>{status?.activeNodes ? t('paratimes.activeNodes', { nodes: status?.activeNodes }) : '-'} </dd>
       </StyledList>
-      <StyledBox>
-        <Box gap={3} sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          {status && (
-            <Box sx={{ width: '100%' }}>
-              {panel === 'transactions' && (
-                <TransactionsChartCard
-                  scope={{
-                    layer: runtime,
-                    network,
-                  }}
-                  chartDuration={ChartDuration.TODAY}
-                />
-              )}
-              {panel === 'accounts' && (
-                <ActiveAccounts
-                  scope={{
-                    layer: runtime,
-                    network,
-                  }}
-                  chartDuration={ChartDuration.TODAY}
-                />
-              )}
-            </Box>
-          )}
-          {!status && (
-            <>
-              <FilterNoneIcon sx={{ color: COLORS.brandDark, fontSize: '33px' }} />
-              {t('paratimes.noData')}
-            </>
+      <Box sx={{ display: 'flex', gap: 3 }}>
+        <ChartsContainer status={status}>
+          {panel === 'transactions' && (
+            <TransactionsChartCard
+              scope={{
+                layer: runtime,
+                network,
+              }}
+              chartDuration={ChartDuration.TODAY}
+            />
           )}
-        </Box>
-      </StyledBox>
-      <Box sx={{ display: 'flex', justifyContent: 'center', paddingTop: 3 }}>
-        {status && (
-          <>
-            <PanelButton
-              activePanel={panel}
-              ariaLabel={t('common.transactions')}
-              panel="transactions"
-              setPanel={setPanel}
+          {panel === 'accounts' && (
+            <ActiveAccounts
+              scope={{
+                layer: runtime,
+                network,
+              }}
+              chartDuration={ChartDuration.TODAY}
             />
-            <PanelButton
-              activePanel={panel}
-              ariaLabel={t('account.listTitle')}
-              panel="accounts"
-              setPanel={setPanel}
+          )}
+        </ChartsContainer>
+        {prominentItem && (
+          <ChartsContainer status={status}>
+            <ActiveAccounts
+              scope={{
+                layer: runtime,
+                network,
+              }}
+              chartDuration={ChartDuration.TODAY}
             />
-          </>
+          </ChartsContainer>
         )}
       </Box>
-    </Box>
+      {!prominentItem && (
+        <Box sx={{ display: 'flex', justifyContent: 'center', paddingTop: 3 }}>
+          {status && (
+            <>
+              <PanelButton
+                activePanel={panel}
+                ariaLabel={t('common.transactions')}
+                panel="transactions"
+                setPanel={setPanel}
+              />
+              <PanelButton
+                activePanel={panel}
+                ariaLabel={t('account.listTitle')}
+                panel="accounts"
+                setPanel={setPanel}
+              />
+            </>
+          )}
+        </Box>
+      )}
+    </StyledEnabledRuntime>
   )
 }
 
@@ -219,3 +266,30 @@ const PanelButton: FC<PanelButtonProps> = ({ activePanel, ariaLabel, panel, setP
     </>
   )
 }
+
+type ChartsContainerProps = {
+  children: ReactNode
+  status?: {
+    activeNodes: number | undefined
+    latestBlock: number | undefined
+    outOfDate: boolean | undefined
+  }
+}
+
+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>}
+        {!status && (
+          <>
+            <FilterNoneIcon sx={{ color: COLORS.brandDark, fontSize: '33px' }} />
+            {t('paratimes.noData')}
+          </>
+        )}
+      </Box>
+    </StyledBox>
+  )
+}