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)} />

src/components/Setup/index.tsx

@@ -7,7 +7,7 @@ import SettingsServices from '../Settings/SettingsServices';
 import LoginWithPlex from './LoginWithPlex';
 import SetupSteps from './SetupSteps';
 import axios from 'axios';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Badge from '../Common/Badge';
 import LanguagePicker from '../Layout/LanguagePicker';
 import PageTitle from '../Common/PageTitle';
@@ -63,11 +63,7 @@ const Setup: React.FC = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-4xl">
-        <img
-          src="/logo.png"
-          className="w-auto mx-auto mb-10 max-h-32"
-          alt="Logo"
-        />
+        <img src="/logo.png" className="max-w-full sm:max-w-md" alt="Logo" />
         <AppDataWarning />
         <nav className="relative z-50">
           <ul
@@ -115,7 +111,7 @@ const Setup: React.FC = () => {
                       disabled={!plexSettingsComplete}
                       onClick={() => setCurrentStep(3)}
                     >
-                      <FormattedMessage {...messages.continue} />
+                      {intl.formatMessage(messages.continue)}
                     </Button>
                   </span>
                 </div>
@@ -133,11 +129,9 @@ const Setup: React.FC = () => {
                       onClick={() => finishSetup()}
                       disabled={isUpdating}
                     >
-                      {isUpdating ? (
-                        <FormattedMessage {...messages.finishing} />
-                      ) : (
-                        <FormattedMessage {...messages.finish} />
-                      )}
+                      {isUpdating
+                        ? intl.formatMessage(messages.finishing)
+                        : intl.formatMessage(messages.finish)}
                     </Button>
                   </span>
                 </div>