From eb5502a16f86e37a933f6beca0678c2d228e77d5 Mon Sep 17 00:00:00 2001
From: Danshil Kokil Mungur <me@danshilm.com>
Date: Thu, 23 Feb 2023 19:27:26 +0400
Subject: [PATCH] fix(ui): prevent title cards from flickering when quickly
 hovering across them (#3349)

* fix(ui): remove opacity classes from transition enter and leave props

The flickering was caused by the opacity classes in the `leave` prop to take effect as the
transition ends; when the `leaveTo` prop classes are no longer applied, but the `leave` prop classes
are still applied.

* fix(ui): resolve transition issues for all components

1. Remove opacity classes from `enter` and `leave` props
2. Fix some class name typos
3. Remove transform classes since those are automatically applied as from TailwindCSS v3.0
4. Narrow down `transition` classes to only the properties being transitioned in Transition components
---
 .../Common/ButtonWithDropdown/index.tsx          | 12 ++++++------
 src/components/Common/Modal/index.tsx            | 14 +++++++-------
 src/components/Common/SlideCheckbox/index.tsx    |  2 +-
 src/components/Common/SlideOver/index.tsx        |  8 ++++----
 src/components/Discover/index.tsx                |  4 ++--
 .../IssueDetails/IssueComment/index.tsx          | 14 +++++++-------
 .../IssueDetails/IssueDescription/index.tsx      |  8 ++++----
 src/components/IssueDetails/index.tsx            |  4 ++--
 src/components/IssueModal/index.tsx              |  4 ++--
 src/components/Layout/LanguagePicker/index.tsx   | 12 ++++++------
 src/components/Layout/MobileMenu/index.tsx       |  6 +++---
 src/components/Layout/Sidebar/index.tsx          |  4 ++--
 src/components/Layout/UserDropdown/index.tsx     |  8 ++++----
 src/components/Login/index.tsx                   |  4 ++--
 src/components/RegionSelector/index.tsx          |  2 +-
 .../RequestModal/AdvancedRequester/index.tsx     |  4 ++--
 .../RequestModal/CollectionRequestModal.tsx      |  4 ++--
 src/components/RequestModal/TvRequestModal.tsx   |  4 ++--
 src/components/RequestModal/index.tsx            |  4 ++--
 src/components/Settings/LibraryItem.tsx          |  2 +-
 src/components/Settings/RadarrModal/index.tsx    |  6 +++---
 .../Settings/SettingsAbout/Releases/index.tsx    |  4 ++--
 .../Settings/SettingsJobsCache/index.tsx         |  4 ++--
 src/components/Settings/SettingsLogs/index.tsx   |  4 ++--
 src/components/Settings/SettingsServices.tsx     |  6 +++---
 src/components/Settings/SonarrModal/index.tsx    |  6 +++---
 src/components/StatusChecker/index.tsx           |  4 ++--
 src/components/TitleCard/index.tsx               |  8 ++++----
 src/components/TvDetails/index.tsx               | 14 +++++++-------
 src/components/UserList/PlexImportModal.tsx      |  4 ++--
 src/components/UserList/index.tsx                | 16 ++++++++--------
 31 files changed, 100 insertions(+), 100 deletions(-)

diff --git a/src/components/Common/ButtonWithDropdown/index.tsx b/src/components/Common/ButtonWithDropdown/index.tsx
index b5bc0cb64..b0d314d1a 100644
--- a/src/components/Common/ButtonWithDropdown/index.tsx
+++ b/src/components/Common/ButtonWithDropdown/index.tsx
@@ -101,12 +101,12 @@ const ButtonWithDropdown = ({
           <Transition
             as={Fragment}
             show={isOpen}
-            enter="transition ease-out duration-100 opacity-0"
-            enterFrom="transform opacity-0 scale-95"
-            enterTo="transform opacity-100 scale-100"
-            leave="transition ease-in duration-75 opacity-100"
-            leaveFrom="transform opacity-100 scale-100"
-            leaveTo="transform opacity-0 scale-95"
+            enter="transition ease-out duration-100"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
           >
             <div className="absolute right-0 z-40 mt-2 -mr-1 w-56 origin-top-right rounded-md shadow-lg">
               <div
diff --git a/src/components/Common/Modal/index.tsx b/src/components/Common/Modal/index.tsx
index 0d7eff19e..464ba6341 100644
--- a/src/components/Common/Modal/index.tsx
+++ b/src/components/Common/Modal/index.tsx
@@ -78,10 +78,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         appear
         as="div"
         className="fixed top-0 bottom-0 left-0 right-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
-        enter="transition opacity-0 duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition opacity-100 duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         ref={parentRef}
@@ -89,10 +89,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         <Transition
           appear
           as={Fragment}
-          enter="transition opacity-0 duration-300 transform scale-75"
+          enter="transition duration-300"
           enterFrom="opacity-0 scale-75"
           enterTo="opacity-100 scale-100"
-          leave="transition opacity-100 duration-300"
+          leave="transition-opacity duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
           show={loading}
@@ -102,7 +102,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           </div>
         </Transition>
         <Transition
-          className="hide-scrollbar relative inline-block w-full transform overflow-auto bg-gray-800 px-4 pt-4 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
+          className="hide-scrollbar relative inline-block w-full overflow-auto bg-gray-800 px-4 pt-4 pb-4 text-left align-bottom shadow-xl ring-1 ring-gray-700 transition-all sm:my-8 sm:max-w-3xl sm:rounded-lg sm:align-middle"
           role="dialog"
           aria-modal="true"
           aria-labelledby="modal-headline"
@@ -111,10 +111,10 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           }}
           appear
           as="div"
-          enter="transition opacity-0 duration-300 transform scale-75"
+          enter="transition duration-300"
           enterFrom="opacity-0 scale-75"
           enterTo="opacity-100 scale-100"
-          leave="transition opacity-100 duration-300"
+          leave="transition-opacity duration-300"
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
           show={!loading}
diff --git a/src/components/Common/SlideCheckbox/index.tsx b/src/components/Common/SlideCheckbox/index.tsx
index a514d6c03..320dd667f 100644
--- a/src/components/Common/SlideCheckbox/index.tsx
+++ b/src/components/Common/SlideCheckbox/index.tsx
@@ -29,7 +29,7 @@ const SlideCheckbox = ({ onClick, checked = false }: SlideCheckboxProps) => {
         aria-hidden="true"
         className={`${
           checked ? 'translate-x-5' : 'translate-x-0'
-        } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+        } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
       ></span>
     </span>
   );
diff --git a/src/components/Common/SlideOver/index.tsx b/src/components/Common/SlideOver/index.tsx
index 48c1f8549..6da8972a8 100644
--- a/src/components/Common/SlideOver/index.tsx
+++ b/src/components/Common/SlideOver/index.tsx
@@ -37,10 +37,10 @@ const SlideOver = ({
       as={Fragment}
       show={show}
       appear
-      enter="opacity-0 transition ease-in-out duration-300"
+      enter="transition-opacity ease-in-out duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"
-      leave="opacity-100 transition ease-in-out duration-300"
+      leave="transition-opacity ease-in-out duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
@@ -58,10 +58,10 @@ const SlideOver = ({
           <section className="absolute inset-y-0 right-0 flex max-w-full">
             <Transition.Child
               appear
-              enter="transform transition ease-in-out duration-500 sm:duration-700"
+              enter="transition-transform ease-in-out duration-500 sm:duration-700"
               enterFrom="translate-x-full"
               enterTo="translate-x-0"
-              leave="transform transition ease-in-out duration-500 sm:duration-700"
+              leave="transition-transform ease-in-out duration-500 sm:duration-700"
               leaveFrom="translate-x-0"
               leaveTo="translate-x-full"
             >
diff --git a/src/components/Discover/index.tsx b/src/components/Discover/index.tsx
index b9071b424..74383f13b 100644
--- a/src/components/Discover/index.tsx
+++ b/src/components/Discover/index.tsx
@@ -165,10 +165,10 @@ const Discover = () => {
           </Transition>
           <Transition
             show={isEditing}
-            enter="transition transform duration-300"
+            enter="transition duration-300"
             enterFrom="opacity-0 translate-y-6"
             enterTo="opacity-100 translate-y-0"
-            leave="transition duration-300 transform"
+            leave="transition duration-300"
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-6"
             className="safe-shift-edit-menu fixed right-0 left-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800 bg-opacity-80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-y-0 sm:space-x-3"
diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx
index e1e265b0e..0a38fa531 100644
--- a/src/components/IssueDetails/IssueComment/index.tsx
+++ b/src/components/IssueDetails/IssueComment/index.tsx
@@ -65,10 +65,10 @@ const IssueComment = ({
     >
       <Transition
         as={Fragment}
-        enter="transition opacity-0 duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition opacity-100 duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={showDeleteModal}
@@ -115,11 +115,11 @@ const IssueComment = ({
                     as={Fragment}
                     show={open}
                     enter="transition ease-out duration-100"
-                    enterFrom="transform opacity-0 scale-95"
-                    enterTo="transform opacity-100 scale-100"
+                    enterFrom="opacity-0 scale-95"
+                    enterTo="opacity-100 scale-100"
                     leave="transition ease-in duration-75"
-                    leaveFrom="transform opacity-100 scale-100"
-                    leaveTo="transform opacity-0 scale-95"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-95"
                   >
                     <Menu.Items
                       static
@@ -164,7 +164,7 @@ const IssueComment = ({
             </Menu>
           )}
           <div
-            className={`absolute top-3 z-10 h-3 w-3 rotate-45 transform bg-gray-800 shadow ring-1 ring-gray-500 ${
+            className={`absolute top-3 z-10 h-3 w-3 rotate-45 bg-gray-800 shadow ring-1 ring-gray-500 ${
               isReversed ? '-left-1' : '-right-1'
             }`}
           />
diff --git a/src/components/IssueDetails/IssueDescription/index.tsx b/src/components/IssueDetails/IssueDescription/index.tsx
index 7121f0952..7dc8c8d31 100644
--- a/src/components/IssueDetails/IssueDescription/index.tsx
+++ b/src/components/IssueDetails/IssueDescription/index.tsx
@@ -57,11 +57,11 @@ const IssueDescription = ({
                   show={open}
                   as="div"
                   enter="transition ease-out duration-100"
-                  enterFrom="transform opacity-0 scale-95"
-                  enterTo="transform opacity-100 scale-100"
+                  enterFrom="opacity-0 scale-95"
+                  enterTo="opacity-100 scale-100"
                   leave="transition ease-in duration-75"
-                  leaveFrom="transform opacity-100 scale-100"
-                  leaveTo="transform opacity-0 scale-95"
+                  leaveFrom="opacity-100 scale-100"
+                  leaveTo="opacity-0 scale-95"
                 >
                   <Menu.Items
                     static
diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx
index 1a299cd80..712d33798 100644
--- a/src/components/IssueDetails/index.tsx
+++ b/src/components/IssueDetails/index.tsx
@@ -182,10 +182,10 @@ const IssueDetails = () => {
       <PageTitle title={[intl.formatMessage(messages.issuepagetitle), title]} />
       <Transition
         as="div"
-        enter="transition opacity-0 duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="transition opacity-100 duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={showDeleteModal}
diff --git a/src/components/IssueModal/index.tsx b/src/components/IssueModal/index.tsx
index 6ec67c245..bf7e923ac 100644
--- a/src/components/IssueModal/index.tsx
+++ b/src/components/IssueModal/index.tsx
@@ -12,10 +12,10 @@ interface IssueModalProps {
 const IssueModal = ({ show, mediaType, onCancel, tmdbId }: IssueModalProps) => (
   <Transition
     as="div"
-    enter="transition opacity-0 duration-300"
+    enter="transition-opacity duration-300"
     enterFrom="opacity-0"
     enterTo="opacity-100"
-    leave="transition opacity-100 duration-300"
+    leave="transition-opacity duration-300"
     leaveFrom="opacity-100"
     leaveTo="opacity-0"
     show={show}
diff --git a/src/components/Layout/LanguagePicker/index.tsx b/src/components/Layout/LanguagePicker/index.tsx
index a8ebda5a7..3ab1f74ae 100644
--- a/src/components/Layout/LanguagePicker/index.tsx
+++ b/src/components/Layout/LanguagePicker/index.tsx
@@ -34,12 +34,12 @@ const LanguagePicker = () => {
       <Transition
         as="div"
         show={isDropdownOpen}
-        enter="transition ease-out duration-100 opacity-0"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
-        leave="transition ease-in duration-75 opacity-100"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
+        enter="transition ease-out duration-100"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
       >
         <div
           className="absolute right-0 mt-2 w-56 origin-top-right rounded-md shadow-lg"
diff --git a/src/components/Layout/MobileMenu/index.tsx b/src/components/Layout/MobileMenu/index.tsx
index e0b45a22f..f6c574f4d 100644
--- a/src/components/Layout/MobileMenu/index.tsx
+++ b/src/components/Layout/MobileMenu/index.tsx
@@ -131,13 +131,13 @@ const MobileMenu = () => {
         show={isOpen}
         as="div"
         ref={ref}
-        enter="transition transform duration-500"
+        enter="transition duration-500"
         enterFrom="opacity-0 translate-y-0"
         enterTo="opacity-100 -translate-y-full"
-        leave="transition duration-500 transform"
+        leave="transition duration-500"
         leaveFrom="opacity-100 -translate-y-full"
         leaveTo="opacity-0 translate-y-0"
-        className="absolute top-0 left-0 right-0 flex w-full -translate-y-full transform flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
+        className="absolute top-0 left-0 right-0 flex w-full -translate-y-full flex-col space-y-6 border-t border-gray-600 bg-gray-900 bg-opacity-90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
       >
         {filteredLinks.map((link) => {
           const isActive = router.pathname.match(link.activeRegExp);
diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx
index 4baf56a67..d9f8ffd51 100644
--- a/src/components/Layout/Sidebar/index.tsx
+++ b/src/components/Layout/Sidebar/index.tsx
@@ -127,10 +127,10 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => {
             </Transition.Child>
             <Transition.Child
               as="div"
-              enter="transition ease-in-out duration-300 transform"
+              enter="transition-transform ease-in-out duration-300"
               enterFrom="-translate-x-full"
               enterTo="translate-x-0"
-              leave="transition ease-in-out duration-300 transform"
+              leave="transition-transform ease-in-out duration-300"
               leaveFrom="translate-x-0"
               leaveTo="-translate-x-full"
             >
diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx
index c21a9c506..6d3fe7b98 100644
--- a/src/components/Layout/UserDropdown/index.tsx
+++ b/src/components/Layout/UserDropdown/index.tsx
@@ -63,11 +63,11 @@ const UserDropdown = () => {
       <Transition
         as={Fragment}
         enter="transition ease-out duration-100"
-        enterFrom="transform opacity-0 scale-95"
-        enterTo="transform opacity-100 scale-100"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
         leave="transition ease-in duration-75"
-        leaveFrom="transform opacity-100 scale-100"
-        leaveTo="transform opacity-0 scale-95"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95"
         appear
       >
         <Menu.Items className="absolute right-0 mt-2 w-72 origin-top-right rounded-md shadow-lg">
diff --git a/src/components/Login/index.tsx b/src/components/Login/index.tsx
index 5ad862b1e..fe92629a6 100644
--- a/src/components/Login/index.tsx
+++ b/src/components/Login/index.tsx
@@ -95,10 +95,10 @@ const Login = () => {
             <Transition
               as="div"
               show={!!error}
-              enter="opacity-0 transition duration-300"
+              enter="transition-opacity duration-300"
               enterFrom="opacity-0"
               enterTo="opacity-100"
-              leave="opacity-100 transition duration-300"
+              leave="transition-opacity duration-300"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
diff --git a/src/components/RegionSelector/index.tsx b/src/components/RegionSelector/index.tsx
index d0a0113eb..38febf9a8 100644
--- a/src/components/RegionSelector/index.tsx
+++ b/src/components/RegionSelector/index.tsx
@@ -122,7 +122,7 @@ const RegionSelector = ({
 
             <Transition
               show={open}
-              leave="transition ease-in duration-100"
+              leave="transition-opacity ease-in duration-100"
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
               className="absolute mt-1 w-full rounded-md bg-gray-800 shadow-lg"
diff --git a/src/components/RequestModal/AdvancedRequester/index.tsx b/src/components/RequestModal/AdvancedRequester/index.tsx
index 2589d515f..4f5bb9ac6 100644
--- a/src/components/RequestModal/AdvancedRequester/index.tsx
+++ b/src/components/RequestModal/AdvancedRequester/index.tsx
@@ -582,10 +582,10 @@ const AdvancedRequester = ({
 
                     <Transition
                       show={open}
-                      enter="transition ease-in duration-300"
+                      enter="transition-opacity ease-in duration-300"
                       enterFrom="opacity-0"
                       enterTo="opacity-100"
-                      leave="transition ease-in duration-100"
+                      leave="transition-opacity ease-in duration-100"
                       leaveFrom="opacity-100"
                       leaveTo="opacity-0"
                       className="mt-1 w-full rounded-md border border-gray-700 bg-gray-800 shadow-lg"
diff --git a/src/components/RequestModal/CollectionRequestModal.tsx b/src/components/RequestModal/CollectionRequestModal.tsx
index 67357fe43..614a00daf 100644
--- a/src/components/RequestModal/CollectionRequestModal.tsx
+++ b/src/components/RequestModal/CollectionRequestModal.tsx
@@ -324,7 +324,7 @@ const CollectionRequestModal = ({
                           aria-hidden="true"
                           className={`${
                             isAllParts() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                          } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                         ></span>
                       </span>
                     </th>
@@ -389,7 +389,7 @@ const CollectionRequestModal = ({
                                 isSelectedPart(part.id)
                                   ? 'translate-x-5'
                                   : 'translate-x-0'
-                              } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                              } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                             ></span>
                           </span>
                         </td>
diff --git a/src/components/RequestModal/TvRequestModal.tsx b/src/components/RequestModal/TvRequestModal.tsx
index 4a6b25b86..25c8fd3c2 100644
--- a/src/components/RequestModal/TvRequestModal.tsx
+++ b/src/components/RequestModal/TvRequestModal.tsx
@@ -540,7 +540,7 @@ const TvRequestModal = ({
                           aria-hidden="true"
                           className={`${
                             isAllSeasons() ? 'translate-x-5' : 'translate-x-0'
-                          } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                          } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                         ></span>
                       </span>
                     </th>
@@ -631,7 +631,7 @@ const TvRequestModal = ({
                                   isSelectedSeason(season.seasonNumber)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                                } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                               ></span>
                             </span>
                           </td>
diff --git a/src/components/RequestModal/index.tsx b/src/components/RequestModal/index.tsx
index e5421fb59..9ef6b4057 100644
--- a/src/components/RequestModal/index.tsx
+++ b/src/components/RequestModal/index.tsx
@@ -29,10 +29,10 @@ const RequestModal = ({
   return (
     <Transition
       as="div"
-      enter="transition opacity-0 duration-300"
+      enter="transition-opacity duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"
-      leave="transition opacity-100 duration-300"
+      leave="transition-opacity duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
       show={show}
diff --git a/src/components/Settings/LibraryItem.tsx b/src/components/Settings/LibraryItem.tsx
index 29a1030b2..ab8f5fd83 100644
--- a/src/components/Settings/LibraryItem.tsx
+++ b/src/components/Settings/LibraryItem.tsx
@@ -32,7 +32,7 @@ const LibraryItem = ({ isEnabled, name, onToggle }: LibraryItemProps) => {
               aria-hidden="true"
               className={`${
                 isEnabled ? 'translate-x-5' : 'translate-x-0'
-              } relative inline-block h-5 w-5 transform rounded-full bg-white shadow transition duration-200 ease-in-out`}
+              } relative inline-block h-5 w-5 rounded-full bg-white shadow transition duration-200 ease-in-out`}
             >
               <span
                 className={`${
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index 840f99a9c..e74b0465f 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -214,10 +214,10 @@ const RadarrModal = ({ onClose, radarr, onSave }: RadarrModalProps) => {
       as="div"
       appear
       show
-      enter="transition ease-in-out duration-300 transform opacity-0"
+      enter="transition-opacity ease-in-out duration-300"
       enterFrom="opacity-0"
-      enterTo="opacuty-100"
-      leave="transition ease-in-out duration-300 transform opacity-100"
+      enterTo="opacity-100"
+      leave="transition-opacity ease-in-out duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
diff --git a/src/components/Settings/SettingsAbout/Releases/index.tsx b/src/components/Settings/SettingsAbout/Releases/index.tsx
index 93ffd6def..c697dc6b5 100644
--- a/src/components/Settings/SettingsAbout/Releases/index.tsx
+++ b/src/components/Settings/SettingsAbout/Releases/index.tsx
@@ -63,10 +63,10 @@ const Release = ({ currentVersion, release, isLatest }: ReleaseProps) => {
     <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"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={isModalOpen}
diff --git a/src/components/Settings/SettingsJobsCache/index.tsx b/src/components/Settings/SettingsJobsCache/index.tsx
index b8ebe7085..8193a3bbd 100644
--- a/src/components/Settings/SettingsJobsCache/index.tsx
+++ b/src/components/Settings/SettingsJobsCache/index.tsx
@@ -252,10 +252,10 @@ const SettingsJobs = () => {
       />
       <Transition
         as={Fragment}
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={jobModalState.isOpen}
diff --git a/src/components/Settings/SettingsLogs/index.tsx b/src/components/Settings/SettingsLogs/index.tsx
index 4b559e621..9402b1331 100644
--- a/src/components/Settings/SettingsLogs/index.tsx
+++ b/src/components/Settings/SettingsLogs/index.tsx
@@ -143,10 +143,10 @@ const SettingsLogs = () => {
       />
       <Transition
         as={Fragment}
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         appear
diff --git a/src/components/Settings/SettingsServices.tsx b/src/components/Settings/SettingsServices.tsx
index 7f908a166..928107493 100644
--- a/src/components/Settings/SettingsServices.tsx
+++ b/src/components/Settings/SettingsServices.tsx
@@ -247,10 +247,10 @@ const SettingsServices = () => {
       <Transition
         as={Fragment}
         show={deleteServerModal.open}
-        enter="transition ease-in-out duration-300 transform opacity-0"
+        enter="transition-opacity ease-in-out duration-300"
         enterFrom="opacity-0"
-        enterTo="opacuty-100"
-        leave="transition ease-in-out duration-300 transform opacity-100"
+        enterTo="opacity-100"
+        leave="transition-opacity ease-in-out duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
       >
diff --git a/src/components/Settings/SonarrModal/index.tsx b/src/components/Settings/SonarrModal/index.tsx
index ab5f97580..d9ff0c172 100644
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/src/components/Settings/SonarrModal/index.tsx
@@ -223,10 +223,10 @@ const SonarrModal = ({ onClose, sonarr, onSave }: SonarrModalProps) => {
       as="div"
       appear
       show
-      enter="transition ease-in-out duration-300 transform opacity-0"
+      enter="transition-opacity ease-in-out duration-300"
       enterFrom="opacity-0"
-      enterTo="opacuty-100"
-      leave="transition ease-in-out duration-300 transform opacity-100"
+      enterTo="opacity-100"
+      leave="transition-opacity ease-in-out duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
     >
diff --git a/src/components/StatusChecker/index.tsx b/src/components/StatusChecker/index.tsx
index 2a3977fd4..413773931 100644
--- a/src/components/StatusChecker/index.tsx
+++ b/src/components/StatusChecker/index.tsx
@@ -44,10 +44,10 @@ const StatusChecker = () => {
   return (
     <Transition
       as={Fragment}
-      enter="opacity-0 transition duration-300"
+      enter="transition-opacity duration-300"
       enterFrom="opacity-0"
       enterTo="opacity-100"
-      leave="opacity-100 transition duration-300"
+      leave="transition-opacity duration-300"
       leaveFrom="opacity-100"
       leaveTo="opacity-0"
       appear
diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx
index e7211234d..b54a17ade 100644
--- a/src/components/TitleCard/index.tsx
+++ b/src/components/TitleCard/index.tsx
@@ -154,10 +154,10 @@ const TitleCard = ({
           <Transition
             as={Fragment}
             show={isUpdating}
-            enter="transition ease-in-out duration-300 transform opacity-0"
+            enter="transition-opacity ease-in-out duration-300"
             enterFrom="opacity-0"
             enterTo="opacity-100"
-            leave="transition ease-in-out duration-300 transform opacity-100"
+            leave="transition-opacity ease-in-out duration-300"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
@@ -169,10 +169,10 @@ const TitleCard = ({
           <Transition
             as={Fragment}
             show={!image || showDetail || showRequestModal}
-            enter="transition transform opacity-0"
+            enter="transition-opacity"
             enterFrom="opacity-0"
             enterTo="opacity-100"
-            leave="transition transform opacity-100"
+            leave="transition-opacity"
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx
index 5330141ab..c450ef4ad 100644
--- a/src/components/TvDetails/index.tsx
+++ b/src/components/TvDetails/index.tsx
@@ -735,18 +735,18 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                             )}
                           <ChevronDownIcon
                             className={`${
-                              open ? 'rotate-180 transform' : ''
+                              open ? 'rotate-180' : ''
                             } h-6 w-6 text-gray-500`}
                           />
                         </Disclosure.Button>
                         <Transition
                           show={open}
-                          enter="transition duration-100 ease-out"
-                          enterFrom="transform opacity-0"
-                          enterTo="transform opacity-100"
-                          leave="transition duration-75 ease-out"
-                          leaveFrom="transform opacity-100"
-                          leaveTo="transform opacity-0"
+                          enter="transition-opacity duration-100 ease-out"
+                          enterFrom="opacity-0"
+                          enterTo="opacity-100"
+                          leave="transition-opacity duration-75 ease-out"
+                          leaveFrom="opacity-100"
+                          leaveTo="opacity-0"
                           // Not sure why this transition is adding a margin without this here
                           style={{ margin: '0px' }}
                         >
diff --git a/src/components/UserList/PlexImportModal.tsx b/src/components/UserList/PlexImportModal.tsx
index 98a248297..11f643986 100644
--- a/src/components/UserList/PlexImportModal.tsx
+++ b/src/components/UserList/PlexImportModal.tsx
@@ -155,7 +155,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                               aria-hidden="true"
                               className={`${
                                 isAllUsers() ? 'translate-x-5' : 'translate-x-0'
-                              } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                              } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                             ></span>
                           </span>
                         </th>
@@ -194,7 +194,7 @@ const PlexImportModal = ({ onCancel, onComplete }: PlexImportProps) => {
                                   isSelectedUser(user.id)
                                     ? 'translate-x-5'
                                     : 'translate-x-0'
-                                } absolute left-0 inline-block h-5 w-5 transform rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
+                                } absolute left-0 inline-block h-5 w-5 rounded-full border border-gray-200 bg-white shadow transition-transform duration-200 ease-in-out group-focus:border-blue-300 group-focus:ring`}
                               ></span>
                             </span>
                           </td>
diff --git a/src/components/UserList/index.tsx b/src/components/UserList/index.tsx
index fcab9127a..b37751f4f 100644
--- a/src/components/UserList/index.tsx
+++ b/src/components/UserList/index.tsx
@@ -228,10 +228,10 @@ const UserList = () => {
       <PageTitle title={intl.formatMessage(messages.users)} />
       <Transition
         as="div"
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={deleteModal.isOpen}
@@ -257,10 +257,10 @@ const UserList = () => {
 
       <Transition
         as="div"
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={createModal.isOpen}
@@ -440,10 +440,10 @@ const UserList = () => {
 
       <Transition
         as="div"
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={showBulkEditModal}
@@ -461,10 +461,10 @@ const UserList = () => {
 
       <Transition
         as="div"
-        enter="opacity-0 transition duration-300"
+        enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"
-        leave="opacity-100 transition duration-300"
+        leave="transition-opacity duration-300"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"
         show={showImportModal}