fix: top level container wrapper for other pages

src/pages/home/index.tsx

@@ -18,6 +18,7 @@ import {
   shorten
 } from '../../utils'
 import styles from './style.module.scss'
+import { Container } from '../../components/Container'
 
 export const HomePage = () => {
   const navigate = useNavigate()
@@ -81,8 +82,7 @@ export const HomePage = () => {
   }
 
   return (
-    <>
-      <Box className={styles.container}>
+    <Container className={styles.container}>
       <Box className={styles.header}>
         <Typography variant="h3" className={styles.title}>
           Sigits
@@ -138,8 +138,7 @@ export const HomePage = () => {
           />
         ))}
       </Box>
-      </Box>
-    </>
+    </Container>
   )
 }
 

src/pages/home/style.module.scss

@@ -2,9 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 25px;
-  padding: 10px;
-  margin-top: 10px;
-  background: var(--mui-palette-background-paper);
+}
 
 .header {
   display: flex;
@@ -94,4 +92,3 @@
     }
   }
 }
-}

src/pages/landing/index.tsx

@@ -107,13 +107,21 @@ export const LandingPage = () => {
       icon: (
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 512 512"
           width="1em"
           height="1em"
-          fill="currentColor"
+          viewBox="0 0 24 24"
+          stroke-width="2"
+          stroke="currentColor"
+          fill="none"
+          stroke-linecap="round"
+          stroke-linejoin="round"
         >
-          {/* Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. */}
-          <path d="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
+          <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+          <line x1="12" y1="18" x2="12.01" y2="18"></line>
+          <path d="M9.172 15.172a4 4 0 0 1 5.656 0"></path>
+          <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163.155a7.965 7.965 0 0 1 3.287 2"></path>
+          <path d="M3.515 9.515A12 12 0 0 1 7.059 7.06m3.101-.92a12 12 0 0 1 10.325 3.374"></path>
+          <line x1="3" y1="3" x2="21" y2="21"></line>
         </svg>
       ),
       title: <>Works Offline</>,

src/pages/profile/index.tsx

@@ -14,6 +14,7 @@ import { State } from '../../store/rootReducer'
 import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import { getRoboHashPicture, hexToNpub, shorten } from '../../utils'
 import styles from './style.module.scss'
+import { Container } from '../../components/Container'
 
 export const ProfilePage = () => {
   const navigate = useNavigate()
@@ -155,7 +156,7 @@ export const ProfilePage = () => {
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       {pubkey && (
-        <Box className={styles.container}>
+        <Container className={styles.container}>
           <Box
             className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
           >
@@ -278,7 +279,7 @@ export const ProfilePage = () => {
               )}
             </Box>
           </Box>
-        </Box>
+        </Container>
       )}
     </>
   )

src/pages/settings/Settings.tsx

@@ -12,6 +12,7 @@ import { useSelector } from 'react-redux'
 import { useNavigate } from 'react-router-dom'
 import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
 import { State } from '../../store/rootReducer'
+import { Container } from '../../components/Container'
 
 export const SettingsPage = () => {
   const theme = useTheme()
@@ -42,11 +43,11 @@ export const SettingsPage = () => {
   }
 
   return (
+    <Container>
       <List
         sx={{
           width: '100%',
-        bgcolor: 'background.paper',
-        marginTop: 2
+          bgcolor: 'background.paper'
         }}
         subheader={
           <ListSubheader
@@ -92,5 +93,6 @@ export const SettingsPage = () => {
           {listItem('Local Cache')}
         </ListItemButton>
       </List>
+    </Container>
   )
 }

src/pages/settings/cache/index.tsx

@@ -13,6 +13,7 @@ import { useState } from 'react'
 import { toast } from 'react-toastify'
 import { localCache } from '../../../services'
 import { LoadingSpinner } from '../../../components/LoadingSpinner'
+import { Container } from '../../../components/Container'
 
 export const CacheSettingsPage = () => {
   const theme = useTheme()
@@ -49,7 +50,7 @@ export const CacheSettingsPage = () => {
   }
 
   return (
-    <>
+    <Container>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <List
         sx={{
@@ -91,6 +92,6 @@ export const CacheSettingsPage = () => {
           {listItem('Clear Cache')}
         </ListItemButton>
       </List>
-    </>
+    </Container>
   )
 }

src/pages/settings/profile/index.tsx

@@ -27,6 +27,7 @@ import { LoadingSpinner } from '../../../components/LoadingSpinner'
 import { LoginMethods } from '../../../store/auth/types'
 import { SmartToy } from '@mui/icons-material'
 import { getRoboHashPicture } from '../../../utils'
+import { Container } from '../../../components/Container'
 
 export const ProfileSettingsPage = () => {
   const theme = useTheme()
@@ -271,7 +272,7 @@ export const ProfileSettingsPage = () => {
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-      <div className={styles.container}>
+      <Container className={styles.container}>
         <List
           sx={{
             bgcolor: 'background.paper',
@@ -380,7 +381,7 @@ export const ProfileSettingsPage = () => {
             SAVE
           </LoadingButton>
         )}
-      </div>
+      </Container>
     </>
   )
 }

src/pages/settings/relays/index.tsx

@@ -31,6 +31,7 @@ import {
   shorten
 } from '../../../utils'
 import styles from './style.module.scss'
+import { Container } from '../../../components/Container'
 
 export const RelaysPage = () => {
   const nostrController = NostrController.getInstance()
@@ -314,7 +315,7 @@ export const RelaysPage = () => {
   }
 
   return (
-    <Box className={styles.container}>
+    <Container className={styles.container}>
       <Box className={styles.relayAddContainer}>
         <TextField
           label="Add new relay"
@@ -512,6 +513,6 @@ export const RelaysPage = () => {
           ))}
         </Box>
       )}
-    </Box>
+    </Container>
   )
 }

src/pages/settings/relays/style.module.scss

@@ -1,7 +1,6 @@
 @import '../../../styles/colors.scss';
 
 .container {
-  margin-top: 25px;
   color: $text-color;
 
   .relayURItextfield {

src/pages/sign/index.tsx

@@ -33,6 +33,7 @@ import {
 } from '../../utils'
 import { DisplayMeta } from './internal/displayMeta'
 import styles from './style.module.scss'
+import { Container } from '../../components/Container'
 enum SignedStatus {
   Fully_Signed,
   User_Is_Next_Signer,
@@ -850,7 +851,7 @@ export const SignPage = () => {
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-      <Box className={styles.container}>
+      <Container className={styles.container}>
         {displayInput && (
           <>
             <Typography component="label" variant="h6">
@@ -916,7 +917,7 @@ export const SignPage = () => {
             )}
           </>
         )}
-      </Box>
+      </Container>
     </>
   )
 }

src/pages/verify/index.tsx

@@ -36,6 +36,7 @@ import styles from './style.module.scss'
 import { Cancel, CheckCircle } from '@mui/icons-material'
 import { useLocation } from 'react-router-dom'
 import axios from 'axios'
+import { Container } from '../../components/Container'
 
 export const VerifyPage = () => {
   const theme = useTheme()
@@ -456,7 +457,7 @@ export const VerifyPage = () => {
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-      <Box className={styles.container}>
+      <Container className={styles.container}>
         {!meta && (
           <>
             <Typography component="label" variant="h6">
@@ -622,7 +623,7 @@ export const VerifyPage = () => {
             </List>
           </>
         )}
-      </Box>
+      </Container>
     </>
   )
 }