Merge pull request #755 from oasisprotocol/mz/logo

Logo should not be clickable on homepage
oasisprotocol · Jul 19, 2023 · f7951d3 · f7951d3
2 parents 40be1e3 + 10aaaaa
commit f7951d3
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/.changelog/754.bugfix.md b/.changelog/754.bugfix.md
@@ -0,0 +1 @@
+Logo should not be clickable on homepage
diff --git a/src/app/components/PageLayout/Header.tsx b/src/app/components/PageLayout/Header.tsx
@@ -3,7 +3,7 @@ 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 { Logotype } from './Logotype'
+import { HomePageLink } from './Logotype'
 import { NetworkSelector } from './NetworkSelector'
 import Box from '@mui/material/Box'
 import { useScopeParam } from '../../hooks/useScopeParam'
@@ -44,7 +44,7 @@ export const Header: FC = () => {
           }}
         >
           <Grid md={3} xs={4} sx={{ display: 'flex', alignItems: 'center' }}>
-            <Logotype
+            <HomePageLink
               color={scrollTrigger ? theme.palette.layout.contrastMain : undefined}
               showText={!scrollTrigger && !isMobile}
             />

diff --git a/src/app/components/PageLayout/Logotype.tsx b/src/app/components/PageLayout/Logotype.tsx
@@ -2,6 +2,7 @@ import { FC } from 'react'
 import Link from '@mui/material/Link'
 import { useScreenSize } from '../../hooks/useScreensize'
 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 Typography from '@mui/material/Typography'
@@ -12,16 +13,22 @@ interface LogotypeProps {
   showText: boolean
 }
 
+export const HomePageLink: FC<LogotypeProps> = ({ color, showText }) => {
+  return (
+    <Link to="/" component={RouterLink} sx={{ display: 'inline-flex' }}>
+      <Logotype color={color} showText={showText} />
+    </Link>
+  )
+}
+
 export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
   const { t } = useTranslation()
   const theme = useTheme()
   const { isMobile } = useScreenSize()
   const logoSize = isMobile ? 32 : 40
 
   return (
-    <Link
-      to="/"
-      component={RouterLink}
+    <Box
       sx={{
         textDecoration: 'none',
         display: 'inline-flex',
@@ -36,6 +43,6 @@ export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
           {t('pageTitle')}
         </Typography>
       )}
-    </Link>
+    </Box>
   )
 }
diff --git a/src/app/components/ParaTimePicker/index.tsx b/src/app/components/ParaTimePicker/index.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button'
 import Drawer from '@mui/material/Drawer'
 import Divider from '@mui/material/Divider'
 import Grid from '@mui/material/Unstable_Grid2'
-import { Logotype } from '../PageLayout/Logotype'
+import { HomePageLink } from '../PageLayout/Logotype'
 import { COLORS } from '../../../styles/theme/colors'
 import { Network } from '../../../types/network'
 import { Layer } from '../../../oasis-nexus/api'
@@ -101,7 +101,7 @@ const ParaTimePickerContent: FC<ParaTimePickerContentProps> = ({ onClose, onConf
   return (
     <StyledParaTimePickerContent>
       <Box sx={{ mb: isTablet ? 0 : 5, color: 'red', position: 'relative' }}>
-        <Logotype color={COLORS.brandExtraDark} showText={!isMobile} />
+        <HomePageLink color={COLORS.brandExtraDark} showText={!isMobile} />
       </Box>
       {isTablet && (
         <TabletActionBar>