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>