refactor(settings): update settings layout

This commit is contained in:
en 2025-03-10 11:57:08 +00:00
parent 745ba377d4
commit c1a9475a89
8 changed files with 325 additions and 355 deletions

View File

@ -1,87 +1,82 @@
import AccountCircleIcon from '@mui/icons-material/AccountCircle' import AccountCircleIcon from '@mui/icons-material/AccountCircle'
import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'
import RouterIcon from '@mui/icons-material/Router' import RouterIcon from '@mui/icons-material/Router'
import { ListItem, useTheme } from '@mui/material' import { Button } from '@mui/material'
import List from '@mui/material/List'
import ListItemIcon from '@mui/material/ListItemIcon'
import ListItemText from '@mui/material/ListItemText'
import ListSubheader from '@mui/material/ListSubheader'
import { useAppSelector } from '../../hooks/store' import { useAppSelector } from '../../hooks/store'
import { Link } from 'react-router-dom' import { NavLink, Outlet, To } from 'react-router-dom'
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes' import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import { Footer } from '../../components/Footer/Footer' import { Footer } from '../../components/Footer/Footer'
import ExtensionIcon from '@mui/icons-material/Extension' import ExtensionIcon from '@mui/icons-material/Extension'
import { LoginMethod } from '../../store/auth/types' import { LoginMethod } from '../../store/auth/types'
import styles from './style.module.scss'
import { ReactNode } from 'react'
export const SettingsPage = () => { const Item = (to: To, icon: ReactNode, label: string) => {
const theme = useTheme()
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
const listItem = (label: string, disabled = false) => {
return ( return (
<> <NavLink to={to}>
<ListItemText {({ isActive }) => (
primary={label} <Button
fullWidth
sx={{ sx={{
color: theme.palette.text.primary transition: 'ease 0.3s',
justifyContent: 'start',
gap: '10px',
background: 'rgba(76,130,163,0)',
color: '#434343',
fontWeight: 600,
opacity: 0.75,
textTransform: 'none',
...(isActive
? {
background: '#447592',
color: 'white'
}
: {}),
'&:hover': {
opacity: 0.85,
gap: '15px',
background: '#5e8eab',
color: 'white'
}
}} }}
/> variant={'text'}
>
{!disabled && ( {icon}
<ArrowForwardIosIcon {label}
style={{ </Button>
color: theme.palette.action.active,
marginRight: -10
}}
/>
)} )}
</> </NavLink>
) )
} }
export const SettingsLayout = () => {
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
return ( return (
<> <>
<Container> <Container>
<List <h2 className={styles.title}>Settings</h2>
sx={{ <div className={styles.main}>
width: '100%', <div>
bgcolor: 'background.paper' <aside className={styles.aside}>
}} {Item(
subheader={ getProfileSettingsRoute(usersPubkey!),
<ListSubheader <AccountCircleIcon />,
sx={{ 'Profile'
fontSize: '1.5rem',
borderBottom: '0.5px solid',
paddingBottom: 2,
paddingTop: 2,
zIndex: 2
}}
>
Settings
</ListSubheader>
}
>
<ListItem component={Link} to={getProfileSettingsRoute(usersPubkey!)}>
<ListItemIcon>
<AccountCircleIcon />
</ListItemIcon>
{listItem('Profile')}
</ListItem>
<ListItem component={Link} to={appPrivateRoutes.relays}>
<ListItemIcon>
<RouterIcon />
</ListItemIcon>
{listItem('Relays')}
</ListItem>
{loginMethod === LoginMethod.nostrLogin && (
<ListItem component={Link} to={appPrivateRoutes.nostrLogin}>
<ListItemIcon>
<ExtensionIcon />
</ListItemIcon>
{listItem('Nostr Login')}
</ListItem>
)} )}
</List> {Item(appPrivateRoutes.relays, <RouterIcon />, 'Relays')}
{loginMethod === LoginMethod.nostrLogin &&
Item(
appPrivateRoutes.nostrLogin,
<ExtensionIcon />,
'Nostr Login'
)}
</aside>
</div>
<div className={styles.content}>
<Outlet />
</div>
</div>
</Container> </Container>
<Footer /> <Footer />
</> </>

View File

@ -3,11 +3,9 @@ import {
ListItemButton, ListItemButton,
ListItemIcon, ListItemIcon,
ListItemText, ListItemText,
ListSubheader,
useTheme useTheme
} from '@mui/material' } from '@mui/material'
import { launch as launchNostrLoginDialog } from 'nostr-login' import { launch as launchNostrLoginDialog } from 'nostr-login'
import { Container } from '../../../components/Container'
import PeopleIcon from '@mui/icons-material/People' import PeopleIcon from '@mui/icons-material/People'
import ImportExportIcon from '@mui/icons-material/ImportExport' import ImportExportIcon from '@mui/icons-material/ImportExport'
import { useAppSelector } from '../../../hooks/store' import { useAppSelector } from '../../../hooks/store'
@ -20,26 +18,7 @@ export const NostrLoginPage = () => {
) )
return ( return (
<Container> <List>
<List
sx={{
width: '100%',
bgcolor: 'background.paper'
}}
subheader={
<ListSubheader
sx={{
fontSize: '1.5rem',
borderBottom: '0.5px solid',
paddingBottom: 2,
paddingTop: 2,
zIndex: 2
}}
>
Nostr Settings
</ListSubheader>
}
>
<ListItemButton <ListItemButton
onClick={() => { onClick={() => {
launchNostrLoginDialog('switch-account') launchNostrLoginDialog('switch-account')
@ -73,6 +52,5 @@ export const NostrLoginPage = () => {
</ListItemButton> </ListItemButton>
)} )}
</List> </List>
</Container>
) )
} }

View File

@ -12,7 +12,6 @@ import {
InputProps, InputProps,
List, List,
ListItem, ListItem,
ListSubheader,
TextField, TextField,
Tooltip Tooltip
} from '@mui/material' } from '@mui/material'
@ -28,8 +27,6 @@ import { useAppDispatch, useAppSelector } from '../../../hooks/store'
import { getRoboHashPicture, unixNow } from '../../../utils' import { getRoboHashPicture, unixNow } from '../../../utils'
import { Container } from '../../../components/Container'
import { Footer } from '../../../components/Footer/Footer'
import { LoadingSpinner } from '../../../components/LoadingSpinner' import { LoadingSpinner } from '../../../components/LoadingSpinner'
import { setUserProfile as updateUserProfile } from '../../../store/actions' import { setUserProfile as updateUserProfile } from '../../../store/actions'
@ -256,26 +253,7 @@ export const ProfileSettingsPage = () => {
return ( return (
<> <>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />} {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<Container className={styles.container}> <List>
<List
sx={{
bgcolor: 'background.paper',
marginTop: 2
}}
subheader={
<ListSubheader
sx={{
paddingBottom: 1,
paddingTop: 1,
fontSize: '1.5rem',
zIndex: 2
}}
className={styles.subHeader}
>
Profile Settings
</ListSubheader>
}
>
{userProfile && ( {userProfile && (
<div> <div>
<ListItem <ListItem
@ -372,15 +350,14 @@ export const ProfileSettingsPage = () => {
</List> </List>
{isUsersOwnProfile && ( {isUsersOwnProfile && (
<LoadingButton <LoadingButton
sx={{ maxWidth: '300px', alignSelf: 'center', width: '100%' }}
loading={savingProfileMetadata} loading={savingProfileMetadata}
variant="contained" variant="contained"
onClick={handleSaveMetadata} onClick={handleSaveMetadata}
> >
SAVE PUBLISH CHANGES
</LoadingButton> </LoadingButton>
)} )}
</Container>
<Footer />
</> </>
) )
} }

View File

@ -1,9 +1,3 @@
.container {
display: flex;
flex-direction: column;
gap: 25px;
}
.textField { .textField {
width: 100%; width: 100%;
} }

View File

@ -12,7 +12,6 @@ import ListItemText from '@mui/material/ListItemText'
import Switch from '@mui/material/Switch' import Switch from '@mui/material/Switch'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { toast } from 'react-toastify' import { toast } from 'react-toastify'
import { Container } from '../../../components/Container'
import { import {
useAppDispatch, useAppDispatch,
useAppSelector, useAppSelector,
@ -32,7 +31,6 @@ import {
timeout timeout
} from '../../../utils' } from '../../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Footer } from '../../../components/Footer/Footer'
import { import {
getRelayListForUser, getRelayListForUser,
NDKRelayList, NDKRelayList,
@ -246,7 +244,7 @@ export const RelaysPage = () => {
} }
return ( return (
<Container className={styles.container}> <>
<Box className={styles.relayAddContainer}> <Box className={styles.relayAddContainer}>
<TextField <TextField
label="Add new relay" label="Add new relay"
@ -291,8 +289,7 @@ export const RelaysPage = () => {
))} ))}
</Box> </Box>
)} )}
<Footer /> </>
</Container>
) )
} }

