Merge pull request #2177 from oasisprotocol/kaja/uil-dashboard-layout

Convert dashboard layouts to tailwind

Author: kaja-osojnik

.changelog/2177.trivial.md

@@ -0,0 +1 @@
+Convert dashboard layouts to tailwind.

src/app/components/Divider/index.tsx

@@ -1,9 +1,7 @@
 import { Separator } from '@oasisprotocol/ui-library/src/components/ui/separator'
-import { useScreenSize } from '../../hooks/useScreensize'
 
-export const LayoutDivider = () => <Separator className="my-8" />
+export const LayoutDivider = () => <Separator className="my-6" />
 export const DashboardDivider = () => {
-  const { isMobile } = useScreenSize()
-  return <Separator className={isMobile ? 'mt-4 mb-8' : 'mb-8'} />
+  return <Separator className="mb-6 md:mt-0 md:mb-6" />
 }
 export const CardDivider = () => <Separator className="my-10" />

src/app/components/Snapshots/Snapshot.tsx

@@ -16,15 +16,15 @@ export const Snapshot: FC<SnapshotProps> = ({ children, header, scope, title })
       <div className="grid grid-cols-12 gap-x-4 gap-y-2 px-4 pb-4 sm:px-0 sm:pb-0">
         <div className="col-span-12 md:col-span-6 lg:col-span-4">
           <AppendMobileSearch scope={scope}>
-            <div className="flex mb-4 flex-col sm:flex-row sm:items-center gap-1">
+            <div className="flex md:mb-6 flex-col sm:flex-row sm:items-center gap-1">
               <Typography variant="h2">{title}</Typography>
               {header}
             </div>
           </AppendMobileSearch>
         </div>
       </div>
 
-      <div className="grid grid-cols-12 gap-4 w-full pb-8">{children}</div>
+      <div className="grid grid-cols-12 gap-4 w-full pb-6">{children}</div>
     </>
   )
 }

src/app/pages/ConsensusDashboardPage/index.tsx

@@ -1,5 +1,4 @@
 import { FC } from 'react'
-import Grid from '@mui/material/Grid'
 import { DashboardDivider } from '../../components/Divider'
 import { isLocalnet } from '../../utils/route-utils'
 import { PageLayout } from '../../components/PageLayout'
