sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Landing page - new design implementation #122

Merged
b merged 45 commits from issue-21 into staging 2024-07-31 13:06:58 +00:00
Conversation 0 Commits 45 Files Changed 73 +186 -183
10 changed files with 186 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 53b7b05ac5 - Show all commits

109
src/pages/home/index.tsx
View File

@ -18,6 +18,7 @@ import {
shorten shorten
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Container } from '../../components/Container'
export const HomePage = () => { export const HomePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -81,65 +82,63 @@ export const HomePage = () => {
} }
return ( 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>
<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> </Box>
</> <Box className={styles.submissions}>
{sigits.map((sigit, index) => (
<DisplaySigit
key={`sigit-${index}`}
meta={sigit}
profiles={profiles}
setProfiles={setProfiles}
/>
))}
</Box>
</Container>
) )
} }

131
src/pages/home/style.module.scss
View File

@ -2,94 +2,91 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 25px; 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; 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; display: flex;
flex: 4;
flex-direction: column;
align-items: center;
overflow-wrap: anywhere;
gap: 10px; gap: 10px;
background-color: #efeae6; padding: 10px;
border-radius: 1rem; background-color: #cdc8c499;
cursor: pointer; border-top-left-radius: inherit;
.titleBox { .title {
display: flex; display: flex;
flex: 4; justify-content: center;
flex-direction: column;
align-items: center; 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; 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; display: flex;
flex-direction: column;
flex: 6;
justify-content: center; justify-content: center;
gap: 10px; align-items: center;
padding: 10px;
color: var(--mui-palette-primary-light); 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);
} }
} }
} }

5
src/pages/profile/index.tsx
View File

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

98
src/pages/settings/Settings.tsx
View File

@ -12,6 +12,7 @@ import { useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes' import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
import { State } from '../../store/rootReducer' import { State } from '../../store/rootReducer'
import { Container } from '../../components/Container'
export const SettingsPage = () => { export const SettingsPage = () => {
const theme = useTheme() const theme = useTheme()
@ -42,55 +43,56 @@ export const SettingsPage = () => {
} }
return ( 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>
) )
} }

5
src/pages/settings/cache/index.tsx vendored
View File

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

5
src/pages/settings/profile/index.tsx
View File

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

5
src/pages/settings/relays/index.tsx
View File

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

1
src/pages/settings/relays/style.module.scss
View File

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

5
src/pages/sign/index.tsx
View File

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

5
src/pages/verify/index.tsx
View File

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