refactor(tailwind): replace deprecated tailwind utilities (#2542)

src/components/AppDataWarning/index.tsx

@@ -28,7 +28,7 @@ const AppDataWarning = () => {
         <Alert
           title={intl.formatMessage(messages.dockerVolumeMissingDescription, {
             code: (msg: React.ReactNode) => (
-              <code className="bg-opacity-50">{msg}</code>
+              <code className="bg-gray-800/50">{msg}</code>
             ),
             appDataPath: data.appDataPath,
           })}

src/components/Blocklist/index.tsx

@@ -441,13 +441,13 @@ const BlocklistedItem = ({ item, revalidateList }: BlocklistedItemProps) => {
           )}
           <div className="card-field">
             {item.mediaType === 'movie' ? (
-              <div className="pointer-events-none z-40 self-start rounded-full border border-blue-500 bg-blue-600 bg-opacity-80 shadow-md">
+              <div className="pointer-events-none z-40 self-start rounded-full border border-blue-500 bg-blue-600/80 shadow-md">
                 <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
                   {intl.formatMessage(globalMessages.movie)}
                 </div>
               </div>
             ) : (
-              <div className="pointer-events-none z-40 self-start rounded-full border border-purple-600 bg-purple-600 bg-opacity-80 shadow-md">
+              <div className="pointer-events-none z-40 self-start rounded-full border border-purple-600 bg-purple-600/80 shadow-md">
                 <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
                   {intl.formatMessage(globalMessages.tvshow)}
                 </div>

src/components/Common/Alert/index.tsx

@@ -12,8 +12,7 @@ interface AlertProps {
 
 const Alert = ({ title, children, type }: AlertProps) => {
   let design = {
-    bgColor:
+    bgColor: 'border border-yellow-500 backdrop-blur bg-yellow-400/20',
-      'border border-yellow-500 backdrop-blur bg-yellow-400 bg-opacity-20',
     titleColor: 'text-yellow-100',
     textColor: 'text-yellow-300',
     svg: <ExclamationTriangleIcon className="h-5 w-5" />,
@@ -22,8 +21,7 @@ const Alert = ({ title, children, type }: AlertProps) => {
   switch (type) {
     case 'info':
       design = {
-        bgColor:
+        bgColor: 'border border-indigo-500 backdrop-blur bg-indigo-400/20',
-          'border border-indigo-500 backdrop-blur bg-indigo-400 bg-opacity-20',
         titleColor: 'text-gray-100',
         textColor: 'text-gray-300',
         svg: <InformationCircleIcon className="h-5 w-5" />,

src/components/Common/Badge/index.tsx

@@ -31,27 +31,25 @@ const Badge = (
 
   switch (badgeType) {
     case 'danger':
-      badgeStyle.push(
+      badgeStyle.push('bg-red-600/80 border-red-500 border !text-red-100');
-        'bg-red-600 bg-opacity-80 border-red-500 border !text-red-100'
-      );
       if (href) {
-        badgeStyle.push('hover:bg-red-500 bg-opacity-100');
+        badgeStyle.push('hover:bg-red-500');
       }
       break;
     case 'warning':
       badgeStyle.push(
-        'bg-yellow-500 bg-opacity-80 border-yellow-500 border !text-yellow-100'
+        'bg-yellow-500/80 border-yellow-500 border !text-yellow-100'
       );
       if (href) {
-        badgeStyle.push('hover:bg-yellow-500 hover:bg-opacity-100');
+        badgeStyle.push('hover:bg-yellow-500');
       }
       break;
     case 'success':
       badgeStyle.push(
-        'bg-green-500 bg-opacity-80 border border-green-500 !text-green-100'
+        'bg-green-500/80 border border-green-500 !text-green-100'
       );
       if (href) {
-        badgeStyle.push('hover:bg-green-500 hover:bg-opacity-100');
+        badgeStyle.push('hover:bg-green-500');
       }
       break;
     case 'dark':
@@ -68,10 +66,10 @@ const Badge = (
       break;
     default:
       badgeStyle.push(
-        'bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100'
+        'bg-indigo-500/80 border border-indigo-500 !text-indigo-100'
       );
       if (href) {
-        badgeStyle.push('hover:bg-indigo-500 hover:bg-opacity-100');
+        badgeStyle.push('hover:bg-indigo-500');
       }
   }
 

src/components/Common/Button/index.tsx

@@ -52,22 +52,22 @@ function Button<P extends ElementTypes = 'button'>(
   switch (buttonType) {
     case 'primary':
       buttonStyle.push(
-        'text-white border border-indigo-500 bg-indigo-600 bg-opacity-80 hover:bg-opacity-100 hover:border-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-opacity-100 active:border-indigo-700'
+        'text-white border border-indigo-500 bg-indigo-600/80 hover:bg-indigo-600 hover:border-indigo-500 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-600 active:border-indigo-700'
       );
       break;
     case 'danger':
       buttonStyle.push(
-        'text-white bg-red-600 bg-opacity-80 border-red-500 hover:bg-opacity-100 hover:border-red-500 focus:border-red-700 focus:ring-red active:bg-red-700 active:border-red-700'
+        'text-white bg-red-600/80 border-red-500 hover:bg-red-600 hover:border-red-500 focus:border-red-700 focus:ring-red active:bg-red-700 active:border-red-700'
       );
       break;
     case 'warning':
       buttonStyle.push(
-        'text-white border border-yellow-500 bg-yellow-500 bg-opacity-80 hover:bg-opacity-100 hover:border-yellow-400 focus:border-yellow-700 focus:ring-yellow active:bg-opacity-100 active:border-yellow-700'
+        'text-white border border-yellow-500 bg-yellow-500/80 hover:bg-yellow-500 hover:border-yellow-400 focus:border-yellow-700 focus:ring-yellow active:bg-yellow-500 active:border-yellow-700'
       );
       break;
     case 'success':
       buttonStyle.push(
-        'text-white bg-green-500 bg-opacity-80 border-green-500 hover:bg-opacity-100 hover:border-green-400 focus:border-green-700 focus:ring-green active:bg-opacity-100 active:border-green-700'
+        'text-white bg-green-500/80 border-green-500 hover:bg-green-500 hover:border-green-400 focus:border-green-700 focus:ring-green active:bg-green-500 active:border-green-700'
       );
       break;
     case 'ghost':
@@ -77,7 +77,7 @@ function Button<P extends ElementTypes = 'button'>(
       break;
     default:
       buttonStyle.push(
-        'text-gray-200 bg-gray-800 bg-opacity-80 border-gray-600 hover:text-white hover:bg-gray-700 hover:border-gray-600 group-hover:text-white group-hover:bg-gray-700 group-hover:border-gray-600 focus:border-blue-300 focus:ring-blue active:text-gray-200 active:bg-gray-700 active:border-gray-600'
+        'text-gray-200 bg-gray-800/80 border-gray-600 hover:text-white hover:bg-gray-700 hover:border-gray-600 group-hover:text-white group-hover:bg-gray-700 group-hover:border-gray-600 focus:border-blue-300 focus:ring-blue active:text-gray-200 active:bg-gray-700 active:border-gray-600'
       );
   }
 

src/components/Common/ButtonWithDropdown/index.tsx

@@ -34,9 +34,9 @@ const ButtonWithDropdown = ({
       break;
     default:
       styleClasses.mainButtonClasses +=
-        ' bg-indigo-600 border-indigo-500 bg-opacity-80 hover:bg-opacity-100 hover:border-indigo-500 active:bg-indigo-700 active:border-indigo-700 focus:ring-blue';
+        ' bg-indigo-600/80 border-indigo-500 hover:bg-indigo-600 hover:border-indigo-500 active:bg-indigo-700 active:border-indigo-700 focus:ring-blue';
       styleClasses.dropdownSideButtonClasses +=
-        ' bg-indigo-600 bg-opacity-80 border-indigo-500 hover:bg-opacity-100 active:bg-opacity-100 focus:ring-blue';
+        ' bg-indigo-600/80 border-indigo-500 hover:bg-indigo-600 active:bg-indigo-600 focus:ring-blue';
   }
 
   const TriggerElement = props.as ?? 'button';

src/components/Common/Dropdown/index.tsx

@@ -59,7 +59,7 @@ const DropdownItems = ({
         className={[
           'absolute right-0 z-40 -mr-1 mt-2 w-56 origin-top-right rounded-md p-1 shadow-lg',
           dropdownType === 'ghost'
-            ? 'border border-gray-700 bg-gray-800 bg-opacity-80 backdrop-blur'
+            ? 'border border-gray-700 bg-gray-800/80 backdrop-blur'
             : 'bg-indigo-600',
           className,
         ].join(' ')}
@@ -95,7 +95,7 @@ const Dropdown = ({
           'button-md inline-flex h-full items-center space-x-2 rounded-md border px-4 py-2 text-sm font-medium leading-5 text-white transition duration-150 ease-in-out hover:z-20 focus:z-20 focus:outline-none',
           buttonType === 'ghost'
             ? 'border-gray-600 bg-transparent hover:border-gray-200 focus:border-gray-100 active:border-gray-100'
-            : 'focus:ring-blue border-indigo-500 bg-indigo-600 bg-opacity-80 hover:border-indigo-500 hover:bg-opacity-100 active:border-indigo-700 active:bg-indigo-700',
+            : `focus:ring-blue border-indigo-500 bg-indigo-600/80 hover:border-indigo-500 hover:bg-indigo-600 active:border-indigo-700 active:bg-indigo-700`,
           className,
         ].join(' ')}
         ref={buttonRef}

src/components/Common/Modal/index.tsx

@@ -91,7 +91,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       <Transition.Child
         appear
         as="div"
-        className="fixed bottom-0 left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-800 bg-opacity-70"
+        className="fixed bottom-0 left-0 right-0 top-0 z-50 flex h-full w-full items-center justify-center bg-gray-800/70"
         enter="transition-opacity duration-300"
         enterFrom="opacity-0"
         enterTo="opacity-100"

src/components/Common/SlideOver/index.tsx

@@ -46,7 +46,7 @@ const SlideOver = ({
     >
       {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
       <div
-        className={`fixed inset-0 z-50 overflow-hidden bg-gray-800 bg-opacity-70`}
+        className={`fixed inset-0 z-50 overflow-hidden bg-gray-800/70`}
         onClick={() => onClose()}
         onKeyDown={(e) => {
           if (e.key === 'Escape') {
@@ -71,7 +71,7 @@ const SlideOver = ({
                 ref={slideoverRef}
                 onClick={(e) => e.stopPropagation()}
               >
-                <div className="flex h-full flex-col rounded-lg bg-gray-800 bg-opacity-80 shadow-xl ring-1 ring-gray-700 backdrop-blur">
+                <div className="flex h-full flex-col rounded-lg bg-gray-800/80 shadow-xl ring-1 ring-gray-700 backdrop-blur">
                   <header className="space-y-1 border-b border-gray-700 px-4 py-4">
                     <div className="flex items-center justify-between space-x-3">
                       <h2 className="text-overseerr text-2xl font-bold leading-7">

src/components/Common/StatusBadgeMini/index.tsx

@@ -24,7 +24,7 @@ const StatusBadgeMini = ({
   shrink = false,
 }: StatusBadgeMiniProps) => {
   const badgeStyle = [
-    `rounded-full bg-opacity-80 shadow-md ${
+    `rounded-full shadow-md ${
       shrink ? 'w-4 sm:w-5 border p-0' : 'w-5 ring-1 p-0.5'
     }`,
   ];
@@ -34,34 +34,34 @@ const StatusBadgeMini = ({
   switch (status) {
     case MediaStatus.PROCESSING:
       badgeStyle.push(
-        'bg-indigo-500 border-indigo-400 ring-indigo-400 text-indigo-100'
+        'bg-indigo-500/80 border-indigo-400 ring-indigo-400 text-indigo-100'
       );
       indicatorIcon = <ClockIcon />;
       break;
     case MediaStatus.AVAILABLE:
       badgeStyle.push(
-        'bg-green-500 border-green-400 ring-green-400 text-green-100'
+        'bg-green-500/80 border-green-400 ring-green-400 text-green-100'
       );
       indicatorIcon = <CheckCircleIcon />;
       break;
     case MediaStatus.PENDING:
       badgeStyle.push(
-        'bg-yellow-500 border-yellow-400 ring-yellow-400 text-yellow-100'
+        'bg-yellow-500/80 border-yellow-400 ring-yellow-400 text-yellow-100'
       );
       indicatorIcon = <BellIcon />;
       break;
     case MediaStatus.BLOCKLISTED:
-      badgeStyle.push('bg-red-500 border-white-400 ring-white-400 text-white');
+      badgeStyle.push('bg-red-500/80 border-white ring-white text-white');
       indicatorIcon = <EyeSlashIcon />;
       break;
     case MediaStatus.PARTIALLY_AVAILABLE:
       badgeStyle.push(
-        'bg-green-500 border-green-400 ring-green-400 text-green-100'
+        'bg-green-500/80 border-green-400 ring-green-400 text-green-100'
       );
       indicatorIcon = <MinusSmallIcon />;
       break;
     case MediaStatus.DELETED:
-      badgeStyle.push('bg-red-500 border-red-400 ring-red-400 text-red-100');
+      badgeStyle.push('bg-red-500/80 border-red-400 ring-red-400 text-red-100');
       indicatorIcon = <TrashIcon />;
       break;
   }

src/components/Discover/index.tsx

@@ -159,7 +159,7 @@ const Discover = () => {
             <button
               onClick={() => setIsEditing(true)}
               data-testid="discover-start-editing"
-              className="h-12 w-12 rounded-full border-2 border-gray-600 bg-gray-700 bg-opacity-90 p-3 text-gray-400 shadow transition-all hover:bg-opacity-100"
+              className="h-12 w-12 rounded-full border-2 border-gray-600 bg-gray-700/90 p-3 text-gray-400 shadow transition-all hover:bg-gray-700"
             >
               <PencilIcon className="h-full w-full" />
             </button>
@@ -172,7 +172,7 @@ const Discover = () => {
             leave="transition duration-300"
             leaveFrom="opacity-100 translate-y-0"
             leaveTo="opacity-0 translate-y-6"
-            className="safe-shift-edit-menu fixed left-0 right-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-x-3 sm:space-y-0"
+            className="safe-shift-edit-menu fixed left-0 right-0 z-50 flex flex-col items-center justify-end space-x-0 space-y-2 border-t border-gray-700 bg-gray-800/80 p-4 backdrop-blur sm:bottom-0 sm:flex-row sm:space-x-3 sm:space-y-0"
           >
             <Button
               buttonType="default"

src/components/GenreCard/index.tsx

@@ -20,8 +20,8 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
         canExpand ? 'w-full' : 'w-56 sm:w-72'
       } transform-gpu cursor-pointer p-8 shadow ring-1 transition duration-300 ease-in-out ${
         isHovered
-          ? 'scale-105 bg-gray-700 bg-opacity-100 ring-gray-500'
+          ? 'scale-105 bg-gray-700/100 ring-gray-500'
-          : 'scale-100 bg-gray-800 bg-opacity-80 ring-gray-700'
+          : 'scale-100 bg-gray-800/80 ring-gray-700'
       } overflow-hidden rounded-xl bg-cover bg-center`}
       onMouseEnter={() => {
         setHovered(true);
@@ -43,8 +43,8 @@ const GenreCard = ({ image, url, name, canExpand = false }: GenreCardProps) => {
         fill
       />
       <div
-        className={`absolute inset-0 z-10 h-full w-full bg-gray-800 transition duration-300 ${
+        className={`absolute inset-0 z-10 h-full w-full transition duration-300 ${
-          isHovered ? 'bg-opacity-10' : 'bg-opacity-30'
+          isHovered ? 'bg-gray-800/10' : 'bg-gray-800/30'
         }`}
       />
       <div className="relative z-20 w-full truncate whitespace-normal text-center text-2xl font-bold text-white sm:text-3xl">

src/components/IssueModal/CreateIssueModal/index.tsx

@@ -244,7 +244,7 @@ const CreateIssueModal = ({
               <RadioGroup.Label className="sr-only">
                 Select an Issue
               </RadioGroup.Label>
-              <div className="-space-y-px overflow-hidden rounded-md bg-gray-800 bg-opacity-30">
+              <div className="-space-y-px overflow-hidden rounded-md bg-gray-800/30">
                 {issueOptions.map((setting, index) => (
                   <RadioGroup.Option
                     key={`issue-type-${setting.issueType}`}
@@ -256,7 +256,7 @@ const CreateIssueModal = ({
                           ? 'rounded-bl-md rounded-br-md'
                           : '',
                         checked
-                          ? 'z-10 border border-indigo-500 bg-indigo-400 bg-opacity-20'
+                          ? 'z-10 border border-indigo-500 bg-indigo-400/20'
                           : 'border-gray-500',
                         'relative flex cursor-pointer border p-4 focus:outline-none'
                       )

src/components/Layout/MobileMenu/index.tsx

@@ -179,7 +179,7 @@ const MobileMenu = ({
         leave="transition duration-500"
         leaveFrom="opacity-100 -translate-y-full"
         leaveTo="opacity-0 translate-y-0"
-        className="absolute left-0 right-0 top-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"
+        className="absolute left-0 right-0 top-0 flex w-full -translate-y-full flex-col space-y-6 border-t border-gray-600 bg-gray-900/90 px-6 py-6 font-semibold text-gray-100 backdrop-blur"
       >
         {filteredLinks.map((link) => {
           const isActive = router.pathname.match(link.activeRegExp);
@@ -225,7 +225,7 @@ const MobileMenu = ({
           );
         })}
       </Transition>
-      <div className="padding-bottom-safe border-t border-gray-600 bg-gray-800 bg-opacity-90 backdrop-blur">
+      <div className="padding-bottom-safe border-t border-gray-600 bg-gray-800/90 backdrop-blur">
         <div className="flex h-full items-center justify-between px-6 py-4 text-gray-100">
           {filteredLinks
             .slice(0, filteredLinks.length === 5 ? 5 : 4)

src/components/Layout/SearchInput/index.tsx

@@ -24,7 +24,7 @@ const SearchInput = () => {
           <input
             id="search_field"
             style={{ paddingRight: searchValue.length > 0 ? '1.75rem' : '' }}
-            className="block w-full rounded-full border border-gray-600 bg-gray-900 bg-opacity-80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-opacity-100 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
+            className="block w-full rounded-full border border-gray-600 bg-gray-900/80 py-2 pl-10 text-white placeholder-gray-300 hover:border-gray-500 focus:border-gray-500 focus:bg-gray-900 focus:placeholder-gray-400 focus:outline-none focus:ring-0 sm:text-base"
             placeholder={intl.formatMessage(messages.searchPlaceholder)}
             type="search"
             autoComplete="off"

src/components/Layout/UserDropdown/index.tsx

@@ -74,7 +74,7 @@ const UserDropdown = () => {
         appear
       >
         <Menu.Items className="absolute right-0 mt-2 w-72 origin-top-right rounded-md shadow-lg">
-          <div className="divide-y divide-gray-700 rounded-md bg-gray-800 bg-opacity-80 ring-1 ring-gray-700 backdrop-blur">
+          <div className="divide-y divide-gray-700 rounded-md bg-gray-800/80 ring-1 ring-gray-700 backdrop-blur">
             <div className="flex flex-col space-y-4 px-4 py-4">
               <div className="flex items-center space-x-2">
                 <CachedImage

src/components/Layout/index.tsx

@@ -88,8 +88,8 @@ const Layout = ({ children }: LayoutProps) => {
       <div className="relative mb-16 flex w-0 min-w-0 flex-1 flex-col lg:ml-64">
         <PullToRefresh />
         <div
-          className={`searchbar fixed left-0 right-0 top-0 z-10 flex flex-shrink-0 bg-opacity-80 transition duration-300 ${
+          className={`searchbar fixed left-0 right-0 top-0 z-10 flex flex-shrink-0 transition duration-300 ${
-            isScrolled ? 'bg-gray-700' : 'bg-transparent'
+            isScrolled ? 'bg-gray-700/80' : 'bg-transparent'
           } lg:left-64`}
           style={{
             backdropFilter: isScrolled ? 'blur(5px)' : undefined,

src/components/Login/index.tsx

@@ -169,7 +169,7 @@ const Login = () => {
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div
-          className="bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
+          className="bg-gray-800/50 shadow sm:rounded-lg"
           style={{ backdropFilter: 'blur(5px)' }}
         >
           <>

src/components/RequestModal/CollectionRequestModal.tsx

@@ -317,7 +317,7 @@ const CollectionRequestModal = ({
               <table className="min-w-full">
                 <thead>
                   <tr>
-                    <th className="w-16 bg-gray-700 bg-opacity-80 px-4 py-3">
+                    <th className="w-16 bg-gray-700/80 px-4 py-3">
                       <span
                         role="checkbox"
                         tabIndex={0}
@@ -349,10 +349,10 @@ const CollectionRequestModal = ({
                         />
                       </span>
                     </th>
-                    <th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
+                    <th className="bg-gray-700/80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(globalMessages.movie)}
                     </th>
-                    <th className="bg-gray-700 bg-opacity-80 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
+                    <th className="bg-gray-700/80 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(globalMessages.status)}
                     </th>
                   </tr>

src/components/RequestModal/SearchByNameModal/index.tsx

@@ -84,7 +84,7 @@ const SearchByNameModal = ({
             onClick={() => handleClick(item.tvdbId)}
           >
             <div
-              className={`flex h-40 w-full items-center overflow-hidden rounded-xl border border-gray-700 bg-gray-700 bg-opacity-20 p-2 shadow backdrop-blur transition ${
+              className={`flex h-40 w-full items-center overflow-hidden rounded-xl border border-gray-700 bg-gray-700/20 p-2 shadow backdrop-blur transition ${
                 tvdbId === item.tvdbId ? 'ring ring-indigo-500' : ''
               } `}
             >

src/components/RequestModal/TvRequestModal.tsx

@@ -529,7 +529,7 @@ const TvRequestModal = ({
                 <thead>
                   <tr>
                     <th
-                      className={`w-16 bg-gray-700 bg-opacity-80 px-4 py-3 ${
+                      className={`w-16 bg-gray-700/80 px-4 py-3 ${
                         !settings.currentSettings.partialRequestsEnabled &&
                         'hidden'
                       }`}
@@ -566,13 +566,13 @@ const TvRequestModal = ({
                         />
                       </span>
                     </th>
-                    <th className="bg-gray-700 bg-opacity-80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
+                    <th className="bg-gray-700/80 px-1 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(messages.season)}
                     </th>
-                    <th className="bg-gray-700 bg-opacity-80 px-5 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
+                    <th className="bg-gray-700/80 px-5 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(messages.numberofepisodes)}
                     </th>
-                    <th className="bg-gray-700 bg-opacity-80 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
+                    <th className="bg-gray-700/80 px-2 py-3 text-left text-xs font-medium uppercase leading-4 tracking-wider text-gray-200 md:px-6">
                       {intl.formatMessage(globalMessages.status)}
                     </th>
                   </tr>

src/components/ResetPassword/RequestResetLink.tsx

@@ -65,7 +65,7 @@ const ResetPassword = () => {
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div
-          className="bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
+          className="bg-gray-800/50 shadow sm:rounded-lg"
           style={{ backdropFilter: 'blur(5px)' }}
         >
           <div className="px-10 py-8">

src/components/ResetPassword/index.tsx

@@ -75,7 +75,7 @@ const ResetPassword = () => {
       </div>
       <div className="relative z-50 mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div
-          className="bg-gray-800 bg-opacity-50 shadow sm:rounded-lg"
+          className="bg-gray-800/50 shadow sm:rounded-lg"
           style={{ backdropFilter: 'blur(5px)' }}
         >
           <div className="px-10 py-8">

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -228,7 +228,7 @@ const NotificationsTelegram = () => {
                       </a>
                     ),
                     code: (msg: React.ReactNode) => (
-                      <code className="bg-opacity-50">{msg}</code>
+                      <code className="bg-gray-800/50">{msg}</code>
                     ),
                   })}
                 </span>

src/components/Settings/SettingsAbout/index.tsx

@@ -60,7 +60,7 @@ const SettingsAbout = () => {
           intl.formatMessage(globalMessages.settings),
         ]}
       />
-      <div className="mt-6 rounded-md border border-indigo-500 bg-indigo-400 bg-opacity-20 p-4 backdrop-blur">
+      <div className="mt-6 rounded-md border border-indigo-500 bg-indigo-400/20 p-4 backdrop-blur">
         <div className="flex">
           <div className="flex-shrink-0">
             <InformationCircleIcon className="h-5 w-5 text-gray-100" />
@@ -88,7 +88,7 @@ const SettingsAbout = () => {
             <Alert
               title={intl.formatMessage(messages.runningDevelop, {
                 code: (msg: React.ReactNode) => (
-                  <code className="bg-opacity-50">{msg}</code>
+                  <code className="bg-gray-800/50">{msg}</code>
                 ),
               })}
             />

src/components/Settings/SettingsJobsCache/index.tsx

@@ -744,7 +744,7 @@ const SettingsJobs = () => {
         <p className="description">
           {intl.formatMessage(messages.imagecacheDescription, {
             code: (msg: React.ReactNode) => (
-              <code className="bg-opacity-50">{msg}</code>
+              <code className="bg-gray-800/50">{msg}</code>
             ),
             appDataPath: appData ? appData.appDataPath : '/app/config',
           })}

src/components/Settings/SettingsLogs/index.tsx

@@ -245,7 +245,7 @@ const SettingsLogs = () => {
         <p className="description">
           {intl.formatMessage(messages.logsDescription, {
             code: (msg: React.ReactNode) => (
-              <code className="whitespace-normal break-words bg-opacity-50">
+              <code className="whitespace-normal break-words bg-gray-800/50">
                 {msg}
               </code>
             ),

src/components/Setup/index.tsx

@@ -164,7 +164,7 @@ const Setup = () => {
         <AppDataWarning />
         <nav className="relative z-50">
           <ul
-            className="divide-y divide-gray-600 rounded-md border border-gray-600 bg-gray-800 bg-opacity-50 md:flex md:divide-y-0"
+            className="divide-y divide-gray-600 rounded-md border border-gray-600 bg-gray-800/50 md:flex md:divide-y-0"
             style={{ backdropFilter: 'blur(5px)' }}
           >
             <SetupSteps
@@ -193,7 +193,7 @@ const Setup = () => {
             />
           </ul>
         </nav>
-        <div className="mt-10 w-full rounded-md border border-gray-600 bg-gray-800 bg-opacity-50 p-4 text-white">
+        <div className="mt-10 w-full rounded-md border border-gray-600 bg-gray-800/50 p-4 text-white">
           {currentStep === 1 && (
             <div className="flex flex-col items-center pb-6">
               <div className="mb-2 flex justify-center text-xl font-bold">

src/components/StatusBadge/index.tsx

@@ -137,12 +137,12 @@ const StatusBadge = ({
 
   const badgeDownloadProgress = (
     <div
-      className={`absolute left-0 top-0 z-10 flex h-full bg-opacity-80 ${
+      className={`absolute left-0 top-0 z-10 flex h-full ${
         status === MediaStatus.DELETED
-          ? 'bg-red-600'
+          ? 'bg-red-600/80'
           : status === MediaStatus.PROCESSING
-            ? 'bg-indigo-500'
+            ? 'bg-indigo-500/80'
-            : 'bg-green-500'
+            : 'bg-green-500/80'
       } transition-all duration-200 ease-in-out`}
       style={{
         width: `${
@@ -168,8 +168,7 @@ const StatusBadge = ({
             badgeType="success"
             href={mediaLink}
             className={`${
-              inProgress &&
+              inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
-              'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
           >
             {inProgress && badgeDownloadProgress}
@@ -234,8 +233,7 @@ const StatusBadge = ({
             badgeType="success"
             href={mediaLink}
             className={`${
-              inProgress &&
+              inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
-              'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
           >
             {inProgress && badgeDownloadProgress}
@@ -300,8 +298,7 @@ const StatusBadge = ({
             badgeType="primary"
             href={mediaLink}
             className={`${
-              inProgress &&
+              inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
-              'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
           >
             {inProgress && badgeDownloadProgress}
@@ -388,8 +385,7 @@ const StatusBadge = ({
             badgeType="danger"
             href={mediaLink}
             className={`${
-              inProgress &&
+              inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
-              'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
           >
             {inProgress && badgeDownloadProgress}

src/components/TitleCard/index.tsx

@@ -341,10 +341,10 @@ const TitleCard = ({
           />
           <div className="absolute left-0 right-0 flex items-center justify-between p-2">
             <div
-              className={`pointer-events-none z-40 self-start rounded-full border bg-opacity-80 shadow-md ${
+              className={`pointer-events-none z-40 self-start rounded-full border shadow-md ${
                 mediaType === 'movie' || mediaType === 'collection'
-                  ? 'border-blue-500 bg-blue-600'
+                  ? 'border-blue-500 bg-blue-600/80'
-                  : 'border-purple-600 bg-purple-600'
+                  : 'border-purple-600 bg-purple-600/80'
               }`}
             >
               <div className="flex h-4 items-center px-2 py-2 text-center text-xs font-medium uppercase tracking-wider text-white sm:h-5">
@@ -432,7 +432,7 @@ const TitleCard = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="absolute inset-0 z-40 flex items-center justify-center rounded-xl bg-gray-800 bg-opacity-75 text-white">
+            <div className="absolute inset-0 z-40 flex items-center justify-center rounded-xl bg-gray-800/75 text-white">
               <Spinner className="h-10 w-10" />
             </div>
           </Transition>

src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx

@@ -212,7 +212,7 @@ const UserLinkedAccountsSettings = () => {
           {accounts.map((acct, i) => (
             <li
               key={i}
-              className="flex items-center gap-4 overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6"
+              className="flex items-center gap-4 overflow-hidden rounded-lg bg-gray-800/50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6"
             >
               <div className="w-12">
                 {acct.type === LinkedAccountType.Plex ? (

src/components/UserProfile/index.tsx

@@ -153,7 +153,7 @@ const UserProfile = () => {
           )) && (
           <div className="relative z-40">
             <dl className="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
-              <div className="overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6">
+              <div className="overflow-hidden rounded-lg bg-gray-800/50 px-4 py-5 shadow ring-1 ring-gray-700 sm:p-6">
                 <dt className="truncate text-sm font-bold text-gray-300">
                   {intl.formatMessage(messages.totalrequests)}
                 </dt>
@@ -173,7 +173,7 @@ const UserProfile = () => {
                 </dd>
               </div>
               <div
-                className={`overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ${
+                className={`overflow-hidden rounded-lg bg-gray-800/50 px-4 py-5 shadow ring-1 ${
                   quota.movie.restricted
                     ? 'bg-gradient-to-t from-red-900 to-transparent ring-red-500'
                     : 'ring-gray-700'
@@ -228,7 +228,7 @@ const UserProfile = () => {
                 </dd>
               </div>
               <div
-                className={`overflow-hidden rounded-lg bg-gray-800 bg-opacity-50 px-4 py-5 shadow ring-1 ${
+                className={`overflow-hidden rounded-lg bg-gray-800/50 px-4 py-5 shadow ring-1 ${
                   quota.tv.restricted
                     ? 'bg-gradient-to-t from-red-900 to-transparent ring-red-500'
                     : 'ring-gray-700'

src/styles/globals.css

@@ -106,7 +106,7 @@
   }
 
   .service-error-banner {
-    @apply mb-2 flex items-center gap-2 rounded-md border border-yellow-500 bg-yellow-500 bg-opacity-20 px-3 py-2 text-sm text-yellow-200;
+    @apply mb-2 flex items-center gap-2 rounded-md border border-yellow-500 bg-yellow-500/20 px-3 py-2 text-sm text-yellow-200;
   }
 
   .slider-title {
@@ -346,7 +346,7 @@
   }
 
   button.input-action {
-    @apply relative -ml-px inline-flex items-center border border-gray-500 bg-indigo-600 bg-opacity-80 px-3 py-2 text-sm font-medium leading-5 text-white last:rounded-r-md sm:px-3.5;
+    @apply relative -ml-px inline-flex items-center border border-gray-500 bg-indigo-600/80 px-3 py-2 text-sm font-medium leading-5 text-white last:rounded-r-md sm:px-3.5;
   }
 
   button.input-action[disabled] {
@@ -354,7 +354,7 @@
   }
 
   button.input-action:not([disabled]) {
-    @apply transition duration-150 ease-in-out hover:bg-opacity-100 active:bg-gray-100 active:text-gray-700;
+    @apply transition duration-150 ease-in-out hover:bg-indigo-600 active:bg-gray-100 active:text-gray-700;
   }
 
   .button-md :where(svg),