Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
9 changed files with 68 additions and 41 deletions
Showing only changes of commit 5d59ffce28 - Show all commits

View File

@ -1,6 +1,8 @@
@import '../../styles/sizes.scss';
.container {
width: 100%;
max-width: 1400px;
padding-inline: 10px;
padding-inline: $default-container-padding-inline;
margin-inline: auto;
}

View File

@ -1,4 +1,3 @@
import { Box } from '@mui/material'
import { ReactElement } from 'react'
import styles from './style.module.scss'
@ -23,9 +22,7 @@ export const CardComponent = ({
{title}
</h3>
<p className={styles.description}>{description}</p>
<Box mt={'auto'} textAlign={'right'}>
{actions}
</Box>
{actions ? <div className={styles.actions}>{actions}</div> : null}
</div>
)
}

View File

@ -28,6 +28,11 @@
text-decoration: underline;
}
}
button {
transition:
color 0s,
background-color 0.2s;
}
}
a {
@ -37,6 +42,10 @@ a {
.icon {
color: $primary-main;
font-size: 25px;
line-height: 1;
height: 25px;
width: 25px;
}
.title {
@ -53,3 +62,8 @@ a {
font-size: 14px;
font-weight: 500;
}
.actions {
margin-top: auto;
text-align: right;
}

View File

@ -3,7 +3,26 @@
@import '../styles/typography.scss';
:root {
color: $text-color;
// Import colors once as variables
--primary-main: #{$primary-main};
--primary-light: #{$primary-light};
--primary-dark: #{$primary-dark};
--secondary-main: #{$secondary-main};
--box-shadow-color: #{$box-shadow-color};
--border-color: #{$border-color};
--body-background-color: #{$body-background-color};
--overlay-background-color: #{$overlay-background-color};
--text-color: #{$text-color};
--input-text-color: #{$input-text-color};
--review-feedback-correct: #{$review-feedback-correct};
--review-feedback-incorrect: #{$review-feedback-incorrect};
--review-feedback-neutral: #{$review-feedback-neutral};
--review-feedback-selected-color: #{$review-feedback-selected-color};
}
body {

View File

@ -1,4 +1,4 @@
import { Box, Button, Typography } from '@mui/material'
import { Box, Button } from '@mui/material'
import { useEffect } from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import { appPublicRoutes } from '../../routes'
@ -154,30 +154,12 @@ export const LandingPage = () => {
return (
<Container className={styles.container}>
<img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
<div>
<Typography
variant="h1"
sx={{
letterSpacing: '1px',
fontWeight: 'bold',
fontSize: '2.5rem',
textAlign: 'center'
}}
>
Secure &amp; Private Document Signing
</Typography>
<div className={styles.titleSection}>
<h1 className={styles.title}>Secure &amp; Private Document Signing</h1>
<p className={styles.subTitle}>
An open-source and self-hostable solution for secure document signing
and verification.
</p>
<Typography
mt={'15px'}
sx={{
fontSize: '18px',
lineHeight: '25px',
letterSpacing: '1px'
}}
></Typography>
</div>
<Box
display={'grid'}
@ -203,7 +185,8 @@ export const LandingPage = () => {
<Button
sx={{
fontSize: '22px',
padding: '16px 32px'
padding: '16px 32px',
backgroundColor: 'var(--secondary-main)'
}}
variant="contained"
onClick={onSignInClick}

View File

@ -1,4 +1,5 @@
@import '../../styles/colors.scss';
@import '../../styles/sizes.scss';
.container {
display: flex;
@ -6,7 +7,7 @@
position: relative;
padding-block: 50px;
padding-inline: 50px;
padding-inline: 50px + $default-container-padding-inline;
flex-direction: column;
align-items: center;
justify-content: center;
@ -17,6 +18,16 @@
max-width: 500px;
}
.titleSection {
display: flex;
flex-direction: column;
gap: 15px;
}
.title {
font-size: 2.5rem;
}
.subTitle {
font-size: 16px;
font-weight: 500;

View File

@ -2,6 +2,8 @@ $primary-main: #4c82a3;
$primary-light: #5e8eab;
$primary-dark: #447592;
$secondary-main: #7d54a3;
$box-shadow-color: rgba(0, 0, 0, 0.1);
$border-color: #27323c;

View File

@ -1,2 +1,4 @@
$header-height: 65px;
$body-vertical-padding: 25px;
$default-container-padding-inline: 10px;

View File

@ -34,31 +34,28 @@ export const theme = extendTheme({
MuiButton: {
styleOverrides: {
root: {
transition: 'ease 0.4s',
padding: '10px 20px',
fontSize: '14px',
fontWeight: 'bold',
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)',
fontWeight: 500,
padding: '10px 20px',
transition: 'ease 0.2s',
boxShadow: 'unset',
lineHeight: '1.25',
borderRadius: '4px',
':hover': {
transform: 'scale(1.02)',
boxShadow: '0 0 8px 0 rgba(0, 0, 0, 0)'
background: 'var(--primary-light)',
boxShadow: 'unset'
}
},
text: {
color: '#00000059',
color: 'inherit',
background: 'transparent',
':hover': {
background: '#47cccf',
color: 'white'
}
},
contained: {
background: '#47cccf',
':hover': {
background: '#47cccf'
}
background: 'var(--primary-main)',
color: 'white'
},
outlined: {
':hover': {