fix(lang): UI string edits, round 2 (#1202)

src/components/Layout/LanguagePicker/index.tsx

@@ -5,7 +5,7 @@ import {
   LanguageContext,
   AvailableLocales,
 } from '../../../context/LanguageContext';
-import { FormattedMessage, defineMessages } from 'react-intl';
+import { useIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   changelanguage: 'Change Language',
@@ -80,6 +80,7 @@ const availableLanguages: AvailableLanguageObject = {
 };
 
 const LanguagePicker: React.FC = () => {
+  const intl = useIntl();
   const dropdownRef = useRef<HTMLDivElement>(null);
   const { locale, setLocale } = useContext(LanguageContext);
   const [isDropdownOpen, setDropdownOpen] = useState(false);
@@ -128,7 +129,7 @@ const LanguagePicker: React.FC = () => {
                 htmlFor="language"
                 className="block pb-2 text-sm font-medium leading-5 text-gray-300"
               >
-                <FormattedMessage {...messages.changelanguage} />
+                {intl.formatMessage(messages.changelanguage)}
               </label>
               <select
                 id="language"

src/components/Layout/Sidebar/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactNode, useRef } from 'react';
 import Transition from '../../Transition';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { useUser, Permission } from '../../../hooks/useUser';
 import useClickOutside from '../../../hooks/useClickOutside';
 
@@ -119,6 +119,7 @@ const SidebarLinks: SidebarLinkProps[] = [
 const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
   const navRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
+  const intl = useIntl();
   const { hasPermission } = useUser();
   useClickOutside(navRef, () => setClosed());
   return (
@@ -212,9 +213,9 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                               `}
                             >
                               {sidebarLink.svgIcon}
-                              <FormattedMessage
-                                {...messages[sidebarLink.messagesKey]}
-                              />
+                              {intl.formatMessage(
+                                messages[sidebarLink.messagesKey]
+                              )}
                             </a>
                           </Link>
                         );
@@ -266,9 +267,7 @@ const Sidebar: React.FC<SidebarProps> = ({ open, setClosed }) => {
                               `}
                       >
                         {sidebarLink.svgIcon}
-                        <FormattedMessage
-                          {...messages[sidebarLink.messagesKey]}
-                        />
+                        {intl.formatMessage(messages[sidebarLink.messagesKey])}
                       </a>
                     </Link>
                   );

src/components/Layout/index.tsx

@@ -4,12 +4,12 @@ import UserDropdown from './UserDropdown';
 import Sidebar from './Sidebar';
 import LanguagePicker from './LanguagePicker';
 import { useRouter } from 'next/router';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import { Permission, useUser } from '../../hooks/useUser';
 
 const messages = defineMessages({
   alphawarning:
-    'This is ALPHA software. Features may be broken and/or unstable. Please report issues on GitHub!',
+    'This is ALPHA software. Features may be broken and/or unstable. Please report any issues on GitHub!',
 });
 
 const Layout: React.FC = ({ children }) => {
@@ -17,6 +17,7 @@ const Layout: React.FC = ({ children }) => {
   const [isScrolled, setIsScrolled] = useState(false);
   const { hasPermission } = useUser();
   const router = useRouter();
+  const intl = useIntl();
 
   useEffect(() => {
     const updateScrolled = () => {
@@ -101,7 +102,7 @@ const Layout: React.FC = ({ children }) => {
                     </div>
                     <div className="flex-1 ml-3 md:flex md:justify-between">
                       <p className="text-sm leading-5 text-white">
-                        <FormattedMessage {...messages.alphawarning} />
+                        {intl.formatMessage(messages.alphawarning)}
                       </p>
                       <p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
                         <a