feat: Refactor benefit card components for improved styling and performance

apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card.dart

@@ -2,9 +2,7 @@ import 'package:core_localization/core_localization.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:krow_domain/krow_domain.dart';
-import 'package:staff_home/src/presentation/widgets/benefits_overview/accordion_history.dart';
 import 'package:staff_home/src/presentation/widgets/benefits_overview/benefit_card_header.dart';
-import 'package:staff_home/src/presentation/widgets/benefits_overview/compliance_banner.dart';
 
 /// Card widget displaying detailed benefit information.
 class BenefitCard extends StatelessWidget {
@@ -25,51 +23,23 @@ class BenefitCard extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(UiConstants.space6),
       decoration: BoxDecoration(
-        color: Colors.white,
+        color: UiColors.white,
         borderRadius: UiConstants.radiusLg,
-        border: Border.all(color: UiColors.border.withOpacity(0.5)),
+        border: Border.all(color: UiColors.border, width: 0.5),
-        boxShadow: [
-          BoxShadow(
-            color: UiColors.black.withOpacity(0.02),
-            blurRadius: 10,
-            offset: const Offset(0, 4),
-          ),
-        ],
       ),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           BenefitCardHeader(benefit: benefit),
-          const SizedBox(height: UiConstants.space6),
+          // const SizedBox(height: UiConstants.space6),
-          if (isSickLeave) ...[
+          // if (isSickLeave) ...[
-            AccordionHistory(label: i18n.sick_leave_history),
+          //   AccordionHistory(label: i18n.sick_leave_history),
-            const SizedBox(height: UiConstants.space6),
+          //   const SizedBox(height: UiConstants.space6),
-          ],
+          // ],
-          if (isVacation || isHolidays) ...[
+          // if (isVacation || isHolidays) ...[
-            ComplianceBanner(text: i18n.compliance_banner),
+          //   ComplianceBanner(text: i18n.compliance_banner),
-            const SizedBox(height: UiConstants.space6),
+          //   const SizedBox(height: UiConstants.space6),
-          ],
+          // ],
-          SizedBox(
-            width: double.infinity,
-            child: UiButton.primary(
-              text: i18n.request_payment(benefit: benefit.title),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: const Color(0xFF0038A8),
-                padding: const EdgeInsets.symmetric(vertical: 16),
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(8),
-                ),
-              ),
-              onPressed: () {
-                // TODO: Implement payment request
-                UiSnackbar.show(
-                  context,
-                  message: i18n.request_submitted(benefit: benefit.title),
-                  type: UiSnackbarType.success,
-                );
-              },
-            ),
-          ),
         ],
       ),
     );

apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/benefit_card_header.dart

@@ -29,11 +29,13 @@ class BenefitCardHeader extends StatelessWidget {
                 benefit.title,
                 style: UiTypography.body1b.textPrimary,
               ),
-              const SizedBox(height: 4),
+              if (_getSubtitle(benefit.title).isNotEmpty) ...[
+                const SizedBox(height: UiConstants.space2),
                 Text(
                   _getSubtitle(benefit.title),
-                style: UiTypography.footnote2r.textSecondary,
+                  style: UiTypography.body3r.textSecondary,
                 ),
+              ],
               const SizedBox(height: UiConstants.space4),
               _buildStatsRow(i18n),
             ],
@@ -48,19 +50,12 @@ class BenefitCardHeader extends StatelessWidget {
         ? (benefit.remainingHours / benefit.entitlementHours)
         : 0.0;
 
-    final bool isSickLeave = benefit.title.toLowerCase().contains('sick');
-    final Color circleColor =
-        isSickLeave ? const Color(0xFF2563EB) : const Color(0xFF10B981);
-
     return SizedBox(
       width: 72,
       height: 72,
       child: CustomPaint(
         painter: CircularProgressPainter(
           progress: progress,
-          color: circleColor,
-          backgroundColor: const Color(0xFFE2E8F0),
-          strokeWidth: 6,
         ),
         child: Center(
           child: Column(
@@ -72,9 +67,7 @@ class BenefitCardHeader extends StatelessWidget {
               ),
               Text(
                 t.client_billing.hours_suffix,
-                style: UiTypography.footnote2r.textTertiary.copyWith(
+                style: UiTypography.footnote1r.textSecondary
-                  fontSize: 9,
-                ),
               ),
             ],
           ),

apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/circular_progress_painter.dart

@@ -1,5 +1,6 @@
 import 'dart:math' as math;
 
+import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 
 /// Custom painter for circular progress indicators.
@@ -11,9 +12,9 @@ class CircularProgressPainter extends CustomPainter {
 
   CircularProgressPainter({
     required this.progress,
-    required this.color,
+    this.strokeWidth = UiConstants.space2,
-    required this.backgroundColor,
+    this.color = UiColors.primary,
-    required this.strokeWidth,
+    this.backgroundColor = UiColors.primaryInverse,
   });
 
   @override

apps/mobile/packages/features/staff/home/lib/src/presentation/widgets/benefits_overview/stat_chip.dart

@@ -22,7 +22,7 @@ class StatChip extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
       decoration: BoxDecoration(
-        color: const Color(0xFFF1F5F9),
+        color: UiColors.primaryForeground,
         borderRadius: BorderRadius.circular(6),
       ),
       child: Column(
@@ -31,11 +31,11 @@ class StatChip extends StatelessWidget {
         children: [
           Text(
             label,
-            style: UiTypography.footnote2r.textTertiary.copyWith(fontSize: 10),
+            style: UiTypography.footnote2r.textSecondary,
           ),
           Text(
             '$value ${t.staff.home.benefits.overview.hours}',
-            style: UiTypography.footnote2b.textPrimary.copyWith(fontSize: 12),
+            style: UiTypography.footnote1b.textPrimary,
           ),
         ],
       ),