From 606c3cc53f145db6688e96a9cfeaefeeda83e902 Mon Sep 17 00:00:00 2001
From: DrMint <29893320+DrMint@users.noreply.github.com>
Date: Sat, 16 Mar 2024 09:41:22 +0100
Subject: [PATCH] Added hover/active state on settings tooltips

---
 TODO.md                                         |  4 +---
 .../Topbar/components/CurrencySelector.astro    |  5 ++++-
 .../Topbar/components/LanguageSelector.astro    |  2 +-
 .../Topbar/components/ThemeSelector.astro       | 12 +++++++++---
 src/components/LanguageOverride.astro           | 17 ++++++++++++-----
 src/i18n/wordings-keys.ts                       |  3 ++-
 6 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/TODO.md b/TODO.md
index 2e40e7d..15bb6d9 100644
--- a/TODO.md
+++ b/TODO.md
@@ -2,9 +2,7 @@
 
 ## Short term
 
-- [Payload] Fix SDK endpoint not working in prod
-- Add hover/active styling for settings options in topbar + language override
-- Highlight currently selected language option in language override tooltip
+- [Scripts] Can't run the scripts using node (ts-node?)
 - Save cookies for longer than just the session
 
 ## Mid term
diff --git a/src/components/AppLayout/components/Topbar/components/CurrencySelector.astro b/src/components/AppLayout/components/Topbar/components/CurrencySelector.astro
index d2c1edc..4d7f2b0 100644
--- a/src/components/AppLayout/components/Topbar/components/CurrencySelector.astro
+++ b/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)})`}
diff --git a/src/components/AppLayout/components/Topbar/components/LanguageSelector.astro b/src/components/AppLayout/components/Topbar/components/LanguageSelector.astro
index 0d8df3b..dd5ae0d 100644
--- a/src/components/AppLayout/components/Topbar/components/LanguageSelector.astro
+++ b/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)}
diff --git a/src/components/AppLayout/components/Topbar/components/ThemeSelector.astro b/src/components/AppLayout/components/Topbar/components/ThemeSelector.astro
index 50723ff..5ff11b9 100644
--- a/src/components/AppLayout/components/Topbar/components/ThemeSelector.astro
+++ b/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>
diff --git a/src/components/LanguageOverride.astro b/src/components/LanguageOverride.astro
index 4bdac5b..1b421fd 100644
--- a/src/components/LanguageOverride.astro
+++ b/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)}>
-            {formatLocale(id)}
+          <MasoActor href={getPartialUrl(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);
       }
diff --git a/src/i18n/wordings-keys.ts b/src/i18n/wordings-keys.ts
index 7f4df7f..440b95c 100644
--- a/src/i18n/wordings-keys.ts
+++ b/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";