plugins: update translation messages to use nested structure and camelCase

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/user-settings/src/components/General/UserSettingsLanguageToggle.tsx

@@ -118,8 +118,8 @@ export const UserSettingsLanguageToggle = () => {
     >
       <ListItemText
         className={classes.listItemText}
-        primary={t('language')}
-        secondary={t('change_the_language')}
+        primary={t('languageToggle.title')}
+        secondary={t('languageToggle.description')}
       />
       <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
         <ToggleButtonGroup
@@ -132,7 +132,7 @@ export const UserSettingsLanguageToggle = () => {
             return (
               <TooltipToggleButton
                 key={language}
-                title={t('select_lng', { language })}
+                title={t('languageToggle.select', { language })}
                 value={language}
               >
                 <>{language}</>

plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx

@@ -130,8 +130,8 @@ export const UserSettingsThemeToggle = () => {
     >
       <ListItemText
         className={classes.listItemText}
-        primary={t('theme')}
-        secondary={t('change_the_theme_mode')}
+        primary={t('themeToggle.title')}
+        secondary={t('themeToggle.description')}
       />
       <ListItemSecondaryAction className={classes.listItemSecondaryAction}>
         <ToggleButtonGroup
@@ -146,12 +146,12 @@ export const UserSettingsThemeToggle = () => {
             const themeTitle =
               theme.title ||
               (themeId === 'light' || themeId === 'dark'
-                ? t(`theme_${themeId}`)
+                ? t(`themeToggle.names.${themeId}`)
                 : themeId);
             return (
               <TooltipToggleButton
                 key={themeId}
-                title={t('select_theme', { theme: themeTitle })}
+                title={t('themeToggle.select', { theme: themeTitle })}
                 value={themeId}
               >
                 <>
@@ -165,9 +165,9 @@ export const UserSettingsThemeToggle = () => {
               </TooltipToggleButton>
             );
           })}
-          <Tooltip placement="top" arrow title={t('select_theme_auto')}>
+          <Tooltip placement="top" arrow title={t('themeToggle.selectAuto')}>
             <ToggleButton value="auto" selected={activeThemeId === undefined}>
-              {t('theme_auto')}&nbsp;
+              {t('themeToggle.names.auto')}&nbsp;
               <AutoIcon
                 color={activeThemeId === undefined ? 'primary' : undefined}
               />

plugins/user-settings/src/translation.ts

@@ -20,15 +20,21 @@ import { createTranslationRef } from '@backstage/core-plugin-api/alpha';
 export const userSettingsTranslationRef = createTranslationRef({
   id: 'user-settings',
   messages: {
-    language: 'Language',
-    change_the_language: 'Change the language',
-    theme: 'Theme',
-    theme_light: 'Light',
-    theme_dark: 'Dark',
-    theme_auto: 'Auto',
-    change_the_theme_mode: 'Change the theme mode',
-    select_theme: 'Select {{theme}}',
-    select_theme_auto: 'Select Auto Theme',
-    select_lng: 'Select language {{language}}',
+    languageToggle: {
+      title: 'Language',
+      description: 'Change the language',
+      select: 'Select language {{language}}',
+    },
+    themeToggle: {
+      title: 'Theme',
+      description: 'Change the theme mode',
+      select: 'Select theme {{theme}}',
+      selectAuto: 'Select Auto Theme',
+      names: {
+        light: 'Light',
+        dark: 'Dark',
+        auto: 'Auto',
+      },
+    },
   },
 });