fix: top level container wrapper for other pages

fix: works offline card icon
2024-07-30 10:28:57 +02:00 · 2024-07-30 10:25:57 +02:00
11 changed files with 198 additions and 187 deletions
--- 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>
  )
 }

--- 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);
        }
      }
    }
--- a/src/pages/landing/index.tsx
+++ b/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</>,
--- 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>
      )}
    </>
  )
--- 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>
  )
 }
--- 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>
  )
 }
--- 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>
    </>
  )
 }
--- 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>
  )
 }
--- 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 {
--- 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>
    </>
  )
 }
--- 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>
    </>
  )
 }
Author	SHA1	Message	Date
enes	53b7b05ac5	fix: top level container wrapper for other pages	2024-07-30 10:28:57 +02:00
enes	baa1a7b040	fix: works offline card icon	2024-07-30 10:25:57 +02:00