fix: reduce mui usage, implement design updates

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',
+        boxShadow: 'none'
-        '--AppBar-height': isAuthenticated ? '60px' : ''
       }}
     >
-      <Container maxWidth="xl" disableGutters={true}>
+      <Container>
-        <Toolbar className={styles.toolbar}>
+        <Toolbar className={styles.toolbar} disableGutters={true}>
           <Box className={styles.logoWrapper}>
             <img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
           </Box>

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;

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 (
     <div className={styles.card}>
-      <Box
+      <h3 className={styles.title}>
-        className={styles.content}
+        <div className={styles.icon}>{icon}</div>
-        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>
+      </h3>
-          <Typography
+      <p className={styles.description}>{description}</p>
-            sx={{
-              mt: '10px',
-              fontSize: '14px',
-              lineHeight: '25px',
-              letterSpacing: '1px',
-              fontWeight: '500'
-            }}
-          >
-            {description}
-          </Typography>
-        </Box>
-      </Box>
       <Box mt={'auto'} textAlign={'right'}>
         {actions}
       </Box>

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 {
+  word-break: break-word;
-    box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.1);
-    background: #ffffff;
-    border: solid 1px rgba(0, 0, 0, 0.075);
 
-    .icon {
+  &:hover {
-      opacity: 1;
+    background: $primary-main;
-      filter: saturate(1);
+    color: white;
+
+    .icon,
+    a {
+      color: inherit;
+    }
+
+    a:hover {
+      text-decoration: underline;
     }
   }
 }
 
-.content {
+a {
-  display: flex;
+  color: inherit;
-  flex-direction: column;
-
-  gap: 25px;
-  word-break: break-word;
 }
 
 .icon {
-  color: $accent-color;
+  color: $primary-main;
-  transition: ease 0.4s;
   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;
 }

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'

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;
+  background-color: $overlay-background-color;
-  padding: 4px;
 
   width: 100%;
   max-width: 500px;

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;
-}
+  padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
-
+  background-color: $body-background-color;
-@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');
 }

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{' '}
-          <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
+    <Container className={styles.container}>
-      maxWidth="xl"
+      <img className={styles.logo} src="/logo.svg" alt="Logo" width={300} />
-      className={styles.container}
+      <div>
-      sx={{
-        display: 'flex',
-        gap: '50px'
-      }}
-    >
-      <img src="/logo.svg" alt="Logo" width={300} />
         <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'
           }}
-        >
+        ></Typography>
-          An open-source and self-hostable solution for secure document signing
+      </div>
-          and verification.
-        </Typography>
-      </Typography>
       <Box
         display={'grid'}
         gap={'25px'}
@@ -198,16 +195,10 @@ export const LandingPage = () => {
         ))}
       </Box>
 
-      <Typography
+      <p className={styles.description}>
-        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>
+      </p>
 
       <Button
         sx={{

src/pages/landing/style.module.scss

@@ -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);
+}

src/styles/colors.scss

@@ -1,50 +1,15 @@
-$primary-main: var(--mui-palette-primary-main);
+$primary-main: #4c82a3;
-$primary-light: var(--mui-palette-primary-light);
+$primary-light: #5e8eab;
-$primary-dark: var(--mui-palette-primary-dark);
+$primary-dark: #447592;
-
-$accent-color: #41bfc2;
 
 $box-shadow-color: rgba(0, 0, 0, 0.1);
 $border-color: #27323c;
 
-$page-background-color: #f4f4fb;
+$body-background-color: #ededed;
-$modal-input-background: #f4f4fb;
+$overlay-background-color: #ffffff;
-$background-color: #fff;
 
-$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;

src/styles/sizes.scss

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

src/theme/index.ts

@@ -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: {
+  breakpoints: {
-    fontFamily: [
+    values: {
-      'system-ui',
+      xs: 0,
-      'Avenir',
+      sm: 600,
-      'Helvetica',
+      md: 900,
-      'Arial',
+      lg: 1200,
-      'sans-serif'
+      xl: 1420
-    ].join(', ')
+    }
   }
 })