View File

@ -1,8 +1,5 @@
@import '../../../styles/colors.scss'; @import '../../../styles/colors.scss';
.container {
color: $text-color;
.relayURItextfield { .relayURItextfield {
width: 100%; width: 100%;
} }
@ -104,4 +101,3 @@
background-color: $input-text-color; background-color: $input-text-color;
} }
} }
}

View File

@ -0,0 +1,43 @@
.title {
margin: 0 0 15px 0;
}
.main {
width: 100%;
display: grid;
grid-template-columns: 0.4fr 1.6fr;
position: relative;
grid-gap: 25px;
>* {
width: 100%;
display: flex;
flex-direction: column;
grid-gap: 25px;
}
}
.aside {
width: 100%;
background: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
grid-gap: 15px;
position: sticky;
top: 15px;
}
.content {
width: 100%;
background: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
grid-gap: 15px;
}

View File

@ -7,7 +7,7 @@ import { ProfilePage } from '../pages/profile'
import { NostrLoginPage } from '../pages/settings/nostrLogin' import { NostrLoginPage } from '../pages/settings/nostrLogin'
import { ProfileSettingsPage } from '../pages/settings/profile' import { ProfileSettingsPage } from '../pages/settings/profile'
import { RelaysPage } from '../pages/settings/relays' import { RelaysPage } from '../pages/settings/relays'
import { SettingsPage } from '../pages/settings/Settings' import { SettingsLayout } from '../pages/settings/Settings'
import { SignPage } from '../pages/sign' import { SignPage } from '../pages/sign'
import { VerifyPage } from '../pages/verify' import { VerifyPage } from '../pages/verify'
import { PrivateRoute } from './PrivateRoute' import { PrivateRoute } from './PrivateRoute'
@ -96,32 +96,22 @@ export const privateRoutes = [
path: appPrivateRoutes.settings, path: appPrivateRoutes.settings,
element: ( element: (
<PrivateRoute> <PrivateRoute>
<SettingsPage /> <SettingsLayout />
</PrivateRoute> </PrivateRoute>
) ),
}, children: [
{ {
path: appPrivateRoutes.profileSettings, path: appPrivateRoutes.profileSettings,
element: ( element: <ProfileSettingsPage />
<PrivateRoute>
<ProfileSettingsPage />
</PrivateRoute>
)
}, },
{ {
path: appPrivateRoutes.relays, path: appPrivateRoutes.relays,
element: ( element: <RelaysPage />
<PrivateRoute>
<RelaysPage />
</PrivateRoute>
)
}, },
{ {
path: appPrivateRoutes.nostrLogin, path: appPrivateRoutes.nostrLogin,
element: ( element: <NostrLoginPage />
<PrivateRoute> }
<NostrLoginPage /> ]
</PrivateRoute>
)
} }
] ]