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,65 +82,63 @@ export const HomePage = () => {
   }
 
   return (
-    <>
+    <Container className={styles.container}>
-      <Box className={styles.container}>
+      <Box className={styles.header}>
-        <Box className={styles.header}>
+        <Typography variant="h3" className={styles.title}>
-          <Typography variant="h3" className={styles.title}>
+          Sigits
-            Sigits
+        </Typography>
-          </Typography>
+        {/* This is for desktop view */}
-          {/* This is for desktop view */}
+        <Box
-          <Box
+          className={styles.actionButtons}
-            className={styles.actionButtons}
+          sx={{
-            sx={{
+            display: {
-              display: {
+              xs: 'none',
-                xs: 'none',
+              md: 'flex'
-                md: 'flex'
+            }
-              }
+          }}
-            }}
+        >
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+          />
+          <Button
+            variant="outlined"
+            startIcon={<Upload />}
+            onClick={handleUploadClick}
           >
-            <input
+            Upload
-              type="file"
+          </Button>
-              ref={fileInputRef}
-              style={{ display: 'none' }}
-              onChange={handleFileChange}
-            />
-            <Button
-              variant="outlined"
-              startIcon={<Upload />}
-              onClick={handleUploadClick}
-            >
-              Upload
-            </Button>
-          </Box>
-          {/* This is for mobile view */}
-          <Box
-            className={styles.actionButtons}
-            sx={{
-              display: {
-                xs: 'flex',
-                md: 'none'
-              }
-            }}
-          >
-            <Tooltip title="Upload" arrow>
-              <Button variant="outlined" onClick={handleUploadClick}>
-                <Upload />
-              </Button>
-            </Tooltip>
-          </Box>
         </Box>
-        <Box className={styles.submissions}>
+        {/* This is for mobile view */}
-          {sigits.map((sigit, index) => (
+        <Box
-            <DisplaySigit
+          className={styles.actionButtons}
-              key={`sigit-${index}`}
+          sx={{
-              meta={sigit}
+            display: {
-              profiles={profiles}
+              xs: 'flex',
-              setProfiles={setProfiles}
+              md: 'none'
-            />
+            }
-          ))}
+          }}
+        >
+          <Tooltip title="Upload" arrow>
+            <Button variant="outlined" onClick={handleUploadClick}>
+              <Upload />
+            </Button>
+          </Tooltip>
         </Box>
       </Box>
-    </>
+      <Box className={styles.submissions}>
+        {sigits.map((sigit, index) => (
+          <DisplaySigit
+            key={`sigit-${index}`}
+            meta={sigit}
+            profiles={profiles}
+            setProfiles={setProfiles}
+          />
+        ))}
+      </Box>
+    </Container>
   )
 }
 

src/pages/home/style.module.scss

@@ -2,94 +2,91 @@
   display: flex;
   flex-direction: column;
   gap: 25px;
-  padding: 10px;
+}
-  margin-top: 10px;
-  background: var(--mui-palette-background-paper);
 
