Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
15 changed files with 667 additions and 181 deletions
Showing only changes of commit 0a61ae5f64 - Show all commits

View File

@ -2,6 +2,8 @@ $primary-main: var(--mui-palette-primary-main);
$primary-light: var(--mui-palette-primary-light);
$primary-dark: var(--mui-palette-primary-dark);
$accent-color: #41bfc2;
$box-shadow-color: rgba(0, 0, 0, 0.1);
$border-color: #27323c;

View File

@ -2,6 +2,7 @@ import {
AppBar as AppBarMui,
Box,
Button,
Container,
Menu,
MenuItem,
Toolbar,
@ -117,7 +118,14 @@ export const AppBar = () => {
const isAuthenticated = authState?.loggedIn === true
return (
<AppBarMui position="fixed" className={styles.AppBar}>
<AppBarMui
position="fixed"
className={styles.AppBar}
sx={{
boxShadow: 'none'
}}
>
<Container maxWidth="xl" disableGutters={true}>
<Toolbar className={styles.toolbar}>
<Box className={styles.logoWrapper}>
<img src="/logo.png" alt="Logo" onClick={() => navigate('/')} />
@ -131,7 +139,7 @@ export const AppBar = () => {
}}
variant="contained"
>
Sign in
LOGIN
</Button>
)}
@ -223,6 +231,7 @@ export const AppBar = () => {
)}
</Box>
</Toolbar>
</Container>
</AppBarMui>
)
}

View File

