refactor(tailwind): replace deprecated tailwind utilities

[caillou]

Description

Replace deprecated tailwind utilities that can not be automatically replaced by the code-mod.

see #2541

How Has This Been Tested?

• I ran the cypress tests. This PR should not change anything. It should just replace deprecated tailwind utilities. So cypress obviously passes.
• I ran the local instance and compared many screens with the version I deployed. I didn't find any problems. I am fairly new to the application, installed it today. So I can not guarantee that there are no issues.

Checklist:

• I have read and followed the contribution guidelines.
• Disclosed any use of AI (see our policy)
• I have updated the documentation accordingly.
• All new and existing tests passed.
• Successful build pnpm build
• Translation keys pnpm i18n:extract
• Database migration (if required)

Summary by CodeRabbit

• Style
  • Standardized Tailwind background opacity syntax across the app, converting separate opacity utilities to the shorthand color/opacity notation. Visual appearance and behavior are unchanged; presentation-only updates across many UI components and global styles.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

---

📝 Walkthrough

Walkthrough

This PR converts explicit Tailwind background opacity utilities (e.g., bg-gray-800 bg-opacity-50) to the color-opacity shorthand (e.g., bg-gray-800/50) across many components and global styles; no behavioral, API, or control-flow changes were made.

Changes

Cohort / File(s)	Summary
Layout & Navigation src/components/Layout/index.tsx, src/components/Layout/MobileMenu/index.tsx, src/components/Layout/SearchInput/index.tsx, src/components/Layout/UserDropdown/index.tsx	Replaced bg-<color> bg-opacity-<value> with bg-<color>/<value> in layout, mobile menu, search input, and user dropdown backgrounds.
Core UI Primitives src/components/Common/Alert/index.tsx, src/components/Common/Badge/index.tsx, src/components/Common/Button/index.tsx, src/components/Common/ButtonWithDropdown/index.tsx, src/components/Common/Dropdown/index.tsx, src/components/Common/Modal/index.tsx, src/components/Common/SlideOver/index.tsx, src/components/Common/StatusBadgeMini/index.tsx, src/components/Common/StatusBadge/index.tsx	Consolidated opacity into color-embedded shorthand (e.g., bg-indigo-600/80) and adjusted related hover/active class tokens; no logic or API changes.
Feature & Content Components src/components/AppDataWarning/index.tsx, src/components/Blocklist/index.tsx, src/components/Discover/index.tsx, src/components/GenreCard/index.tsx, src/components/TitleCard/index.tsx, src/components/IssueModal/CreateIssueModal/index.tsx, src/components/RequestModal/CollectionRequestModal.tsx, src/components/RequestModal/SearchByNameModal/index.tsx, src/components/RequestModal/TvRequestModal.tsx	Updated overlay, badge, inline code, and container background classes to use color-opacity shorthand; presentation-only edits.
Account, Auth & User Settings src/components/Login/index.tsx, src/components/ResetPassword/index.tsx, src/components/ResetPassword/RequestResetLink.tsx, src/components/Setup/index.tsx, src/components/Settings/Notifications/NotificationsTelegram.tsx, src/components/Settings/SettingsAbout/index.tsx, src/components/Settings/SettingsJobsCache/index.tsx, src/components/Settings/SettingsLogs/index.tsx, src/components/UserProfile/index.tsx, src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx	Replaced bg-opacity utilities with bg-<color>/<value> across auth, setup, settings, and user profile UI blocks; no behavior or API changes.
Other UI Components src/components/Blocklist/index.tsx, src/components/StatusBadgeMini/index.tsx, src/components/StatusBadge/index.tsx, src/components/TitleCard/index.tsx, src/components/GenreCard/index.tsx	Various badges, labels, overlays, and hover state tokens migrated to shorthand opacity notation; hover behavior simplified where applicable.
Global Styles src/styles/globals.css	Updated @apply rules to use color-opacity shorthand (e.g., .service-error-banner, button.input-action) and adjusted hover tokens to match new syntax.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Poem

