Update to make all links look the same

This commit is contained in:
Connor Yoh 2025-08-28 17:24:32 +01:00
parent 48d9e86c6c
commit 32b0d8c9b9
2 changed files with 33 additions and 14 deletions

View File

@ -1,4 +1,4 @@
import { Flex } from '@mantine/core'; import { Flex, Text } from '@mantine/core';
import React from 'react'; import React from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useCookieConsent } from '../../hooks/useCookieConsent'; import { useCookieConsent } from '../../hooks/useCookieConsent';
@ -93,22 +93,11 @@ export default function Footer({
{t('legal.accessibility', 'Accessibility')} {t('legal.accessibility', 'Accessibility')}
</a> </a>
)} )}
{cookiePolicy && (
<a
className="footer-link px-3"
target="_blank"
rel="noopener noreferrer"
href={cookiePolicy}
>
{t('legal.cookie', 'Cookie Preferecences')}
</a>
)}
{analyticsEnabled && ( {analyticsEnabled && (
<button <button
className="footer-link px-3" className="footer-link px-3"
id="cookieBanner" id="cookieBanner"
onClick={showCookiePreferences} onClick={showCookiePreferences}
style={{ border: 'none', background: 'none', cursor: 'pointer' }}
> >
{t('legal.showCookieBanner', 'Cookie Preferences')} {t('legal.showCookieBanner', 'Cookie Preferences')}
</button> </button>
@ -117,9 +106,9 @@ export default function Footer({
{/* Powered by section */} {/* Powered by section */}
<Flex justify="center" align="center" gap={"sm"} > <Flex justify="center" align="center" gap={"sm"} >
<span>{t('poweredBy', 'Powered by')} </span> <Text fw={600}>{t('poweredBy', 'Powered by')} </Text>
<a href="https://stirlingpdf.com" className="stirling-link"> <a href="https://stirlingpdf.com" className="stirling-link">
Stirling PDF Stirling
</a> </a>
</Flex> </Flex>
</div> </div>

View File

@ -11,3 +11,33 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace; monospace;
} }
/* Footer link styling - make buttons and links look identical */
.footer-link {
color: var(--mantine-color-blue-6);
text-decoration: none;
transition: color 0.2s ease;
border: none;
background: none;
cursor: pointer;
font-family: inherit;
font-size: inherit;
padding: 0;
}
.footer-link:hover {
color: var(--mantine-color-blue-8);
text-decoration: underline;
}
.stirling-link {
color: var(--mantine-color-blue-6);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.stirling-link:hover {
color: var(--mantine-color-blue-8);
text-decoration: underline;
}