refactor(footer): make footer a portal and use as needed

src/components/Footer/Footer.tsx

@@ -4,8 +4,10 @@ import styles from './style.module.scss'
 import { Container } from '../Container'
 import nostrImage from '../../assets/images/nostr.gif'
 import { appPublicRoutes } from '../../routes'
+import { createPortal } from 'react-dom'
 
-export const Footer = () => (
+export const Footer = () =>
+  createPortal(
     <footer className={`${styles.borderTop} ${styles.footer}`}>
       <Container
         style={{
@@ -124,5 +126,6 @@ export const Footer = () => (
         </a>{' '}
         2024.
       </div>
-  </footer>
+    </footer>,
-)
+    document.getElementById('root')!
+  )

src/layouts/Main.tsx

@@ -26,7 +26,6 @@ import {
 } from '../utils'
 import { useAppSelector } from '../hooks'
 import styles from './style.module.scss'
-import { Footer } from '../components/Footer/Footer'
 
 export const MainLayout = () => {
   const dispatch: Dispatch = useDispatch()
@@ -160,7 +159,6 @@ export const MainLayout = () => {
       >
         <Outlet />
       </main>
-      <Footer />
     </>
   )
 }

src/pages/home/index.tsx

@@ -18,6 +18,7 @@ import {
   SigitCardDisplayInfo,
   SigitStatus
 } from '../../utils'
+import { Footer } from '../../components/Footer/Footer'
 
 // Unsupported Filter options are commented
 const FILTERS = [
@@ -262,6 +263,7 @@ export const HomePage = () => {
             ))}
         </div>
       </Container>
+      <Footer />
     </div>
   )
 }

src/pages/landing/index.tsx

@@ -19,6 +19,7 @@ import {
   faWifi
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
+import { Footer } from '../../components/Footer/Footer'
 
 export const LandingPage = () => {
   const navigate = useNavigate()
@@ -162,6 +163,7 @@ export const LandingPage = () => {
 
         <Outlet />
       </Container>
+      <Footer />
     </div>
   )
 }

src/pages/profile/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../utils'
 import styles from './style.module.scss'
 import { Container } from '../../components/Container'
+import { Footer } from '../../components/Footer/Footer'
 
 export const ProfilePage = () => {
   const navigate = useNavigate()
@@ -285,6 +286,7 @@ export const ProfilePage = () => {
           </Box>
         </Container>
       )}
+      <Footer />
     </>
   )
 }

src/pages/settings/Settings.tsx

@@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom'
 import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { Container } from '../../components/Container'
+import { Footer } from '../../components/Footer/Footer'
 
 export const SettingsPage = () => {
   const theme = useTheme()
@@ -43,6 +44,7 @@ export const SettingsPage = () => {
   }
 
   return (
+    <>
       <Container>
         <List
           sx={{
@@ -94,5 +96,7 @@ export const SettingsPage = () => {
           </ListItemButton>
         </List>
       </Container>
+      <Footer />
+    </>
   )
 }

src/pages/settings/cache/index.tsx

@@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
 import { localCache } from '../../../services'
 import { LoadingSpinner } from '../../../components/LoadingSpinner'
 import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const CacheSettingsPage = () => {
   const theme = useTheme()
@@ -50,6 +51,7 @@ export const CacheSettingsPage = () => {
   }
 
   return (
+    <>
       <Container>
         {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
         <List
@@ -93,5 +95,7 @@ export const CacheSettingsPage = () => {
           </ListItemButton>
         </List>
       </Container>
+      <Footer />
+    </>
   )
 }

src/pages/settings/profile/index.tsx

@@ -32,6 +32,7 @@ import {
   unixNow
 } from '../../../utils'
 import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const ProfileSettingsPage = () => {
   const theme = useTheme()
@@ -385,6 +386,7 @@ export const ProfileSettingsPage = () => {
           </LoadingButton>
         )}
       </Container>
+      <Footer />
     </>
   )
 }

src/pages/settings/relays/index.tsx

@@ -27,6 +27,7 @@ import {
   shorten
 } from '../../../utils'
 import styles from './style.module.scss'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const RelaysPage = () => {
   const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
@@ -270,6 +271,7 @@ const RelayItem = ({
   })
 
   return (
+    <>
       <Box className={styles.relay}>
         <List>
           <ListItem>
@@ -426,5 +428,7 @@ const RelayItem = ({
           )}
         </List>
       </Box>
+      <Footer />
+    </>
   )
 }

src/pages/verify/index.tsx

@@ -53,6 +53,7 @@ import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
 import { FileDivider } from '../../components/FileDivider.tsx'
 import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
 import { useScale } from '../../hooks/useScale.tsx'
+import { Footer } from '../../components/Footer/Footer.tsx'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -570,6 +571,7 @@ export const VerifyPage = () => {
           </StickySideColumns>
         )}
       </Container>
+      <Footer />
     </>
   )
 }