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

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) {

src/components/Settings/RadarrModal/index.tsx

@@ -12,13 +12,13 @@ const messages = defineMessages({
   createradarr: 'Add New Radarr Server',
   editradarr: 'Edit Radarr Server',
   validationNameRequired: 'You must provide a server name',
-  validationHostnameRequired: 'You must provide a hostname/IP',
-  validationPortRequired: 'You must provide a port',
+  validationHostnameRequired: 'You must provide a hostname or IP address',
+  validationPortRequired: 'You must provide a valid port number',
   validationApiKeyRequired: 'You must provide an API key',
   validationRootFolderRequired: 'You must select a root folder',
   validationProfileRequired: 'You must select a profile',
   validationMinimumAvailabilityRequired: 'You must select minimum availability',
-  toastRadarrTestSuccess: 'Radarr connection established!',
+  toastRadarrTestSuccess: 'Radarr connection established successfully!',
   toastRadarrTestFailure: 'Failed to connect to Radarr.',
   saving: 'Saving…',
   save: 'Save Changes',
@@ -28,7 +28,7 @@ const messages = defineMessages({
   defaultserver: 'Default Server',
   servername: 'Server Name',
   servernamePlaceholder: 'A Radarr Server',
-  hostname: 'Hostname',
+  hostname: 'Hostname or IP Address',
   port: 'Port',
   ssl: 'SSL',
   apiKey: 'API Key',
@@ -98,9 +98,9 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
         /^(([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.validationHostnameRequired)
       ),
-    port: Yup.number().required(
-      intl.formatMessage(messages.validationPortRequired)
-    ),
+    port: Yup.number()
+      .typeError(intl.formatMessage(messages.validationPortRequired))
+      .required(intl.formatMessage(messages.validationPortRequired)),
     apiKey: Yup.string().required(
       intl.formatMessage(messages.validationApiKeyRequired)
     ),

src/components/Settings/SettingsAbout/Releases/index.tsx

@@ -18,9 +18,10 @@ const messages = defineMessages({
   latestversion: 'Latest',
   currentversion: 'Current Version',
   viewchangelog: 'View Changelog',
-  runningDevelop: 'You are running a develop version of Overseerr!',
+  runningDevelop: 'Development Version',
   runningDevelopMessage:
-    'The changes in your version will not be available below. Please see the <GithubLink>GitHub repository</GithubLink> for latest updates.',
+    'The latest changes to the <code>develop</code> branch of Overseerr are not shown below.\
+    Please see the commit history for this branch on <GithubLink>GitHub</GithubLink> for details.',
 });
 
 const REPO_RELEASE_API =
@@ -161,6 +162,9 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
         {currentVersion.startsWith('develop-') && (
           <Alert title={intl.formatMessage(messages.runningDevelop)}>
             {intl.formatMessage(messages.runningDevelopMessage, {
+              code: function code(msg) {
+                return <code className="bg-opacity-50">{msg}</code>;
+              },
               GithubLink: function GithubLink(msg) {
                 return (
                   <a

src/components/Settings/SettingsAbout/index.tsx

@@ -4,19 +4,21 @@ import Error from '../../../pages/_error';
 import List from '../../Common/List';
 import LoadingSpinner from '../../Common/LoadingSpinner';
 import { SettingsAboutResponse } from '../../../../server/interfaces/api/settingsInterfaces';
-import { defineMessages, FormattedNumber, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import Releases from './Releases';
 import Badge from '../../Common/Badge';
+import PageTitle from '../../Common/PageTitle';
+import globalMessages from '../../../i18n/globalMessages';
 
 const messages = defineMessages({
+  about: 'About',
   overseerrinformation: 'Overseerr Information',
   version: 'Version',
   totalmedia: 'Total Media',
   totalrequests: 'Total Requests',
   gettingsupport: 'Getting Support',
   githubdiscussions: 'GitHub Discussions',
-  clickheretojoindiscord: 'Click here to join our Discord server.',
-  timezone: 'Timezone',
+  timezone: 'Time Zone',
   supportoverseerr: 'Support Overseerr',
   helppaycoffee: 'Help Pay for Coffee',
   documentation: 'Documentation',
@@ -39,20 +41,26 @@ const SettingsAbout: React.FC = () => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.about),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="section">
         <List title={intl.formatMessage(messages.overseerrinformation)}>
           <List.Item title={intl.formatMessage(messages.version)}>
-            {data.version}
+            <code>{data.version}</code>
           </List.Item>
           <List.Item title={intl.formatMessage(messages.totalmedia)}>
-            <FormattedNumber value={data.totalMediaItems} />
+            {intl.formatNumber(data.totalMediaItems)}
           </List.Item>
           <List.Item title={intl.formatMessage(messages.totalrequests)}>
-            <FormattedNumber value={data.totalRequests} />
+            {intl.formatNumber(data.totalRequests)}
           </List.Item>
           {data.tz && (
             <List.Item title={intl.formatMessage(messages.timezone)}>
-              {data.tz}
+              <code>{data.tz}</code>
             </List.Item>
           )}
         </List>
@@ -86,7 +94,7 @@ const SettingsAbout: React.FC = () => {
               rel="noreferrer"
               className="text-indigo-500 hover:underline"
             >
-              {intl.formatMessage(messages.clickheretojoindiscord)}
+              https://discord.gg/PkCWJSeCk7
             </a>
           </List.Item>
         </List>

src/components/Settings/SettingsJobsCache/index.tsx

@@ -15,8 +15,11 @@ import { useToasts } from 'react-toast-notifications';
 import Badge from '../../Common/Badge';
 import { CacheItem } from '../../../../server/interfaces/api/settingsInterfaces';
 import { formatBytes } from '../../../utils/numberHelpers';
+import PageTitle from '../../Common/PageTitle';
+import globalMessages from '../../../i18n/globalMessages';
 
 const messages: { [messageName: string]: MessageDescriptor } = defineMessages({
+  jobsandcache: 'Jobs & Cache',
   jobs: 'Jobs',
   jobsDescription:
     'Overseerr performs certain maintenance tasks as regularly-scheduled jobs,\
@@ -118,6 +121,12 @@ const SettingsJobs: React.FC = () => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.jobsandcache),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-6">
         <h3 className="heading">{intl.formatMessage(messages.jobs)}</h3>
         <p className="description">

src/components/Settings/SettingsLayout.tsx

@@ -3,10 +3,10 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
 import PageTitle from '../Common/PageTitle';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
-  settings: 'Settings',
-  menuGeneralSettings: 'General Settings',
+  menuGeneralSettings: 'General',
   menuUsers: 'Users',
   menuPlexSettings: 'Plex',
   menuServices: 'Services',
@@ -99,7 +99,7 @@ const SettingsLayout: React.FC = ({ children }) => {
   };
   return (
     <>
-      <PageTitle title={intl.formatMessage(messages.settings)} />
+      <PageTitle title={intl.formatMessage(globalMessages.settings)} />
       <div className="mt-6">
         <div className="sm:hidden">
           <select

src/components/Settings/SettingsLogs/index.tsx

@@ -9,7 +9,9 @@ import Error from '../../../pages/_error';
 import Badge from '../../Common/Badge';
 import Button from '../../Common/Button';
 import LoadingSpinner from '../../Common/LoadingSpinner';
+import PageTitle from '../../Common/PageTitle';
 import Table from '../../Common/Table';
+import globalMessages from '../../../i18n/globalMessages';
 
 const messages = defineMessages({
   logs: 'Logs',
@@ -93,6 +95,12 @@ const SettingsLogs: React.FC = () => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.logs),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-2">
         <h3 className="heading">{intl.formatMessage(messages.logs)}</h3>
         <p className="description">

src/components/Settings/SettingsMain.tsx

@@ -13,8 +13,10 @@ import Badge from '../Common/Badge';
 import globalMessages from '../../i18n/globalMessages';
 import * as Yup from 'yup';
 import RegionSelector from '../RegionSelector';
+import PageTitle from '../Common/PageTitle';
 
 const messages = defineMessages({
+  general: 'General',
   generalsettings: 'General Settings',
   generalsettingsDescription:
     'Configure global and default settings for Overseerr.',
@@ -24,21 +26,19 @@ const messages = defineMessages({
   applicationTitle: 'Application Title',
   applicationurl: 'Application URL',
   region: 'Discover Region',
-  regionTip:
-    'Filter content by region (only applies to the "Popular" and "Upcoming" categories)',
+  regionTip: 'Filter content by regional availability',
   originallanguage: 'Discover Language',
-  originallanguageTip:
-    'Filter content by original language (only applies to the "Popular" and "Upcoming" categories)',
-  toastApiKeySuccess: 'New API key generated!',
+  originallanguageTip: 'Filter content by original language',
+  toastApiKeySuccess: 'New API key generated successfully!',
   toastApiKeyFailure: 'Something went wrong while generating a new API key.',
-  toastSettingsSuccess: 'Settings successfully saved!',
+  toastSettingsSuccess: 'Settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
   hideAvailable: 'Hide Available Media',
   csrfProtection: 'Enable CSRF Protection',
   csrfProtectionTip:
-    'Sets external API access to read-only (requires HTTPS and Overseerr must be reloaded for changes to take effect)',
+    'Sets external API access to read-only (requires HTTPS, and Overseerr must be reloaded for changes to take effect)',
   csrfProtectionHoverTip:
-    'Do NOT enable this unless you understand what you are doing!',
+    'Do NOT enable this setting unless you understand what you are doing!',
   trustProxy: 'Enable Proxy Support',
   trustProxyTip:
     'Allows Overseerr to correctly register client IP addresses behind a proxy (Overseerr must be reloaded for changes to take effect)',
@@ -46,7 +46,7 @@ const messages = defineMessages({
   validationApplicationUrl: 'You must provide a valid URL',
   validationApplicationUrlTrailingSlash: 'URL must not end in a trailing slash',
   originalLanguageDefault: 'All Languages',
-  partialRequestsEnabled: 'Enable Partial Series Requests',
+  partialRequestsEnabled: 'Allow Partial Series Requests',
 });
 
 const SettingsMain: React.FC = () => {
@@ -119,6 +119,12 @@ const SettingsMain: React.FC = () => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.general),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-6">
         <h3 className="heading">
           {intl.formatMessage(messages.generalsettings)}

src/components/Settings/SettingsNotifications.tsx

@@ -15,8 +15,11 @@ import LoadingSpinner from '../Common/LoadingSpinner';
 import axios from 'axios';
 import { useToasts } from 'react-toast-notifications';
 import Button from '../Common/Button';
+import PageTitle from '../Common/PageTitle';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
+  notifications: 'Notifications',
   save: 'Save Changes',
   saving: 'Saving…',
   notificationsettings: 'Notification Settings',
@@ -174,6 +177,12 @@ const SettingsNotifications: React.FC = ({ children }) => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.notifications),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-6">
         <h3 className="heading">
           {intl.formatMessage(messages.notificationsettings)}

src/components/Settings/SettingsPlex.tsx

@@ -9,12 +9,15 @@ import Button from '../Common/Button';
 import axios from 'axios';
 import LibraryItem from './LibraryItem';
 import Badge from '../Common/Badge';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 import * as Yup from 'yup';
 import Alert from '../Common/Alert';
 import Spinner from '../../assets/spinner.svg';
+import PageTitle from '../Common/PageTitle';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
+  plex: 'Plex',
   plexsettings: 'Plex Settings',
   plexsettingsDescription:
     'Configure the settings for your Plex server. Overseerr scans your Plex libraries to see what content is available.',
@@ -30,17 +33,17 @@ const messages = defineMessages({
   serverpresetRefreshing: 'Retrieving servers…',
   serverpresetLoad: 'Press the button to load available servers',
   toastPlexRefresh: 'Retrieving server list from Plex',
-  toastPlexRefreshSuccess: 'Retrieved server list from Plex',
-  toastPlexRefreshFailure: 'Unable to retrieve server list from Plex',
-  toastPlexConnecting: 'Attempting to connect to Plex server',
-  toastPlexConnectingSuccess: 'Connected to Plex server',
-  toastPlexConnectingFailure: 'Unable to connect to Plex server',
+  toastPlexRefreshSuccess: 'Plex server list retrieved successfully!',
+  toastPlexRefreshFailure: 'Failed to retrieve Plex server list.',
+  toastPlexConnecting: 'Attempting to connect to Plex…',
+  toastPlexConnectingSuccess: 'Plex connection established successfully!',
+  toastPlexConnectingFailure: 'Failed to connect to Plex.',
   settingUpPlex: 'Setting Up Plex',
   settingUpPlexDescription:
     'To set up Plex, you can either enter your details manually \
     or select a server retrieved from <RegisterPlexTVLink>plex.tv</RegisterPlexTVLink>.\
     Press the button to the right of the dropdown to check connectivity and retrieve available servers.',
-  hostname: 'Hostname/IP',
+  hostname: 'Hostname or IP Address',
   port: 'Port',
   ssl: 'SSL',
   timeout: 'Timeout',
@@ -59,8 +62,8 @@ const messages = defineMessages({
   librariesRemaining: 'Libraries Remaining: {count}',
   startscan: 'Start Scan',
   cancelscan: 'Cancel Scan',
-  validationHostnameRequired: 'You must provide a hostname/IP',
-  validationPortRequired: 'You must provide a port',
+  validationHostnameRequired: 'You must provide a hostname or IP address',
+  validationPortRequired: 'You must provide a valid port number',
 });
 
 interface Library {
@@ -120,9 +123,9 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
         /^(([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.validationHostnameRequired)
       ),
-    port: Yup.number().required(
-      intl.formatMessage(messages.validationPortRequired)
-    ),
+    port: Yup.number()
+      .typeError(intl.formatMessage(messages.validationPortRequired))
+      .required(intl.formatMessage(messages.validationPortRequired)),
   });
 
   const activeLibraries =
@@ -259,12 +262,16 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
   }
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.plex),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-6">
-        <h3 className="heading">
-          <FormattedMessage {...messages.plexsettings} />
-        </h3>
+        <h3 className="heading">{intl.formatMessage(messages.plexsettings)}</h3>
         <p className="description">
-          <FormattedMessage {...messages.plexsettingsDescription} />
+          {intl.formatMessage(messages.plexsettingsDescription)}
         </p>
         <div className="section">
           <Alert title={intl.formatMessage(messages.settingUpPlex)} type="info">
@@ -350,11 +357,9 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               <div className="form-row">
                 <label htmlFor="name" className="text-label">
                   <div className="flex flex-col">
-                    <span>
-                      <FormattedMessage {...messages.servername} />
-                    </span>
+                    <span>{intl.formatMessage(messages.servername)}</span>
                     <span className="text-gray-500">
-                      <FormattedMessage {...messages.servernameTip} />
+                      {intl.formatMessage(messages.servernameTip)}
                     </span>
                   </div>
                 </label>
@@ -376,7 +381,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               </div>
               <div className="form-row">
                 <label htmlFor="preset" className="text-label">
-                  <FormattedMessage {...messages.serverpreset} />
+                  {intl.formatMessage(messages.serverpreset)}
                 </label>
                 <div className="form-input">
                   <div className="form-input-field input-group">
@@ -460,7 +465,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               </div>
               <div className="form-row">
                 <label htmlFor="hostname" className="text-label">
-                  <FormattedMessage {...messages.hostname} />
+                  {intl.formatMessage(messages.hostname)}
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -482,7 +487,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
               </div>
               <div className="form-row">
                 <label htmlFor="port" className="text-label">
-                  <FormattedMessage {...messages.port} />
+                  {intl.formatMessage(messages.port)}
                 </label>
                 <div className="form-input">
                   <Field
@@ -545,10 +550,10 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
       </Formik>
       <div className="mt-10 mb-6">
         <h3 className="heading">
-          <FormattedMessage {...messages.plexlibraries} />
+          {intl.formatMessage(messages.plexlibraries)}
         </h3>
         <p className="description">
-          <FormattedMessage {...messages.plexlibrariesDescription} />
+          {intl.formatMessage(messages.plexlibrariesDescription)}
         </p>
       </div>
       <div className="section">
@@ -581,11 +586,9 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
         </ul>
       </div>
       <div className="mt-10 mb-6">
-        <h3 className="heading">
-          <FormattedMessage {...messages.manualscan} />
-        </h3>
+        <h3 className="heading">{intl.formatMessage(messages.manualscan)}</h3>
         <p className="description">
-          <FormattedMessage {...messages.manualscanDescription} />
+          {intl.formatMessage(messages.manualscanDescription)}
         </p>
       </div>
       <div className="section">
@@ -615,28 +618,24 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                 {dataSync.currentLibrary && (
                   <div className="flex items-center mb-2 mr-0 sm:mb-0 sm:mr-2">
                     <Badge>
-                      <FormattedMessage
-                        {...messages.currentlibrary}
-                        values={{ name: dataSync.currentLibrary.name }}
-                      />
+                      {intl.formatMessage(messages.currentlibrary, {
+                        name: dataSync.currentLibrary.name,
+                      })}
                     </Badge>
                   </div>
                 )}
                 <div className="flex items-center">
                   <Badge badgeType="warning">
-                    <FormattedMessage
-                      {...messages.librariesRemaining}
-                      values={{
-                        count: dataSync.currentLibrary
-                          ? dataSync.libraries.slice(
-                              dataSync.libraries.findIndex(
-                                (library) =>
-                                  library.id === dataSync.currentLibrary?.id
-                              ) + 1
-                            ).length
-                          : 0,
-                      }}
-                    />
+                    {intl.formatMessage(messages.librariesRemaining, {
+                      count: dataSync.currentLibrary
+                        ? dataSync.libraries.slice(
+                            dataSync.libraries.findIndex(
+                              (library) =>
+                                library.id === dataSync.currentLibrary?.id
+                            ) + 1
+                          ).length
+                        : 0,
+                    })}
                   </Badge>
                 </div>
               </>
@@ -658,7 +657,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                     />
                   </svg>
-                  <FormattedMessage {...messages.startscan} />
+                  {intl.formatMessage(messages.startscan)}
                 </Button>
               )}
 
@@ -678,7 +677,7 @@ const SettingsPlex: React.FC<SettingsPlexProps> = ({ onComplete }) => {
                       d="M6 18L18 6M6 6l12 12"
                     />
                   </svg>
-                  <FormattedMessage {...messages.cancelscan} />
+                  {intl.formatMessage(messages.cancelscan)}
                 </Button>
               )}
             </div>

src/components/Settings/SettingsServices.tsx

@@ -14,8 +14,11 @@ import Transition from '../Transition';
 import axios from 'axios';
 import SonarrModal from './SonarrModal';
 import Alert from '../Common/Alert';
+import PageTitle from '../Common/PageTitle';
+import globalMessages from '../../i18n/globalMessages';
 
 const messages = defineMessages({
+  services: 'Services',
   radarrsettings: 'Radarr Settings',
   radarrSettingsDescription:
     'Configure your Radarr connection below. You can have multiple Radarr configurations, but only two can be active as defaults at any time (one for standard HD and one for 4K). Administrators can override the server which is used for new requests.',
@@ -214,6 +217,12 @@ const SettingsServices: React.FC = () => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.services),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-6">
         <h3 className="heading">
           {intl.formatMessage(messages.radarrsettings)}

src/components/Settings/SettingsUsers/index.tsx

@@ -8,13 +8,16 @@ import Button from '../../Common/Button';
 import { defineMessages, useIntl } from 'react-intl';
 import { useToasts } from 'react-toast-notifications';
 import PermissionEdit from '../../PermissionEdit';
+import PageTitle from '../../Common/PageTitle';
+import globalMessages from '../../../i18n/globalMessages';
 
 const messages = defineMessages({
-  userSettings: 'Users',
+  users: 'Users',
+  userSettings: 'User Settings',
   userSettingsDescription: 'Configure global and default user settings.',
   save: 'Save Changes',
   saving: 'Saving…',
-  toastSettingsSuccess: 'Settings successfully saved!',
+  toastSettingsSuccess: 'User settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
   localLogin: 'Enable Local User Sign-In',
   defaultPermissions: 'Default User Permissions',
@@ -33,6 +36,12 @@ const SettingsUsers: React.FC = () => {
 
   return (
     <>
+      <PageTitle
+        title={[
+          intl.formatMessage(messages.users),
+          intl.formatMessage(globalMessages.settings),
+        ]}
+      />
       <div className="mb-6">
         <h3 className="heading">{intl.formatMessage(messages.userSettings)}</h3>
         <p className="description">

src/components/Settings/SonarrModal/index.tsx

@@ -12,13 +12,13 @@ const messages = defineMessages({
   createsonarr: 'Add New Sonarr Server',
   editsonarr: 'Edit Sonarr Server',
   validationNameRequired: 'You must provide a server name',
-  validationHostnameRequired: 'You must provide a hostname/IP',
-  validationPortRequired: 'You must provide a port',
+  validationHostnameRequired: 'You must provide a hostname or IP address',
+  validationPortRequired: 'You must provide a valid port number',
   validationApiKeyRequired: 'You must provide an API key',
   validationRootFolderRequired: 'You must select a root folder',
   validationProfileRequired: 'You must select a quality profile',
   validationLanguageProfileRequired: 'You must select a language profile',
-  toastSonarrTestSuccess: 'Sonarr connection established!',
+  toastSonarrTestSuccess: 'Sonarr connection established successfully!',
   toastSonarrTestFailure: 'Failed to connect to Sonarr.',
   saving: 'Saving…',
   save: 'Save Changes',
@@ -28,7 +28,7 @@ const messages = defineMessages({
   defaultserver: 'Default Server',
   servername: 'Server Name',
   servernamePlaceholder: 'A Sonarr Server',
-  hostname: 'Hostname',
+  hostname: 'Hostname or IP Address',
   port: 'Port',
   ssl: 'SSL',
   apiKey: 'API Key',
@@ -109,9 +109,9 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
         /^(([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.validationHostnameRequired)
       ),
-    port: Yup.number().required(
-      intl.formatMessage(messages.validationPortRequired)
-    ),
+    port: Yup.number()
+      .typeError(intl.formatMessage(messages.validationPortRequired))
+      .required(intl.formatMessage(messages.validationPortRequired)),
     apiKey: Yup.string().required(
       intl.formatMessage(messages.validationApiKeyRequired)
     ),