fix: transition animation (#2974)

switched to using headlessui transition instead of react-css-transition due to new version breaking the
animation

src/components/Settings/RadarrModal/index.tsx

@@ -1,7 +1,7 @@
 import Modal from '@app/components/Common/Modal';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
 import type { RadarrSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -212,6 +212,7 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
 
   return (
     <Transition
+      as="div"
       appear
       show
       enter="transition ease-in-out duration-300 transform opacity-0"

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

@@ -2,8 +2,8 @@ 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 Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { DocumentTextIcon } from '@heroicons/react/outline';
 import { useState } from 'react';
 import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
@@ -55,6 +55,7 @@ const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
   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="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Settings/SettingsJobsCache/index.tsx

@@ -5,9 +5,9 @@ import LoadingSpinner from '@app/components/Common/LoadingSpinner';
 import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import Table from '@app/components/Common/Table';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
 import { formatBytes } from '@app/utils/numberHelpers';
+import { Transition } from '@headlessui/react';
 import { PlayIcon, StopIcon, TrashIcon } from '@heroicons/react/outline';
 import { PencilIcon } from '@heroicons/react/solid';
 import type { CacheItem } from '@server/interfaces/api/settingsInterfaces';
@@ -187,6 +187,7 @@ const SettingsJobs = () => {
         ]}
       />
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Settings/SettingsLogs/index.tsx

@@ -5,10 +5,10 @@ import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import Table from '@app/components/Common/Table';
 import Tooltip from '@app/components/Common/Tooltip';
-import Transition from '@app/components/Transition';
 import { useUpdateQueryParams } from '@app/hooks/useUpdateQueryParams';
 import globalMessages from '@app/i18n/globalMessages';
 import Error from '@app/pages/_error';
+import { Transition } from '@headlessui/react';
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
@@ -135,6 +135,7 @@ const SettingsLogs = () => {
         ]}
       />
       <Transition
+        as="div"
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Settings/SettingsServices.tsx

@@ -8,12 +8,12 @@ import Modal from '@app/components/Common/Modal';
 import PageTitle from '@app/components/Common/PageTitle';
 import RadarrModal from '@app/components/Settings/RadarrModal';
 import SonarrModal from '@app/components/Settings/SonarrModal';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/solid';
 import type { RadarrSettings, SonarrSettings } from '@server/lib/settings';
 import axios from 'axios';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR, { mutate } from 'swr';
 
@@ -245,6 +245,7 @@ const SettingsServices = () => {
         />
       )}
       <Transition
+        as={Fragment}
         show={deleteServerModal.open}
         enter="transition ease-in-out duration-300 transform opacity-0"
         enterFrom="opacity-0"

src/components/Settings/SonarrModal/index.tsx

@@ -1,7 +1,7 @@
 import Modal from '@app/components/Common/Modal';
 import SensitiveInput from '@app/components/Common/SensitiveInput';
-import Transition from '@app/components/Transition';
 import globalMessages from '@app/i18n/globalMessages';
+import { Transition } from '@headlessui/react';
 import { PencilIcon, PlusIcon } from '@heroicons/react/solid';
 import type { SonarrSettings } from '@server/lib/settings';
 import axios from 'axios';
@@ -221,6 +221,7 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
 
   return (
     <Transition
+      as="div"
       appear
       show
       enter="transition ease-in-out duration-300 transform opacity-0"