Improve font support, fix svg inline #123
BIN
src/assets/fonts/roboto-bold.woff
Normal file
BIN
src/assets/fonts/roboto-bold.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-bold.woff2
Normal file
BIN
src/assets/fonts/roboto-bold.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-light.woff
Normal file
BIN
src/assets/fonts/roboto-light.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-light.woff2
Normal file
BIN
src/assets/fonts/roboto-light.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-medium.woff
Normal file
BIN
src/assets/fonts/roboto-medium.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-medium.woff2
Normal file
BIN
src/assets/fonts/roboto-medium.woff2
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-regular.woff
Normal file
BIN
src/assets/fonts/roboto-regular.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/roboto-regular.woff2
Normal file
BIN
src/assets/fonts/roboto-regular.woff2
Normal file
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 169 KiB |
Binary file not shown.
Before Width: | Height: | Size: 85 KiB |
BIN
src/assets/images/nostr.gif
Normal file
BIN
src/assets/images/nostr.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -137,7 +137,7 @@ export const AppBar = () => {
|
|||||||
<Button
|
<Button
|
||||||
startIcon={<ButtonIcon />}
|
startIcon={<ButtonIcon />}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
navigate(appPublicRoutes.login)
|
navigate(appPublicRoutes.nostr)
|
||||||
}}
|
}}
|
||||||
variant="contained"
|
variant="contained"
|
||||||
>
|
>
|
||||||
|
@ -2,6 +2,7 @@ import { Box, Button, Link as LinkMui } from '@mui/material'
|
|||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { Container } from '../Container'
|
import { Container } from '../Container'
|
||||||
|
import nostrImage from '../../assets/images/nostr.gif'
|
||||||
|
|
||||||
export const Footer = () => (
|
export const Footer = () => (
|
||||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||||
@ -117,12 +118,7 @@ export const Footer = () => (
|
|||||||
}}
|
}}
|
||||||
variant={'contained'}
|
variant={'contained'}
|
||||||
>
|
>
|
||||||
<img
|
<img src={nostrImage} width="25" alt="nostr logo" height="25" />
|
||||||
src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
|
|
||||||
width="25"
|
|
||||||
alt="nostr logo"
|
|
||||||
height="25"
|
|
||||||
/>
|
|
||||||
</Button>
|
</Button>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -16,30 +16,6 @@
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Roboto';
|
|
||||||
font-weight: 300;
|
|
||||||
src: local('Roboto-Light'), url(./assets/roboto-font/Roboto-Light.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Roboto';
|
|
||||||
font-weight: 400;
|
|
||||||
src: local('Roboto-Regular'), url(./assets/Roboto-font/Roboto-Regular.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Roboto';
|
|
||||||
font-weight: 500;
|
|
||||||
src: local('Roboto-Medium'), url(./assets/Roboto-font/Roboto-Medium.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
|
||||||
font-family: 'Roboto';
|
|
||||||
font-weight: 700;
|
|
||||||
src: local('Roboto-Bold'), url(./assets/Roboto-font/Roboto-Bold.ttf);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
min-width: 320px;
|
min-width: 320px;
|
||||||
@ -131,3 +107,44 @@ button:disabled {
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Fonts */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
src: local('Roboto Medium'), local('Roboto-Medium'),
|
||||||
|
url('assets/fonts/roboto-medium.woff2') format('woff2'),
|
||||||
|
url('assets/fonts/roboto-medium.woff') format('woff');
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
src: local('Roboto Light'), local('Roboto-Light'),
|
||||||
|
url('assets/fonts/roboto-light.woff2') format('woff2'),
|
||||||
|
url('assets/fonts/roboto-light.woff') format('woff');
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
src: local('Roboto Bold'), local('Roboto-Bold'),
|
||||||
|
url('assets/fonts/roboto-bold.woff2') format('woff2'),
|
||||||
|
url('assets/fonts/roboto-bold.woff') format('woff');
|
||||||
|
font-weight: bold;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'),
|
||||||
|
url('assets/fonts/roboto-regular.woff2') format('woff2'),
|
||||||
|
url('assets/fonts/roboto-regular.woff') format('woff');
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
@ -10,6 +10,7 @@ import styles from './style.module.scss'
|
|||||||
import { appPublicRoutes } from '../../routes'
|
import { appPublicRoutes } from '../../routes'
|
||||||
import { faClose } from '@fortawesome/free-solid-svg-icons'
|
import { faClose } from '@fortawesome/free-solid-svg-icons'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import nostrImage from '../../assets/images/nostr.gif'
|
||||||
|
|
||||||
function useRouteMatch(patterns: readonly string[]) {
|
function useRouteMatch(patterns: readonly string[]) {
|
||||||
const { pathname } = useLocation()
|
const { pathname } = useLocation()
|
||||||
@ -34,14 +35,7 @@ export const Modal = () => {
|
|||||||
to: appPublicRoutes.nostr,
|
to: appPublicRoutes.nostr,
|
||||||
title: 'Login',
|
title: 'Login',
|
||||||
sx: { padding: '10px' },
|
sx: { padding: '10px' },
|
||||||
label: (
|
label: <img src={nostrImage} width="25" alt="nostr logo" height="25" />
|
||||||
<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))
|
||||||
@ -99,6 +93,10 @@ export const Modal = () => {
|
|||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
|
{activeTab === appPublicRoutes.login ||
|
||||||
|
activeTab === appPublicRoutes.register ? (
|
||||||
|
<div className={styles.comingSoon}>Coming soon!</div>
|
||||||
|
) : null}
|
||||||
<div className={styles.tabContent}>
|
<div className={styles.tabContent}>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
|
@ -66,6 +66,14 @@ $default-modal-padding: 15px 25px;
|
|||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comingSoon {
|
||||||
|
padding: 15px;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||||
|
@ -25,7 +25,7 @@ export const LandingPage = () => {
|
|||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
|
|
||||||
const onSignInClick = async () => {
|
const onSignInClick = async () => {
|
||||||
navigate(appPublicRoutes.login)
|
navigate(appPublicRoutes.nostr)
|
||||||
}
|
}
|
||||||
|
|
||||||
const cards = [
|
const cards = [
|
||||||
@ -109,11 +109,11 @@ export const LandingPage = () => {
|
|||||||
<div className={styles.background}>
|
<div className={styles.background}>
|
||||||
<div
|
<div
|
||||||
className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
|
className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
|
||||||
style={{ backgroundImage: `url(${bg_l})` }}
|
style={{ backgroundImage: `url("${bg_l}")` }}
|
||||||
></div>
|
></div>
|
||||||
<div
|
<div
|
||||||
className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
|
className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
|
||||||
style={{ backgroundImage: `url(${bg_r})` }}
|
style={{ backgroundImage: `url("${bg_r}")` }}
|
||||||
></div>
|
></div>
|
||||||
|
|
||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import { Button, TextField } from '@mui/material'
|
import { Button, TextField } from '@mui/material'
|
||||||
|
|
||||||
export const Login = () => {
|
export const Login = () => {
|
||||||
|
// TODO: All fields, buttons are disabled
|
||||||
|
// Feature not implemented
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TextField
|
<TextField
|
||||||
@ -9,6 +11,7 @@ export const Login = () => {
|
|||||||
fullWidth
|
fullWidth
|
||||||
margin="dense"
|
margin="dense"
|
||||||
autoComplete="username"
|
autoComplete="username"
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
label="Password"
|
label="Password"
|
||||||
@ -16,9 +19,10 @@ export const Login = () => {
|
|||||||
fullWidth
|
fullWidth
|
||||||
margin="dense"
|
margin="dense"
|
||||||
autoComplete="current-password"
|
autoComplete="current-password"
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button variant="contained" fullWidth>
|
<Button variant="contained" fullWidth disabled>
|
||||||
Login
|
Login
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import { Button, TextField } from '@mui/material'
|
import { Button, TextField } from '@mui/material'
|
||||||
|
|
||||||
export const Register = () => {
|
export const Register = () => {
|
||||||
|
// TODO: All fields, buttons are disabled
|
||||||
|
// Feature not implemented
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<TextField
|
<TextField
|
||||||
@ -9,6 +11,7 @@ export const Register = () => {
|
|||||||
fullWidth
|
fullWidth
|
||||||
margin="dense"
|
margin="dense"
|
||||||
autoComplete="username"
|
autoComplete="username"
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
label="Password"
|
label="Password"
|
||||||
@ -17,6 +20,7 @@ export const Register = () => {
|
|||||||
margin="dense"
|
margin="dense"
|
||||||
type="password"
|
type="password"
|
||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
<TextField
|
<TextField
|
||||||
label="Confirm password"
|
label="Confirm password"
|
||||||
@ -25,9 +29,10 @@ export const Register = () => {
|
|||||||
margin="dense"
|
margin="dense"
|
||||||
type="password"
|
type="password"
|
||||||
autoComplete="new-password"
|
autoComplete="new-password"
|
||||||
|
disabled
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Button variant="contained" fullWidth>
|
<Button variant="contained" fullWidth disabled>
|
||||||
Register
|
Register
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</>
|
||||||
|
@ -55,7 +55,10 @@ export const theme = extendTheme({
|
|||||||
},
|
},
|
||||||
contained: {
|
contained: {
|
||||||
background: 'var(--primary-main)',
|
background: 'var(--primary-main)',
|
||||||
|
color: 'white',
|
||||||
|
':hover': {
|
||||||
color: 'white'
|
color: 'white'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
outlined: {
|
outlined: {
|
||||||
':hover': {
|
':hover': {
|
||||||
|
Loading…
Reference in New Issue
Block a user