feat(Layout): add custom footer

2025-03-10 09:36:40 +00:00
parent 035ed6fee3
commit 91fd10ebda
6 changed files with 157 additions and 1 deletions
--- a/packages/web/public/index.html
+++ b/packages/web/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
@@ -25,6 +25,7 @@
      crossorigin
      type="font/ttf"
    />
+
    <link
      rel="preload"
      href="/fonts/Inter-Medium.ttf"
@@ -32,6 +33,7 @@
      crossorigin
      type="font/ttf"
    />
+
    <link
      rel="preload"
      href="/fonts/Inter-Bold.ttf"
@@ -39,6 +41,7 @@
      crossorigin
      type="font/ttf"
    />
+
    <style>
      @font-face {
        font-family: 'Inter';
@@ -63,6 +66,10 @@
        font-style: normal;
        font-display: swap;
      }
+
+      .tsqd-parent-container .tsqd-open-btn-container {
+        transform: translateY(-40px);
+      }
    </style>
  </head>
  <body>
--- a/packages/web/src/components/CustomLogo/style.ee.js
+++ b/packages/web/src/components/CustomLogo/style.ee.js
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+
 export const LogoImage = styled('img')(() => ({
  maxWidth: 200,
  maxHeight: 22,
--- a/packages/web/src/components/Layout/Footer/index.jsx
+++ b/packages/web/src/components/Layout/Footer/index.jsx
@@ -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;
--- a/packages/web/src/components/Layout/index.jsx
+++ b/packages/web/src/components/Layout/index.jsx
@@ -19,6 +19,8 @@ import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 import useAutomatischConfig from 'hooks/useAutomatischConfig';

+import Footer from './Footer';
+
 const additionalDrawerLinkIcons = {
  Security: SecurityIcon,
  ArrowBackIosNew: ArrowBackIosNewIcon,
@@ -141,6 +143,7 @@ function PublicLayout({ children }) {
        <Stack flex={1}>
          <Toolbar />
          {children}
+          <Footer />
        </Stack>
      </Box>
    </>
--- a/packages/web/src/components/ThemeProvider/index.jsx
+++ b/packages/web/src/components/ThemeProvider/index.jsx
@@ -37,6 +37,18 @@ const customizeTheme = (theme, config) => {
    config.palettePrimaryDark,
  );

+  overrideIfGiven(
+    shallowDefaultTheme,
+    'palette.footer.main',
+    config.footerBackgroundColor,
+  );
+
+  overrideIfGiven(
+    shallowDefaultTheme,
+    'palette.footer.text',
+    config.footerTextColor,
+  );
+
  return shallowDefaultTheme;
 };

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