From e21268b4c653c4655b8748ef8f6086b172dbdb9e Mon Sep 17 00:00:00 2001
From: Sartoric <6607379+Sartoric@users.noreply.github.com>
Date: Wed, 5 Nov 2025 23:15:54 +0100
Subject: [PATCH 1/2] **Highlight favorite profiles in ProfileList**

- Added a conditional background based on favorite status.
- Updated `Card` styles to include dynamic class bindings for favorite profiles.
---
 web/src/pages/ProfileList/index.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/pages/ProfileList/index.jsx b/web/src/pages/ProfileList/index.jsx
index 44fe54ecc..b6965938c 100644
--- a/web/src/pages/ProfileList/index.jsx
+++ b/web/src/pages/ProfileList/index.jsx
@@ -97,6 +97,9 @@ function ProfileCard({
   const chevronRotation = detailsCollapsed ? '' : 'rotate-90';
   const detailsSectionId = `profile-${data.id}-summary`;
 
+  // Favorite/Unfavorite profile background color
+  const bgProfileFavorite = data.favorite ? 'bg-primary/10' : 'bg-base-200';
+
   // Sum total duration from phases (in seconds)
   const totalDurationSeconds = Array.isArray(data?.phases)
     ? data.phases.reduce((sum, p) => sum + (Number.isFinite(p?.duration) ? p.duration : 0), 0)
@@ -193,7 +196,7 @@ function ProfileCard({
   }, [positionPopover]);
 
   return (
-    <Card sm={12} role='listitem'>
+    <Card sm={12} role='listitem' className={`${bgProfileFavorite}`}>
       <div
         className='flex flex-row items-center'
         role='group'

From 0e7a605bedb7bf9754747a5f710a42818a703014 Mon Sep 17 00:00:00 2001
From: Sartoric <6607379+Sartoric@users.noreply.github.com>
Date: Fri, 7 Nov 2025 18:57:40 +0100
Subject: [PATCH 2/2] **Refactor Card component to support dynamic background
 classes**

- Updated `Card` component to accept and apply `bgColorClass` dynamically.
---
 web/src/components/Card.jsx         | 3 ++-
 web/src/pages/ProfileList/index.jsx | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Card.jsx b/web/src/components/Card.jsx
index 83bb0cb53..32726ff22 100644
--- a/web/src/components/Card.jsx
+++ b/web/src/components/Card.jsx
@@ -9,6 +9,7 @@ export default function Card({
   className = '',
   role,
   fullHeight = false,
+  bgColorClass = 'bg-base-100',
 }) {
   const getGridClasses = () => {
     const breakpoints = [
@@ -29,7 +30,7 @@ export default function Card({
 
   return (
     <div
-      className={`card bg-base-100 shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
+      className={`card ${bgColorClass} shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
       role={role}
     >
       {title && (
diff --git a/web/src/pages/ProfileList/index.jsx b/web/src/pages/ProfileList/index.jsx
index b6965938c..5afbcad7d 100644
--- a/web/src/pages/ProfileList/index.jsx
+++ b/web/src/pages/ProfileList/index.jsx
@@ -196,7 +196,7 @@ function ProfileCard({
   }, [positionPopover]);
 
   return (
-    <Card sm={12} role='listitem' className={`${bgProfileFavorite}`}>
+    <Card sm={12} role='listitem' bgColorClass={bgProfileFavorite}>
       <div
         className='flex flex-row items-center'
         role='group'