fix(ui): refinements for 'About' page (#2173)

* fix(ui): refinements for 'About' page

* fix: remove unneeded GithubLink function

* fix: display/link badges appropriately

src/components/Common/Modal/index.tsx

@@ -128,16 +128,16 @@ const Modal: React.FC<ModalProps> = ({
               />
             </div>
           )}
-          <div className="relative sm:flex sm:items-center">
+          <div className="relative overflow-x-hidden sm:flex sm:items-center">
             {iconSvg && <div className="modal-icon">{iconSvg}</div>}
             <div
-              className={`mt-3 text-center sm:mt-0 sm:text-left ${
+              className={`mt-3 text-center sm:mt-0 sm:text-left truncate text-white ${
                 iconSvg ? 'sm:ml-4' : 'sm:mb-4'
               }`}
             >
               {title && (
                 <span
-                  className="text-lg font-bold leading-6 text-white"
+                  className="text-lg font-bold leading-6 truncate"
                   id="modal-headline"
                 >
                   {title}

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

@@ -4,7 +4,6 @@ import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import ReactMarkdown from 'react-markdown';
 import useSWR from 'swr';
 import globalMessages from '../../../../i18n/globalMessages';
-import Alert from '../../../Common/Alert';
 import Badge from '../../../Common/Badge';
 import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
@@ -13,14 +12,12 @@ import Transition from '../../../Transition';
 
 const messages = defineMessages({
   releases: 'Releases',
-  releasedataMissing: 'Release data unavailable. Is GitHub down?',
-  versionChangelog: 'Version Changelog',
+  releasedataMissing: 'Release data is currently unavailable.',
+  versionChangelog: '{version} Changelog',
   viewongithub: 'View on GitHub',
   latestversion: 'Latest',
-  currentversion: 'Current Version',
+  currentversion: 'Current',
   viewchangelog: 'View Changelog',
-  runningDevelopMessage:
-    '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 =
@@ -58,8 +55,9 @@ const Release: React.FC<ReleaseProps> = ({
 }) => {
   const intl = useIntl();
   const [isModalOpen, setModalOpen] = useState(false);
+
   return (
-    <div className="flex flex-col px-4 py-2 bg-gray-800 rounded-md sm:flex-row">
+    <div className="flex flex-col w-full px-4 py-2 space-y-3 bg-gray-800 rounded-md shadow-md sm:space-y-0 sm:space-x-3 sm:flex-row ring-1 ring-gray-700">
       <Transition
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
@@ -72,7 +70,9 @@ const Release: React.FC<ReleaseProps> = ({
         <Modal
           onCancel={() => setModalOpen(false)}
           iconSvg={<DocumentTextIcon />}
-          title={intl.formatMessage(messages.versionChangelog)}
+          title={intl.formatMessage(messages.versionChangelog, {
+            version: release.name,
+          })}
           cancelText={intl.formatMessage(globalMessages.close)}
           okText={intl.formatMessage(messages.viewongithub)}
           onOk={() => {
@@ -84,38 +84,34 @@ const Release: React.FC<ReleaseProps> = ({
           </div>
         </Modal>
       </Transition>
-      <div className="flex items-center justify-center mb-4 sm:mb-0 sm:justify-start">
-        <span className="mt-1 mr-2 text-xs">
-          <FormattedRelativeTime
-            value={Math.floor(
-              (new Date(release.created_at).getTime() - Date.now()) / 1000
-            )}
-            updateIntervalInSeconds={1}
-            numeric="auto"
-          />
+      <div className="flex items-center justify-center flex-grow w-full space-x-2 truncate sm:justify-start">
+        <span className="text-lg font-bold truncate">
+          <span className="mr-2 text-xs font-normal whitespace-nowrap">
+            <FormattedRelativeTime
+              value={Math.floor(
+                (new Date(release.created_at).getTime() - Date.now()) / 1000
+              )}
+              updateIntervalInSeconds={1}
+              numeric="auto"
+            />
+          </span>
+          {release.name}
         </span>
-        <span className="text-lg font-bold">{release.name}</span>
         {isLatest && (
-          <span className="ml-2 -mt-1">
-            <Badge badgeType="primary">
-              {intl.formatMessage(messages.latestversion)}
-            </Badge>
-          </span>
+          <Badge badgeType="success">
+            {intl.formatMessage(messages.latestversion)}
+          </Badge>
         )}
         {release.name.includes(currentVersion) && (
-          <span className="ml-2 -mt-1">
-            <Badge badgeType="success">
-              {intl.formatMessage(messages.currentversion)}
-            </Badge>
-          </span>
+          <Badge badgeType="primary">
+            {intl.formatMessage(messages.currentversion)}
+          </Badge>
         )}
       </div>
-      <div className="flex-1 text-center sm:text-right">
-        <Button buttonType="primary" onClick={() => setModalOpen(true)}>
-          <DocumentTextIcon />
-          <span>{intl.formatMessage(messages.viewchangelog)}</span>
-        </Button>
-      </div>
+      <Button buttonType="primary" onClick={() => setModalOpen(true)}>
+        <DocumentTextIcon />
+        <span>{intl.formatMessage(messages.viewchangelog)}</span>
+      </Button>
     </div>
   );
 };
@@ -143,31 +139,10 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
   return (
     <div>
       <h3 className="heading">{intl.formatMessage(messages.releases)}</h3>
-      <div className="section">
-        {currentVersion.startsWith('develop-') && (
-          <Alert
-            title={intl.formatMessage(messages.runningDevelopMessage, {
-              code: function code(msg) {
-                return <code className="bg-opacity-50">{msg}</code>;
-              },
-              GithubLink: function GithubLink(msg) {
-                return (
-                  <a
-                    href="https://github.com/sct/overseerr"
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-yellow-100 underline transition duration-300 hover:text-white"
-                  >
-                    {msg}
-                  </a>
-                );
-              },
-            })}
-          />
-        )}
-        {data?.map((release, index) => {
+      <div className="space-y-3 section">
+        {data.map((release, index) => {
           return (
-            <div key={`release-${release.id}`} className="mb-2">
+            <div key={`release-${release.id}`}>
               <Release
                 release={release}
                 currentVersion={currentVersion}

src/components/Settings/SettingsAbout/index.tsx

@@ -8,6 +8,7 @@ import {
 } from '../../../../server/interfaces/api/settingsInterfaces';
 import globalMessages from '../../../i18n/globalMessages';
 import Error from '../../../pages/_error';
+import Alert from '../../Common/Alert';
 import Badge from '../../Common/Badge';
 import List from '../../Common/List';
 import LoadingSpinner from '../../Common/LoadingSpinner';
@@ -16,7 +17,7 @@ import Releases from './Releases';
 
 const messages = defineMessages({
   about: 'About',
-  overseerrinformation: 'Overseerr Information',
+  overseerrinformation: 'About Overseerr',
   version: 'Version',
   totalmedia: 'Total Media',
   totalrequests: 'Total Requests',
@@ -31,6 +32,8 @@ const messages = defineMessages({
   uptodate: 'Up to Date',
   betawarning:
     'This is BETA software. Features may be broken and/or unstable. Please report any issues on GitHub!',
+  runningDevelop:
+    'You are running the <code>develop</code> branch of Overseerr, which is only recommended for those contributing to development or assisting with bleeding-edge testing.',
 });
 
 const SettingsAbout: React.FC = () => {
@@ -81,22 +84,58 @@ const SettingsAbout: React.FC = () => {
       </div>
       <div className="section">
         <List title={intl.formatMessage(messages.overseerrinformation)}>
+          {data.version.startsWith('develop-') && (
+            <Alert
+              title={intl.formatMessage(messages.runningDevelop, {
+                code: function code(msg) {
+                  return <code className="bg-opacity-50">{msg}</code>;
+                },
+              })}
+            />
+          )}
           <List.Item
             title={intl.formatMessage(messages.version)}
-            className="truncate"
+            className="flex flex-row items-center truncate"
           >
-            <code>{data.version.replace('develop-', '')}</code>
-            {status?.updateAvailable ? (
-              <Badge badgeType="warning" className="ml-2">
-                {intl.formatMessage(messages.outofdate)}
-              </Badge>
-            ) : (
-              status?.commitTag !== 'local' && (
-                <Badge badgeType="success" className="ml-2">
-                  {intl.formatMessage(messages.uptodate)}
-                </Badge>
-              )
-            )}
+            <code className="truncate">
+              {data.version.replace('develop-', '')}
+            </code>
+            {status?.commitTag !== 'local' &&
+              (status?.updateAvailable ? (
+                <a
+                  href={
+                    data.version.startsWith('develop-')
+                      ? `https://github.com/sct/overseerr/compare/${status.commitTag}...develop`
+                      : 'https://github.com/sct/overseerr/releases'
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Badge
+                    badgeType="warning"
+                    className="ml-2 transition !cursor-pointer hover:bg-yellow-400"
+                  >
+                    {intl.formatMessage(messages.outofdate)}
+                  </Badge>
+                </a>
+              ) : (
+                <a
+                  href={
+                    data.version.startsWith('develop-')
+                      ? 'https://github.com/sct/overseerr/commits/develop'
+                      : 'https://github.com/sct/overseerr/releases'
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Badge
+                    badgeType="success"
+                    className="ml-2 transition !cursor-pointer hover:bg-green-400"
+                  >
+                    {intl.formatMessage(messages.uptodate)}
+                  </Badge>
+                </a>
+              ))}
           </List.Item>
           <List.Item title={intl.formatMessage(messages.totalmedia)}>
             {intl.formatNumber(data.totalMediaItems)}
