style: Adjust padding and margin in DeviceCard and DevicesScreen for improved layout consistency

Author: oldrev

client/lib/devices/borneo/lyfi/manifest.dart

@@ -47,13 +47,7 @@ class LyfiDeviceModuleMetadata extends DeviceModuleMetadata {
       );
 
   static Widget _buildDeviceIcon(BuildContext context, double iconSize, bool isOnline) {
-    return Icon(
-      Icons.light_outlined,
-      size: iconSize,
-      color: isOnline
-          ? Theme.of(context).colorScheme.primary
-          : Theme.of(context).colorScheme.primary.withValues(alpha: 0.38),
-    );
+    return Icon(Icons.light_outlined, size: iconSize, color: Theme.of(context).colorScheme.primary);
   }
 
   static Widget _buildPrimaryStateIcon(BuildContext context, double iconSize) {
@@ -115,7 +109,7 @@ class LyfiDeviceModuleMetadata extends DeviceModuleMetadata {
       case LyfiMode.scheduled:
         return context.translate('Scheduled');
       case LyfiMode.sun:
-        return context.translate('Sun Simulation');
+        return context.translate('Sun');
       default:
         return '-';
     }
@@ -214,7 +208,7 @@ class _LyfiBrightnessChart extends StatelessWidget {
 
   Widget _buildBarChart(BuildContext context, int channelCount) {
     final colorScheme = Theme.of(context).colorScheme;
-    final barBackColor = colorScheme.surfaceContainerLow;
+    final isDark = Theme.of(context).brightness == Brightness.dark;
 
     // Adaptive bar width: shrink as channel count grows
     final barWidth =
@@ -243,6 +237,16 @@ class _LyfiBrightnessChart extends StatelessWidget {
       final fraction = (value / lyfiBrightnessMax).clamp(0.0, 1.0);
       final currentEndColor = Color.lerp(lightStart, primaryColor, fraction)!;
 
+      // Background rod: desaturate the channel color heavily and blend with the
+      // surface so it looks muted but still carries a hint of the original hue.
+      final hslColor = HSLColor.fromColor(primaryColor);
+      final mutedColor = hslColor
+          .withSaturation((hslColor.saturation * 0.25).clamp(0.0, 1.0))
+          .withLightness(isDark ? 0.15 : 0.85)
+          .toColor();
+      // Blend with surface for a softer look
+      final barBackColor = Color.lerp(colorScheme.surfaceContainerLow, mutedColor, 0.65)!;
+
       groups.add(
         BarChartGroupData(
           x: i,
@@ -288,7 +292,7 @@ class _LyfiBrightnessChart extends StatelessWidget {
                   label,
                   style: Theme.of(context).textTheme.labelSmall?.copyWith(
                     fontSize: channelCount > 6 ? 8.0 : 9.0,
-                    color: colorScheme.onSurface.withValues(alpha: 0.7),
+                    color: colorScheme.onSurface.withValues(alpha: 0.38),
                   ),
                 );
               },

client/lib/features/devices/views/device_card.dart

@@ -30,8 +30,7 @@ class DeviceCard extends StatelessWidget {
       selector: (_, vm) => (isOnline: vm.isOnline, isPowerOn: vm.isPowerOn, name: vm.deviceEntity.name),
       builder: (context, status, _) {
         final colorScheme = Theme.of(context).colorScheme;
-        final isActive = status.isOnline && status.isPowerOn;
-        final bgColor = isActive ? colorScheme.surfaceContainerHighest : colorScheme.surfaceContainerLow;
+        final bgColor = colorScheme.surfaceContainerHighest;
         final fgColor = colorScheme.onSurface;
 
         return ClipRRect(
@@ -46,7 +45,7 @@ class DeviceCard extends StatelessWidget {
                 onTap: vm.isBusy ? null : () => _openDevicePage(context, vm.deviceEntity),
                 borderRadius: BorderRadius.circular(12),
                 child: Padding(
-                  padding: const EdgeInsets.fromLTRB(10, 4, 4, 10),
+                  padding: const EdgeInsets.fromLTRB(8, 0, 4, 8),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.stretch,
                     children: [
@@ -61,7 +60,9 @@ class DeviceCard extends StatelessWidget {
                               status.name,
                               maxLines: 1,
                               overflow: TextOverflow.ellipsis,
-                              style: Theme.of(context).textTheme.labelMedium?.copyWith(color: fgColor),
+                              style: Theme.of(
+                                context,
+                              ).textTheme.labelMedium?.copyWith(color: Theme.of(context).colorScheme.primary),
                             ),
                           ),
                           _buildPopupMenu(context, fgColor),
@@ -70,7 +71,7 @@ class DeviceCard extends StatelessWidget {
                       // Central content area
                       Expanded(
                         child: Padding(
-                          padding: const EdgeInsets.fromLTRB(2, 4, 8, 0),
+                          padding: const EdgeInsets.fromLTRB(2, 4, 8, 8),
                           child: moduleMeta.summaryContentBuilder != null
                               ? moduleMeta.summaryContentBuilder!(context, vm)
                               : Center(

client/lib/features/devices/views/devices_screen.dart

@@ -253,7 +253,7 @@ class DevicesScreen extends StatelessWidget {
                 children: [
                   // Group header
                   Container(
-                    margin: const EdgeInsets.fromLTRB(16, 0, 16, 0),
+                    margin: const EdgeInsets.fromLTRB(8, 0, 8, 0),
                     height: 48,
                     child: Row(
                       children: [
@@ -279,14 +279,14 @@ class DevicesScreen extends StatelessWidget {
                   ),
                   // Device card grid
                   GridView.builder(
-                    padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+                    padding: const EdgeInsets.fromLTRB(8, 0, 8, 8),
                     shrinkWrap: true,
                     physics: const NeverScrollableScrollPhysics(),
                     gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                       crossAxisCount: crossAxisCount,
                       childAspectRatio: 1.0,
-                      crossAxisSpacing: 16,
-                      mainAxisSpacing: 16,
+                      crossAxisSpacing: 8,
+                      mainAxisSpacing: 8,
                     ),
                     itemCount: groupData.deviceCount,
                     itemBuilder: (context, index) {