i18n for thingsToDoInitial

public/locales/en/tutorial.json

@@ -3,10 +3,15 @@
   "2_overview": "2. Overview",
   "3_groups": "3. Qortal Groups",
   "4_obtain_qort": "4. Obtaining Qort",
-  "account_creation": "Account Creation",
+  "account_creation": "account creation",
-  "important_info": "Important Information!",
+  "important_info": "important information!",
   "apps": {
     "dashboard": "1. Apps Dashboard",
     "navigation": "2. Apps Navigation"
+  },
+  "initial": {
+    "6_qort": "Have at least 6 QORT in your wallet",
+    "getting_started": "getting started",
+    "register_name": "register a name"
   }
 }

public/locales/it/core.json

@@ -6,6 +6,7 @@
   "description": "descrizione",
   "edit": "modifica",
   "error": "si è verificato un errore",
+  "loading": "loading...",
   "save": "salva",
   "title": "titolo"
 }

src/components/Group/ThingsToDoInitial.tsx

@@ -4,10 +4,11 @@ import ListItem from '@mui/material/ListItem';
 import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import { Box, Typography } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
 import { Spacer } from '../../common/Spacer';
 import { QMailMessages } from './QMailMessages';
 import { executeEvent } from '../../utils/events';
+import { useTranslation } from 'react-i18next';
 
 export const ThingsToDoInitial = ({
   myAddress,
@@ -18,6 +19,8 @@ export const ThingsToDoInitial = ({
 }) => {
   const [checked1, setChecked1] = React.useState(false);
   const [checked2, setChecked2] = React.useState(false);
+  const { t } = useTranslation(['core', 'tutorial']);
+  const theme = useTheme();
 
   React.useEffect(() => {
     if (balance && +balance >= 6) {
@@ -72,7 +75,11 @@ export const ThingsToDoInitial = ({
             fontWeight: 600,
           }}
         >
-          {!isLoaded ? 'Loading...' : 'Getting Started'}
+          {!isLoaded
+            ? t('core:loading', { postProcess: 'capitalize' })
+            : t('tutorial:initial.getting_started', {
+                postProcess: 'capitalize',
+              })}
         </Typography>
 
         <Spacer height="10px" />
@@ -80,12 +87,12 @@ export const ThingsToDoInitial = ({
 
       <Box
         sx={{
-          width: '322px',
+          bgcolor: theme.palette.background.paper,
+          borderRadius: '19px',
           display: 'flex',
           flexDirection: 'column',
-          bgcolor: 'background.paper',
           padding: '20px',
-          borderRadius: '19px',
+          width: '322px',
         }}
       >
         {isLoaded && (
@@ -114,7 +121,9 @@ export const ThingsToDoInitial = ({
                       fontWeight: 400,
                     },
                   }}
-                  primary={`Have at least 6 QORT in your wallet`}
+                  primary={t('tutorial:initial.6_qort', {
+                    postProcess: 'capitalize',
+                  })}
                 />
                 <ListItemIcon
                   sx={{
@@ -183,7 +192,9 @@ export const ThingsToDoInitial = ({
                       fontWeight: 400,
                     },
                   }}
-                  primary={`Register a name`}
+                  primary={t('tutorial:initial.register_name', {
+                    postProcess: 'capitalize',
+                  })}
                 />
                 <ListItemIcon
                   sx={{