From 9189ff33bc714c795f8acedd85995c0152882a35 Mon Sep 17 00:00:00 2001 From: enes Date: Mon, 29 Jul 2024 11:22:04 +0200 Subject: [PATCH] fix: reduce mui usage, implement design updates --- src/components/AppBar/AppBar.tsx | 9 ++- src/components/AppBar/style.module.scss | 2 +- .../Landing/CardComponent/CardComponent.tsx | 39 ++--------- .../Landing/CardComponent/style.module.scss | 55 +++++++++------- src/layouts/Main.tsx | 1 - src/layouts/modal/style.module.scss | 5 +- src/layouts/style.module.scss | 66 ++++++++++++------- src/pages/landing/index.tsx | 63 ++++++++---------- src/pages/landing/style.module.scss | 22 ++++++- src/styles/colors.scss | 47 ++----------- src/styles/sizes.scss | 3 +- src/theme/index.ts | 25 ++++--- 12 files changed, 160 insertions(+), 177 deletions(-) diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx index 0fe2e56..e3f8d53 100644 --- a/src/components/AppBar/AppBar.tsx +++ b/src/components/AppBar/AppBar.tsx @@ -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' }} > - - + + Logo navigate('/')} /> diff --git a/src/components/AppBar/style.module.scss b/src/components/AppBar/style.module.scss index 8c3c791..6b15c93 100644 --- a/src/components/AppBar/style.module.scss +++ b/src/components/AppBar/style.module.scss @@ -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; diff --git a/src/components/Landing/CardComponent/CardComponent.tsx b/src/components/Landing/CardComponent/CardComponent.tsx index be39ae0..3eea421 100644 --- a/src/components/Landing/CardComponent/CardComponent.tsx +++ b/src/components/Landing/CardComponent/CardComponent.tsx @@ -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 (
- - {icon} - - - {title} - - - {description} - - - +

+
{icon}
+ {title} +

+

{description}

{actions} diff --git a/src/components/Landing/CardComponent/style.module.scss b/src/components/Landing/CardComponent/style.module.scss index c019bc2..ba6822a 100644 --- a/src/components/Landing/CardComponent/style.module.scss +++ b/src/components/Landing/CardComponent/style.module.scss @@ -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; } diff --git a/src/layouts/Main.tsx b/src/layouts/Main.tsx index 57d3597..0c3cf86 100644 --- a/src/layouts/Main.tsx +++ b/src/layouts/Main.tsx @@ -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' diff --git a/src/layouts/modal/style.module.scss b/src/layouts/modal/style.module.scss index a8348e2..adc3088 100644 --- a/src/layouts/modal/style.module.scss +++ b/src/layouts/modal/style.module.scss @@ -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; diff --git a/src/layouts/style.module.scss b/src/layouts/style.module.scss index 296c7b9..085492c 100644 --- a/src/layouts/style.module.scss +++ b/src/layouts/style.module.scss @@ -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; } diff --git a/src/pages/landing/index.tsx b/src/pages/landing/index.tsx index 287c979..e684b69 100644 --- a/src/pages/landing/index.tsx +++ b/src/pages/landing/index.tsx @@ -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{' '} - + https://git.nostrdev.com/sigit/sigit.io - + . ) @@ -151,25 +152,24 @@ export const LandingPage = () => { }, [location]) return ( - - Logo - - Secure & Private Document Signing + + Logo +
+ + Secure & Private Document Signing + +

+ An open-source and self-hostable solution for secure document signing + and verification. +

{ lineHeight: '25px', letterSpacing: '1px' }} - > - An open-source and self-hostable solution for secure document signing - and verification. - - + > +
{ ))} - +

SIGit is a secure & private document signing service where you can create, sign, and verify any document from any device with a browser. - +