add translations

src/components/settings-modal/account-settings/account-settings.tsx

@@ -6,15 +6,16 @@ import styles from './account-settings.module.css';
 import useAnonModeStore from '../../../stores/use-anon-mode-store';
 
 const AnonMode = () => {
+  const { t } = useTranslation();
   const anonMode = useAnonModeStore((state) => state.anonMode);
   const setAnonMode = useAnonModeStore((state) => state.setAnonMode);
 
   return (
     <div className={styles.anonMode}>
       <label>
-        <input type='checkbox' checked={anonMode} onChange={(e) => setAnonMode(e.target.checked)} /> anon mode
+        <input type='checkbox' checked={anonMode} onChange={(e) => setAnonMode(e.target.checked)} /> {t('anon_mode')}
       </label>
-      <span className={styles.settingTip}>Automatically use a different user ID in each thread</span>
+      <span className={styles.settingTip}>{t('anon_mode_description')}</span>
     </div>
   );
 };

src/components/settings-modal/interface-settings/interface-settings.module.css

@@ -3,7 +3,6 @@
 }
 
 .setting {
-  text-transform: capitalize;
   margin-left: 10px;
   margin-top: 10px;
 }

src/components/settings-modal/interface-settings/interface-settings.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import useTheme from '../../../hooks/use-theme';
-import styles from './interface-settings.module.css';
-import packageJson from '../../../../package.json';
 import useAvatarVisibilityStore from '../../../stores/use-avatar-visibility-store';
+import useTheme from '../../../hooks/use-theme';
+import packageJson from '../../../../package.json';
+import styles from './interface-settings.module.css';
+import _ from 'lodash';
 
 const commitRef = process.env.REACT_APP_COMMIT_REF;
 const isElectron = window.isElectron === true;
@@ -117,7 +118,7 @@ const InterfaceSettings = () => {
   return (
     <div className={styles.interfaceSettings}>
       <div className={styles.version}>
-        {t('version')}:{' '}
+        {_.capitalize(t('version'))}:{' '}
         <a href={`https://github.com/plebbit/plebchan/releases/tag/v${packageJson.version}`} target='_blank' rel='noopener noreferrer'>
           {packageJson.version}
         </a>
@@ -128,17 +129,17 @@ const InterfaceSettings = () => {
         )}
       </div>
       <div className={styles.setting}>
-        {t('update')}: <CheckForUpdates />
+        {_.capitalize(t('update'))}: <CheckForUpdates />
       </div>
       <div className={styles.setting}>
-        {t('style')}: <Style />
+        {_.capitalize(t('style'))}: <Style />
       </div>
       <div className={styles.setting}>
-        {t('interface_language')}: <InterfaceLanguage />
+        {_.capitalize(t('interface_language'))}: <InterfaceLanguage />
       </div>
       <div className={styles.setting}>
         <label>
-          <input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {t('hide_avatars')}
+          <input type='checkbox' checked={hideAvatars} onChange={handleHideAvatarsChange} /> {_.capitalize(t('hide_avatars'))}
         </label>
       </div>
     </div>

src/components/settings-modal/plebbit-options/plebbit-options.tsx

@@ -230,7 +230,7 @@ const PlebbitOptions = () => {
         </span>
       </div>
       <div className={styles.category}>
-        <span className={styles.categoryTitle}>node rpc:</span>
+        <span className={styles.categoryTitle}>node RPC:</span>
         <span className={styles.categorySettings}>
           <PlebbitRPCSettings plebbitRpcRef={plebbitRpcRef} />
         </span>