🌐 About page new version

public/locales/en/layout/modals/about.json

@@ -6,6 +6,7 @@
 	"key": "Shortcut key",
 	"action": "Action",
 	"keybinds": "Keybinds",
+	"documentation": "Documentation",
 	"actions": {
 		"toggleTheme": "Toggle light/dark mode",
 		"focusSearchBar": "Focus on search bar",
@@ -20,6 +21,9 @@
 		"i18n": "Loaded I18n translation namespaces",
 		"locales": "Configured I18n locales",
 		"experimental_disableEditMode": "<b>EXPERIMENTAL</b>: Disable edit mode"
+	},
+	"version": {
+		"new": "New: {{newVersion}}",
+		"dropdown": "Version {{newVersion}} is available! Current Version is {{currentVersion}}"
 	}
-
 }

src/components/Dashboard/Modals/AboutModal/AboutModal.tsx

@@ -167,7 +167,7 @@ export const AboutModal = ({ opened, closeModal, newVersionAvailable }: AboutMod
             variant="default"
             fullWidth
           >
-            Documentation
+            {t('layout/modals/about:documentation')}
           </Button>
         </Grid.Col>
 
@@ -203,6 +203,7 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
   const { attributes } = usePackageAttributesStore();
   const { editModeEnabled } = useEditModeInformationStore();
   const { primaryColor } = useColorTheme();
+  const { t } = useTranslation(['layout/modals/about']);
 
   const { configVersion } = useConfigContext();
   const { configs } = useConfigStore();
@@ -300,12 +301,13 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                   transition={{ duration: 0.8, ease: 'easeInOut' }}
                 >
                   <Badge color="green" variant="filled">
-                    new: {newVersionAvailable}
+                    {t('version.new',{ newVersion: newVersionAvailable})}
                   </Badge>
                 </motion.div>
               </HoverCard.Target>
               <HoverCard.Dropdown>
-                Version{' '}
+                <Text>
+                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[0]}
                   <b>
                     <Anchor
                       target="_blank"
@@ -313,8 +315,9 @@ const useInformationTableItems = (newVersionAvailable?: string): InformationTabl
                     >
                       {newVersionAvailable}
                     </Anchor>
-                </b>{' '}
-                is available ! Current version: {attributes.packageVersion}
+                  </b>
+                  {t('version.dropdown', {currentVersion: attributes.packageVersion}).split('{{newVersion}}')[1]}
+                </Text>
               </HoverCard.Dropdown>
             </HoverCard>
           )}