src/components/Footer/Footer.tsx

@@ -1,13 +1,13 @@
-import { Box, Button, Container, Link as LinkMui } from '@mui/material'
+import { Box, Button, Link as LinkMui } from '@mui/material'
 import { Link } from 'react-router-dom'
 import styles from './style.module.scss'
+import { Container } from '../Container'
 
 export const Footer = () => (
   <footer className={`${styles.borderTop} ${styles.footer}`}>
     <Container
-      maxWidth="xl"
-      sx={{
-        paddingY: '50px'
+      style={{
+        paddingBlock: '50px'
       }}
     >
       <Box
@@ -58,13 +58,43 @@ export const Footer = () => (
           component={'nav'}
           className={styles.nav}
         >
-          <Button component={Link} to={'/'} variant={'text'}>
+          <Button
+            sx={{
+              justifyContent: {
+                xs: 'center',
+                sm: 'start'
+              }
+            }}
+            component={Link}
+            to={'/'}
+            variant={'text'}
+          >
             Home
           </Button>
-          <Button component={Link} to={'/#'} variant={'text'}>
+          <Button
+            sx={{
+              justifyContent: {
+                xs: 'center',
+                sm: 'start'
+              }
+            }}
+            component={Link}
+            to={'/#'}
+            variant={'text'}
+          >
             Documentation
           </Button>
-          <Button component={Link} to={'/#'} variant={'text'}>
+          <Button
+            sx={{
+              justifyContent: {
+                xs: 'center',
+                sm: 'start'
+              }
+            }}
+            component={Link}
+            to={'/#'}
+            variant={'text'}
+          >
             Source
           </Button>
         </Box>
@@ -99,9 +129,9 @@ export const Footer = () => (
     </Container>
     <div className={`${styles.borderTop} ${styles.credits}`}>
       Built by&nbsp;
-      <LinkMui href="https://nostrdev.com/" target="_blank">
+      <a href="https://nostrdev.com/" target="_blank">
         Nostr Dev
-      </LinkMui>{' '}
+      </a>{' '}
       2024.
     </div>
   </footer>

src/components/Footer/style.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/colors.scss';
+
 .borderTop {
   border-top: solid 1px rgba(0, 0, 0, 0.075);
 }
@@ -7,16 +9,12 @@
   flex-direction: column;
   align-items: center;
 
-  letter-spacing: 1px;
   font-size: 14px;
-  line-height: 25px;
-  word-break: break-word;
-  text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
-  font-weight: 500;
 }
 
 .links {
   font-weight: 500;
+  color: rgba(0, 0, 0, 0.5);
 
   > a + a {
     margin-left: 25px;
@@ -24,9 +22,10 @@
 }
 
 .nav {
-  button {
+  color: rgba(0, 0, 0, 0.5);
+
+  a {
     width: 100%;
-    justify-content: start;
   }
 }
 
@@ -40,29 +39,22 @@
 
   > a {
     transition: ease 0.4s;
-    color: rgba(1, 170, 173, 0.75);
+
+    color: $primary-main;
     text-decoration-color: inherit;
 
     &:hover {
-      color: #01aaad;
+      text-decoration: underline;
     }
   }
 }
 
 .logo {
   width: 100%;
-  max-width: 150px;
-  height: auto;
+  max-width: 300px;
 
   > img {
     width: 100%;
-    max-width: 150px;
     height: auto;
   }
 }
-
-@media (max-width: 992px) {
-  .logo {
-    max-width: 200px;
-  }
-}