@@ -118,7 +157,7 @@ const SettingsAbout: React.FC = () => {
               href="https://docs.overseerr.dev"
               target="_blank"
               rel="noreferrer"
-              className="text-indigo-500 hover:underline"
+              className="text-indigo-500 transition duration-300 hover:underline"
             >
               https://docs.overseerr.dev
             </a>
@@ -128,7 +167,7 @@ const SettingsAbout: React.FC = () => {
               href="https://github.com/sct/overseerr/discussions"
               target="_blank"
               rel="noreferrer"
-              className="text-indigo-500 hover:underline"
+              className="text-indigo-500 transition duration-300 hover:underline"
             >
               https://github.com/sct/overseerr/discussions
             </a>
@@ -138,7 +177,7 @@ const SettingsAbout: React.FC = () => {
               href="https://discord.gg/overseerr"
               target="_blank"
               rel="noreferrer"
-              className="text-indigo-500 hover:underline"
+              className="text-indigo-500 transition duration-300 hover:underline"
             >
               https://discord.gg/overseerr
             </a>
@@ -154,7 +193,7 @@ const SettingsAbout: React.FC = () => {
               href="https://github.com/sponsors/sct"
               target="_blank"
               rel="noreferrer"
-              className="text-indigo-500 hover:underline"
+              className="text-indigo-500 transition duration-300 hover:underline"
             >
               https://github.com/sponsors/sct
             </a>
@@ -167,7 +206,7 @@ const SettingsAbout: React.FC = () => {
               href="https://patreon.com/overseerr"
               target="_blank"
               rel="noreferrer"
-              className="text-indigo-500 hover:underline"
+              className="text-indigo-500 transition duration-300 hover:underline"
             >
               https://patreon.com/overseerr
             </a>

src/i18n/locale/en.json

@@ -426,12 +426,11 @@
   "components.Settings.RadarrModal.validationPortRequired": "You must provide a valid port number",
   "components.Settings.RadarrModal.validationProfileRequired": "You must select a quality profile",
   "components.Settings.RadarrModal.validationRootFolderRequired": "You must select a root folder",
-  "components.Settings.SettingsAbout.Releases.currentversion": "Current Version",
+  "components.Settings.SettingsAbout.Releases.currentversion": "Current",
   "components.Settings.SettingsAbout.Releases.latestversion": "Latest",
-  "components.Settings.SettingsAbout.Releases.releasedataMissing": "Release data unavailable. Is GitHub down?",
+  "components.Settings.SettingsAbout.Releases.releasedataMissing": "Release data is currently unavailable.",
   "components.Settings.SettingsAbout.Releases.releases": "Releases",
-  "components.Settings.SettingsAbout.Releases.runningDevelopMessage": "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.",
-  "components.Settings.SettingsAbout.Releases.versionChangelog": "Version Changelog",
+  "components.Settings.SettingsAbout.Releases.versionChangelog": "{version} Changelog",
   "components.Settings.SettingsAbout.Releases.viewchangelog": "View Changelog",
   "components.Settings.SettingsAbout.Releases.viewongithub": "View on GitHub",
   "components.Settings.SettingsAbout.about": "About",
@@ -441,8 +440,9 @@
   "components.Settings.SettingsAbout.githubdiscussions": "GitHub Discussions",
   "components.Settings.SettingsAbout.helppaycoffee": "Help Pay for Coffee",
   "components.Settings.SettingsAbout.outofdate": "Out of Date",
-  "components.Settings.SettingsAbout.overseerrinformation": "Overseerr Information",
+  "components.Settings.SettingsAbout.overseerrinformation": "About Overseerr",
   "components.Settings.SettingsAbout.preferredmethod": "Preferred",
+  "components.Settings.SettingsAbout.runningDevelop": "You are running the <code>develop</code> branch of Overseerr, which is only recommended for those contributing to development or assisting with bleeding-edge testing.",
   "components.Settings.SettingsAbout.supportoverseerr": "Support Overseerr",
   "components.Settings.SettingsAbout.timezone": "Time Zone",
   "components.Settings.SettingsAbout.totalmedia": "Total Media",

src/styles/globals.css

@@ -296,6 +296,10 @@ select.short {
   @apply w-min;
 }
 
+button > span {
+  @apply whitespace-nowrap;
+}
+
 button.input-action {
   @apply relative inline-flex items-center px-3 sm:px-3.5 py-2 -ml-px text-sm font-medium leading-5 text-white transition duration-150 ease-in-out bg-indigo-600 border border-gray-500 hover:bg-indigo-500 active:bg-gray-100 active:text-gray-700 last:rounded-r-md;
 }