fix: update popup design

This commit is contained in:
enes 2024-07-29 15:27:20 +02:00
parent 28184ab038
commit 55158fc313
3 changed files with 138 additions and 39 deletions

View File

@ -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>
) )
} }

View File

@ -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;
} }

View File

@ -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: {