Compare commits

...

6 Commits

Author SHA1 Message Date
c29bdd59ae Merge pull request 'Improve font support, fix svg inline' (#123) from issue-fonts-support into staging
All checks were successful
Release to Staging / build_and_release (push) Successful in 1m3s
Reviewed-on: #123
Reviewed-by: Otto <y@noreply.git.nostrdev.com>
2024-08-02 09:52:14 +00:00
0a74ad97b2 fix: disable login, register fields, add coming soon
Login and register fields, and buttons are not interactive. Pages show Coming soon!
2024-07-31 18:35:45 +02:00
21bfda19f9 refactor: remove unused fonts, reduce number of variations 2024-07-31 18:13:18 +02:00
a63ea913d9 fix: improve font support
Add local variations and web (eot, woff2, woff, ttf).
2024-07-31 17:41:40 +02:00
c22b1e4b5a fix: inlined svg background images
surround imported svg with double quotes, vite recommendation
2024-07-31 17:31:23 +02:00
3470bf78b7 refactor: nostr gif, use it from assets instead link 2024-07-31 17:29:34 +02:00
24 changed files with 76 additions and 45 deletions

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@ -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"
> >

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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>
</> </>

View File

@ -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>
</> </>

View File

@ -55,7 +55,10 @@ export const theme = extendTheme({
}, },
contained: { contained: {
background: 'var(--primary-main)', background: 'var(--primary-main)',
color: 'white' color: 'white',
':hover': {
color: 'white'
}
}, },
outlined: { outlined: {
':hover': { ':hover': {