@@ -28,12 +27,12 @@ export const ConsensusDashboardPage: FC = () => {
       {!isLocal && <ConsensusSnapshot scope={scope} />}
       <DashboardDivider />
       {!isLocal && (
-        <Grid container spacing={4}>
-          <Grid item xs={12} lg={6} sx={{ display: 'flex' }}>
+        <div className="grid grid-cols-12 gap-x-6">
+          <div className="col-span-12 lg:col-span-6 flex">
             <TotalTransactions chartContainerHeight={350} scope={scope} />
-          </Grid>
+          </div>
           <LatestBlocksGrid scope={scope} />
-        </Grid>
+        </div>
       )}
       {isLocal && <LatestBlocksGrid scope={scope} />}
       <ValidatorsCard scope={scope} />
@@ -54,8 +53,8 @@ export const ConsensusDashboardPage: FC = () => {
 
 const LatestBlocksGrid = ({ scope }: { scope: ConsensusScope }) => {
   return (
-    <Grid item xs={12} lg={6} sx={{ display: 'flex' }}>
+    <div className="col-span-12 lg:col-span-6 flex">
       <LatestConsensusBlocks scope={scope} />
-    </Grid>
+    </div>
   )
 }

src/app/pages/ParatimeDashboardPage/LatestRuntimeBlocks.tsx

@@ -45,7 +45,7 @@ export const LatestRuntimeBlocks: FC<{ scope: RuntimeScope }> = ({ scope }) => {
   const { t } = useTranslation()
 
   return (
-    <Card>
+    <Card sx={{ width: '100%' }}>
       <CardHeader
         disableTypography
         component="h3"

src/app/pages/ParatimeDashboardPage/index.tsx

@@ -1,7 +1,5 @@
 import { FC } from 'react'
 import { DashboardDivider } from '../../components/Divider'
-import Grid from '@mui/material/Grid'
-import { useScreenSize } from '../../hooks/useScreensize'
 import { isLocalnet } from '../../utils/route-utils'
 import { Social } from '../../components/Social'
 import { LearningMaterials } from './LearningMaterials'
@@ -18,7 +16,6 @@ import { LatestRoflApps } from './LatestRoflApps'
 import { paraTimesConfig } from '../../../config'
 
 export const ParatimeDashboardPage: FC = () => {
-  const { isMobile } = useScreenSize()
   const scope = useRuntimeScope()
   const isLocal = isLocalnet(scope.network)
   const { txMethod, setTxMethod } = useRuntimeTxMethodParam()
@@ -28,28 +25,28 @@ export const ParatimeDashboardPage: FC = () => {
       {!isLocal && <ParaTimeSnapshot scope={scope} />}
       <DashboardDivider />
       <LatestRuntimeTransactions scope={scope} txMethod={txMethod} setTxMethod={setTxMethod} />
-      <Grid container spacing={4}>
-        <Grid item xs={12} lg={6} sx={{ display: 'flex', order: isMobile ? 1 : 0 }}>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-6">
+        <div className="flex order-1 md:order-0">
           <LearningMaterials scope={scope} />
-        </Grid>
-        <Grid item xs={12} lg={6}>
+        </div>
+        <div className="flex">
           <LatestRuntimeBlocks scope={scope} />
-        </Grid>
-        <Grid item xs={12}>
+        </div>
+        <div className="col-span-1 lg:col-span-2">
           <TopTokens scope={scope} />
           {paraTimesConfig[scope.layer]?.offerRoflTxTypes && <LatestRoflApps scope={scope} />}
-        </Grid>
-      </Grid>
+        </div>
+      </div>
       {!isLocal && (
         <>
-          <Grid container spacing={4}>
-            <Grid item xs={12} lg={6}>
+          <div className="grid grid-cols-12 gap-x-6">
+            <div className="col-span-12 lg:col-span-6">
               <TransactionsStats scope={scope} />
-            </Grid>
-            <Grid item xs={12} lg={6}>
+            </div>
+            <div className="col-span-12 lg:col-span-6">
               <TotalTransactions scope={scope} />
-            </Grid>
-          </Grid>
+            </div>
+          </div>
           <Social />
         </>
       )}

src/app/pages/TokenDashboardPage/TokenSnapshot.tsx

@@ -22,7 +22,7 @@ export const TokenSnapshot: FC<{ scope: RuntimeScope; address: string }> = ({ sc
           </AppendMobileSearch>
         </div>
       </div>
-      <div className="grid grid-cols-12 gap-4 w-full pb-8">
+      <div className="grid grid-cols-12 gap-4 w-full md:pb-6">
         <div className="col-span-12 lg:col-span-3">
           <TokenTotalTransactionsCard scope={scope} address={address} />
         </div>

src/app/pages/ValidatorDetailsPage/ValidatorSnapshot.tsx

@@ -29,7 +29,7 @@ export const ValidatorSnapshot: FC<ValidatorSnapshotProps> = ({ scope, validator
           </AppendMobileSearch>
         </div>
       </div>
-      <div className="grid grid-cols-12 gap-4 w-full pb-8">
+      <div className="grid grid-cols-12 gap-4 w-full md:pb-6">
         <div className="col-span-12 lg:col-span-3">
           <EscrowDistributionCard validator={validator} />
         </div>

src/styles/theme/defaultTheme.ts

@@ -343,7 +343,7 @@ export const defaultTheme = createTheme({
             },
           },
           [theme.breakpoints.up('sm')]: {
-            marginBottom: theme.spacing(5),
+            marginBottom: '24px',
             padding: theme.spacing(5, 5, 0),
           },
         }),