fix: update popup design
This commit is contained in:
parent
28184ab038
commit
55158fc313
@ -1,4 +1,4 @@
|
|||||||
import { Box, Button, Modal as ModalMui, Typography } from '@mui/material'
|
import { Button, IconButton, Modal as ModalMui } from '@mui/material'
|
||||||
import {
|
import {
|
||||||
Link,
|
Link,
|
||||||
matchPath,
|
matchPath,
|
||||||
@ -28,7 +28,19 @@ export const Modal = () => {
|
|||||||
const tabs = [
|
const tabs = [
|
||||||
{ to: appPublicRoutes.login, title: 'Login', label: 'Login' },
|
{ to: appPublicRoutes.login, title: 'Login', label: 'Login' },
|
||||||
{ to: appPublicRoutes.register, title: 'Register', label: 'Register' },
|
{ to: appPublicRoutes.register, title: 'Register', label: 'Register' },
|
||||||
{ to: appPublicRoutes.nostr, title: 'Login', label: <>Ostrich</> }
|
{
|
||||||
|
to: appPublicRoutes.nostr,
|
||||||
|
title: 'Login',
|
||||||
|
sx: { padding: '10px' },
|
||||||
|
label: (
|
||||||
|
<img
|
||||||
|
src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
|
||||||
|
width="25"
|
||||||
|
alt="nostr logo"
|
||||||
|
height="25"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
]
|
]
|
||||||
const routeMatch = useRouteMatch(tabs.map((t) => t.to))
|
const routeMatch = useRouteMatch(tabs.map((t) => t.to))
|
||||||
const activeTab = routeMatch?.pattern?.path
|
const activeTab = routeMatch?.pattern?.path
|
||||||
@ -37,42 +49,63 @@ export const Modal = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalMui
|
<ModalMui open={true} onClose={handleClose} aria-labelledby="modal-title">
|
||||||
open={true}
|
<div className={styles.modal}>
|
||||||
onClose={handleClose}
|
<header className={styles.header}>
|
||||||
aria-labelledby="modal-title"
|
<h2 className={styles.title} id="modal-title">
|
||||||
aria-describedby="modal-description"
|
{tabs.find((t) => activeTab === t.to)?.title}
|
||||||
>
|
</h2>
|
||||||
<Box className={styles.modal}>
|
<IconButton
|
||||||
<Typography id="modal-title" variant="h2">
|
onClick={handleClose}
|
||||||
{tabs.find((t) => activeTab === t.to)?.title}
|
sx={{
|
||||||
</Typography>
|
fontSize: '18px',
|
||||||
|
color: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="-96 0 512 512"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
fill="currentColor"
|
||||||
|
>
|
||||||
|
{/* 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="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"></path>
|
||||||
|
</svg>
|
||||||
|
</IconButton>
|
||||||
|
</header>
|
||||||
|
|
||||||
<Box component={'ul'}>
|
<main className={styles.body}>
|
||||||
{tabs.map((t) => {
|
<ul>
|
||||||
return (
|
{tabs.map((t) => {
|
||||||
<Button
|
return (
|
||||||
component={Link}
|
<li>
|
||||||
to={t.to}
|
<Button
|
||||||
key={t.to}
|
component={Link}
|
||||||
variant={
|
to={t.to}
|
||||||
activeTab === t.to || t.to === appPublicRoutes.nostr
|
key={t.to}
|
||||||
? 'contained'
|
sx={{
|
||||||
: 'text'
|
width: '100%',
|
||||||
}
|
height: '100%',
|
||||||
>
|
...(t?.sx ? t.sx : {})
|
||||||
{t.label}
|
}}
|
||||||
</Button>
|
variant={
|
||||||
)
|
activeTab === t.to || t.to === appPublicRoutes.nostr
|
||||||
})}
|
? 'contained'
|
||||||
</Box>
|
: 'text'
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t.label}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
<Outlet />
|
||||||
|
</main>
|
||||||
|
|
||||||
<Outlet />
|
<footer className={styles.footer}>Welcome to SIGit!</footer>
|
||||||
|
</div>
|
||||||
<Typography id="modal-description" variant="h4">
|
|
||||||
Welcome to Sigit
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
</ModalMui>
|
</ModalMui>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,10 +1,12 @@
|
|||||||
@import '../../styles/colors.scss';
|
@import '../../styles/colors.scss';
|
||||||
|
|
||||||
|
$default-modal-padding: 15px 25px;
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%;
|
top: 0;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, 0);
|
||||||
|
|
||||||
background-color: $overlay-background-color;
|
background-color: $overlay-background-color;
|
||||||
|
|
||||||
@ -12,4 +14,56 @@
|
|||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: $default-modal-padding;
|
||||||
|
border-bottom: solid 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
grid-gap: 10px;
|
||||||
|
padding: $default-modal-padding;
|
||||||
|
|
||||||
|
> ul {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
grid-gap: 10px;
|
||||||
|
|
||||||
|
> li {
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
max-width: 65px;
|
||||||
|
padding: 0 0 0 10px;
|
||||||
|
border-left: solid 1px rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
padding: 15px;
|
||||||
|
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
@ -27,7 +27,7 @@ export const theme = extendTheme({
|
|||||||
styleOverrides: {
|
styleOverrides: {
|
||||||
root: {
|
root: {
|
||||||
insetBlock: '25px',
|
insetBlock: '25px',
|
||||||
insetInline: '20px'
|
insetInline: '10px'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -74,6 +74,18 @@ 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