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

src/components/Setup/LoginWithPlex.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useUser } from '../../hooks/useUser';
 import PlexLoginButton from '../PlexLoginButton';
 import axios from 'axios';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
 const messages = defineMessages({
   welcome: 'Welcome to Overseerr',
@@ -14,6 +14,7 @@ interface LoginWithPlexProps {
 }
 
 const LoginWithPlex: React.FC<LoginWithPlexProps> = ({ onComplete }) => {
+  const intl = useIntl();
   const [authToken, setAuthToken] = useState<string | undefined>(undefined);
   const { user, revalidate } = useUser();
 
@@ -45,10 +46,10 @@ const LoginWithPlex: React.FC<LoginWithPlexProps> = ({ onComplete }) => {
   return (
     <form>
       <div className="flex justify-center mb-2 text-xl font-bold">
-        <FormattedMessage {...messages.welcome} />
+        {intl.formatMessage(messages.welcome)}
       </div>
       <div className="flex justify-center pb-6 mb-2 text-sm">
-        <FormattedMessage {...messages.signinMessage} />
+        {intl.formatMessage(messages.signinMessage)}
       </div>
       <div className="flex items-center justify-center">
         <PlexLoginButton onAuthToken={(authToken) => setAuthToken(authToken)} />