Merge pull request 'Improve font support, fix svg inline' () from issue-fonts-support into staging

Reviewed-on: 
Reviewed-by: Otto <y@noreply.git.nostrdev.com>
This commit is contained in:
en 2024-08-02 09:52:14 +00:00
commit c29bdd59ae
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

(image error) Size: 169 KiB

Binary file not shown.

Before

(image error) Size: 85 KiB

BIN
src/assets/images/nostr.gif Normal file

Binary file not shown.

After

(image error) 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
startIcon={<ButtonIcon />}
onClick={() => {
navigate(appPublicRoutes.login)
navigate(appPublicRoutes.nostr)
}}
variant="contained"
>

@ -2,6 +2,7 @@ import { Box, Button, Link as LinkMui } from '@mui/material'
import { Link } from 'react-router-dom'
import styles from './style.module.scss'
import { Container } from '../Container'
import nostrImage from '../../assets/images/nostr.gif'
export const Footer = () => (
<footer className={`${styles.borderTop} ${styles.footer}`}>
@ -117,12 +118,7 @@ export const Footer = () => (
}}
variant={'contained'}
>
<img
src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
width="25"
alt="nostr logo"
height="25"
/>
<img src={nostrImage} width="25" alt="nostr logo" height="25" />
</Button>
</Box>
</Box>

@ -16,30 +16,6 @@
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 {
margin: 0;
min-width: 320px;
@ -131,3 +107,44 @@ button:disabled {
border-radius: 50%;
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 { faClose } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import nostrImage from '../../assets/images/nostr.gif'
function useRouteMatch(patterns: readonly string[]) {
const { pathname } = useLocation()
@ -34,14 +35,7 @@ export const Modal = () => {
to: appPublicRoutes.nostr,
title: 'Login',
sx: { padding: '10px' },
label: (
<img
src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
width="25"
alt="nostr logo"
height="25"
/>
)
label: <img src={nostrImage} width="25" alt="nostr logo" height="25" />
}
]
const routeMatch = useRouteMatch(tabs.map((t) => t.to))
@ -99,6 +93,10 @@ export const Modal = () => {
)
})}
</ul>
{activeTab === appPublicRoutes.login ||
activeTab === appPublicRoutes.register ? (
<div className={styles.comingSoon}>Coming soon!</div>
) : null}
<div className={styles.tabContent}>
<Outlet />
</div>

@ -66,6 +66,14 @@ $default-modal-padding: 15px 25px;
padding-inline: 10px;
}
.comingSoon {
padding: 15px;
color: rgba(0, 0, 0, 0.5);
text-align: center;
font-weight: 400;
font-size: 16px;
}
.footer {
padding: 15px;
border-top: solid 1px rgba(0, 0, 0, 0.1);

@ -25,7 +25,7 @@ export const LandingPage = () => {
const location = useLocation()
const onSignInClick = async () => {
navigate(appPublicRoutes.login)
navigate(appPublicRoutes.nostr)
}
const cards = [
@ -109,11 +109,11 @@ export const LandingPage = () => {
<div className={styles.background}>
<div
className={`${styles.backgroundBlob} ${styles.backgroundBlobLeft}`}
style={{ backgroundImage: `url(${bg_l})` }}
style={{ backgroundImage: `url("${bg_l}")` }}
></div>
<div
className={`${styles.backgroundBlob} ${styles.backgroundBlobRight}`}
style={{ backgroundImage: `url(${bg_r})` }}
style={{ backgroundImage: `url("${bg_r}")` }}
></div>
<Container className={styles.container}>

@ -1,6 +1,8 @@
import { Button, TextField } from '@mui/material'
export const Login = () => {
// TODO: All fields, buttons are disabled
// Feature not implemented
return (
<>
<TextField
@ -9,6 +11,7 @@ export const Login = () => {
fullWidth
margin="dense"
autoComplete="username"
disabled
/>
<TextField
label="Password"
@ -16,9 +19,10 @@ export const Login = () => {
fullWidth
margin="dense"
autoComplete="current-password"
disabled
/>
<Button variant="contained" fullWidth>
<Button variant="contained" fullWidth disabled>
Login
</Button>
</>

@ -1,6 +1,8 @@
import { Button, TextField } from '@mui/material'
export const Register = () => {
// TODO: All fields, buttons are disabled
// Feature not implemented
return (
<>
<TextField
@ -9,6 +11,7 @@ export const Register = () => {
fullWidth
margin="dense"
autoComplete="username"
disabled
/>
<TextField
label="Password"
@ -17,6 +20,7 @@ export const Register = () => {
margin="dense"
type="password"
autoComplete="new-password"
disabled
/>
<TextField
label="Confirm password"
@ -25,9 +29,10 @@ export const Register = () => {
margin="dense"
type="password"
autoComplete="new-password"
disabled
/>
<Button variant="contained" fullWidth>
<Button variant="contained" fullWidth disabled>
Register
</Button>
</>

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