@ -1,12 +1,15 @@
@import '../../colors.scss';
@import '../../sizes.scss';
.AppBar {
background-color: $background-color !important;
z-index: 1400 !important;
height: 60px;
height: $header-height;
flex-direction: row !important;
align-items: center;
border-bottom: solid 1px rgba(0, 0, 0, 0.075);
.toolbar {
flex-grow: 1;
display: flex;

View File

@ -0,0 +1,71 @@
import { Box, Button, Grid, Link } from '@mui/material'
import { Link as RouterLink } from 'react-router-dom'
import styles from './style.module.scss'
export const Footer = () => (
<footer className={`${styles.borderTop} ${styles.footer}`}>
<Grid
container
maxWidth="xl"
sx={{ padding: '75px 0' }}
columnSpacing={'50px'}
>
<Grid item xs={12} sm={2}>
<Link component={RouterLink} to={'/'}>
<Box className={styles.logo}>
<img src="/logo.png" alt="Logo" />
</Box>
</Link>
</Grid>
<Grid item xs={12} sm={7} component={'nav'}>
<div className={styles.nav}>
<RouterLink to={'/'}>
<Button variant={'text'} focusRipple={false}>
Home
</Button>
</RouterLink>
<RouterLink to={'/#'}>
<Button variant={'text'} focusRipple={false}>
Documentation
</Button>
</RouterLink>
<RouterLink to={'/#'}>
<Button variant={'text'} focusRipple={false}>
Source
</Button>
</RouterLink>
</div>
</Grid>
<Grid item xs={12} sm={3} className={styles.about}>
<div className={styles.links}>
<Link
href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
target="_blank"
>
<Button
sx={{
minWidth: '45px',
padding: '10px'
}}
variant={'contained'}
>
<img
src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
width="25"
alt="nostr logo"
height="25"
/>
</Button>
</Link>
</div>
</Grid>
</Grid>
<div className={`${styles.borderTop} ${styles.credits}`}>
Built by&nbsp;
<Link href="https://nostrdev.com/" target="_blank">
Nostr Dev
</Link>{' '}
2024.
</div>
</footer>
)

View File

@ -0,0 +1,83 @@
.borderTop {
border-top: solid 1px rgba(0, 0, 0, 0.075);
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
letter-spacing: 1px;
font-size: 14px;
line-height: 25px;
word-break: break-word;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
font-weight: 500;
}
.nav {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: none;
grid-gap: 15px;
> a {
min-height: 0;
}
button {
width: 100%;
justify-content: start;
}
}
.about {
font-weight: 500;
> p {
margin: 0;
}
}
.links {
> a + a {
margin-left: 25px;
}
}
.credits {
width: 100%;
text-align: center;
padding: 10px 0;
font-size: 12px;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
> a {
transition: ease 0.4s;
color: rgba(1, 170, 173, 0.75);
text-decoration-color: inherit;
&:hover {
color: #01aaad;
}
}
}
.logo {
width: 100%;
max-width: 150px;
height: auto;
> img {
width: 100%;
max-width: 150px;
height: auto;
}
}
@media (max-width: 992px) {
.logo {
max-width: 200px;
}
}

View File

@ -0,0 +1,58 @@
import { Box, Typography } from '@mui/material'
import { ReactElement } from 'react'
import styles from './style.module.scss'
interface CardComponentProps {
icon: ReactElement
title: ReactElement
description: ReactElement
actions?: ReactElement
}
export const CardComponent = ({
icon,
title,
description,
actions
}: CardComponentProps) => {
return (
<div className={styles.card}>
<Box
className={styles.content}
display={'flex'}
gap={'20px'}
flexDirection={'row'}
>
<Box className={styles.icon}>{icon}</Box>
<Box>
<Typography
variant="h3"
sx={{
fontWeight: 'bold',
fontSize: '24px',
letterSpacing: '1px',
lineHeight: '1.2'
}}
>
{title}
</Typography>
<Typography
sx={{
mt: '10px',
fontSize: '14px',
lineHeight: '25px',
letterSpacing: '1px',
fontWeight: '500'
}}
>
{description}
</Typography>
</Box>
</Box>
<Box mt={'auto'} textAlign={'right'}>
{actions}
</Box>
</div>
)
}

View File

@ -0,0 +1,43 @@
@import '../../../colors.scss';
.card {
border-radius: 32px;
padding: 25px;
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0);
border: solid 1px rgba(0, 0, 0, 0);
position: relative;
background: #f4f4f4;
transition: ease 0.4s;
display: flex;
flex-direction: column;
gap: 15px;
&:hover {
box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
background: #ffffff;
border: solid 1px rgba(0, 0, 0, 0.075);
.icon {
opacity: 1;
filter: saturate(1);
}
}
}
.content {
display: flex;
flex-direction: column;
gap: 25px;
}
.icon {
color: $accent-color;
transition: ease 0.4s;
font-size: 25px;
opacity: 0.5;
filter: saturate(0);
}

View File

@ -1,5 +1,5 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
@ -25,8 +25,6 @@ a:hover {
body {
margin: 0;
/* display: flex;
place-items: center; */
min-width: 320px;
min-height: 100vh;
background-color: #f4f4fb;
@ -70,8 +68,11 @@ button {
}
}
.main {
padding: 60px 0;
#root {
min-height: 100vh;
display: flex;
flex-direction: column;
background: white;
}
.hide-mobile {

View File

@ -1,4 +1,3 @@
import { Box } from '@mui/material'
import Container from '@mui/material/Container'
import { Event, kinds } from 'nostr-tools'
import { useEffect, useState } from 'react'
@ -28,6 +27,8 @@ import {
} from '../utils'
import { useAppSelector } from '../hooks'
import { SubCloser } from 'nostr-tools/abstract-pool'
import styles from './style.module.scss'
import { Footer } from '../components/Footer/Footer'
export const MainLayout = () => {
const dispatch: Dispatch = useDispatch()
@ -152,19 +153,10 @@ export const MainLayout = () => {
return (
<>
<AppBar />
<Box className="main">
<Container
sx={{
position: 'relative',
maxWidth: {
xs: '550px'
}
}}
>
<main className={styles.main}>
<Outlet />
</Container>
</Box>
</main>
<Footer />
</>
)
}

View File

@ -1,22 +1,31 @@
@import '../colors.scss';
@import '../sizes.scss';
.main {
padding: $header-height 0 0 0;
flex-grow: 1;
}
@font-face {
font-family: 'Avenir';
font-weight: normal;
src: local('Avenir'),
src:
local('Avenir'),
url(../assets/avenir-font/AvenirLTStd-Roman.otf) format('opentype');
}
@font-face {
font-family: 'Avenir';
font-weight: bold;
src: local('Avenir'),
src:
local('Avenir'),
url(../assets/avenir-font/AvenirLTStd-Black.otf) format('opentype');
}
@font-face {
font-family: 'Avenir';
font-weight: lighter;
src: local('Avenir'),
src:
local('Avenir'),
url(../assets/avenir-font/AvenirLTStd-Book.otf) format('opentype');
}

View File

@ -1,11 +1,19 @@
import { Box, Button, Typography, useTheme } from '@mui/material'
import {
Box,
Button,
Container,
Link,
Typography,
useTheme
} from '@mui/material'
import { useEffect } from 'react'
import { useSelector } from 'react-redux'
import { Link, useLocation, useNavigate } from 'react-router-dom'
import { useLocation, useNavigate } from 'react-router-dom'
import { appPublicRoutes } from '../../routes'
import { State } from '../../store/rootReducer'
import { saveVisitedLink } from '../../utils'
import styles from './style.module.scss'
import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
const bodyBackgroundColor = document.body.style.backgroundColor
@ -16,17 +24,200 @@ export const LandingPage = () => {
const theme = useTheme()
useEffect(() => {
saveVisitedLink(location.pathname, location.search)
}, [location])
const onSignInClick = async () => {
navigate(appPublicRoutes.login)
}
const cards = [
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 -32 576 576"
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="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V299.6L289.3 394.3C281.1 402.5 275.3 412.8 272.5 424.1L257.4 484.2C255.1 493.6 255.7 503.2 258.8 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM564.1 250.1C579.8 265.7 579.8 291 564.1 306.7L534.7 336.1L463.8 265.1L493.2 235.7C508.8 220.1 534.1 220.1 549.8 235.7L564.1 250.1zM311.9 416.1L441.1 287.8L512.1 358.7L382.9 487.9C378.8 492 373.6 494.9 368 496.3L307.9 511.4C302.4 512.7 296.7 511.1 292.7 507.2C288.7 503.2 287.1 497.4 288.5 491.1L303.5 431.8C304.9 426.2 307.8 421.1 311.9 416.1V416.1z"></path>
</svg>
),
title: <>Open Source</>,
description: (
<>
Code is MIT licenced and available at{' '}
<Link href="https://git.nostrdev.com/sigit/sigit.io">
https://git.nostrdev.com/sigit/sigit.io
</Link>
.
</>
)
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 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="M256.3-.0068C261.9-.0507 267.3 1.386 272.1 4.066L476.5 90.53C487.7 95.27 495.2 105.1 495.9 118.1C501.6 213.6 466.7 421.9 272.5 507.7C267.6 510.5 261.1 512.1 256.3 512C250.5 512.1 244.9 510.5 239.1 507.7C45.8 421.9 10.95 213.6 16.57 118.1C17.28 105.1 24.83 95.27 36.04 90.53L240.4 4.066C245.2 1.386 250.7-.0507 256.3-.0068H256.3zM266.1 363.4L364.2 263.6C392.2 234.7 390.5 186.6 358.1 159.5C331.8 135.8 291.5 140.2 266.1 166.5L256.4 176.1L245.9 166.5C221.4 140.2 180.2 135.8 153 159.5C121.5 186.6 119.8 234.7 147.8 263.6L244.2 363.4C251.2 369.5 260.8 369.5 266.1 363.4V363.4z"></path>
</svg>
),
title: <>Multi-Device</>,
description: (
<>
Create, Sign and Verify documents and files from any device with a
browser.
</>
)
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 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="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
</svg>
),
title: <>Secure &amp; Private</>,
description: (
<>
Documents are encrypted locally and can be accessed only by named
recipients.
</>
)
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 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="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
</svg>
),
title: <>Verifiable</>,
description: (
<>
Thanks to Schnorr Signatures and Web of Trust, SIGit is far more
auditable than traditional server-based offerings.
</>
)
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 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="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
</svg>
),
title: <>Works Offline</>,
description: (
<>
Presuming you have a hardware signing device, it is possible to
complete a SIGit round without an internet connection.
</>
)
},
{
icon: (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 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="M480 288H32c-17.62 0-32 14.38-32 32v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32v-128C512 302.4 497.6 288 480 288zM352 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S365.3 408 352 408zM416 408c-13.25 0-24-10.75-24-24s10.75-24 24-24s24 10.75 24 24S429.3 408 416 408zM480 32H32C14.38 32 0 46.38 0 64v128c0 17.62 14.38 32 32 32h448c17.62 0 32-14.38 32-32V64C512 46.38 497.6 32 480 32zM352 152c-13.25 0-24-10.75-24-24S338.8 104 352 104S376 114.8 376 128S365.3 152 352 152zM416 152c-13.25 0-24-10.75-24-24S402.8 104 416 104S440 114.8 440 128S429.3 152 416 152z"></path>
</svg>
),
title: <>Multi-Party Signing</>,
description: (
<>
Choose any number of Signers and Viewers, track the signature status,
send reminders, get notifications on completion.
</>
)
}
]
useEffect(() => {
saveVisitedLink(location.pathname, location.search)
}, [location])
return (
<div className={styles.landingPage}>
<Box>
<Container
maxWidth="xl"
className={styles.container}
sx={{
display: 'flex',
gap: '50px'
}}
>
<img src="/logo.png" alt="Logo" width={300} />
<Typography
variant="h1"
sx={{
letterSpacing: '1px',
fontWeight: 'bold',
fontSize: '2.5rem',
textAlign: 'center'
}}
>
SIGit - Secure &amp; Private Document Signing
<Typography
mt={'15px'}
sx={{
fontSize: '18px',
lineHeight: '25px',
letterSpacing: '1px'
}}
>
An open-source and self-hostable solution for secure document signing
and verification.
</Typography>
</Typography>
<Box display={'grid'} gap={'25px'} gridTemplateColumns="repeat(3, 1fr)">
{cards.map((c, i) => (
<CardComponent key={i} {...c} />
))}
</Box>
<Typography
sx={{
fontSize: '18px',
lineHeight: '25px',
letterSpacing: '1px'
}}
>
SIGit is a secure &amp; private document signing service where you can
create, sign, and verify any document from any device with a browser.
</Typography>
<Button variant="contained" onClick={onSignInClick}>
GET STARTED
</Button>
{/* <Box>
<Typography
sx={{
fontWeight: 'bold',
@ -70,18 +261,7 @@ export const LandingPage = () => {
exported document.
</Typography>
</Box>
{!authState?.loggedIn && (
<div className={styles.loginBottomBar}>
<Button
className={styles.loginBtn}
variant="contained"
onClick={onSignInClick}
>
GET STARTED
</Button>
</div>
)}
</div>
)} */}
</Container>
)
}

