From 2938214ca39d9e7a8ea5ed06efc0947c76da8f33 Mon Sep 17 00:00:00 2001
From: Biliane Silva <61093873+biliesilva@users.noreply.github.com>
Date: Tue, 10 Dec 2024 23:59:36 +0000
Subject: [PATCH] [UI] renamed public alpha to a dynamic version number on the
 Store (#1187)

* [FIX] Remove outdated translation keys from English locale

* [UI] Simplify AppVersion component by removing styling and translation

* [UI] Update styles for App version Badge in TopNavBar component

* [UI] Integrate AppVersion component into TopNavBar for version display

* [UI] Remove AppVersion component from GeneralSettings screen

* [UI] Remove unused translation hook from AppVersion component
---
 public/locales/en/translation.json                 |  4 ----
 src/frontend/components/UI/AppVersion/index.tsx    | 14 +-------------
 .../components/UI/TopNavBar/index.module.scss      |  6 +++---
 src/frontend/components/UI/TopNavBar/index.tsx     |  5 +++--
 .../Settings/sections/GeneralSettings/index.tsx    |  3 ---
 5 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index c71483f07..2b7b0d9e5 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -455,7 +455,6 @@
             }
         },
         "otp": "One Time Passcode",
-        "publicAlpha": "Public Alpha",
         "Sync": "Sync",
         "syncing": "Syncing...",
         "turnAnalyticsOff": "Turn off",
@@ -518,9 +517,6 @@
     "importGameErrorMessageExecutable": "Game Executable not found, importing game is not possible",
     "importGameErrorTitle": "Import Game Error",
     "info": {
-        "hyperplay": {
-            "version": "HyperPlay Version"
-        },
         "save-sync": {
             "searching": "Trying to detect the correct save folder (click to cancel)"
         },
diff --git a/src/frontend/components/UI/AppVersion/index.tsx b/src/frontend/components/UI/AppVersion/index.tsx
index 094516f0b..f1803aefd 100644
--- a/src/frontend/components/UI/AppVersion/index.tsx
+++ b/src/frontend/components/UI/AppVersion/index.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
 
 const storage = window.localStorage
 let lastVersion = storage.getItem('last_version')?.replaceAll('"', '')
@@ -8,7 +7,6 @@ if (lastVersion === undefined) {
 }
 
 export default function AppVersion() {
-  const { t } = useTranslation()
   const [appVersion, setAppVersion] = useState(lastVersion)
 
   useEffect(() => {
@@ -18,15 +16,5 @@ export default function AppVersion() {
     })
   }, [])
 
-  return (
-    <div
-      className="body-sm"
-      style={{
-        color: 'var(--color-neutral-400)',
-        margin: 'var(--space-xl) 0px var(--space-md) 0px'
-      }}
-    >
-      {t('info.hyperplay.version', 'HyperPlay Version') + `: ${appVersion}`}
-    </div>
-  )
+  return <div>{appVersion}</div>
 }
diff --git a/src/frontend/components/UI/TopNavBar/index.module.scss b/src/frontend/components/UI/TopNavBar/index.module.scss
index d186eb112..a91dc4322 100644
--- a/src/frontend/components/UI/TopNavBar/index.module.scss
+++ b/src/frontend/components/UI/TopNavBar/index.module.scss
@@ -37,10 +37,10 @@
 }
 
 .alphaBadge {
-  background-color: var(--color-tertiary-700);
-  padding: var(--space-3xs) var(--space-sm);
+  background-color: var(--color-secondary-700);
+  padding: var(--space-2xs) var(--space-sm);
   border-radius: var(--space-xs);
-  margin-left: var(--space-sm);
+  margin: var(--space-xs) var(--space-md);
 }
 
 .hpLogo {
diff --git a/src/frontend/components/UI/TopNavBar/index.tsx b/src/frontend/components/UI/TopNavBar/index.tsx
index 9f800112c..12fc02604 100644
--- a/src/frontend/components/UI/TopNavBar/index.tsx
+++ b/src/frontend/components/UI/TopNavBar/index.tsx
@@ -16,6 +16,7 @@ import {
 } from 'frontend/constants'
 import webviewNavigationStore from 'frontend/store/WebviewNavigationStore'
 import { extractMainDomain } from '../../../helpers/extract-main-domain'
+import AppVersion from '../AppVersion'
 
 const TopNavBar = observer(() => {
   const { t } = useTranslation()
@@ -63,8 +64,8 @@ const TopNavBar = observer(() => {
           className={styles.hpTextLogo}
         />
         <div className={styles.alphaBadge}>
-          <div className={`caption ${styles.alphaCaption}`}>
-            {t(`hyperplay.publicAlpha`, `Public Alpha`)}
+          <div className={`menu-item ${styles.alphaCaption}`}>
+            <AppVersion />
           </div>
         </div>
         <>
diff --git a/src/frontend/screens/Settings/sections/GeneralSettings/index.tsx b/src/frontend/screens/Settings/sections/GeneralSettings/index.tsx
index 641990f1d..1090872a9 100644
--- a/src/frontend/screens/Settings/sections/GeneralSettings/index.tsx
+++ b/src/frontend/screens/Settings/sections/GeneralSettings/index.tsx
@@ -17,7 +17,6 @@ import {
   UseDarkTrayIcon,
   WinePrefixesBasePath
 } from '../../components'
-import AppVersion from 'frontend/components/UI/AppVersion'
 import AutoLaunchHyperPlay from '../../components/AutoLaunchHyperPlay'
 
 export default function GeneralSettings() {
@@ -25,8 +24,6 @@ export default function GeneralSettings() {
 
   return (
     <>
-      <AppVersion />
-
       <div className="settingSubheader settingsSectionHeader title">
         {t('settings.navbar.general')}
       </div>