From e1d34b9562119ab7fee64d705f108520b0c75f31 Mon Sep 17 00:00:00 2001
From: cpojer <christoph.pojer@gmail.com>
Date: Thu, 30 Jan 2025 12:43:36 +0900
Subject: [PATCH] InlineLink updates.

GitOrigin-RevId: e300128dfe5a145b7d03d433b68f963b0e5fd629
---
 ui/InlineLink.tsx | 17 ++++++++++++++++-
 ui/Reload.tsx     | 15 +++------------
 ui/cssVar.tsx     |  3 +++
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/ui/InlineLink.tsx b/ui/InlineLink.tsx
index c7121b07..2c27219f 100644
--- a/ui/InlineLink.tsx
+++ b/ui/InlineLink.tsx
@@ -27,6 +27,7 @@ type InlineLinkProps = Readonly<{
   className?: string;
   gap?: Gap;
   hover?: boolean;
+  inline?: true;
   onClick?: (event?: MouseEvent) => void;
   pixelBorderSize?: number;
   ref?: RefCallback<HTMLAnchorElement> | RefObject<HTMLAnchorElement | null>;
@@ -42,6 +43,7 @@ export const useInlineLink = ({
   className: initialClassName,
   gap: _gap,
   hover,
+  inline,
   pixelBorderSize,
   selected,
   selectedText,
@@ -59,8 +61,17 @@ export const useInlineLink = ({
         selectedText && 'selected-text',
         active && 'active',
         alignCenter && alignCenterStyle,
+        inline && inlineStyle,
       ),
-    [active, alignCenter, hover, initialClassName, selected, selectedText],
+    [
+      active,
+      alignCenter,
+      hover,
+      initialClassName,
+      inline,
+      selected,
+      selectedText,
+    ],
   );
   const gap = _gap === true ? defaultGap : _gap;
 
@@ -217,6 +228,10 @@ const alignCenterStyle = css`
   align-items: center;
 `;
 
+const inlineStyle = css`
+  display: inline;
+`;
+
 export const KeyboardShortcut = ({
   button,
   shortcut,
diff --git a/ui/Reload.tsx b/ui/Reload.tsx
index 29af1f0f..43bf781c 100644
--- a/ui/Reload.tsx
+++ b/ui/Reload.tsx
@@ -1,7 +1,6 @@
-import { css, cx } from '@emotion/css';
 import { useMemo } from 'react';
 import { hasGamepad } from './controls/setupGamePad.tsx';
-import { useInlineLink } from './InlineLink.tsx';
+import InlineLink, { useInlineLink } from './InlineLink.tsx';
 
 const _reload = () => location.reload();
 
@@ -17,19 +16,11 @@ export default function Reload({ reload = _reload }: { reload?: () => void }) {
       ) : (
         <fbt desc="Reload description">
           Tap here to{' '}
-          <a
-            className={cx(className, inlineDisplayStyle)}
-            onClick={reload}
-            {...linkProps}
-          >
+          <InlineLink inline onClick={reload} {...linkProps}>
             reload the game
-          </a>.
+          </InlineLink>.
         </fbt>
       )}
     </>
   );
 }
-
-const inlineDisplayStyle = css`
-  display: inline;
-`;
diff --git a/ui/cssVar.tsx b/ui/cssVar.tsx
index 57e6b666..35cc3107 100644
--- a/ui/cssVar.tsx
+++ b/ui/cssVar.tsx
@@ -45,6 +45,7 @@ type GlobalCSSVariableName =
   | 'background-color-bright'
   | 'background-color-dark'
   | 'background-color-light'
+  | 'background-color-light7'
   | 'background-color-light9'
   | 'background-color'
   | 'border-color-light'
@@ -112,6 +113,7 @@ ${cssVar('background-color-active', '#a7c2f5')}
 ${cssVar('background-color-bright', '#ffffff')}
 ${cssVar('background-color-dark', 'rgba(40, 40, 40, 1)')}
 ${cssVar('background-color-light', 'rgba(255, 255, 255, 0.8)')}
+${cssVar('background-color-light7', 'rgba(255, 255, 255, 0.7)')}
 ${cssVar('background-color-light9', 'rgba(255, 255, 255, 0.9)')}
 ${cssVar('background-color', '#f2f2f2')}
 ${cssVar('border-color-light', 'rgba(0, 0, 0, 0.2)')}
@@ -145,6 +147,7 @@ ${cssVar('background-color-active', '#596884')}
 ${cssVar('background-color-bright', '#121212')}
 ${cssVar('background-color-dark', '#d7d7d7')}
 ${cssVar('background-color-light', 'rgba(50, 50, 50, 0.8)')}
+${cssVar('background-color-light7', 'rgba(50, 50, 50, 0.7)')}
 ${cssVar('background-color-light9', 'rgba(50, 50, 50, 0.9)')}
 ${cssVar('background-color', '#28282b')}