Track rögzítés vizuális visszajelzésének módosítása.

lib/widgets/tracking/track_info_card.dart

@@ -21,20 +21,16 @@ class TrackInfoCard extends StatelessWidget {
 
       return GestureDetector(
         onTap: () => _openSheet(context),
-        child: Container(
-          constraints: const BoxConstraints(minWidth: 140),
-          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 7),
-          decoration: BoxDecoration(
-            color: Colors.black.withOpacity(0.72),
-            borderRadius: BorderRadius.circular(10),
-            border: Border.all(
-              color: isRec
-                  ? Colors.red.withOpacity(0.5)
-                  : Colors.white.withOpacity(0.12),
-            ),
-          ),
-          child: isRec ? _RecordingContent(ctrl: ctrl) : _IdleContent(),
-        ),
+        child: Card(
+            elevation: 4,
+            shape:
+                RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+            color:
+                Theme.of(context).colorScheme.surface.withValues(alpha: 0.92),
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+              child: isRec ? _RecordingContent(ctrl: ctrl) : _IdleContent(),
+            )),
       );
     });
   }
@@ -87,22 +83,30 @@ class _RecordingContent extends StatelessWidget {
 
             // Statisztika sor
             Row(
-              mainAxisSize: MainAxisSize.min,
+              //mainAxisSize: MainAxisSize.min,
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
               children: [
                 _MiniStat(
-                  icon: Icons.timer_outlined,
-                  value: ctrl.elapsedFormatted.value,
-                ),
-                const SizedBox(width: 10),
+                    icon: Icons.timer_outlined,
+                    value: ctrl.elapsedFormatted.value,
+                    label: 'Idő'),
+                const _Divider(),
                 _MiniStat(
-                  icon: Icons.route,
-                  value: _fmtDist(ctrl.sessionDistance.value),
-                ),
-                const SizedBox(width: 10),
+                    icon: Icons.route,
+                    value: _fmtDist(ctrl.sessionDistance.value),
+                    label: 'Távolság'),
+                const _Divider(),
                 _MiniStat(
-                  icon: Icons.location_on_outlined,
-                  value: '${ctrl.livePoints.length}',
+                  icon: Icons.speed,
+                  label: 'Sebesség',
+                  value:
+                      '${ctrl.currentSpeedKmh.value.toStringAsFixed(1)} km/h',
                 ),
+                _Divider(),
+                _MiniStat(
+                    icon: Icons.location_on_outlined,
+                    value: '${ctrl.livePoints.length}',
+                    label: 'Pontok'),
               ],
             ),
 
@@ -167,6 +171,12 @@ class _RecordingContent extends StatelessWidget {
       : '${(m / 1000).toStringAsFixed(2)} km';
 }
 
+class _Divider extends StatelessWidget {
+  const _Divider();
+  @override
+  Widget build(BuildContext context) =>
+      Container(height: 36, width: 1, color: Colors.grey.shade300);
+}
 // ─── Idle állapot ─────────────────────────────────────────────────────────────
 
 class _IdleContent extends StatelessWidget {
@@ -300,23 +310,24 @@ class _StatusDotState extends State<_StatusDot>
 
 class _MiniStat extends StatelessWidget {
   final IconData icon;
+  final String? label;
   final String value;
-  const _MiniStat({required this.icon, required this.value});
+  const _MiniStat({required this.icon, required this.value, this.label});
 
   @override
   Widget build(BuildContext context) {
-    return Row(mainAxisSize: MainAxisSize.min, children: [
-      Icon(icon, size: 11, color: Colors.white54),
-      const SizedBox(width: 3),
+    return Column(mainAxisSize: MainAxisSize.min, children: [
+      Icon(icon, size: 16, color: Theme.of(context).colorScheme.primary),
+      const SizedBox(height: 2),
       Text(
         value,
         style: const TextStyle(
-          color: Colors.white,
-          fontSize: 12,
-          fontWeight: FontWeight.w600,
+          fontSize: 15,
+          fontWeight: FontWeight.bold,
           fontFeatures: [FontFeature.tabularFigures()],
         ),
       ),
+      label != null ? Text(label!) : SizedBox.shrink()
     ]);
   }
 }