Releasing new design #161
@ -170,7 +170,10 @@ export const AppBar = () => {
|
|||||||
<MenuItem
|
<MenuItem
|
||||||
sx={{
|
sx={{
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
display: { md: 'none' }
|
display: { md: 'none' },
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: '14px',
|
||||||
|
color: 'var(--text-color)'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography variant="h6">{username}</Typography>
|
<Typography variant="h6">{username}</Typography>
|
||||||
|
@ -15,6 +15,26 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
|
|||||||
const hexKey = useSelector((state: State) => state.auth.usersPubkey)
|
const hexKey = useSelector((state: State) => state.auth.usersPubkey)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'end',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '12px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
sx={{
|
||||||
|
fontWeight: 500,
|
||||||
|
fontSize: '14px',
|
||||||
|
color: 'var(--text-color)',
|
||||||
|
display: { xs: 'none', md: 'flex' }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{username || 'test'}
|
||||||
|
</Typography>
|
||||||
<IconButton
|
<IconButton
|
||||||
aria-label="account of current user"
|
aria-label="account of current user"
|
||||||
aria-controls="menu-appbar"
|
aria-controls="menu-appbar"
|
||||||
@ -32,17 +52,8 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
|
|||||||
borderColor: `#${hexKey?.substring(0, 6)}`
|
borderColor: `#${hexKey?.substring(0, 6)}`
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
sx={{
|
|
||||||
color: '#3e3e3e',
|
|
||||||
padding: '0 8px',
|
|
||||||
display: { xs: 'none', md: 'flex' }
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{username}
|
|
||||||
</Typography>
|
|
||||||
</IconButton>
|
</IconButton>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -59,7 +59,13 @@ export const Modal = () => {
|
|||||||
onClick={handleClose}
|
onClick={handleClose}
|
||||||
sx={{
|
sx={{
|
||||||
fontSize: '18px',
|
fontSize: '18px',
|
||||||
color: 'rgba(0, 0, 0, 0.5)'
|
color: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
padding: '8px 15px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
':hover': {
|
||||||
|
background: 'var(--primary-light)',
|
||||||
|
color: 'white'
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
|
@ -74,18 +74,6 @@ export const theme = extendTheme({
|
|||||||
defaultProps: {
|
defaultProps: {
|
||||||
fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
|
fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
|
||||||
}
|
}
|
||||||
},
|
|
||||||
MuiIconButton: {
|
|
||||||
styleOverrides: {
|
|
||||||
root: {
|
|
||||||
padding: '8px 15px',
|
|
||||||
borderRadius: '4px',
|
|
||||||
':hover': {
|
|
||||||
background: 'var(--primary-light)',
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
breakpoints: {
|
breakpoints: {
|
||||||
|
Loading…
Reference in New Issue
Block a user