New marks and settings refactor #323
@ -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()
|
return (
|
||||||
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
|
<NavLink to={to}>
|
||||||
const listItem = (label: string, disabled = false) => {
|
{({ isActive }) => (
|
||||||
return (
|
<Button
|
||||||
<>
|
fullWidth
|
||||||
<ListItemText
|
|
||||||
primary={label}
|
|
||||||
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'}
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</NavLink>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
{!disabled && (
|
export const SettingsLayout = () => {
|
||||||
<ArrowForwardIosIcon
|
const { usersPubkey, loginMethod } = useAppSelector((state) => state.auth)
|
||||||
style={{
|
|
||||||
color: theme.palette.action.active,
|
|
||||||
marginRight: -10
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
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',
|
{Item(appPrivateRoutes.relays, <RouterIcon />, 'Relays')}
|
||||||
paddingBottom: 2,
|
{loginMethod === LoginMethod.nostrLogin &&
|
||||||
paddingTop: 2,
|
Item(
|
||||||
zIndex: 2
|
appPrivateRoutes.nostrLogin,
|
||||||
}}
|
<ExtensionIcon />,
|
||||||
>
|
'Nostr Login'
|
||||||
Settings
|
)}
|
||||||
</ListSubheader>
|
</aside>
|
||||||
}
|
</div>
|
||||||
>
|
<div className={styles.content}>
|
||||||
<ListItem component={Link} to={getProfileSettingsRoute(usersPubkey!)}>
|
<Outlet />
|
||||||
<ListItemIcon>
|
</div>
|
||||||
<AccountCircleIcon />
|
</div>
|
||||||
</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>
|
|
||||||
</Container>
|
</Container>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
|
@ -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,59 +18,39 @@ export const NostrLoginPage = () => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
<List>
|
||||||
<List
|
<ListItemButton
|
||||||
sx={{
|
onClick={() => {
|
||||||
width: '100%',
|
launchNostrLoginDialog('switch-account')
|
||||||
bgcolor: 'background.paper'
|
|
||||||
}}
|
}}
|
||||||
subheader={
|
|
||||||
<ListSubheader
|
|
||||||
sx={{
|
|
||||||
fontSize: '1.5rem',
|
|
||||||
borderBottom: '0.5px solid',
|
|
||||||
paddingBottom: 2,
|
|
||||||
paddingTop: 2,
|
|
||||||
zIndex: 2
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Nostr Settings
|
|
||||||
</ListSubheader>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
|
<ListItemIcon>
|
||||||
|
<PeopleIcon />
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText
|
||||||
|
primary={'Nostr Login Accounts'}
|
||||||
|
sx={{
|
||||||
|
color: theme.palette.text.primary
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ListItemButton>
|
||||||
|
{nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
||||||
<ListItemButton
|
<ListItemButton
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
launchNostrLoginDialog('switch-account')
|
launchNostrLoginDialog('import')
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ListItemIcon>
|
<ListItemIcon>
|
||||||
<PeopleIcon />
|
<ImportExportIcon />
|
||||||
</ListItemIcon>
|
</ListItemIcon>
|
||||||
<ListItemText
|
<ListItemText
|
||||||
primary={'Nostr Login Accounts'}
|
primary={'Import / Export Keys'}
|
||||||
sx={{
|
sx={{
|
||||||
color: theme.palette.text.primary
|
color: theme.palette.text.primary
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
{nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
)}
|
||||||
<ListItemButton
|
</List>
|
||||||
onClick={() => {
|
|
||||||
launchNostrLoginDialog('import')
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<ListItemIcon>
|
|
||||||
<ImportExportIcon />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText
|
|
||||||
primary={'Import / Export Keys'}
|
|
||||||
sx={{
|
|
||||||
color: theme.palette.text.primary
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</ListItemButton>
|
|
||||||
)}
|
|
||||||
</List>
|
|
||||||
</Container>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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,131 +253,111 @@ export const ProfileSettingsPage = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||||
<Container className={styles.container}>
|
<List>
|
||||||
<List
|
{userProfile && (
|
||||||
sx={{
|
<div>
|
||||||
bgcolor: 'background.paper',
|
<ListItem
|
||||||
marginTop: 2
|
|
||||||
}}
|
|
||||||
subheader={
|
|
||||||
<ListSubheader
|
|
||||||
sx={{
|
sx={{
|
||||||
paddingBottom: 1,
|
marginTop: 1,
|
||||||
paddingTop: 1,
|
display: 'flex',
|
||||||
fontSize: '1.5rem',
|
flexDirection: 'column'
|
||||||
zIndex: 2
|
|
||||||
}}
|
}}
|
||||||
className={styles.subHeader}
|
|
||||||
>
|
>
|
||||||
Profile Settings
|
{userProfile.banner ? (
|
||||||
</ListSubheader>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{userProfile && (
|
|
||||||
<div>
|
|
||||||
<ListItem
|
|
||||||
sx={{
|
|
||||||
marginTop: 1,
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{userProfile.banner ? (
|
|
||||||
<img
|
|
||||||
className={styles.bannerImg}
|
|
||||||
src={userProfile.banner}
|
|
||||||
alt="Banner Image"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<Box className={styles.noBanner}> No banner found </Box>
|
|
||||||
)}
|
|
||||||
</ListItem>
|
|
||||||
|
|
||||||
{editItem('banner', 'Banner URL', undefined, undefined)}
|
|
||||||
|
|
||||||
<ListItem
|
|
||||||
sx={{
|
|
||||||
marginTop: 1,
|
|
||||||
display: 'flex',
|
|
||||||
flexDirection: 'column'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img
|
<img
|
||||||
onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
|
className={styles.bannerImg}
|
||||||
event.currentTarget.src = getRoboHashPicture(npub!)
|
src={userProfile.banner}
|
||||||
}}
|
alt="Banner Image"
|
||||||
className={styles.img}
|
|
||||||
src={getProfileImage(userProfile)}
|
|
||||||
alt="Profile Image"
|
|
||||||
/>
|
/>
|
||||||
</ListItem>
|
) : (
|
||||||
|
<Box className={styles.noBanner}> No banner found </Box>
|
||||||
{editItem('image', 'Picture URL', undefined, undefined, {
|
|
||||||
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
|
||||||
})}
|
|
||||||
|
|
||||||
{editItem('name', 'Username')}
|
|
||||||
{editItem('displayName', 'Display Name')}
|
|
||||||
{editItem('nip05', 'Nostr Address (nip05)')}
|
|
||||||
{editItem('lud16', 'Lightning Address (lud16)')}
|
|
||||||
{editItem('about', 'About', true, 4)}
|
|
||||||
{editItem('website', 'Website')}
|
|
||||||
{isUsersOwnProfile && (
|
|
||||||
<>
|
|
||||||
{usersPubkey &&
|
|
||||||
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
|
|
||||||
|
|
||||||
{loginMethod === LoginMethod.privateKey &&
|
|
||||||
keys &&
|
|
||||||
keys.private &&
|
|
||||||
copyItem(
|
|
||||||
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
|
||||||
'Private Key',
|
|
||||||
keys.private
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
{isUsersOwnProfile && (
|
</ListItem>
|
||||||
<>
|
|
||||||
{loginMethod === LoginMethod.nostrLogin &&
|
{editItem('banner', 'Banner URL', undefined, undefined)}
|
||||||
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
|
||||||
<ListItem
|
<ListItem
|
||||||
sx={{ marginTop: 1 }}
|
sx={{
|
||||||
onClick={() => {
|
marginTop: 1,
|
||||||
launchNostrLoginDialog('import')
|
display: 'flex',
|
||||||
|
flexDirection: 'column'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
|
||||||
|
event.currentTarget.src = getRoboHashPicture(npub!)
|
||||||
|
}}
|
||||||
|
className={styles.img}
|
||||||
|
src={getProfileImage(userProfile)}
|
||||||
|
alt="Profile Image"
|
||||||
|
/>
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
{editItem('image', 'Picture URL', undefined, undefined, {
|
||||||
|
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
||||||
|
})}
|
||||||
|
|
||||||
|
{editItem('name', 'Username')}
|
||||||
|
{editItem('displayName', 'Display Name')}
|
||||||
|
{editItem('nip05', 'Nostr Address (nip05)')}
|
||||||
|
{editItem('lud16', 'Lightning Address (lud16)')}
|
||||||
|
{editItem('about', 'About', true, 4)}
|
||||||
|
{editItem('website', 'Website')}
|
||||||
|
{isUsersOwnProfile && (
|
||||||
|
<>
|
||||||
|
{usersPubkey &&
|
||||||
|
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
|
||||||
|
|
||||||
|
{loginMethod === LoginMethod.privateKey &&
|
||||||
|
keys &&
|
||||||
|
keys.private &&
|
||||||
|
copyItem(
|
||||||
|
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
||||||
|
'Private Key',
|
||||||
|
keys.private
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{isUsersOwnProfile && (
|
||||||
|
<>
|
||||||
|
{loginMethod === LoginMethod.nostrLogin &&
|
||||||
|
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
||||||
|
<ListItem
|
||||||
|
sx={{ marginTop: 1 }}
|
||||||
|
onClick={() => {
|
||||||
|
launchNostrLoginDialog('import')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
label="Private Key (nostr-login)"
|
||||||
|
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••"
|
||||||
|
size="small"
|
||||||
|
className={styles.textField}
|
||||||
|
disabled
|
||||||
|
type={'password'}
|
||||||
|
InputProps={{
|
||||||
|
endAdornment: (
|
||||||
|
<LaunchIcon className={styles.copyItem} />
|
||||||
|
)
|
||||||
}}
|
}}
|
||||||
>
|
/>
|
||||||
<TextField
|
</ListItem>
|
||||||
label="Private Key (nostr-login)"
|
)}
|
||||||
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••"
|
</>
|
||||||
size="small"
|
)}
|
||||||
className={styles.textField}
|
</div>
|
||||||
disabled
|
|
||||||
type={'password'}
|
|
||||||
InputProps={{
|
|
||||||
endAdornment: (
|
|
||||||
<LaunchIcon className={styles.copyItem} />
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</ListItem>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</List>
|
|
||||||
{isUsersOwnProfile && (
|
|
||||||
<LoadingButton
|
|
||||||
loading={savingProfileMetadata}
|
|
||||||
variant="contained"
|
|
||||||
onClick={handleSaveMetadata}
|
|
||||||
>
|
|
||||||
SAVE
|
|
||||||
</LoadingButton>
|
|
||||||
)}
|
)}
|
||||||
</Container>
|
</List>
|
||||||
<Footer />
|
{isUsersOwnProfile && (
|
||||||
|
<LoadingButton
|
||||||
|
sx={{ maxWidth: '300px', alignSelf: 'center', width: '100%' }}
|
||||||
|
loading={savingProfileMetadata}
|
||||||
|
variant="contained"
|
||||||
|
onClick={handleSaveMetadata}
|
||||||
|
>
|
||||||
|
PUBLISH CHANGES
|
||||||
|
</LoadingButton>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,9 +1,3 @@
|
|||||||
.container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.textField {
|
.textField {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,107 +1,103 @@
|
|||||||
@import '../../../styles/colors.scss';
|
@import '../../../styles/colors.scss';
|
||||||
|
|
||||||
.container {
|
.relayURItextfield {
|
||||||
color: $text-color;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.relayURItextfield {
|
.relayAddContainer {
|
||||||
width: 100%;
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionIcon {
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sectionTitle {
|
||||||
|
margin-top: 35px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
gap: 5px;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relaysContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relay {
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.12);
|
||||||
|
border-radius: 4px;
|
||||||
|
|
||||||
|
.relayDivider {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relayAddContainer {
|
.leaveRelayContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
width: 100%;
|
cursor: pointer;
|
||||||
align-items: start;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionIcon {
|
.showInfo {
|
||||||
font-size: 30px;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sectionTitle {
|
.showInfoIcon {
|
||||||
margin-top: 35px;
|
margin-right: 3px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: auto;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.relayInfoContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
font-size: 1.5rem;
|
text-wrap: wrap;
|
||||||
line-height: 2rem;
|
}
|
||||||
|
|
||||||
|
.relayInfoTitle {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.relaysContainer {
|
.relayInfoSubTitle {
|
||||||
display: flex;
|
font-weight: 500;
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.relay {
|
.copyItem {
|
||||||
border: 1px solid rgba(0, 0, 0, 0.12);
|
margin-left: 10px;
|
||||||
border-radius: 4px;
|
color: #34495e;
|
||||||
|
vertical-align: bottom;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.relayDivider {
|
.connectionStatus {
|
||||||
margin-left: 10px;
|
border-radius: 9999px;
|
||||||
margin-right: 10px;
|
width: 10px;
|
||||||
}
|
height: 10px;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.leaveRelayContainer {
|
.connectionStatusConnected {
|
||||||
display: flex;
|
background-color: $relay-status-connected;
|
||||||
flex-direction: row;
|
}
|
||||||
gap: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.showInfo {
|
.connectionStatusNotConnected {
|
||||||
cursor: pointer;
|
background-color: $relay-status-notconnected;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showInfoIcon {
|
.connectionStatusUnknown {
|
||||||
margin-right: 3px;
|
background-color: $input-text-color;
|
||||||
margin-bottom: auto;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relayInfoContainer {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
text-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relayInfoTitle {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relayInfoSubTitle {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyItem {
|
|
||||||
margin-left: 10px;
|
|
||||||
color: #34495e;
|
|
||||||
vertical-align: bottom;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connectionStatus {
|
|
||||||
border-radius: 9999px;
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connectionStatusConnected {
|
|
||||||
background-color: $relay-status-connected;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connectionStatusNotConnected {
|
|
||||||
background-color: $relay-status-notconnected;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connectionStatusUnknown {
|
|
||||||
background-color: $input-text-color;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
43
src/pages/settings/style.module.scss
Normal file
43
src/pages/settings/style.module.scss
Normal 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;
|
||||||
|
}
|
@ -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,
|
||||||
)
|
element: <RelaysPage />
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: appPrivateRoutes.relays,
|
path: appPrivateRoutes.nostrLogin,
|
||||||
element: (
|
element: <NostrLoginPage />
|
||||||
<PrivateRoute>
|
}
|
||||||
<RelaysPage />
|
]
|
||||||
</PrivateRoute>
|
|
||||||
)
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: appPrivateRoutes.nostrLogin,
|
|
||||||
element: (
|
|
||||||
<PrivateRoute>
|
|
||||||
<NostrLoginPage />
|
|
||||||
</PrivateRoute>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user