From 9dacf35369aa3e2555e30788d84cd8d7b7e5bad4 Mon Sep 17 00:00:00 2001
From: LynithDev <61880709+LynithDev@users.noreply.github.com>
Date: Tue, 28 Jan 2025 15:22:32 +0100
Subject: [PATCH] feat: Change disabled mod style

---
 apps/frontend/src/ui/pages/cluster/ClusterMods.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/frontend/src/ui/pages/cluster/ClusterMods.tsx b/apps/frontend/src/ui/pages/cluster/ClusterMods.tsx
index be6358f7..1dd69820 100644
--- a/apps/frontend/src/ui/pages/cluster/ClusterMods.tsx
+++ b/apps/frontend/src/ui/pages/cluster/ClusterMods.tsx
@@ -229,6 +229,9 @@ function ModEntry(props: ModEntryProps) {
 	return (
 		<div
 			class="flex flex-row items-center gap-3 rounded-xl bg-component-bg p-3 active:bg-component-bg-pressed hover:bg-component-bg-hover"
+			classList={{
+				'opacity-70 grayscale-50 hover:grayscale-0 hover:opacity-100': props.pkg.disabled,
+			}}
 			onClick={onClick}
 		>
 			<div>
@@ -270,7 +273,7 @@ function ModEntry(props: ModEntryProps) {
 						</div>
 					</div>
 
-					<div class="flex flex-row items-end justify-center gap-2">
+					<div class="flex flex-row items-center justify-center gap-2">
 						<Checkbox defaultChecked={!props.pkg.disabled} onChecked={togglePackage} />
 
 						<Button