diff --git a/packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx b/packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx index c042f1c699..4934e93d57 100644 --- a/packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx +++ b/packages/special-pages/pages/special-error/app/components/AdvancedInfo.jsx @@ -1,25 +1,25 @@ import { h } from 'preact' import { useRef, useEffect } from 'preact/hooks' import { useTypedTranslation } from '../types' -import { Text, Link } from '../../../../shared/components/Text/Text' +import { Text } from '../../../../shared/components/Text/Text' import { useMessaging } from '../providers/MessagingProvider' import { useAdvancedInfoHeading, useAdvancedInfoContent } from '../hooks/ErrorStrings' import styles from './AdvancedInfo.module.css' export function VisitSiteLink() { - /** @type {import("preact/hooks").MutableRef} */ - const spanRef = useRef(null) + /** @type {import("preact/hooks").MutableRef} */ + const linkRef = useRef(null) const { messaging } = useMessaging() const { t } = useTypedTranslation() useEffect(() => { - if (!spanRef.current) return; - const span = spanRef.current; + if (!linkRef.current) return; + const link = linkRef.current; const controller = new AbortController(); window.addEventListener('advanced-info-animation-end', () => { - span.scrollIntoView({ behavior: 'smooth' }) + link.scrollIntoView({ behavior: 'smooth' }) }, { signal: controller.signal }) return () => { @@ -28,9 +28,9 @@ export function VisitSiteLink() { }, []) return ( - messaging?.visitSite()}> - {t('visitSiteButton')} - + messaging?.visitSite()} ref={linkRef}> + {t('visitSiteButton')} + ) } diff --git a/packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css b/packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css index c3209dad4d..726b7c8421 100644 --- a/packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css +++ b/packages/special-pages/pages/special-error/app/components/AdvancedInfo.module.css @@ -24,6 +24,9 @@ .visitSite { color: var(--visit-site-color); cursor: pointer; + font-size: calc(13 * var(--px-in-rem)); + letter-spacing: calc(-0.08 * var(--px-in-rem)); + line-height: calc(16 * var(--px-in-rem)); text-decoration: underline; } @@ -77,4 +80,11 @@ & .content { text-align: center; } -} \ No newline at end of file + + & .visitSite { + font-size: calc(16 * var(--px-in-rem)); + font-weight: 400; + letter-spacing: calc(-0.31 * var(--px-in-rem)); + line-height: calc(21 * var(--px-in-rem)); + } +} diff --git a/packages/special-pages/shared/components/Text/Text.js b/packages/special-pages/shared/components/Text/Text.js index 4f4b046807..6ca49e853f 100644 --- a/packages/special-pages/shared/components/Text/Text.js +++ b/packages/special-pages/shared/components/Text/Text.js @@ -17,20 +17,3 @@ export function Text ({ as: Comp = 'p', variant, strictSpacing = true, className ) } - -/** - * @param {object} props - * @param {Omit} [props.variant] - * @param {string} [props.className] - * @param {boolean} [props.strictSpacing] - Apply Design System letter spacing. Default: true - * @param {import('preact').JSX.MouseEventHandler} props.onClick - * @param {import("preact").ComponentChild} [props.children] - * @param {import("preact").ComponentProps<"a">} [props.anchorProps] - */ -export function Link ({ variant, strictSpacing = true, className, children, onClick, anchorProps = {} }) { - return ( - - {children} - - ) -}