sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

fix: reduce mui usage, implement design updates

Browse Source
This commit is contained in:
enes 2024-07-29 11:22:04 +02:00
parent e54eced800
commit 9189ff33bc
12 changed files with 160 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/AppBar/AppBar.tsx
View File

@ -2,7 +2,6 @@ import {
AppBar as AppBarMui,
Box,
Button,
Container,
Menu,
MenuItem,
Toolbar,
@ -35,6 +34,7 @@ import {
} from '../../utils'
import styles from './style.module.scss'
import { setUserRobotImage } from '../../store/userRobotImage/action'
import { Container } from '../Container'
const metadataController = new MetadataController()
@ -122,12 +122,11 @@ export const AppBar = () => {
position="fixed"
className={styles.AppBar}
sx={{
boxShadow: 'none',
'--AppBar-height': isAuthenticated ? '60px' : ''
boxShadow: 'none'
}}
>
<Container maxWidth="xl" disableGutters={true}>
<Toolbar className={styles.toolbar}>
<Container>
<Toolbar className={styles.toolbar} disableGutters={true}>
<Box className={styles.logoWrapper}>
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
</Box>

2
src/components/AppBar/style.module.scss
View File

@ -2,7 +2,7 @@
@import '../../styles/sizes.scss';
.AppBar {
background-color: $background-color !important;
background-color: $overlay-background-color !important;
height: $header-height;
flex-direction: row !important;
align-items: center;

37
src/components/Landing/CardComponent/CardComponent.tsx
View File

@ -1,4 +1,4 @@
import { Box, Typography } from '@mui/material'
import { Box } from '@mui/material'
import { ReactElement } from 'react'
import styles from './style.module.scss'
@ -18,38 +18,11 @@ export const CardComponent = ({
}: 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'
}}
>
<h3 className={styles.title}>
<div className={styles.icon}>{icon}</div>
{title}
</Typography>
<Typography
sx={{
mt: '10px',
fontSize: '14px',
lineHeight: '25px',
letterSpacing: '1px',
fontWeight: '500'
}}
>
{description}
</Typography>
</Box>
</Box>
</h3>
<p className={styles.description}>{description}</p>
<Box mt={'auto'} textAlign={'right'}>
{actions}
</Box>

55
src/components/Landing/CardComponent/style.module.scss
View File

@ -1,44 +1,55 @@
@import '../../../styles/colors.scss';
.card {
border-radius: 32px;
border-radius: 4px;
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;
background: $overlay-background-color;
transition: ease 0.4s;
transition: ease 0.2s;
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);
word-break: break-word;
.icon {
opacity: 1;
filter: saturate(1);
&:hover {
background: $primary-main;
color: white;
.icon,
a {
color: inherit;
}
a:hover {
text-decoration: underline;
}
}
}
.content {
display: flex;
flex-direction: column;
gap: 25px;
word-break: break-word;
a {
color: inherit;
}
.icon {
color: $accent-color;
transition: ease 0.4s;
color: $primary-main;
font-size: 25px;
opacity: 0.5;
filter: saturate(0);
}
.title {
display: flex;
flex-direction: row;
grid-gap: 10px;
align-items: center;
font-weight: bold;
font-size: 20px;
}
.description {
font-size: 14px;
font-weight: 500;
}

1
src/layouts/Main.tsx
View File

@ -1,4 +1,3 @@
import Container from '@mui/material/Container'
import { Event, kinds } from 'nostr-tools'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'

5
src/layouts/modal/style.module.scss
View File

@ -1,11 +1,12 @@
@import '../../styles/colors.scss';
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 4px;
background-color: $overlay-background-color;
width: 100%;
max-width: 500px;

66
src/layouts/style.module.scss
View File

@ -1,31 +1,47 @@
@import '../styles/colors.scss';
@import '../styles/sizes.scss';
@import '../styles/typography.scss';
:root {
color: $text-color;
}
body {
color: $text-color;
font-family: $font-familiy;
letter-spacing: $letter-spacing;
font-size: $body-font-size;
font-weight: $body-font-weight;
line-height: $body-line-height;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
word-break: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
margin: 0;
}
a {
font-weight: 500;
color: $primary-main;
text-decoration: none;
:hover {
color: $primary-light;
text-decoration: underline;
text-decoration-color: $primary-light;
}
}
.main {
padding: $header-height 0 0 0;
flex-grow: 1;
}
@font-face {
font-family: 'Avenir';
font-weight: normal;
src:
local('Avenir'),
url(../assets/avenir-font/AvenirLTStd-Roman.otf) format('opentype');
}
@font-face {
font-family: 'Avenir';
font-weight: bold;
src:
local('Avenir'),
url(../assets/avenir-font/AvenirLTStd-Black.otf) format('opentype');
}
@font-face {
font-family: 'Avenir';
font-weight: lighter;
src:
local('Avenir'),
url(../assets/avenir-font/AvenirLTStd-Book.otf) format('opentype');
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
background-color: $body-background-color;
}

43
src/pages/landing/index.tsx
View File

@ -1,10 +1,11 @@
import { Box, Button, Container, Link, Typography } from '@mui/material'
import { Box, Button, Typography } from '@mui/material'
import { useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { appPublicRoutes } from '../../routes'
import { saveVisitedLink } from '../../utils'
import styles from './style.module.scss'
import { CardComponent } from '../../components/Landing/CardComponent/CardComponent'
import { Container } from '../../components/Container'
import styles from './style.module.scss'
export const LandingPage = () => {
const navigate = useNavigate()
@ -32,9 +33,9 @@ export const LandingPage = () => {
description: (
<>
Code is MIT licenced and available at{' '}
<Link href="https://git.nostrdev.com/sigit/sigit.io">
<a href="https://git.nostrdev.com/sigit/sigit.io">
https://git.nostrdev.com/sigit/sigit.io
</Link>
</a>
.
</>
)
@ -151,15 +152,9 @@ export const LandingPage = () => {
}, [location])
return (
<Container
maxWidth="xl"
className={styles.container}
sx={{
display: 'flex',
gap: '50px'
}}
>
<img src="/logo.svg" alt="Logo" width={300} />
<Container className={styles.container}>
<img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
<div>
<Typography
variant="h1"
sx={{
@ -170,6 +165,11 @@ export const LandingPage = () => {
}}
>
Secure &amp; Private Document Signing
</Typography>
<p className={styles.subTitle}>
An open-source and self-hostable solution for secure document signing
and verification.
</p>
<Typography
mt={'15px'}
sx={{
@ -177,11 +177,8 @@ export const LandingPage = () => {
lineHeight: '25px',
letterSpacing: '1px'
}}
>
An open-source and self-hostable solution for secure document signing
and verification.
</Typography>
</Typography>
></Typography>
</div>
<Box
display={'grid'}
gap={'25px'}
@ -198,16 +195,10 @@ export const LandingPage = () => {
))}
</Box>
<Typography
sx={{
fontSize: '18px',
lineHeight: '25px',
letterSpacing: '1px'
}}
>
<p className={styles.description}>
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>
</p>
<Button
sx={{

22
src/pages/landing/style.module.scss
View File

@ -1,9 +1,29 @@
@import '../../styles/colors.scss';
.container {
display: flex;
gap: 45px;
position: relative;
padding: 5vh 0%;
padding-block: 50px;
padding-inline: 50px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
width: 100%;
max-width: 500px;
}
.subTitle {
font-size: 16px;
font-weight: 500;
}
.description {
font-size: 14px;
text-align: center;
color: rgba(0, 0, 0, 0.5);
}

47
src/styles/colors.scss
View File

@ -1,50 +1,15 @@
$primary-main: var(--mui-palette-primary-main);
$primary-light: var(--mui-palette-primary-light);
$primary-dark: var(--mui-palette-primary-dark);
$accent-color: #41bfc2;
$primary-main: #4c82a3;
$primary-light: #5e8eab;
$primary-dark: #447592;
$box-shadow-color: rgba(0, 0, 0, 0.1);
$border-color: #27323c;
$page-background-color: #f4f4fb;
$modal-input-background: #f4f4fb;
$background-color: #fff;
$body-background-color: #ededed;
$overlay-background-color: #ffffff;
$text-color: #3e3e3e;
$text-color: #434343;
$input-text-color: #717171;
$info-text-color: #4169e1;
$icon-color: #c1c1c1;
$zap-icon-color: #ffd700;
$btn-background-color: $primary-main;
$btn-color: #fff;
$progress-box-background-color: $primary-main;
$progress-box-inner-background-color: $primary-dark;
$rank-progress-background-color: #445c76;
$correct-answer-background-color: $primary-light;
$incorrect-answer-background-color: #e84d67;
$incorrect-answer-label-color: #fff;
$checkbox-border-color: #ccc;
$checkbox-hover-border-color: #888;
$checkbox-checked-background-color: $primary-main;
$checkbox-checked-color: #fff;
$comment-notice-background-color: #0d6efd;
$comment-notice-color: #fff;
$comment-divider-color: #eee;
$activated-topic-background-color: var(--mui-palette-info-dark);
$error-msg-color: red;
$suggestion-box-heading-color: #dfe0e0;
$callOut-success-background: $primary-light;
$callOut-success-color: $primary-dark;
$review-feedback-correct: #178b13;
$review-feedback-incorrect: #d82222;

3
src/styles/sizes.scss
View File

@ -1 +1,2 @@
$header-height: var(--AppBar-height, 78.5px);
$header-height: 65px;
$body-vertical-padding: 25px;

25
src/theme/index.ts
View File

@ -8,7 +8,9 @@ export const theme = extendTheme({
light: {
palette: {
primary: {
main: '#291334'
main: '#4c82a3',
light: '#5e8eab',
dark: '447592'
},
info: {
main: '#3abff8'
@ -66,15 +68,20 @@ export const theme = extendTheme({
}
}
}
},
MuiTypography: {
defaultProps: {
fontFamily: ['Roboto', 'system-ui', 'sans-serif'].join(',')
}
}
},
typography: {
fontFamily: [
'system-ui',
'Avenir',
'Helvetica',
'Arial',
'sans-serif'
].join(', ')
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 900,
lg: 1200,
xl: 1420
}
}
})