Added hover/active state on settings tooltips

TODO.md

@@ -2,9 +2,7 @@
 
 ## Short term
 
-- [Payload] Fix SDK endpoint not working in prod
+- [Scripts] Can't run the scripts using node (ts-node?)
-- Add hover/active styling for settings options in topbar + language override
-- Highlight currently selected language option in language override tooltip
 - Save cookies for longer than just the session
 
 ## Mid term

src/components/AppLayout/components/Topbar/components/CurrencySelector.astro

@@ -23,7 +23,10 @@ const { currentCurrency } = Astro.locals;
     {
       cache.currencies.map((id) => (
         <a
-          class:list={{ current: currentCurrency === id }}
+          class:list={{
+            current: currentCurrency === id,
+            "pressable-link": true,
+          }}
           href={`?action-currency=${id}`}
           data-astro-prefetch="tap">
           {`${id} (${formatCurrency(id)})`}

src/components/AppLayout/components/Topbar/components/LanguageSelector.astro

@@ -23,7 +23,7 @@ const { t } = await getI18n(currentLocale);
     {
       cache.locales.map(({ id }) => (
         <a
-          class:list={{ current: currentLocale === id }}
+          class:list={{ current: currentLocale === id, "pressable-link": true }}
           href={`?action-lang=${id}`}
           data-astro-prefetch="tap">
           {formatLocale(id)}

src/components/AppLayout/components/Topbar/components/ThemeSelector.astro

@@ -11,13 +11,19 @@ const { t } = await getI18n(currentLocale);
 
 <Tooltip trigger="click">
   <div id="content" slot="tooltip-content">
-    <a class:list={{ current: currentTheme === "dark" }} href="?action-theme=dark">
+    <a
+      class:list={{ current: currentTheme === "dark", "pressable-link": true }}
+      href="?action-theme=dark">
       {t("global.theme.dark")}
     </a>
-    <a class:list={{ current: currentTheme === "auto" }} href="?action-theme=auto">
+    <a
+      class:list={{ current: currentTheme === "auto", "pressable-link": true }}
+      href="?action-theme=auto">
       {t("global.theme.auto")}
     </a>
-    <a class:list={{ current: currentTheme === "light" }} href="?action-theme=light">
+    <a
+      class:list={{ current: currentTheme === "light", "pressable-link": true }}
+      href="?action-theme=light">
       {t("global.theme.light")}
     </a>
   </div>

src/components/LanguageOverride.astro

@@ -3,6 +3,7 @@ import MasoActor from "components/Maso/MasoActor.astro";
 import Tooltip from "components/Tooltip.astro";
 import Button from "components/Button.astro";
 import { formatLocale } from "src/utils/format";
+import { getI18n } from "src/i18n/i18n";
 
 interface Props {
   currentLang: string;
@@ -11,6 +12,7 @@ interface Props {
 }
 
 const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
+const { t } = await getI18n(Astro.locals.currentLocale);
 ---
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
@@ -22,16 +24,21 @@ const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
     <div id="tooltip-content" slot="tooltip-content">
       {
         availableLanguages.map((id) => (
-          <MasoActor class:list={{ current: id === currentLang }} href={getPartialUrl(id)}>
+          <MasoActor href={getPartialUrl(id)}>
-            {formatLocale(id)}
+            <p class:list={{ current: id === currentLang, "pressable-link": true }}>
+              {formatLocale(id)}
+            </p>
           </MasoActor>
         ))
       }
     </div>
   </Tooltip>
   <p class="high-contrast-text">
-    {/* TODO: Translate this wording */}
+    {
-    This content is available is {availableLanguages.length} languages.
+      t("global.languageOverride.availableLanguages", {
+        count: availableLanguages.length,
+      })
+    }
   </p>
 </div>
 
@@ -47,7 +54,7 @@ const { currentLang, getPartialUrl, availableLanguages } = Astro.props;
       display: grid;
       gap: 0.5em;
 
-      & > .current {
+      & .current {
         color: var(--color-base-750);
         text-decoration: underline 0.08em var(--color-base-650);
       }

src/i18n/wordings-keys.ts

@@ -86,4 +86,5 @@ export type WordingKey =
   | "global.meta.description"
   | "global.loading"
   | "pages.tableOfContent.sceneBreak"
-  | "pages.tableOfContent.break";
+  | "pages.tableOfContent.break"
+  | "global.languageOverride.availableLanguages";