diff --git a/src/common/constants.js b/src/common/constants.js index a6a432caa..74f11e34d 100644 --- a/src/common/constants.js +++ b/src/common/constants.js @@ -106,3 +106,5 @@ export const ALL = '*'; export const URL_REGISTRY_DOC_LINK = 'https://docs.openconceptlab.org/en/latest/oclapi/apireference/urlregistry.html' export const TBV3_ANNOUNCEMENT_LETTER_URL = 'https://openconceptlab.org/blog/letter-to-the-ocl-community?utm_source=tbv3&utm_medium=banner&utm_campaign=subscription_dates' export const TBV3_ANNOUNCEMENT_PRICING_URL = 'https://openconceptlab.org/pricing?utm_source=tbv3&utm_medium=banner&utm_campaign=subscription_dates' +export const TERMS_OF_USE_URL = 'https://openconceptlab.org/terms-of-use' +export const PRIVACY_POLICY_URL = 'https://openconceptlab.org/privacy-policy' diff --git a/src/components/app/Footer.jsx b/src/components/app/Footer.jsx index a2b3c3eb7..9a75cec1e 100644 --- a/src/components/app/Footer.jsx +++ b/src/components/app/Footer.jsx @@ -1,25 +1,61 @@ import React from 'react'; -import { Divider } from '@mui/material'; +import { useTranslation } from 'react-i18next'; +import { Divider, Link } from '@mui/material'; import { Copyright as CopyrightIcon } from '@mui/icons-material'; import { get } from 'lodash'; import { getAppliedServerConfig } from '../../common/utils'; +import { TERMS_OF_USE_URL, PRIVACY_POLICY_URL } from '../../common/constants'; import AppVersions from './AppVersions'; import './Footer.scss'; const DEFAULT_FOOTER_TEXT = `${new Date().getFullYear()} Open Concept Lab`; +// Bootstrap's a:hover and a:focus color would otherwise win over MUI's +const LEGAL_LINK_SX = { whiteSpace: 'nowrap', '&:hover, &:focus': { color: 'primary.main' } }; + +// The footer's height in Footer.scss while it fits on one row. Narrower +// screens stack it onto more rows, and --app-height in index.scss subtracts +// the extra, so pages end above it. +const ROW_HEIGHT = 30; +const EXTRA_HEIGHT_VAR = '--footer-extra-height'; + const Footer = () => { + const { t } = useTranslation(); + const ref = React.useRef(null); const text = get(getAppliedServerConfig(), 'info.site.footerText', DEFAULT_FOOTER_TEXT); const isDefault = text === DEFAULT_FOOTER_TEXT; + + React.useLayoutEffect(() => { + const el = ref.current; + const root = document.documentElement.style; + const update = () => root.setProperty(EXTRA_HEIGHT_VAR, `${Math.max(0, el.offsetHeight - ROW_HEIGHT)}px`); + update(); + const observer = new ResizeObserver(update); + observer.observe(el); + return () => { + observer.disconnect(); + root.removeProperty(EXTRA_HEIGHT_VAR); + }; + }, []); + return ( -