Merge pull request #2199 from oasisprotocol/kaja/uil-header-grid

Kaja/uil header grid

Author: kaja-osojnik

.changelog/2199.trivial.md

@@ -0,0 +1 @@
+Convert header Grid and Box MUI elements to tailwind

src/app/components/PageLayout/Header.tsx

@@ -1,11 +1,9 @@
 import { FC } from 'react'
 import AppBar from '@mui/material/AppBar'
-import Grid from '@mui/material/Unstable_Grid2'
 import useScrollTrigger from '@mui/material/useScrollTrigger'
 import { useTheme } from '@mui/material/styles'
 import { HomePageLink } from './Logotype'
 import { NetworkSelector } from './NetworkSelector'
-import Box from '@mui/material/Box'
 import Button from '@mui/material/Button'
 import { useScopeParam } from '../../hooks/useScopeParam'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -38,27 +36,20 @@ export const Header: FC = () => {
         boxShadow: '0px 4px 6px -1px rgba(0, 0, 0, 0.10), 0px 2px 4px -1px rgba(0, 0, 0, 0.06)',
       }}
     >
-      <Box sx={{ px: '15px' }}>
-        <Grid
-          container
-          sx={{
-            px: isMobile ? 0 : '4%',
-            pt: isMobile ? 4 : '15px',
-            pb: 4,
-          }}
-        >
-          <Grid lg={3} xs={4} sx={{ display: 'flex', alignItems: 'center' }}>
+      <div className="px-4">
+        <div className="grid grid-cols-12 pt-3 pb-4 px-0 md:px-[4%]">
+          <div className="col-span-6 xl:col-span-3 flex items-center">
             <HomePageLink showText={!scrollTrigger && !isMobile} color="#0500e2" />
-          </Grid>
+          </div>
+
           {withScopeSelector && (
-            <>
-              <Grid lg={6} xs={8}>
-                <NetworkSelector layer={scope.layer} network={scope.network} />
-              </Grid>
-            </>
+            <div className="col-span-6 xl:col-span-6 flex justify-end xl:justify-center items-center">
+              <NetworkSelector layer={scope.layer} network={scope.network} />
+            </div>
           )}
+
           {isDesktop && (
-            <Grid lg={3} xs={4} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+            <div className="col-span-3 flex justify-end items-center">
               <Button
                 component="a"
                 href="https://rose.oasis.io/"
@@ -70,10 +61,10 @@ export const Header: FC = () => {
               >
                 {t('common.visitRoseApp')}
               </Button>
-            </Grid>
+            </div>
           )}
-        </Grid>
-      </Box>
+        </div>
+      </div>
     </AppBar>
   )
 }

src/app/components/PageLayout/Logotype.tsx

@@ -1,9 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useScreenSize } from '../../hooks/useScreensize'
-import Link from '@mui/material/Link'
-import { useTheme } from '@mui/material/styles'
-import Box from '@mui/material/Box'
 import { Link as RouterLink } from 'react-router-dom'
 import { OasisIcon } from '../CustomIcons/OasisIcon'
 import { ExplorerIcon } from '../CustomIcons/ExplorerIcon'
@@ -17,30 +14,20 @@ export const HomePageLink: FC<LogotypeProps> = ({ color, showText }) => {
   const { t } = useTranslation()
 
   return (
-    <Link
-      aria-label={t('home.link')}
-      to="/"
-      component={RouterLink}
-      sx={{ display: 'inline-flex', textDecoration: 'none' }}
-    >
+    <RouterLink to="/" aria-label={t('home.link')}>
       <Logotype color={color} showText={showText} />
-    </Link>
+    </RouterLink>
   )
 }
 
 export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
-  const theme = useTheme()
   const { isMobile } = useScreenSize()
   const oasisLogoSize = isMobile ? 32 : 40
   const logoSize = !showText ? { height: oasisLogoSize, width: oasisLogoSize } : { height: 40, width: 214 }
 
   return (
-    <Box
-      sx={{
-        color: color || theme.palette.layout.main,
-      }}
-    >
+    <div className="flex items-center text-primary">
       {!showText ? <OasisIcon sx={logoSize} /> : <ExplorerIcon sx={logoSize} />}
-    </Box>
+    </div>
   )
 }

src/app/components/PageLayout/NetworkButton.tsx

@@ -88,7 +88,6 @@ export const NetworkButton: FC<NetworkButtonProps> = ({ isOutOfDate, layer, netw
 
   return (
     <StyledNetworkButton
-      sx={{ ml: 4 }}
       size="small"
       variant="outlined"
       startIcon={icons[network]}