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

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