filip(fix): add new footer designs

docusaurus.config.ts

@@ -99,6 +99,18 @@ const config: Config = {
 			},
 			copyright: `Copyright © ${new Date().getFullYear()} IOG, Inc.`,
 			links: [
+				{
+					label: 'Report an issue',
+					href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=bug&projects=&template=issue-report.md&title=',
+				},
+				{
+					label: 'Share feedback',
+					href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=feedback&projects=&template=feedback.md&title= ',
+				},
+				{
+					label: 'Got a story?',
+					href: 'https://github.com/input-output-hk/quality-engineering/issues/new?assignees=&labels=blog&projects=&template=blog.md&title= ',
+				},
 				{
 					label: 'Cookie Policy',
 					href: 'pathname:///iog-cookie-policy.pdf',

src/css/custom.css

@@ -135,29 +135,87 @@ div:has(> .dsla-search-wrapper) {
 	--ifm-navbar-sidebar-width: 100vw;
 }
 
+.footer {
+	padding-top: 60px;
+}
+
 .footer .container {
 	display: flex;
 	flex-direction: column;
 	gap: 1.5rem;
 }
 
-.footer__bottom {
-	display: contents;
-	text-align: left;
+.footer__link-item,
+.footer__copyright {
+	font-size: 0.875rem;
 }
 
 .footer__links {
+	display: grid;
+	grid-template-columns: repeat(2, 160px);
+	grid-template-rows: auto;
+	row-gap: 12px;
+	column-gap: 24px;
+}
+
+@media (min-width: 769px) {
+	.footer__link-item:nth-of-type(1) {
+		grid-column: 1;
+		grid-row: 1;
+	}
+	.footer__link-item:nth-of-type(2) {
+		grid-column: 1;
+		grid-row: 2;
+	}
+	.footer__link-item:nth-of-type(3) {
+		grid-column: 1;
+		grid-row: 3;
+	}
+	.footer__link-item:nth-of-type(4) {
+		grid-column: 2;
+		grid-row: 1;
+	}
+	.footer__link-item:nth-of-type(5) {
+		grid-column: 2;
+		grid-row: 2;
+	}
+	.footer__link-item:nth-of-type(6) {
+		grid-column: 2;
+		grid-row: 3;
+	}
+}
+
+@media (max-width: 768px) {
+	.footer__links {
+		grid-template-columns: repeat(1, 160px);
+	}
+
+	.footer__link-item:nth-of-type(4) {
+		margin-top: 24px;
+	}
+
+	.footer__logo img {
+		content: url('@site/static/img/logo-only-symbol.svg');
+	}
+}
+
+.footer__link-item {
+	color: var(--color-white-1) !important;
 	text-align: left;
-	margin: 0;
+	width: 100%;
 }
 
-.footer__bottom > div:first-child {
-	order: -1;
-	/* docusaurus theme uses !important so we need to override it */
-	margin: 0 !important;
+.footer__link-item svg {
+	display: none !important;
 }
 
-.footer__link-item,
-.footer__copyright {
-	font-size: 0.875rem;
+.footer__link-separator {
+	display: none !important;
+}
+
+.footer__bottom {
+	display: flex;
+	border-top: 1px solid var(--ifm-footer-color);
+	justify-content: space-between;
+	align-items: center;
 }

src/hooks/useMediaQuery.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export default function useMediaQuery(query: string) {
+	const [match, setMatch] = useState<boolean>(false);
+
+	useEffect(() => {
+		const matchMedia = window.matchMedia(query);
+		const listener = (e: MediaQueryListEvent) => {
+			if (process.env.NODE_ENV !== 'production') {
+				console.info(`Media query change: ${query}`, e.matches);
+			}
+			setMatch(e.matches);
+		};
+		matchMedia.addEventListener('change', listener);
+		setMatch(matchMedia.matches);
+		return () => matchMedia.removeEventListener('change', listener);
+	}, [query]);
+	return match;
+}

src/theme/Footer/Logo/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import type { Props } from '@theme/Footer/Logo';
+
+import styles from './styles.module.css';
+import useMediaQuery from '@site/src/hooks/useMediaQuery';
+
+function LogoImage({ logo }: Props) {
+	const { withBaseUrl } = useBaseUrlUtils();
+	const sources = {
+		light: withBaseUrl(logo.src),
+		dark: withBaseUrl(logo.srcDark ?? logo.src),
+	};
+	return (
+		<ThemedImage
+			className={clsx('footer__logo', logo.className)}
+			alt={logo.alt}
+			sources={sources}
+			width={logo.width}
+			height={logo.height}
+			style={logo.style}
+		/>
+	);
+}
+
+export default function FooterLogo({ logo }: Props): JSX.Element {
+	const isTabletUp = useMediaQuery('(min-width: 767px)');
+	console.log(logo);
+	return logo.href ? (
+		<Link href={logo.href} className={styles.footerLogoLink} target={logo.target}>
+			<LogoImage logo={logo} />
+		</Link>
+	) : (
+		<LogoImage logo={isTabletUp ? logo : { alt: 'IOG', src: 'img/logo-only-symbol.svg' }} />
+	);
+}

src/theme/Footer/Logo/styles.module.css

@@ -0,0 +1,9 @@
+.footerLogoLink {
+  opacity: 0.5;
+  transition: opacity var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+}
+
+.footerLogoLink:hover {
+  opacity: 1;
+}