From 9c41ad55eb562ef6db710d762198871ef0508dff Mon Sep 17 00:00:00 2001
From: Samuel Chau <sayheysantiago@proton.me>
Date: Wed, 12 Mar 2025 10:40:23 +1030
Subject: [PATCH] style: improved enabled quality style #164

- blue bg / border
- reduced roundedness

resolves #159
---
 .../components/profile/quality/QualityItemGroup.jsx    | 10 ++++++----
 .../components/profile/quality/QualityItemSingle.jsx   | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/profile/quality/QualityItemGroup.jsx b/frontend/src/components/profile/quality/QualityItemGroup.jsx
index bb9119b..4e1fbb0 100644
--- a/frontend/src/components/profile/quality/QualityItemGroup.jsx
+++ b/frontend/src/components/profile/quality/QualityItemGroup.jsx
@@ -26,12 +26,14 @@ const QualityItemGroup = ({
     return (
         <div
             className={`
-                relative p-2.5 rounded-lg select-none cursor-grab active:cursor-grabbing
-                border border-gray-200 dark:border-gray-700
+                relative p-2.5 rounded-md select-none cursor-grab active:cursor-grabbing
+                border ${quality.enabled ? 'border-blue-200 dark:border-blue-700' : 'border-gray-200 dark:border-gray-700'}
                 transition-colors duration-200
-                bg-white dark:bg-gray-800
-                hover:border-gray-300 dark:hover:border-gray-600
                 ${isDragging ? 'opacity-50' : ''}
+                ${quality.enabled 
+                    ? 'bg-blue-50/30 dark:bg-blue-900/15' 
+                    : 'bg-white dark:bg-gray-800'}
+                hover:border-gray-300 dark:hover:border-gray-600
                 group
             `}
             style={style}
diff --git a/frontend/src/components/profile/quality/QualityItemSingle.jsx b/frontend/src/components/profile/quality/QualityItemSingle.jsx
index 34d2b2f..0af9f90 100644
--- a/frontend/src/components/profile/quality/QualityItemSingle.jsx
+++ b/frontend/src/components/profile/quality/QualityItemSingle.jsx
@@ -50,12 +50,14 @@ const QualityItemSingle = ({
     return (
         <div
             className={`
-                relative p-2.5 rounded-lg select-none cursor-grab active:cursor-grabbing
-                border border-gray-200 dark:border-gray-700
+                relative p-2.5 rounded-md select-none cursor-grab active:cursor-grabbing
+                border ${quality.enabled ? 'border-blue-200 dark:border-blue-700' : 'border-gray-200 dark:border-gray-700'}
                 transition-colors duration-200
-                bg-white dark:bg-gray-800
-                hover:border-gray-300 dark:hover:border-gray-600
                 ${isDragging ? 'opacity-50' : ''}
+                ${quality.enabled 
+                    ? 'bg-blue-50/30 dark:bg-blue-900/15' 
+                    : 'bg-white dark:bg-gray-800'}
+                hover:border-gray-300 dark:hover:border-gray-600
                 group
             `}
             style={style}