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/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>
     </>
   )
 }