feat: i18n user interface (#40306)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/src/components/helpers/AvatarRenderer.js

@@ -4,6 +4,7 @@ import { Image } from '@freecodecamp/react-bootstrap';
 import DefaultAvatar from '../../assets/icons/DefaultAvatar';
 import { defaultUserImage } from '../../../../config/misc';
 import { borderColorPicker } from '../helpers';
+import { useTranslation } from 'react-i18next';
 
 const propTypes = {
   isDonating: PropTypes.bool,
@@ -13,6 +14,7 @@ const propTypes = {
 };
 
 function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
+  const { t } = useTranslation();
   let borderColor = borderColorPicker(isDonating, isTopContributor);
   let isPlaceHolderImage =
     /example.com|identicon.org/.test(picture) || picture === defaultUserImage;
@@ -23,7 +25,7 @@ function AvatarRenderer({ picture, userName, isDonating, isTopContributor }) {
         <DefaultAvatar className='avatar default-avatar' />
       ) : (
         <Image
-          alt={userName + "'s avatar"}
+          alt={t('profile.avatar', { username: userName })}
           className='avatar'
           responsive={true}
           src={picture}

client/src/components/helpers/form/BlockSaveButton.js

@@ -1,8 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
+import { useTranslation } from 'react-i18next';
 
 function BlockSaveButton({ children, ...restProps }) {
+  const { t } = useTranslation();
+
   return (
     <Button
       block={true}
@@ -11,7 +14,7 @@ function BlockSaveButton({ children, ...restProps }) {
       type='submit'
       {...restProps}
     >
-      {children || 'Save'}
+      {children || t('buttons.save')}
     </Button>
   );
 }