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

src/components/CollectionDetails/index.tsx

@@ -36,7 +36,7 @@ const messages = defineMessages({
   requestcollection4k: 'Request Collection in 4K',
   requestswillbecreated4k:
     'The following titles will have 4K requests created for them:',
-  requestSuccess: '<strong>{title}</strong> successfully requested!',
+  requestSuccess: '<strong>{title}</strong> requested successfully!',
 });
 
 interface CollectionDetailsProps {

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,19 +4,20 @@ 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 }) => {
   const [isSidebarOpen, setSidebarOpen] = useState(false);
   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

src/components/Login/index.tsx

@@ -4,7 +4,7 @@ import { useUser } from '../../hooks/useUser';
 import axios from 'axios';
 import { useRouter } from 'next/dist/client/router';
 import ImageFader from '../Common/ImageFader';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Transition from '../Transition';
 import LanguagePicker from '../Layout/LanguagePicker';
 import LocalLogin from './LocalLogin';
@@ -77,9 +77,9 @@ const Login: React.FC = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img src="/logo.png" className="w-auto mx-auto max-h-32" alt="Logo" />
+        <img src="/logo.png" className="max-w-full" alt="Logo" />
         <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
-          <FormattedMessage {...messages.signinheader} />
+          {intl.formatMessage(messages.signinheader)}
         </h2>
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">

src/components/MovieDetails/MovieRecommendations.tsx

@@ -6,21 +6,21 @@ import { useRouter } from 'next/router';
 import Header from '../Common/Header';
 import type { MovieDetails } from '../../../server/models/Movie';
 import { LanguageContext } from '../../context/LanguageContext';
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Link from 'next/link';
 
 const messages = defineMessages({
   recommendations: 'Recommendations',
-  recommendationssubtext: 'If you liked {title}, you might also like…',
 });
 
 const MovieRecommendations: React.FC = () => {
   const intl = useIntl();
   const router = useRouter();
   const { locale } = useContext(LanguageContext);
-  const { data: movieData, error: movieError } = useSWR<MovieDetails>(
+  const { data: movieData } = useSWR<MovieDetails>(
     `/api/v1/movie/${router.query.movieId}?language=${locale}`
   );
   const {
@@ -47,14 +47,12 @@ const MovieRecommendations: React.FC = () => {
       <div className="mt-1 mb-5">
         <Header
           subtext={
-            movieData && !movieError
-              ? intl.formatMessage(messages.recommendationssubtext, {
-                  title: movieData.title,
-                })
-              : ''
+            <Link href={`/movie/${movieData?.id}`}>
+              <a className="hover:underline">{movieData?.title}</a>
+            </Link>
           }
         >
-          <FormattedMessage {...messages.recommendations} />
+          {intl.formatMessage(messages.recommendations)}
         </Header>
       </div>
       <ListView

src/components/MovieDetails/MovieSimilar.tsx

@@ -6,21 +6,21 @@ import { useRouter } from 'next/router';
 import Header from '../Common/Header';
 import { LanguageContext } from '../../context/LanguageContext';
 import type { MovieDetails } from '../../../server/models/Movie';
-import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import PageTitle from '../Common/PageTitle';
 import useDiscover from '../../hooks/useDiscover';
 import Error from '../../pages/_error';
+import Link from 'next/link';
 
 const messages = defineMessages({
   similar: 'Similar Titles',
-  similarsubtext: 'Other movies similar to {title}',
 });
 
 const MovieSimilar: React.FC = () => {
   const router = useRouter();
   const intl = useIntl();
   const { locale } = useContext(LanguageContext);
-  const { data: movieData, error: movieError } = useSWR<MovieDetails>(
+  const { data: movieData } = useSWR<MovieDetails>(
     `/api/v1/movie/${router.query.movieId}?language=${locale}`
   );
   const {
@@ -45,14 +45,12 @@ const MovieSimilar: React.FC = () => {
       <div className="mt-1 mb-5">
         <Header
           subtext={
-            movieData && !movieError
-              ? intl.formatMessage(messages.similarsubtext, {
-                  title: movieData.title,
-                })
-              : undefined
+            <Link href={`/movie/${movieData?.id}`}>
+              <a className="hover:underline">{movieData?.title}</a>
+            </Link>
           }
         >
-          <FormattedMessage {...messages.similar} />
+          {intl.formatMessage(messages.similar)}
         </Header>
       </div>
       <ListView

src/components/MovieDetails/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext, useMemo } from 'react';
-import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import type { MovieDetails as MovieDetailsType } from '../../../server/models/Movie';
 import useSWR from 'swr';
 import { useRouter } from 'next/router';
@@ -595,23 +595,21 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
               <div className="media-fact">
                 <span>{intl.formatMessage(messages.revenue)}</span>
                 <span className="media-fact-value">
-                  <FormattedNumber
-                    currency="USD"
-                    style="currency"
-                    value={data.revenue}
-                  />
+                  {intl.formatNumber(data.revenue, {
+                    currency: 'USD',
+                    style: 'currency',
+                  })}
                 </span>
               </div>
             )}
             {data.budget > 0 && (
               <div className="media-fact">
                 <span>{intl.formatMessage(messages.budget)}</span>
                 <span className="media-fact-value">
-                  <FormattedNumber
-                    currency="USD"
-                    style="currency"
-                    value={data.budget}
-                  />
+                  {intl.formatNumber(data.budget, {
+                    currency: 'USD',
+                    style: 'currency',
+                  })}
                 </span>
               </div>
             )}

src/components/RequestModal/MovieRequestModal.tsx

@@ -18,11 +18,10 @@ import AdvancedRequester, { RequestOverrides } from './AdvancedRequester';
 import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
-  requestadmin:
-    'Your request will be immediately approved. Do you wish to continue?',
+  requestadmin: 'Your request will be immediately approved.',
   cancelrequest:
     'This will remove your request. Are you sure you want to continue?',
-  requestSuccess: '<strong>{title}</strong> successfully requested!',
+  requestSuccess: '<strong>{title}</strong> requested successfully!',
   requestCancel: 'Request for <strong>{title}</strong> canceled',
   requesttitle: 'Request {title}',
   request4ktitle: 'Request {title} in 4K',

src/components/RequestModal/SearchByNameModal/index.tsx

@@ -10,7 +10,8 @@ const messages = defineMessages({
   next: 'Next',
   notvdbid: 'Manual Match Required',
   notvdbiddescription:
-    "We couldn't automatically match your request. Please select the correct match from the list below:",
+    "We couldn't automatically match your request.\
+    Please select the correct match from the list below.",
   nosummary: 'No summary for this title was found.',
 });
 

src/components/RequestModal/TvRequestModal.tsx

@@ -25,7 +25,7 @@ const messages = defineMessages({
   requestadmin: 'Your request will be immediately approved.',
   cancelrequest:
     'This will remove your request. Are you sure you want to continue?',
-  requestSuccess: '<strong>{title}</strong> successfully requested!',
+  requestSuccess: '<strong>{title}</strong> requested successfully!',
   requesttitle: 'Request {title}',
   request4ktitle: 'Request {title} in 4K',
   requesting: 'Requesting…',
@@ -45,7 +45,6 @@ const messages = defineMessages({
   requestcancelled: 'Request canceled.',
   autoapproval: 'Automatic Approval',
   requesterror: 'Something went wrong while submitting the request.',
-  next: 'Next',
   backbutton: 'Back',
 });
 

src/components/ResetPassword/RequestResetLink.tsx

@@ -7,13 +7,15 @@ import { Field, Form, Formik } from 'formik';
 import * as Yup from 'yup';
 import axios from 'axios';
 import Link from 'next/link';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
-  forgotpassword: 'Forgot Your Password?',
-  emailresetlink: 'Email Me a Recovery Link',
+  passwordreset: 'Password Reset',
+  resetpassword: 'Reset your password',
+  emailresetlink: 'Email a Recovery Link',
   email: 'Email',
   validationemailrequired: 'You must provide a valid email address',
-  gobacklogin: 'Go Back to Sign-In Page',
+  gobacklogin: 'Return to Sign-In Page',
   requestresetlinksuccessmessage:
     'A password reset link will be sent to the provided email address if it is associated with a valid user.',
 });
@@ -30,6 +32,7 @@ const ResetPassword: React.FC = () => {
 
   return (
     <div className="relative flex flex-col min-h-screen bg-gray-900 py-14">
+      <PageTitle title={intl.formatMessage(messages.passwordreset)} />
       <ImageFader
         backgroundImages={[
           '/images/rotate1.jpg',
@@ -44,13 +47,9 @@ const ResetPassword: React.FC = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img
-          src="/logo.png"
-          className="w-auto mx-auto max-h-32"
-          alt="Overseerr Logo"
-        />
+        <img src="/logo.png" className="max-w-full" alt="Logo" />
         <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
-          {intl.formatMessage(messages.forgotpassword)}
+          {intl.formatMessage(messages.resetpassword)}
         </h2>
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">

src/components/ResetPassword/index.tsx

@@ -10,16 +10,16 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 
 const messages = defineMessages({
-  resetpassword: 'Reset Password',
+  passwordreset: 'Password Reset',
+  resetpassword: 'Reset your password',
   password: 'Password',
   confirmpassword: 'Confirm Password',
   validationpasswordrequired: 'You must provide a password',
-  validationpasswordmatch: 'Password must match',
+  validationpasswordmatch: 'Passwords must match',
   validationpasswordminchars:
     'Password is too short; should be a minimum of 8 characters',
-  gobacklogin: 'Go Back to Sign-In Page',
-  resetpasswordsuccessmessage:
-    'If the link is valid and is connected to a user then the password has been reset.',
+  gobacklogin: 'Return to Sign-In Page',
+  resetpasswordsuccessmessage: 'Password reset successfully!',
 });
 
 const ResetPassword: React.FC = () => {
@@ -60,11 +60,7 @@ const ResetPassword: React.FC = () => {
         <LanguagePicker />
       </div>
       <div className="relative z-40 px-4 sm:mx-auto sm:w-full sm:max-w-md">
-        <img
-          src="/logo.png"
-          className="w-auto mx-auto max-h-32"
-          alt="Overseerr Logo"
-        />
+        <img src="/logo.png" className="max-w-full" alt="Logo" />
         <h2 className="mt-2 text-3xl font-extrabold leading-9 text-center text-gray-100">
           {intl.formatMessage(messages.resetpassword)}
         </h2>

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -15,8 +15,8 @@ import globalMessages from '../../../i18n/globalMessages';
 const messages = defineMessages({
   save: 'Save Changes',
   saving: 'Saving…',
-  validationSmtpHostRequired: 'You must provide an SMTP host',
-  validationSmtpPortRequired: 'You must provide an SMTP port',
+  validationSmtpHostRequired: 'You must provide a hostname or IP address',
+  validationSmtpPortRequired: 'You must provide a valid port number',
   agentenabled: 'Enable Agent',
   emailsender: 'Sender Address',
   smtpHost: 'SMTP Host',
@@ -80,9 +80,9 @@ const NotificationsEmail: React.FC = () => {
         /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
         intl.formatMessage(messages.validationSmtpHostRequired)
       ),
-    smtpPort: Yup.number().required(
-      intl.formatMessage(messages.validationSmtpPortRequired)
-    ),
+    smtpPort: Yup.number()
+      .typeError(intl.formatMessage(messages.validationSmtpPortRequired))
+      .required(intl.formatMessage(messages.validationSmtpPortRequired)),
   });
 
   if (!data && !error) {