Add theme translations

src/components/Desktop/DesktopFooter.tsx

@@ -94,7 +94,10 @@ export const DesktopFooter = ({
             goToHome();
           }}
         >
-          <IconWrapper label="Home" selected={isHome}>
+          <IconWrapper
+            label={t('core:home', { postProcess: 'capitalizeFirstChar' })}
+            selected={isHome}
+          >
             <HomeIcon height={30} />
           </IconWrapper>
         </ButtonBase>
@@ -145,7 +148,12 @@ export const DesktopFooter = ({
             setDesktopSideView('directs');
           }}
         >
-          <IconWrapper label="Messaging" selected={isDirects}>
+          <IconWrapper
+            label={t('group:group.messaging', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            selected={isDirects}
+          >
             <MessagingIcon
               height={30}
               color={
@@ -168,7 +176,10 @@ export const DesktopFooter = ({
               setIsOpenSideViewGroups(false);
             }}
           >
-            <IconWrapper label="Dev Mode" selected={isApps}>
+            <IconWrapper
+              label={t('core:dev_mode', { postProcess: 'capitalizeFirstChar' })}
+              selected={isApps}
+            >
               <img src={AppIcon} />
             </IconWrapper>
           </ButtonBase>

src/components/Group/AddGroup.tsx

@@ -388,7 +388,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
                     labelId="demo-simple-select-label"
                     id="demo-simple-select"
                     value={groupType}
-                    label="Group Type"
+                    label={t('group:group.type', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
                     onChange={handleChangeGroupType}
                   >
                     <MenuItem value={1}>
@@ -469,7 +471,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                     }}
                   >
                     <Label>
-                      {t('group:block_delay.minimum', {
+                      {t('group:message.generic.block_delay_minimum', {
                         postProcess: 'capitalizeFirstChar',
                       })}
                     </Label>
@@ -478,7 +480,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
                       labelId="demo-simple-select-label"
                       id="demo-simple-select"
                       value={minBlock}
-                      label="Minimum Block delay"
+                      label={t('group:block_delay.minimum', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
                       onChange={handleChangeMinBlock}
                     >
                       <MenuItem value={5}>
@@ -528,7 +532,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
                     }}
                   >
                     <Label>
-                      {t('group:block_delay.maximum', {
+                      {t('group:message.generic.block_delay_maximum', {
                         postProcess: 'capitalizeFirstChar',
                       })}
                     </Label>
@@ -537,7 +541,9 @@ export const AddGroup = ({ address, open, setOpen }) => {
                       labelId="demo-simple-select-label"
                       id="demo-simple-select"
                       value={maxBlock}
-                      label="Maximum Block delay"
+                      label={t('group:block_delay.minimum', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
                       onChange={handleChangeMaxBlock}
                     >
                       <MenuItem value={60}>

src/components/Group/Group.tsx

@@ -1680,7 +1680,9 @@ export const Group = ({
                     ? theme.palette.text.primary
                     : theme.palette.text.secondary
               }
-              label="Messaging"
+              label={t('group:group.messaging', {
+                postProcess: 'capitalizeFirstChar',
+              })}
               selected={desktopSideView === 'directs'}
             >
               <MessagingIcon

src/components/Group/Settings.tsx

@@ -216,7 +216,7 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
                   }}
                 />
               }
-              label={t('group:action.enable_dev_mode', {
+              label={t('core:action.enable_dev_mode', {
                 postProcess: 'capitalizeFirstChar',
               })}
             />

src/components/ReactionPicker.tsx

@@ -105,8 +105,6 @@ export const ReactionPicker = ({ onReaction }) => {
               height={400}
               onEmojiClick={handlePicker}
               onReactionClick={handleReaction}
-              // reactionsDefaultOpen={true}
-              // open={true}
               theme={Theme.DARK}
               width={350}
             />

src/components/Theme/ThemeManager.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   Box,
   Button,
@@ -29,6 +29,8 @@ import { rgbStringToHsva, rgbaStringToHsva } from '@uiw/color-convert';
 import FileDownloadIcon from '@mui/icons-material/FileDownload';
 import { saveFileToDiskGeneric } from '../../utils/generateWallet/generateWallet';
 import { handleImportClick } from '../../utils/fileReading';
+import { useTranslation } from 'react-i18next';
+
 const uid = new ShortUniqueId({ length: 8 });
 
 function detectColorFormat(color) {
@@ -80,6 +82,7 @@ export default function ThemeManager() {
   });
   const [currentTab, setCurrentTab] = useState('light');
   const nameInputRef = useRef(null);
+  const { t } = useTranslation(['auth', 'core', 'group']);
 
   useEffect(() => {
     if (openEditor && nameInputRef.current) {
@@ -208,7 +211,11 @@ export default function ThemeManager() {
       const fileContent = await handleImportClick('.json');
       const importedTheme = JSON.parse(fileContent);
       if (!validateTheme(importedTheme)) {
-        throw new Error('Invalid theme format');
+        throw new Error(
+          t('core:message.generic.invalid_theme_format', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        );
       }
       const newTheme = { ...importedTheme, id: uid.rnd() };
       const updatedThemes = [...userThemes, newTheme];
@@ -223,7 +230,7 @@ export default function ThemeManager() {
   return (
     <Box p={2}>
       <Typography variant="h5" gutterBottom>
-        Theme Manager
+        {t('core:theme.manager', { postProcess: 'capitalizeFirstChar' })}
       </Typography>
 
       <Button
@@ -231,8 +238,9 @@ export default function ThemeManager() {
         startIcon={<AddIcon />}
         onClick={handleAddTheme}
       >
-        Add Theme
+        {t('core:action.add_theme', { postProcess: 'capitalizeFirstChar' })}
       </Button>
+
       <Button
         sx={{
           marginLeft: '20px',
@@ -241,8 +249,9 @@ export default function ThemeManager() {
         startIcon={<AddIcon />}
         onClick={importTheme}
       >
-        Import theme
+        {t('core:action.import_theme', { postProcess: 'capitalizeFirstChar' })}
       </Button>
+
       <List>
         {userThemes?.map((theme, index) => (
           <ListItemButton
@@ -281,13 +290,20 @@ export default function ThemeManager() {
         maxWidth="md"
       >
         <DialogTitle>
-          {themeDraft.id ? 'Edit Theme' : 'Add New Theme'}
+          {themeDraft.id
+            ? t('core:action.edit_theme', {
+                postProcess: 'capitalizeFirstChar',
+              })
+            : t('core:action.new.theme', {
+                postProcess: 'capitalizeFirstChar',
+              })}
         </DialogTitle>
+
         <DialogContent>
           <TextField
             inputRef={nameInputRef}
             margin="dense"
-            label="Theme Name"
+            label={t('core:theme.name', { postProcess: 'capitalizeFirstChar' })}
             fullWidth
             value={themeDraft.name}
             onChange={(e) =>
@@ -391,14 +407,17 @@ export default function ThemeManager() {
             )}
           </Box>
         </DialogContent>
+
         <DialogActions>
-          <Button onClick={() => setOpenEditor(false)}>Cancel</Button>
+          <Button onClick={() => setOpenEditor(false)}>
+            {t('core:action.cancel', { postProcess: 'capitalizeFirstChar' })}
+          </Button>
           <Button
             disabled={!themeDraft.name}
             onClick={handleSaveTheme}
             variant="contained"
           >
-            Save
+            {t('core:action.save', { postProcess: 'capitalizeFirstChar' })}
           </Button>
         </DialogActions>
       </Dialog>

src/i18n/locales/en/core.json

@@ -1,11 +1,12 @@
 {
   "action": {
-    "add": "add",
-    "add_custom_framework": "add custom framework",
-    "add_reaction": "add reaction",
     "accept": "accept",
     "access": "access",
     "access_app": "access app",
+    "add": "add",
+    "add_custom_framework": "add custom framework",
+    "add_reaction": "add reaction",
+    "add_theme": "add theme",
     "backup_account": "backup account",
     "backup_wallet": "backup wallet",
     "cancel": "cancel",
@@ -33,11 +34,14 @@
     "download": "download",
     "download_file": "download file",
     "edit": "edit",
+    "edit_theme": "edit theme",
+    "enable_dev_mode": "enable dev mode",
     "enter_name": "enter a name",
     "export": "export",
     "get_qort": "get QORT at Q-Trade",
     "hide": "hide",
     "import": "import",
+    "import_theme": "import theme",
     "invite": "invite",
     "join": "join",
     "leave_comment": "leave comment",
@@ -47,6 +51,7 @@
     "new": {
       "chat": "new chat",
       "post": "new post",
+      "theme": "new theme",
       "thread": "new thread"
     },
     "notify": "notify",
@@ -115,6 +120,7 @@
   },
   "current_language": "current language: {{ language }}",
   "dev": "dev",
+  "dev_mode": "dev Mode",
   "domain": "domain",
   "ui": {
     "version": "UI version"
@@ -134,6 +140,7 @@
   "for": "for",
   "general": "general",
   "general_settings": "general settings",
+  "home": "home",
   "identifier": "identifier",
   "image_embed": "image embed",
   "last_height": "last height",
@@ -164,6 +171,7 @@
       "invalid_poll_embed_link_name": "invalid poll embed link. Missing name.",
       "invalid_image_embed_link_name": "invalid image embed link. Missing param.",
       "invalid_signature": "invalid signature",
+      "invalid_theme_format": "invalid theme format",
       "invalid_zip": "invalid zip",
       "message_loading": "error loading message.",
       "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
@@ -326,7 +334,9 @@
   "tags": "tags",
   "theme": {
     "dark": "dark mode",
-    "light": "light mode"
+    "light": "light mode",
+    "manager": "theme Manager",
+    "name": "theme name"
   },
   "thread": "thread",
   "thread_other": "threads",

src/i18n/locales/en/group.json

@@ -6,7 +6,6 @@
     "copy_private_key": "copy private key",
     "create_group": "create group",
     "disable_push_notifications": "disable all push notifications",
-    "enable_dev_mode": "enable dev mode",
     "export_password": "export password",
     "export_private_key": "export private key",
     "find_group": "find group",
@@ -33,8 +32,8 @@
   "approval_threshold": "group Approval Threshold (number / percentage of Admins that must approve a transaction)",
   "ban_list": "ban list",
   "block_delay": {
-    "minimum": "minimum Block delay for Group Transaction Approvals",
-    "maximum": "maximum Block delay for Group Transaction Approvals"
+    "minimum": "Minimum Block delay",
+    "maximum": "Maximum Block delay"
   },
   "group": {
     "avatar": "group avatar",
@@ -68,6 +67,8 @@
       "avatar_registered_name": "a registered name is required to set an avatar",
       "admin_only": "only groups where you are an admin will be shown",
       "already_in_group": "you are already in this group!",
+      "block_delay_minimum": "minimum Block delay for Group Transaction Approvals",
+      "block_delay_maximum": "maximum Block delay for Group Transaction Approvals",
       "closed_group": "this is a closed/private group, so you will need to wait until an admin accepts your request",
       "descrypt_wallet": "decrypting wallet...",
       "encryption_key": "the group's first common encryption key is in the process of creation. Please wait a few minutes for it to be retrieved by the network. Checking every 2 minutes...",