diff options
| -rw-r--r-- | frontend/src/components/Markdown.tsx | 9 | ||||
| -rw-r--r-- | frontend/src/components/settings/pages/general/Updater.tsx | 48 |
2 files changed, 38 insertions, 19 deletions
diff --git a/frontend/src/components/Markdown.tsx b/frontend/src/components/Markdown.tsx index cf6657aa..9842750d 100644 --- a/frontend/src/components/Markdown.tsx +++ b/frontend/src/components/Markdown.tsx @@ -1,4 +1,4 @@ -import { Focusable, Navigation } from '@decky/ui'; +import { Focusable, Navigation, findClass, findClassByName } from '@decky/ui'; import { FunctionComponent, useRef } from 'react'; import ReactMarkdown, { Options as ReactMarkdownOptions } from 'react-markdown'; import remarkGfm from 'remark-gfm'; @@ -8,6 +8,9 @@ interface MarkdownProps extends ReactMarkdownOptions { } const Markdown: FunctionComponent<MarkdownProps> = (props) => { + const eventDetailsBodyClassName = findClassByName('EventDetailsBody') || undefined; + const eventLinkClassName = findClass('43088', 'Link'); + return ( <Focusable> <ReactMarkdown @@ -25,8 +28,10 @@ const Markdown: FunctionComponent<MarkdownProps> = (props) => { Navigation.NavigateToExternalWeb(aRef.current!.href); }} style={{ display: 'inline' }} + focusClassName="steam-focus" + className={eventDetailsBodyClassName} > - <a ref={aRef} {...nodeProps.node.properties}> + <a ref={aRef} {...nodeProps.node.properties} className={eventLinkClassName}> {nodeProps.children} </a> </Focusable> diff --git a/frontend/src/components/settings/pages/general/Updater.tsx b/frontend/src/components/settings/pages/general/Updater.tsx index 59756a57..3cd58ab6 100644 --- a/frontend/src/components/settings/pages/general/Updater.tsx +++ b/frontend/src/components/settings/pages/general/Updater.tsx @@ -1,14 +1,4 @@ -import { - Carousel, - DialogButton, - Field, - FocusRing, - Focusable, - ProgressBarWithInfo, - Spinner, - findSP, - showModal, -} from '@decky/ui'; +import { Carousel, DialogButton, Field, Focusable, ProgressBarWithInfo, Spinner, findSP, showModal } from '@decky/ui'; import { Suspense, lazy, useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { FaExclamation } from 'react-icons/fa'; @@ -23,9 +13,31 @@ const MarkdownRenderer = lazy(() => import('../../../Markdown')); function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | null; closeModal?: () => {} }) { const SP = findSP(); const { t } = useTranslation(); + return ( - <Focusable onCancelButton={closeModal}> - <FocusRing> + <> + <style> + {` +.steam-focus { + outline-offset: 3px; + outline: 2px solid rgba(255, 255, 255, 0.6); + animation: pulseOutline 1.2s infinite ease-in-out; +} + +@keyframes pulseOutline { + 0% { + outline: 2px solid rgba(255, 255, 255, 0.6); + } + 50% { + outline: 2px solid rgba(255, 255, 255, 1); + } + 100% { + outline: 2px solid rgba(255, 255, 255, 0.6); + } +}`} + </style> + + <Focusable onCancelButton={closeModal}> <Carousel fnItemRenderer={(id: number) => ( <Focusable @@ -35,7 +47,9 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n overflowY: 'scroll', display: 'flex', justifyContent: 'center', - margin: '40px', + margin: '30px', + padding: '0 15px', + backgroundColor: 'rgba(37, 40, 46, 0.5)', }} > <div> @@ -57,11 +71,11 @@ function PatchNotesModal({ versionInfo, closeModal }: { versionInfo: VerInfo | n nItemMarginX={0} initialColumn={0} autoFocus={true} - fnGetColumnWidth={() => SP.innerWidth} + fnGetColumnWidth={() => SP.innerWidth - SP.innerWidth * (10 / 100)} name={t('Updater.decky_updates') as string} /> - </FocusRing> - </Focusable> + </Focusable> + </> ); } |