chrisryn/requestarr
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Pierre Spring
2026-02-25 13:28:00 +01:00
committed by GitHub
parent a00c9e5e7c
commit f42a4ecf82
33 changed files with 83 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/AppDataWarning/index.tsx
View File

@@ -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,
})}

4
src/components/Blocklist/index.tsx
View File

@@ -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>

6
src/components/Common/Alert/index.tsx
View File

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

18
src/components/Common/Badge/index.tsx
View File

@@ -31,27 +31,25 @@ const Badge = (
switch (badgeType) {
case 'danger':
badgeStyle.push(
'bg-red-600 bg-opacity-80 border-red-500 border !text-red-100'
);
badgeStyle.push('bg-red-600/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');
}
}

10
src/components/Common/Button/index.tsx
View File

@@ -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'
);
}

4
src/components/Common/ButtonWithDropdown/index.tsx
View File

@@ -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';

4
src/components/Common/Dropdown/index.tsx
View File

@@ -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}

2
src/components/Common/Modal/index.tsx
View File

@@ -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"

4
src/components/Common/SlideOver/index.tsx
View File

@@ -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">

14
src/components/Common/StatusBadgeMini/index.tsx
View File

@@ -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;
}

4
src/components/Discover/index.tsx
View File

@@ -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"

8
src/components/GenreCard/index.tsx
View File

@@ -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-100 bg-gray-800 bg-opacity-80 ring-gray-700'
? 'scale-105 bg-gray-700/100 ring-gray-500'
: '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 ${
isHovered ? 'bg-opacity-10' : 'bg-opacity-30'
className={`absolute inset-0 z-10 h-full w-full transition duration-300 ${
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">

4
src/components/IssueModal/CreateIssueModal/index.tsx
View File

@@ -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'
)

4
src/components/Layout/MobileMenu/index.tsx
View File

@@ -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)

2
src/components/Layout/SearchInput/index.tsx
View File

@@ -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"

2
src/components/Layout/UserDropdown/index.tsx
View File

@@ -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

4
src/components/Layout/index.tsx
View File

@@ -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 ${
isScrolled ? 'bg-gray-700' : 'bg-transparent'
className={`searchbar fixed left-0 right-0 top-0 z-10 flex flex-shrink-0 transition duration-300 ${
isScrolled ? 'bg-gray-700/80' : 'bg-transparent'
} lg:left-64`}
style={{
backdropFilter: isScrolled ? 'blur(5px)' : undefined,

2
src/components/Login/index.tsx
View File

@@ -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)' }}
>
<>

6
src/components/RequestModal/CollectionRequestModal.tsx
View File

@@ -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>

2
src/components/RequestModal/SearchByNameModal/index.tsx
View File

@@ -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' : ''
} `}
>

8
src/components/RequestModal/TvRequestModal.tsx
View File

@@ -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>

2
src/components/ResetPassword/RequestResetLink.tsx
View File

@@ -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">

2
src/components/ResetPassword/index.tsx
View File

@@ -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">

2
src/components/Settings/Notifications/NotificationsTelegram.tsx
View File

@@ -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>

4
src/components/Settings/SettingsAbout/index.tsx
View File

@@ -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>
),
})}
/>

2
src/components/Settings/SettingsJobsCache/index.tsx
View File

@@ -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',
})}

2
src/components/Settings/SettingsLogs/index.tsx
View File

@@ -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>
),

4
src/components/Setup/index.tsx
View File

@@ -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">

20
src/components/StatusBadge/index.tsx
View File

@@ -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-green-500'
? 'bg-indigo-500/80'
: '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 &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}
@@ -234,8 +233,7 @@ const StatusBadge = ({
badgeType="success"
href={mediaLink}
className={`${
inProgress &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}
@@ -300,8 +298,7 @@ const StatusBadge = ({
badgeType="primary"
href={mediaLink}
className={`${
inProgress &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}
@@ -388,8 +385,7 @@ const StatusBadge = ({
badgeType="danger"
href={mediaLink}
className={`${
inProgress &&
'relative !bg-gray-700 !bg-opacity-80 !px-0 hover:!bg-gray-700'
inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
} overflow-hidden`}
>
{inProgress && badgeDownloadProgress}

8
src/components/TitleCard/index.tsx
View File

@@ -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-purple-600 bg-purple-600'
? 'border-blue-500 bg-blue-600/80'
: '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>

2
src/components/UserProfile/UserSettings/UserLinkedAccountsSettings/index.tsx
View File

@@ -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 ? (

6
src/components/UserProfile/index.tsx
View File

@@ -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'