InlineLink updates.

GitOrigin-RevId: e300128dfe5a145b7d03d433b68f963b0e5fd629
nkzw-tech · Jan 30, 2025 · e1d34b9 · e1d34b9
1 parent 028db44
commit e1d34b9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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')}