Merge remote-tracking branch 'overseerr/develop' into develop

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

@@ -1,14 +1,21 @@
+import Badge from '@app/components/Common/Badge';
+import Button from '@app/components/Common/Button';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import Modal from '@app/components/Common/Modal';
+import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { DocumentTextIcon } from '@heroicons/react/outline';
-import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import { Fragment, useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
-import ReactMarkdown from 'react-markdown';
 import useSWR from 'swr';
-import globalMessages from '../../../../i18n/globalMessages';
-import Badge from '../../../Common/Badge';
-import Button from '../../../Common/Button';
-import LoadingSpinner from '../../../Common/LoadingSpinner';
-import Modal from '../../../Common/Modal';
-import Transition from '../../../Transition';
+
+// dyanmic is having trouble extracting the props for react-markdown here so we are just ignoring it since its really
+// only children we are using
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ReactMarkdown = dynamic<any>(() => import('react-markdown'), {
+  ssr: false,
+});
 
 const messages = defineMessages({
   releases: 'Releases',
@@ -48,17 +55,14 @@ interface ReleaseProps {
   currentVersion: string;
 }
 
-const Release: React.FC<ReleaseProps> = ({
-  currentVersion,
-  release,
-  isLatest,
-}) => {
+const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
   const intl = useIntl();
   const [isModalOpen, setModalOpen] = useState(false);
 
   return (
     <div className="flex w-full flex-col space-y-3 rounded-md bg-gray-800 px-4 py-2 shadow-md ring-1 ring-gray-700 sm:flex-row sm:space-y-0 sm:space-x-3">
       <Transition
+        as={Fragment}
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
@@ -69,7 +73,6 @@ const Release: React.FC<ReleaseProps> = ({
       >
         <Modal
           onCancel={() => setModalOpen(false)}
-          iconSvg={<DocumentTextIcon />}
           title={intl.formatMessage(messages.versionChangelog, {
             version: release.name,
           })}
@@ -120,7 +123,7 @@ interface ReleasesProps {
   currentVersion: string;
 }
 
-const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
+const Releases = ({ currentVersion }: ReleasesProps) => {
   const intl = useIntl();
   const { data, error } = useSWR<GitHubRelease[]>(REPO_RELEASE_API);
 

src/components/Settings/SettingsAbout/index.tsx

@@ -1,19 +1,18 @@
+import Alert from '@app/components/Common/Alert';
+import Badge from '@app/components/Common/Badge';
+import List from '@app/components/Common/List';
+import LoadingSpinner from '@app/components/Common/LoadingSpinner';
+import PageTitle from '@app/components/Common/PageTitle';
+import Releases from '@app/components/Settings/SettingsAbout/Releases';
+import globalMessages from '@app/i18n/globalMessages';
+import Error from '@app/pages/_error';
 import { InformationCircleIcon } from '@heroicons/react/solid';
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import useSWR from 'swr';
-import {
+import type {
   SettingsAboutResponse,
   StatusResponse,
-} 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';
-import PageTitle from '../../Common/PageTitle';
-import Releases from './Releases';
+} from '@server/interfaces/api/settingsInterfaces';
+import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
 
 const messages = defineMessages({
   about: 'About',
@@ -37,7 +36,7 @@ const messages = defineMessages({
     '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 = () => {
+const SettingsAbout = () => {
   const intl = useIntl();
   const { data, error } = useSWR<SettingsAboutResponse>(
     '/api/v1/settings/about'
@@ -61,19 +60,19 @@ const SettingsAbout: React.FC = () => {
           intl.formatMessage(globalMessages.settings),
         ]}
       />
-      <div className="mt-6 rounded-md bg-indigo-700 p-4">
+      <div className="mt-6 rounded-md border border-indigo-500 bg-indigo-400 bg-opacity-20 p-4 backdrop-blur">
         <div className="flex">
           <div className="flex-shrink-0">
-            <InformationCircleIcon className="h-5 w-5 text-white" />
+            <InformationCircleIcon className="h-5 w-5 text-gray-100" />
           </div>
           <div className="ml-3 flex-1 md:flex md:justify-between">
-            <p className="text-sm leading-5 text-white">
+            <p className="text-sm leading-5 text-gray-100">
               {intl.formatMessage(messages.betawarning)}
             </p>
             <p className="mt-3 text-sm leading-5 md:mt-0 md:ml-6">
               <a
                 href="http://github.com/fallenbagel/jellyseerr"
-                className="whitespace-nowrap font-medium text-indigo-100 transition duration-150 ease-in-out hover:text-white"
+                className="whitespace-nowrap font-medium text-gray-100 transition duration-150 ease-in-out hover:text-white"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -88,9 +87,9 @@ const SettingsAbout: React.FC = () => {
           {data.version.startsWith('develop-') && (
             <Alert
               title={intl.formatMessage(messages.runningDevelop, {
-                code: function code(msg) {
-                  return <code className="bg-opacity-50">{msg}</code>;
-                },
+                code: (msg: React.ReactNode) => (
+                  <code className="bg-opacity-50">{msg}</code>
+                ),
               })}
             />
           )}