Removed FocusRing from Decky Changelog Modal and use Focusable instead which fixes: #685 (#779)

* fix(Updater): Remove `FocusRing` component and use `Focusable` instead

* feat(Markdown): Add Link `class` to a tag for a mentain a Steam UI colors palette

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>

frontend/src/components/settings/pages/general/Updater.tsx

@@ -1,14 +1,4 @@
-import {
+import { Carousel, DialogButton, Field, Focusable, ProgressBarWithInfo, Spinner, findSP, showModal } from '@decky/ui';
-  Carousel,
-  DialogButton,
-  Field,
-  FocusRing,
-  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>
+    </>
   );
 }