diff --git a/src/components/Container/style.module.scss b/src/components/Container/style.module.scss
index b431d3c..4e574be 100644
--- a/src/components/Container/style.module.scss
+++ b/src/components/Container/style.module.scss
@@ -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;
}
diff --git a/src/components/Landing/CardComponent/CardComponent.tsx b/src/components/Landing/CardComponent/CardComponent.tsx
index 3eea421..c6d909a 100644
--- a/src/components/Landing/CardComponent/CardComponent.tsx
+++ b/src/components/Landing/CardComponent/CardComponent.tsx
@@ -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}
{description}
-
- {actions}
-
+ {actions ? {actions}
: null}
)
}
diff --git a/src/components/Landing/CardComponent/style.module.scss b/src/components/Landing/CardComponent/style.module.scss
index ba6822a..e77f02d 100644
--- a/src/components/Landing/CardComponent/style.module.scss
+++ b/src/components/Landing/CardComponent/style.module.scss
@@ -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;
+}
diff --git a/src/layouts/style.module.scss b/src/layouts/style.module.scss
index 085492c..1dac6a1 100644
--- a/src/layouts/style.module.scss
+++ b/src/layouts/style.module.scss
@@ -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 {
diff --git a/src/pages/landing/index.tsx b/src/pages/landing/index.tsx
index e684b69..c473909 100644
--- a/src/pages/landing/index.tsx
+++ b/src/pages/landing/index.tsx
@@ -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 (
-
-
- Secure & Private Document Signing
-
+
+
Secure & Private Document Signing
An open-source and self-hostable solution for secure document signing
and verification.
-
{