-  .header {
+.header {
-    display: flex;
+  display: flex;
 
-    .title {
+  .title {
-      color: var(--mui-palette-primary-light);
+    color: var(--mui-palette-primary-light);
-      flex: 1;
+    flex: 1;
-    }
-
-    .actionButtons {
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-    }
   }
 
-  .submissions {
+  .actionButtons {
-    display: flex;
+    justify-content: center;
-    flex-direction: column;
+    align-items: center;
     gap: 10px;
+  }
+}
 
-    .item {
+.submissions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  .item {
+    display: flex;
+    gap: 10px;
+    background-color: #efeae6;
+    border-radius: 1rem;
+    cursor: pointer;
+
+    .titleBox {
       display: flex;
+      flex: 4;
+      flex-direction: column;
+      align-items: center;
+      overflow-wrap: anywhere;
       gap: 10px;
-      background-color: #efeae6;
+      padding: 10px;
-      border-radius: 1rem;
+      background-color: #cdc8c499;
-      cursor: pointer;
+      border-top-left-radius: inherit;
 
-      .titleBox {
+      .title {
         display: flex;
-        flex: 4;
+        justify-content: center;
-        flex-direction: column;
         align-items: center;
-        overflow-wrap: anywhere;
+        color: var(--mui-palette-primary-light);
-        gap: 10px;
+        font-size: 1.5rem;
-        padding: 10px;
-        background-color: #cdc8c499;
-        border-top-left-radius: inherit;
 
-        .title {
+        svg {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: var(--mui-palette-primary-light);
           font-size: 1.5rem;
-
-          svg {
-            font-size: 1.5rem;
-          }
-        }
-
-        .date {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: var(--mui-palette-primary-light);
-          font-size: 1rem;
-
-          svg {
-            font-size: 1rem;
-          }
         }
       }
 
-      .signers {
+      .date {
         display: flex;
-        flex-direction: column;
-        flex: 6;
         justify-content: center;
-        gap: 10px;
+        align-items: center;
-        padding: 10px;
         color: var(--mui-palette-primary-light);
+        font-size: 1rem;
 
-        .signerItem {
+        svg {
-          display: flex;
+          font-size: 1rem;
-          justify-content: center;
+        }
-          align-items: center;
+      }
-          gap: 10px;
+    }
 
-          .status {
+    .signers {
-            border-radius: 2rem;
+      display: flex;
-            width: 100px;
+      flex-direction: column;
-            text-align: center;
+      flex: 6;
-            background-color: var(--mui-palette-info-light);
+      justify-content: center;
-          }
+      gap: 10px;
+      padding: 10px;
+      color: var(--mui-palette-primary-light);
+
+      .signerItem {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .status {
+          border-radius: 2rem;
+          width: 100px;
+          text-align: center;
+          background-color: var(--mui-palette-info-light);
         }
       }
     }

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 stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-          <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>
+          <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,55 +43,56 @@ export const SettingsPage = () => {
   }
 
   return (
-    <List
+    <Container>
-      sx={{
+      <List
-        width: '100%',
+        sx={{
-        bgcolor: 'background.paper',
+          width: '100%',
-        marginTop: 2
+          bgcolor: 'background.paper'
-      }}
+        }}
-      subheader={
+        subheader={
-        <ListSubheader
+          <ListSubheader
-          sx={{
+            sx={{
-            fontSize: '1.5rem',
+              fontSize: '1.5rem',
-            borderBottom: '0.5px solid',
+              borderBottom: '0.5px solid',
-            paddingBottom: 2,
+              paddingBottom: 2,
-            paddingTop: 2
+              paddingTop: 2
+            }}
+          >
+            Settings
+          </ListSubheader>
+        }
+      >
+        <ListItemButton
+          onClick={() => {
+            navigate(getProfileSettingsRoute(usersPubkey!))
           }}
         >
-          Settings
+          <ListItemIcon>
-        </ListSubheader>
+            <AccountCircleIcon />
-      }
+          </ListItemIcon>
-    >
+          {listItem('Profile')}
-      <ListItemButton
+        </ListItemButton>
-        onClick={() => {
+        <ListItemButton
-          navigate(getProfileSettingsRoute(usersPubkey!))
+          onClick={() => {
-        }}
+            navigate(appPrivateRoutes.relays)
-      >
+          }}
-        <ListItemIcon>
+        >
-          <AccountCircleIcon />
+          <ListItemIcon>
-        </ListItemIcon>
+            <RouterIcon />
-        {listItem('Profile')}
+          </ListItemIcon>
-      </ListItemButton>
+          {listItem('Relays')}
-      <ListItemButton
+        </ListItemButton>
-        onClick={() => {
+        <ListItemButton
-          navigate(appPrivateRoutes.relays)
+          onClick={() => {
-        }}
+            navigate(appPrivateRoutes.cacheSettings)
-      >
+          }}
-        <ListItemIcon>
+        >
-          <RouterIcon />
+          <ListItemIcon>
-        </ListItemIcon>
+            <CachedIcon />
-        {listItem('Relays')}
+          </ListItemIcon>
-      </ListItemButton>
+          {listItem('Local Cache')}
-      <ListItemButton
+        </ListItemButton>
-        onClick={() => {
+      </List>
-          navigate(appPrivateRoutes.cacheSettings)
+    </Container>
-        }}
-      >
-        <ListItemIcon>
-          <CachedIcon />
-        </ListItemIcon>
-        {listItem('Local Cache')}
-      </ListItemButton>
-    </List>
   )
 }

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