Add visual separator to runtime preview

oasisprotocol · Feb 9, 2024 · 92392c8 · 92392c8
1 parent 30c2c05
commit 92392c8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx b/src/app/pages/ConsensusDashboardPage/ParaTimesCard.tsx
@@ -4,11 +4,20 @@ 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 { styled } from '@mui/material/styles'
+import { COLORS } from '../../../styles/theme/colors'
 import { CardHeaderWithCounter } from '../../components/CardHeaderWithCounter'
 import { RouteUtils } from '../../utils/route-utils'
 import { SearchScope } from '../../../types/searchScope'
 import { EnabledRuntimePreview, InactiveRuntimePreview } from './RuntimePreview'
 
+const StyledBox = styled(Box)(() => ({
+  display: 'flex',
+  '> div:not(:last-child)': {
+    borderRight: `1px solid ${COLORS.grayMediumLight}`,
+  },
+}))
+
 type ParaTimesCardProps = { scope: SearchScope }
 
 export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
@@ -31,7 +40,7 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
         }
       />
       <CardContent>
-        <Box sx={{ display: 'flex' }}>
+        <StyledBox>
           {!!enabledRuntimes.length &&
             enabledRuntimes.map(runtime => (
               <EnabledRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
@@ -40,7 +49,7 @@ export const ParaTimesCard: FC<ParaTimesCardProps> = ({ scope }) => {
             disabledRuntimes.map(runtime => (
               <InactiveRuntimePreview key={runtime} network={scope.network} runtime={runtime} />
             ))}
-        </Box>
+        </StyledBox>
       </CardContent>
     </Card>
   )

diff --git a/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx b/src/app/pages/ConsensusDashboardPage/RuntimePreview.tsx
@@ -98,7 +98,7 @@ const RuntimePreview: FC<RuntimePreviewProps> = ({ network, runtime, status }) =
   const dashboardLink = RouteUtils.getDashboardRoute({ network, layer: runtime })
 
   return (
-    <Box sx={{ flex: 1, padding: 3 }}>
+    <Box sx={{ flex: 1, padding: 4 }}>
       <Box sx={{ marginBottom: 4 }}>
         <StyledTypography>
           {status ? (