josh/automatisch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(Layout): add custom footer

Browse Source
This commit is contained in:
Ali BARIN
2025-03-10 09:36:40 +00:00
parent 035ed6fee3
commit 91fd10ebda
6 changed files with 157 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/web/public/index.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
@@ -25,6 +25,7 @@
crossorigin crossorigin
type="font/ttf" type="font/ttf"
/> />
<link <link
rel="preload" rel="preload"
href="/fonts/Inter-Medium.ttf" href="/fonts/Inter-Medium.ttf"
@@ -32,6 +33,7 @@
crossorigin crossorigin
type="font/ttf" type="font/ttf"
/> />
<link <link
rel="preload" rel="preload"
href="/fonts/Inter-Bold.ttf" href="/fonts/Inter-Bold.ttf"
@@ -39,6 +41,7 @@
crossorigin crossorigin
type="font/ttf" type="font/ttf"
/> />
<style> <style>
@font-face { @font-face {
font-family: 'Inter'; font-family: 'Inter';
@@ -63,6 +66,10 @@
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
.tsqd-parent-container .tsqd-open-btn-container {
transform: translateY(-40px);
}
</style> </style>
</head> </head>
<body> <body>

1
packages/web/src/components/CustomLogo/style.ee.js
View File

@@ -1,4 +1,5 @@
import styled from '@emotion/styled'; import styled from '@emotion/styled';
export const LogoImage = styled('img')(() => ({ export const LogoImage = styled('img')(() => ({
maxWidth: 200, maxWidth: 200,
maxHeight: 22, maxHeight: 22,

126
packages/web/src/components/Layout/Footer/index.jsx Normal file
View File

@@ -0,0 +1,126 @@
import styled from '@emotion/styled';
import Box from '@mui/material/Box';
import Divider from '@mui/material/Divider';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import SvgIcon from '@mui/material/SvgIcon';
import Typography from '@mui/material/Typography';
import useAutomatischConfig from 'hooks/useAutomatischConfig';
import useFormatMessage from 'hooks/useFormatMessage';
import useVersion from 'hooks/useVersion';
const LogoImage = styled('img')(() => ({
maxWidth: 'auto',
height: 22,
}));
const LayoutFooter = () => {
const { data: config, isPending: isConfigPending } = useAutomatischConfig();
const formatMessage = useFormatMessage();
const links = [
{
key: 'docs',
show: !!config.data.footerDocsLink,
href: config.data.footerDocsLink,
text: formatMessage('footer.docsLinkText'),
},
{
key: 'terms-of-services',
show: !!config.data.footerTosLink,
href: config.data.footerTosLink,
text: formatMessage('footer.tosLinkText'),
},
{
key: 'privacy-policy',
show: !!config.data.footerPrivacyPolicyLink,
href: config.data.footerPrivacyPolicyLink,
text: formatMessage('footer.privacyPolicyLinkText'),
},
{
key: 'imprint',
show: !!config.data.footerImprintLink,
href: config.data.footerImprintLink,
text: formatMessage('footer.imprintLinkText'),
},
,
];
if (config.data.enableFooter !== true) return null;
return (
<Box mt="auto" position="sticky" bottom={0}>
<Box bgcolor="common.white" mt={4}>
<Divider />
<Box
sx={{
display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
gap: 1,
justifyContent: 'space-between',
alignItems: 'center',
padding: '10px 20px',
bgcolor: (theme) => theme.palette.footer.main,
color: (theme) => theme.palette.footer.text,
}}
>
<div>
{config.data.footerLogoSvgData && (
<>
<LogoImage
data-test="footer-logo"
src={`data:image/svg+xml;utf8,${encodeURIComponent(config.data.footerLogoSvgData)}`}
/>
</>
)}
</div>
<div>
{config.data.footerCopyrightText && (
<Typography
variant="body1"
sx={{ flexGrow: 1, textAlign: 'center' }}
>
{config.data.footerCopyrightText}
</Typography>
)}
</div>
<Box
sx={{
display: 'flex',
gap: '15px',
flexWrap: { xs: 'wrap', sm: 'unset' },
justifyContent: 'center',
}}
>
{links
.filter((link) => link.show)
.map((link) => (
<Link
key={link.key}
href={link.href}
color="inherit"
variant="body1"
target="_blank"
rel="noreferrer noopener"
sx={{
textDecoration: 'none',
'&:hover': { textDecoration: 'underline' },
}}
>
{link.text}
</Link>
))}
</Box>
</Box>
</Box>
</Box>
);
};
export default LayoutFooter;

3
packages/web/src/components/Layout/index.jsx
View File

@@ -19,6 +19,8 @@ import AppBar from 'components/AppBar';
import Drawer from 'components/Drawer'; import Drawer from 'components/Drawer';
import useAutomatischConfig from 'hooks/useAutomatischConfig'; import useAutomatischConfig from 'hooks/useAutomatischConfig';
import Footer from './Footer';
const additionalDrawerLinkIcons = { const additionalDrawerLinkIcons = {
Security: SecurityIcon, Security: SecurityIcon,
ArrowBackIosNew: ArrowBackIosNewIcon, ArrowBackIosNew: ArrowBackIosNewIcon,
@@ -141,6 +143,7 @@ function PublicLayout({ children }) {
<Stack flex={1}> <Stack flex={1}>
<Toolbar /> <Toolbar />
{children} {children}
<Footer />
</Stack> </Stack>
</Box> </Box>
</> </>

12
packages/web/src/components/ThemeProvider/index.jsx
View File

@@ -37,6 +37,18 @@ const customizeTheme = (theme, config) => {
config.palettePrimaryDark, config.palettePrimaryDark,
); );
overrideIfGiven(
shallowDefaultTheme,
'palette.footer.main',
config.footerBackgroundColor,
);
overrideIfGiven(
shallowDefaultTheme,
'palette.footer.text',
config.footerTextColor,
);
return shallowDefaultTheme; return shallowDefaultTheme;
}; };

7
packages/web/src/styles/theme.js
View File

@@ -1,10 +1,13 @@
import { deepmerge } from '@mui/utils'; import { deepmerge } from '@mui/utils';
import { createTheme, alpha } from '@mui/material/styles'; import { createTheme, alpha } from '@mui/material/styles';
import { cardActionAreaClasses } from '@mui/material/CardActionArea'; import { cardActionAreaClasses } from '@mui/material/CardActionArea';
const referenceTheme = createTheme(); const referenceTheme = createTheme();
export const primaryMainColor = '#0059F7'; export const primaryMainColor = '#0059F7';
export const primaryLightColor = '#4286FF'; export const primaryLightColor = '#4286FF';
export const primaryDarkColor = '#001F52'; export const primaryDarkColor = '#001F52';
export const defaultTheme = createTheme({ export const defaultTheme = createTheme({
palette: { palette: {
primary: { primary: {
@@ -57,6 +60,10 @@ export const defaultTheme = createTheme({
paper: '#fff', paper: '#fff',
default: '#FAFAFA', default: '#FAFAFA',
}, },
footer: {
main: '#FFFFFF',
text: '#001F52',
},
}, },
shape: { shape: {
borderRadius: 4, borderRadius: 4,