fix: add missing translation and slider label

mfrederic · Apr 1, 2024 · 1e7bc6f · 1e7bc6f
1 parent 94bb6bd
commit 1e7bc6f
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 15 deletions.
diff --git a/frontend/src/components/Settings/AppActions.tsx b/frontend/src/components/Settings/AppActions.tsx
@@ -52,10 +52,10 @@ export function AppActions() {
               }
             </AppActionsButton>
             <StartTooltip />
-            <AppActionsButton opened={false} open={onOpenWallets} label="Wallets panel">
+            <AppActionsButton opened={false} open={onOpenWallets} label={t('actions.openWalletsPanel')}>
               <WalletIcon fontSize="large" />
             </AppActionsButton>
-            <AppActionsButton opened={false} open={onOpenMapOptions} label="Map Options panel">
+            <AppActionsButton opened={false} open={onOpenMapOptions} label={t('actions.openSettingsPanel')}>
               <SettingsIcon fontSize="large" />
             </AppActionsButton>
           </Flex>

diff --git a/frontend/src/components/Settings/AppActionsButton.tsx b/frontend/src/components/Settings/AppActionsButton.tsx
@@ -19,7 +19,7 @@ export function AppActionsButton({
     <>
       {
         !opened &&
-        <Tooltip label={"Open " + label}>
+        <Tooltip label={label}>
           <ActionIcon size="xl" aria-label={label} onClick={open} className={`p-4 mb-2 mr-2 ${cssClass}`} color={color}>
             {children}
           </ActionIcon>

diff --git a/frontend/src/components/Settings/Settings/MapMarkerOpacity.tsx b/frontend/src/components/Settings/Settings/MapMarkerOpacity.tsx
@@ -3,8 +3,10 @@ import OpacityIcon from '@mui/icons-material/Opacity';
 import { useAppDispatch, useAppSelector } from "../../../hooks/useInitStore";
 import { setMarkerOpacity } from "../../../store/mapOptions/mapOptionsReducer";
 import { selectMarkerOpacity } from "../../../store/mapOptions/mapOptionsSelector";
+import { useTranslation } from "react-i18next";
 
 export function MapMarkerOpacity() {
+  const { t } = useTranslation('common');
   const dispatch = useAppDispatch();
   const markerOpacity = useAppSelector(selectMarkerOpacity);
 
@@ -17,18 +19,18 @@ export function MapMarkerOpacity() {
       <Grid.Col span={12}>
         <h3 className="text-base font-semibold leading-7">
           <OpacityIcon className="inline-block mr-2" />
-          Markers opacity
+          { t('settings.markersOpacity') }
         </h3>
       </Grid.Col>
       <Grid.Col span={12} className="mt-4">
         <Slider
-            step={.2}
-            min={.2}
-            max={1}
-            defaultValue={markerOpacity}
-            thumbLabel="Map markers opacity"
-            onChangeEnd={onOpacityChange}
-          />
+          label={(value) => `${value * 100}%`}
+          step={.2}
+          min={.2}
+          max={1}
+          defaultValue={markerOpacity}
+          thumbLabel={t('settings.mapMarkersOpacity')}
+          onChangeEnd={onOpacityChange} />
       </Grid.Col>
     </Grid>
   )

diff --git a/frontend/src/components/Settings/StartTooltip.tsx b/frontend/src/components/Settings/StartTooltip.tsx
@@ -6,6 +6,7 @@ export function StartTooltip() {
   const { t } = useTranslation('common', { keyPrefix: 'extra' });
   const wallets = useAppSelector(selectWalletAddresses);
 
+  // TODO: Only display if option is enabled
   return (
     wallets && wallets.length <= 0 ? (
       <div className="text-black bg-white p-4 rounded-lg min-h-14 text-center drop-shadow-md mr-6">

diff --git a/frontend/src/i18next/locales/en/common.json b/frontend/src/i18next/locales/en/common.json
@@ -41,7 +41,9 @@
     "edit": "Edit",
     "delete": "Delete",
     "cancel": "Cancel",
-    "copyUrl": "Copy URL"
+    "copyUrl": "Copy URL",
+    "openWalletsPanel": "Open Wallets Panel",
+    "openSettingsPanel": "Open Settings Panel"
   },
   "settings": {
     "language": "Language",
@@ -55,7 +57,9 @@
     "chf": "Swiss franc (CHF)",
     "refreshData": "Refresh data",
     "french": "French",
-    "english": "English"
+    "english": "English",
+    "markersOpacity": "Markers Opacity",
+    "mapMarkersOpacity": "Map Markers Opacity"
   },
   "wallet": {
     "wallets": "Wallets",

diff --git a/frontend/src/i18next/locales/fr/common.json b/frontend/src/i18next/locales/fr/common.json
@@ -41,7 +41,9 @@
     "edit": "Modifier",
     "delete": "Supprimer",
     "cancel": "Annuler",
-    "copyUrl": "Copier URL"
+    "copyUrl": "Copier URL",
+    "openWalletsPanel": "Ouvrir la configuration des portefeuilles",
+    "openSettingsPanel": "Ouvrir les paramètres"
   },
   "settings": {
     "language": "Langue",
@@ -55,7 +57,9 @@
     "chf": "Franc suisse (CHF)",
     "refreshData": "Rafraîchir les données",
     "french": "Français",
-    "english": "Anglais"
+    "english": "Anglais",
+    "markersOpacity": "Opacité des marqueurs",
+    "mapMarkersOpacity": "Opacité des marqueurs sur la carte"
   },
   "wallet": {
     "wallets": "Portefeuilles",