fix: composition for links and buttons

src/components/Footer/Footer.tsx

@@ -1,5 +1,5 @@
-import { Box, Button, Container, Link } from '@mui/material'
+import { Box, Button, Container, Link as LinkMui } from '@mui/material'
-import { Link as RouterLink } from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import styles from './style.module.scss'
 
 export const Footer = () => (
@@ -24,19 +24,19 @@ export const Footer = () => (
         }}
         gap={'50px'}
       >
-        <Link
+        <LinkMui
           sx={{
             justifySelf: {
               xs: 'center',
               md: 'start'
             }
           }}
-          component={RouterLink}
+          component={Link}
           to={'/'}
           className={styles.logo}
         >
           <img src="/logo.svg" alt="Logo" />
-        </Link>
+        </LinkMui>
         <Box
           display={'grid'}
           sx={{
@@ -58,21 +58,15 @@ export const Footer = () => (
           component={'nav'}
           className={styles.nav}
         >
-          <RouterLink to={'/'}>
+          <Button component={Link} to={'/'} variant={'text'}>
-            <Button variant={'text'} focusRipple={false}>
+            Home
-              Home
+          </Button>
-            </Button>
+          <Button component={Link} to={'/#'} variant={'text'}>
-          </RouterLink>
+            Documentation
-          <RouterLink to={'/#'}>
+          </Button>
-            <Button variant={'text'} focusRipple={false}>
+          <Button component={Link} to={'/#'} variant={'text'}>
-              Documentation
+            Source
-            </Button>
+          </Button>
-          </RouterLink>
-          <RouterLink to={'/#'}>
-            <Button variant={'text'} focusRipple={false}>
-              Source
-            </Button>
-          </RouterLink>
         </Box>
         <Box
           className={styles.links}
@@ -83,33 +77,31 @@ export const Footer = () => (
             }
           }}
         >
-          <Link
+          <Button
+            component={LinkMui}
             href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
             target="_blank"
+            sx={{
+              minWidth: '45px',
+              padding: '10px'
+            }}
+            variant={'contained'}
           >
-            <Button
+            <img
-              sx={{
+              src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
-                minWidth: '45px',
+              width="25"
-                padding: '10px'
+              alt="nostr logo"
-              }}
+              height="25"
-              variant={'contained'}
+            />
-            >
+          </Button>
-              <img
-                src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
-                width="25"
-                alt="nostr logo"
-                height="25"
-              />
-            </Button>
-          </Link>
         </Box>
       </Box>
     </Container>
     <div className={`${styles.borderTop} ${styles.credits}`}>
       Built by&nbsp;
-      <Link href="https://nostrdev.com/" target="_blank">
+      <LinkMui href="https://nostrdev.com/" target="_blank">
         Nostr Dev
-      </Link>{' '}
+      </LinkMui>{' '}
       2024.
     </div>
   </footer>

src/layouts/modal/index.tsx

@@ -45,23 +45,24 @@ export const Modal = () => {
     >
       <Box className={styles.modal}>
         <Typography id="modal-title" variant="h2">
-          Login
+          {tabs.find((t) => activeTab === t.to)?.title}
         </Typography>
 
         <Box component={'ul'}>
           {tabs.map((t) => {
             return (
-              <Link to={t.to} key={t.to}>
+              <Button
-                <Button
+                component={Link}
-                  variant={
+                to={t.to}
-                    activeTab === t.to || t.to === appPublicRoutes.nostr
+                key={t.to}
-                      ? 'contained'
+                variant={
-                      : 'text'
+                  activeTab === t.to || t.to === appPublicRoutes.nostr
-                  }
+                    ? 'contained'
-                >
+                    : 'text'
-                  {t.label}
+                }
-                </Button>
+              >
-              </Link>
+                {t.label}
+              </Button>
             )
           })}
         </Box>