From 45f0764fa802bccc75b320527f7a18708b7302f4 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 25 Jul 2024 18:03:03 +0200
Subject: [PATCH] fix: footer padding and responsiveness

---
 src/components/Footer/Footer.tsx        | 85 +++++++++++++++++++------
 src/components/Footer/style.module.scss | 27 ++------
 2 files changed, 71 insertions(+), 41 deletions(-)

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 460f6e0..738db13 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,24 +1,63 @@
-import { Box, Button, Grid, Link } from '@mui/material'
+import { Box, Button, Container, Grid, Link } from '@mui/material'
 import { Link as RouterLink } from 'react-router-dom'
 import styles from './style.module.scss'
 
 export const Footer = () => (
   <footer className={`${styles.borderTop} ${styles.footer}`}>
-    <Grid
-      container
+    <Container
       maxWidth="xl"
-      sx={{ padding: '75px 0' }}
-      columnSpacing={'50px'}
+      sx={{
+        paddingY: '50px'
+      }}
     >
-      <Grid item xs={12} sm={2}>
-        <Link component={RouterLink} to={'/'}>
-          <Box className={styles.logo}>
-            <img src="/logo.png" alt="Logo" />
-          </Box>
+      <Box
+        display={'grid'}
+        sx={{
+          gridTemplateColumns: {
+            xs: '1fr',
+            md: '0.5fr 1.75fr 0.75fr'
+          },
+          alignItems: {
+            xs: 'center',
+            md: 'start'
+          }
+        }}
+        gap={'50px'}
+      >
+        <Link
+          sx={{
+            justifySelf: {
+              xs: 'center',
+              md: 'start'
+            }
+          }}
+          component={RouterLink}
+          to={'/'}
+          className={styles.logo}
+        >
+          <img src="/logo.png" alt="Logo" />
         </Link>
-      </Grid>
-      <Grid item xs={12} sm={7} component={'nav'}>
-        <div className={styles.nav}>
+        <Box
+          display={'grid'}
+          sx={{
+            gap: '15px',
+            gridTemplateColumns: {
+              xs: '1fr',
+              sm: 'repeat(2, 1fr)',
+              xl: 'repeat(3, 1fr)'
+            },
+            borderBlock: {
+              xs: 'solid 1px rgba(0, 0, 0, 0.1)',
+              md: 'unset'
+            },
+            paddingY: {
+              xs: '10px',
+              md: 'unset'
+            }
+          }}
+          component={'nav'}
+          className={styles.nav}
+        >
           <RouterLink to={'/'}>
             <Button variant={'text'} focusRipple={false}>
               Home
@@ -34,10 +73,16 @@ export const Footer = () => (
               Source
             </Button>
           </RouterLink>
-        </div>
-      </Grid>
-      <Grid item xs={12} sm={3} className={styles.about}>
-        <div className={styles.links}>
+        </Box>
+        <Box
+          className={styles.links}
+          sx={{
+            justifySelf: {
+              xs: 'center',
+              md: 'end'
+            }
+          }}
+        >
           <Link
             href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
             target="_blank"
@@ -57,9 +102,9 @@ export const Footer = () => (
               />
             </Button>
           </Link>
-        </div>
-      </Grid>
-    </Grid>
+        </Box>
+      </Box>
+    </Container>
     <div className={`${styles.borderTop} ${styles.credits}`}>
       Built by&nbsp;
       <Link href="https://nostrdev.com/" target="_blank">
diff --git a/src/components/Footer/style.module.scss b/src/components/Footer/style.module.scss
index b711182..ccc39fd 100644
--- a/src/components/Footer/style.module.scss
+++ b/src/components/Footer/style.module.scss
@@ -15,36 +15,21 @@
   font-weight: 500;
 }
 
-.nav {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: none;
-  grid-gap: 15px;
+.links {
+  font-weight: 500;
 
-  > a {
-    min-height: 0;
+  > a + a {
+    margin-left: 25px;
   }
+}
 
+.nav {
   button {
     width: 100%;
     justify-content: start;
   }
 }
 
-.about {
-  font-weight: 500;
-
-  > p {
-    margin: 0;
-  }
-}
-
-.links {
-  > a + a {
-    margin-left: 25px;
-  }
-}
-
 .credits {
   width: 100%;
   text-align: center;