🐰 I nibbled classes, soft and light,
Turned split-opacity into a tidy bite.
Slashes snuggled colors, crisp and right,
A tidy patch before the night. ✨

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'refactor(tailwind): replace deprecated tailwind utilities' is specific, clear, and directly summarizes the main objective of the pull request, which involves replacing deprecated Tailwind CSS utilities with modern shorthand syntax across multiple components.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[caillou]

This is my first PR. I have tried to follow all guidelines. Please let me know if I missed something.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx (1)

102-111: ⚠️ Potential issue | 🔴 Critical

Critical: Duplicate setError call masks specific error messages.

Line 110 unconditionally overwrites all error messages with the generic "errorUnknown" message, preventing users from seeing the helpful error messages for unauthorized (401) or duplicate account (422) scenarios. This defeats the purpose of the specific error handling above it.

🐛 Proposed fix: Remove the duplicate setError call

     } catch (e) {
       if (e?.response?.status === 401) {
         setError(intl.formatMessage(messages.plexErrorUnauthorized));
       } else if (e?.response?.status === 422) {
         setError(intl.formatMessage(messages.plexErrorExists));
       } else {
         setError(intl.formatMessage(messages.errorUnknown));
       }
-      setError(intl.formatMessage(messages.errorUnknown));
     }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx`
around lines 102 - 111, In the catch block inside UserLinkedAccountsSettings
(index.tsx) you currently call setError for specific cases (401 and 422) but
then unconditionally call setError(intl.formatMessage(messages.errorUnknown)),
which overwrites those specific messages; remove the final unconditional
setError call so that only the specific error handlers (e?.response?.status ===
401, 422) or the final else branch set the error message, leaving the specific
messages intact.

src/components/Common/Dropdown/index.tsx (1)

94-99: ⚠️ Potential issue | 🟡 Minor

Dropdown button is missing its base background color.

The primary (non-ghost) button state lacks a background fill and relies only on the border and active state. This is inconsistent with related components (DropdownItem, Button, ButtonWithDropdown) which all include a base background color. Consider applying bg-indigo-600/80 with corresponding hover state (hover:bg-indigo-600) to match the pattern used in ButtonWithDropdown.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/Common/Dropdown/index.tsx` around lines 94 - 99, The primary
Dropdown button (in the Dropdown component where className is composed based on
buttonType) is missing its base background; update the non-ghost branch that
currently applies border/active classes to also include a base background and
hover fill (e.g., add bg-indigo-600/80 and hover:bg-indigo-600 alongside the
existing 'focus:ring-blue border-indigo-500/80 hover:border-indigo-500
active:border-indigo-700 active:bg-indigo-700') so the Dropdown button matches
Button and ButtonWithDropdown styling while leaving the 'ghost' branch
unchanged.

🧹 Nitpick comments (1)

src/components/RequestModal/SearchByNameModal/index.tsx (1)

83-83: Missed deprecated utility on the same element.

focus:ring-opacity-70 on this line uses the same deprecated pattern being replaced in this PR. For consistency, consider updating it to use the shorthand syntax as well.

♻️ Suggested fix

-            className="container mx-auto flex h-40 scale-100 transform-gpu cursor-pointer flex-col items-center justify-center space-y-4 rounded-xl outline-none transition hover:scale-105 focus:outline-none focus:ring focus:ring-indigo-500 focus:ring-opacity-70"
+            className="container mx-auto flex h-40 scale-100 transform-gpu cursor-pointer flex-col items-center justify-center space-y-4 rounded-xl outline-none transition hover:scale-105 focus:outline-none focus:ring focus:ring-indigo-500/70"

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/RequestModal/SearchByNameModal/index.tsx` at line 83, Update
the deprecated focus:ring-opacity-70 pattern in the className string inside the
SearchByNameModal component (index.tsx) by removing the separate
focus:ring-opacity-70 utility and instead using the shorthand opacity form on
the ring color utility (e.g., convert the pair "focus:ring-indigo-500" +
"focus:ring-opacity-70" into a single "focus:ring-indigo-500/70" so the
className uses the shorthand opacity syntax).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/Common/StatusBadgeMini/index.tsx`:
- Around line 54-56: Replace the invalid Tailwind classes in the StatusBadgeMini
component where badgeStyle.push(...) adds 'bg-red-500/80 border-white-400
ring-white-400 text-white'; change the border and ring classes to valid Tailwind
tokens (e.g., 'border-white ring-white') so the push call uses 'bg-red-500/80
border-white ring-white text-white' in the StatusBadgeMini/index.tsx.

---

Outside diff comments:
In `@src/components/Common/Dropdown/index.tsx`:
- Around line 94-99: The primary Dropdown button (in the Dropdown component
where className is composed based on buttonType) is missing its base background;
update the non-ghost branch that currently applies border/active classes to also
include a base background and hover fill (e.g., add bg-indigo-600/80 and
hover:bg-indigo-600 alongside the existing 'focus:ring-blue border-indigo-500/80
hover:border-indigo-500 active:border-indigo-700 active:bg-indigo-700') so the
Dropdown button matches Button and ButtonWithDropdown styling while leaving the
'ghost' branch unchanged.

In
`@src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx`:
- Around line 102-111: In the catch block inside UserLinkedAccountsSettings
(index.tsx) you currently call setError for specific cases (401 and 422) but
then unconditionally call setError(intl.formatMessage(messages.errorUnknown)),
which overwrites those specific messages; remove the final unconditional
setError call so that only the specific error handlers (e?.response?.status ===
401, 422) or the final else branch set the error message, leaving the specific
messages intact.

---

Nitpick comments:
In `@src/components/RequestModal/SearchByNameModal/index.tsx`:
- Line 83: Update the deprecated focus:ring-opacity-70 pattern in the className
string inside the SearchByNameModal component (index.tsx) by removing the
separate focus:ring-opacity-70 utility and instead using the shorthand opacity
form on the ring color utility (e.g., convert the pair "focus:ring-indigo-500" +
"focus:ring-opacity-70" into a single "focus:ring-indigo-500/70" so the
className uses the shorthand opacity syntax).

[Copilot]

Pull request overview

This pull request refactors Tailwind CSS utility classes to replace deprecated bg-opacity-XX syntax with the new Tailwind v4-compatible shorthand color/opacity notation (e.g., bg-gray-800/50 instead of bg-gray-800 bg-opacity-50). This is part of a larger effort to upgrade from Tailwind v3 to v4 as outlined in issue #2541.

Changes:

• Converted all bg-opacity-XX utilities to inline color/opacity syntax (bg-color/XX)
• Updated hover states from hover:bg-opacity-100 to explicit color classes (e.g., hover:bg-indigo-600)
• Standardized opacity notation across all components and stylesheets

Reviewed changes

Copilot reviewed 33 out of 33 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/styles/globals.css	Updated global CSS utilities with new opacity syntax for service banners and input action buttons
src/components/UserProfile/index.tsx	Converted card background opacity notation
src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx	Updated linked account card background opacity
src/components/TitleCard/index.tsx	Converted media type badges and loading overlay opacity syntax
src/components/StatusBadge/index.tsx	Updated status badge background and progress indicator opacity
src/components/Setup/index.tsx	Converted setup navigation and form background opacity
src/components/Settings/SettingsLogs/index.tsx	Updated code element background opacity
src/components/Settings/SettingsJobsCache/index.tsx	Converted code element background opacity
src/components/Settings/SettingsAbout/index.tsx	Updated alert and code element background opacity
src/components/Settings/Notifications/NotificationsTelegram.tsx	Converted code element background opacity
src/components/ResetPassword/index.tsx	Updated form container background opacity
src/components/ResetPassword/RequestResetLink.tsx	Converted form container background opacity
src/components/RequestModal/TvRequestModal.tsx	Updated table header background opacity
src/components/RequestModal/SearchByNameModal/index.tsx	Converted search result card background opacity
src/components/RequestModal/CollectionRequestModal.tsx	Updated table header background opacity
src/components/Login/index.tsx	Converted login form background opacity
src/components/Layout/index.tsx	Updated searchbar background opacity
src/components/Layout/UserDropdown/index.tsx	Converted dropdown menu background opacity
src/components/Layout/SearchInput/index.tsx	Updated search input background and focus state opacity
src/components/Layout/MobileMenu/index.tsx	Converted mobile menu background opacity
src/components/IssueModal/CreateIssueModal/index.tsx	Updated issue type selection background opacity
src/components/GenreCard/index.tsx	Converted genre card background and overlay opacity
src/components/Discover/index.tsx	Updated edit button and menu background opacity
src/components/Common/StatusBadgeMini/index.tsx	Converted all status badge background opacity and fixed invalid color classes
src/components/Common/SlideOver/index.tsx	Updated slide-over overlay and content background opacity
src/components/Common/Modal/index.tsx	Converted modal overlay background opacity
src/components/Common/Dropdown/index.tsx	Updated dropdown items and button styling (contains issue)
src/components/Common/ButtonWithDropdown/index.tsx	Converted button background and hover state opacity
src/components/Common/Button/index.tsx	Updated all button type background opacity and hover states
src/components/Common/Badge/index.tsx	Converted all badge type background opacity and hover states
src/components/Common/Alert/index.tsx	Updated alert background opacity
src/components/Blocklist/index.tsx	Converted media type badge background opacity
src/components/AppDataWarning/index.tsx	Updated code element background opacity

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[caillou]

@gauthier-th thanks for the review.

As I am fairly new here: May I squash the 3 commits before merging?

I am asking, because CONTRIBUTING.md states the following:

Do not squash commits once people have begun reviewing your changes.

[gauthier-th]

@gauthier-th thanks for the review.

As I am fairly new here: May I squash the 3 commits before merging?

I am asking, because CONTRIBUTING.md states the following:

Do not squash commits once people have begun reviewing your changes.

Commits will be squashed once the PR will be merged.

[fallenbagel]

@gauthier-th thanks for the review.

As I am fairly new here: May I squash the 3 commits before merging?

I am asking, because CONTRIBUTING.md states the following:

Do not squash commits once people have begun reviewing your changes.

No need. When we merge, we squash and merge anyways

[caillou]

Interesting. I am a bit confused as to why we need to follow Conventional Commits in the PR, if the commits are systematically squashed and re-worded.

I am sure I'll end up understanding why we do it this way... I found it quite the overhead while developing.

[fallenbagel]

Interesting. I am a bit confused as to why we need to follow Conventional Commits in the PR, if the commits are systematically squashed and re-worded.

Squash and merge is something we decided later on. Previously we used to merge with merge commit.

The only thing that happens is if you don't have your first commit atleast as conventional commits, it automatically sets that as the title without the conventional commit. And the pr title is what ends up as the squash commit messags. Sometimes there could be a human error but we recently also added a check to check for that as well for the pr title

[gauthier-th]

The only thing that happens is if you don't have your first commit atleast as conventional commits, it automatically sets that as the title without the conventional commit

No, we changed this setting. The default title for the squashed commit is now the PR title.

[fallenbagel]

The only thing that happens is if you don't have your first commit atleast as conventional commits, it automatically sets that as the title without the conventional commit

No, we changed this setting. The default title for the squashed commit is now the PR title.

Ah forgot

[caillou]

@fallenbagel sorry to ping you here. I am still quite new to the processes we have in this repo.

I am wondering if there is something I still need to do on my side, in order to get this merged.

I am looking forward to have this PR in to start working on the v3 -> v4 migration of Tailwind.

PS: Well, l am not looking forward to the actual migration. That will be quite a beast 😭

[fallenbagel]

@fallenbagel sorry to ping you here. I am still quite new to the processes we have in this repo.

I am wondering if there is something I still need to do on my side, in order to get this merged.

It just needs one more review ;)

Most of us have been a bit busy so wasnt able to review