From 53b7b05ac5ed75be25d84e5bb0a0a851ac04112d Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 30 Jul 2024 10:28:57 +0200
Subject: [PATCH] fix: top level container wrapper for other pages

---
 src/pages/home/index.tsx                    | 109 ++++++++--------
 src/pages/home/style.module.scss            | 131 ++++++++++----------
 src/pages/profile/index.tsx                 |   5 +-
 src/pages/settings/Settings.tsx             |  98 ++++++++-------
 src/pages/settings/cache/index.tsx          |   5 +-
 src/pages/settings/profile/index.tsx        |   5 +-
 src/pages/settings/relays/index.tsx         |   5 +-
 src/pages/settings/relays/style.module.scss |   1 -
 src/pages/sign/index.tsx                    |   5 +-
 src/pages/verify/index.tsx                  |   5 +-
 10 files changed, 186 insertions(+), 183 deletions(-)

diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 7f78987..2fc7fbb 100644
--- a/src/pages/home/index.tsx
+++ b/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 (
-    <>
-      <Box className={styles.container}>
-        <Box className={styles.header}>
-          <Typography variant="h3" className={styles.title}>
-            Sigits
-          </Typography>
-          {/* This is for desktop view */}
-          <Box
-            className={styles.actionButtons}
-            sx={{
-              display: {
-                xs: 'none',
-                md: 'flex'
-              }
-            }}
+    <Container className={styles.container}>
+      <Box className={styles.header}>
+        <Typography variant="h3" className={styles.title}>
+          Sigits
+        </Typography>
+        {/* This is for desktop view */}
+        <Box
+          className={styles.actionButtons}
+          sx={{
+            display: {
+              xs: 'none',
+              md: 'flex'
+            }
+          }}
+        >
+          <input
+            type="file"
+            ref={fileInputRef}
+            style={{ display: 'none' }}
+            onChange={handleFileChange}
+          />
+          <Button
+            variant="outlined"
+            startIcon={<Upload />}
+            onClick={handleUploadClick}
           >
-            <input
-              type="file"
-              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>
+            Upload
+          </Button>
         </Box>
-        <Box className={styles.submissions}>
-          {sigits.map((sigit, index) => (
-            <DisplaySigit
-              key={`sigit-${index}`}
-              meta={sigit}
-              profiles={profiles}
-              setProfiles={setProfiles}
-            />
-          ))}
+        {/* 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}>
+        {sigits.map((sigit, index) => (
+          <DisplaySigit
+            key={`sigit-${index}`}
+            meta={sigit}
+            profiles={profiles}
+            setProfiles={setProfiles}
+          />
+        ))}
+      </Box>
+    </Container>
   )
 }
 
diff --git a/src/pages/home/style.module.scss b/src/pages/home/style.module.scss
index 62135f1..132097e 100644
--- a/src/pages/home/style.module.scss
+++ b/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 {
-    display: flex;
+.header {
+  display: flex;
 
-    .title {
-      color: var(--mui-palette-primary-light);
-      flex: 1;
-    }
-
-    .actionButtons {
-      justify-content: center;
-      align-items: center;
-      gap: 10px;
-    }
+  .title {
+    color: var(--mui-palette-primary-light);
+    flex: 1;
   }
 
-  .submissions {
-    display: flex;
-    flex-direction: column;
+  .actionButtons {
+    justify-content: center;
+    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;
-      border-radius: 1rem;
-      cursor: pointer;
+      padding: 10px;
+      background-color: #cdc8c499;
+      border-top-left-radius: inherit;
 
-      .titleBox {
+      .title {
         display: flex;
-        flex: 4;
-        flex-direction: column;
+        justify-content: center;
         align-items: center;
-        overflow-wrap: anywhere;
-        gap: 10px;
-        padding: 10px;
-        background-color: #cdc8c499;
-        border-top-left-radius: inherit;
+        color: var(--mui-palette-primary-light);
+        font-size: 1.5rem;
 
-        .title {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: var(--mui-palette-primary-light);
+        svg {
           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;
-        padding: 10px;
+        align-items: center;
         color: var(--mui-palette-primary-light);
+        font-size: 1rem;
 
-        .signerItem {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          gap: 10px;
+        svg {
+          font-size: 1rem;
+        }
+      }
+    }
 
-          .status {
-            border-radius: 2rem;
-            width: 100px;
-            text-align: center;
-            background-color: var(--mui-palette-info-light);
-          }
+    .signers {
+      display: flex;
+      flex-direction: column;
+      flex: 6;
+      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);
         }
       }
     }
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index e3c7fe4..c1822b9 100644
--- a/src/pages/profile/index.tsx
+++ b/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>
       )}
     </>
   )
diff --git a/src/pages/settings/Settings.tsx b/src/pages/settings/Settings.tsx
index 64c47d0..b08ea51 100644
--- a/src/pages/settings/Settings.tsx
+++ b/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
-      sx={{
-        width: '100%',
-        bgcolor: 'background.paper',
-        marginTop: 2
-      }}
-      subheader={
-        <ListSubheader
-          sx={{
-            fontSize: '1.5rem',
-            borderBottom: '0.5px solid',
-            paddingBottom: 2,
-            paddingTop: 2
+    <Container>
+      <List
+        sx={{
+          width: '100%',
+          bgcolor: 'background.paper'
+        }}
+        subheader={
+          <ListSubheader
+            sx={{
+              fontSize: '1.5rem',
+              borderBottom: '0.5px solid',
+              paddingBottom: 2,
+              paddingTop: 2
+            }}
+          >
+            Settings
+          </ListSubheader>
+        }
+      >
+        <ListItemButton
+          onClick={() => {
+            navigate(getProfileSettingsRoute(usersPubkey!))
           }}
         >
-          Settings
-        </ListSubheader>
-      }
-    >
-      <ListItemButton
-        onClick={() => {
-          navigate(getProfileSettingsRoute(usersPubkey!))
-        }}
-      >
-        <ListItemIcon>
-          <AccountCircleIcon />
-        </ListItemIcon>
-        {listItem('Profile')}
-      </ListItemButton>
-      <ListItemButton
-        onClick={() => {
-          navigate(appPrivateRoutes.relays)
-        }}
-      >
-        <ListItemIcon>
-          <RouterIcon />
-        </ListItemIcon>
-        {listItem('Relays')}
-      </ListItemButton>
-      <ListItemButton
-        onClick={() => {
-          navigate(appPrivateRoutes.cacheSettings)
-        }}
-      >
-        <ListItemIcon>
-          <CachedIcon />
-        </ListItemIcon>
-        {listItem('Local Cache')}
-      </ListItemButton>
-    </List>
+          <ListItemIcon>
+            <AccountCircleIcon />
+          </ListItemIcon>
+          {listItem('Profile')}
+        </ListItemButton>
+        <ListItemButton
+          onClick={() => {
+            navigate(appPrivateRoutes.relays)
+          }}
+        >
+          <ListItemIcon>
+            <RouterIcon />
+          </ListItemIcon>
+          {listItem('Relays')}
+        </ListItemButton>
+        <ListItemButton
+          onClick={() => {
+            navigate(appPrivateRoutes.cacheSettings)
+          }}
+        >
+          <ListItemIcon>
+            <CachedIcon />
+          </ListItemIcon>
+          {listItem('Local Cache')}
+        </ListItemButton>
+      </List>
+    </Container>
   )
 }
diff --git a/src/pages/settings/cache/index.tsx b/src/pages/settings/cache/index.tsx
index 8ac1e39..3d74f0e 100644
--- a/src/pages/settings/cache/index.tsx
+++ b/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>
   )
 }
diff --git a/src/pages/settings/profile/index.tsx b/src/pages/settings/profile/index.tsx
index bdb8c69..7dd2d0d 100644
--- a/src/pages/settings/profile/index.tsx
+++ b/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>
     </>
   )
 }
diff --git a/src/pages/settings/relays/index.tsx b/src/pages/settings/relays/index.tsx
index 194b366..1894fc4 100644
--- a/src/pages/settings/relays/index.tsx
+++ b/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>
   )
 }
diff --git a/src/pages/settings/relays/style.module.scss b/src/pages/settings/relays/style.module.scss
index ad43dd0..2ad0ac0 100644
--- a/src/pages/settings/relays/style.module.scss
+++ b/src/pages/settings/relays/style.module.scss
@@ -1,7 +1,6 @@
 @import '../../../styles/colors.scss';
 
 .container {
-  margin-top: 25px;
   color: $text-color;
 
   .relayURItextfield {
diff --git a/src/pages/sign/index.tsx b/src/pages/sign/index.tsx
index 5204ea7..98ab74e 100644
--- a/src/pages/sign/index.tsx
+++ b/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>
     </>
   )
 }
diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index 9e10ac0..d4e4183 100644
--- a/src/pages/verify/index.tsx
+++ b/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>
     </>
   )
 }