View File

@ -1,5 +1,12 @@
@import '../../colors.scss';
.container {
padding: 5vh 0%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.landingPage {
display: flex;
flex-direction: column;

View File

@ -1,4 +1,4 @@
import { Box, Button, TextField, Typography } from '@mui/material'
import { Box, Button, Container, TextField, Typography } from '@mui/material'
import { getPublicKey, nip19 } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
@ -352,7 +352,7 @@ export const Login = () => {
}
return (
<>
<Container maxWidth={'sm'}>
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
<div className={styles.loginPage}>
<Typography variant="h4">Welcome to Sigit</Typography>
@ -375,6 +375,6 @@ export const Login = () => {
</Button>
</Box>
</div>
</>
</Container>
)
}

1
src/sizes.scss Normal file
View File

@ -0,0 +1 @@
$header-height: 78.5px;

View File

@ -24,11 +24,29 @@ export const theme = extendTheme({
MuiButton: {
styleOverrides: {
root: {
borderRadius: '2rem'
padding: '10px 20px',
fontSize: '14px',
fontWeight: 'bold',
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)',
lineHeight: '1.25',
borderRadius: '4px',
':hover': {
transform: 'scale(1.02)',
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)'
}
},
text: {
color: '#00000059',
background: 'transparent',
':hover': {
background: '#47cccf',
color: 'white'
}
},
contained: {
background: '#47cccf',
':hover': {
background: '#150a1a'
background: '#47cccf'
}
},
outlined: {
@ -40,5 +58,14 @@ export const theme = extendTheme({
}
}
}
},
typography: {
fontFamily: [
'system-ui',
'Avenir',
'Helvetica',
'Arial',
'sans-serif'
].join(', ')
}
})