fix: countdown widget design

firka/lib/ui/phone/widgets/home_main_starting_soon.dart

@@ -2,6 +2,8 @@ import 'package:firka/ui/components/firka_card.dart';
 import 'package:firka/l10n/app_localizations.dart';
 import 'package:firka/ui/theme/style.dart';
 import 'package:firka/ui/shared/counter_digit.dart';
+import 'package:firka_common/firka_common.dart';
+import 'package:firka_common/ui/components/filled_circle.dart';
 import 'package:flutter/material.dart';
 
 import 'package:kreta_api/kreta_api.dart';
@@ -24,21 +26,29 @@ class StartingSoonWidget extends StatelessWidget {
     var minTxt = hour == 1 ? l10n.starting_min : l10n.starting_min_plural;
     var secTxt = hour == 1 ? l10n.starting_sec : l10n.starting_sec_plural;
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        FirkaCard(
-          attached: Attach.bottom,
-          left: [
-            Column(
+    return FirkaCard.single(
+      margin: EdgeInsets.only(bottom: 1),
+      padding: EdgeInsets.all(16),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           Row(
             children: [
-                    SizedBox(width: 6),
+              FilledCircle(
+                diameter: 32,
+                color: appStyle.colors.a15p,
+                child: FirkaIconWidget(
+                  FirkaIconType.majesticonsLocal,
+                  "sunSolid",
+                  size: 20,
+                  color: appStyle.colors.accent,
+                ),
+              ),
+              SizedBox(width: 8),
               Text(
                 l10n.starting_soon,
-                      style: appStyle.fonts.H_16px.apply(
+                style: appStyle.fonts.B_16SB.apply(
                   color: appStyle.colors.textPrimary,
                 ),
               ),
@@ -46,67 +56,42 @@ class StartingSoonWidget extends StatelessWidget {
           ),
           Row(
             children: [
-                    CounterDigitWidget(
-                      hour.toString(),
-                      appStyle.fonts.H_16px.apply(
-                        color: appStyle.colors.textPrimary,
-                      ),
-                    ),
-                    SizedBox(width: 2),
+              CounterDigitWidget((hour / 10).floor().toString()),
+              SizedBox(width: 4),
+              CounterDigitWidget(((hour % 10)).toString()),
+              SizedBox(width: 8),
               Text(
                 hourTxt,
                 style: appStyle.fonts.B_16R.apply(
-                        color: appStyle.colors.textPrimary,
+                  color: appStyle.colors.textSecondary,
                 ),
               ),
+              SizedBox(width: 8),
+              CounterDigitWidget((min / 10).floor().toString()),
               SizedBox(width: 4),
-                    CounterDigitWidget(
-                      (min / 10).floor().toString(),
-                      appStyle.fonts.H_16px.apply(
-                        color: appStyle.colors.textPrimary,
-                      ),
-                    ),
-                    CounterDigitWidget(
-                      ((min % 10)).toString(),
-                      appStyle.fonts.H_16px.apply(
-                        color: appStyle.colors.textPrimary,
-                      ),
-                    ),
-                    SizedBox(width: 2),
+              CounterDigitWidget(((min % 10)).toString()),
+              SizedBox(width: 8),
               Text(
                 minTxt,
                 style: appStyle.fonts.B_16R.apply(
-                        color: appStyle.colors.textPrimary,
+                  color: appStyle.colors.textSecondary,
                 ),
               ),
+              SizedBox(width: 8),
+              CounterDigitWidget((sec / 10).floor().toString()),
               SizedBox(width: 4),
-                    CounterDigitWidget(
-                      (sec / 10).floor().toString(),
-                      appStyle.fonts.H_16px.apply(
-                        color: appStyle.colors.textPrimary,
-                      ),
-                    ),
-                    CounterDigitWidget(
-                      ((sec % 10)).toString(),
-                      appStyle.fonts.H_16px.apply(
-                        color: appStyle.colors.textPrimary,
-                      ),
-                    ),
-                    SizedBox(width: 2),
+              CounterDigitWidget(((sec % 10)).toString()),
+              SizedBox(width: 8),
               Text(
                 secTxt,
                 style: appStyle.fonts.B_16R.apply(
-                        color: appStyle.colors.textPrimary,
+                  color: appStyle.colors.textSecondary,
                 ),
               ),
             ],
           ),
         ],
       ),
-          ],
-          right: [],
-        ),
-      ],
     );
   }
 }

firka_common/lib/ui/shared/counter_digit.dart

@@ -2,20 +2,26 @@ import 'package:flutter/material.dart';
 
 import 'package:firka_common/ui/theme/style.dart';
 
+import '../../firka_common.dart';
+
 class CounterDigitWidget extends StatelessWidget {
   final String c;
-  final TextStyle? style;
 
-  const CounterDigitWidget(this.c, this.style, {super.key});
+  const CounterDigitWidget(this.c, {super.key});
 
   @override
   Widget build(BuildContext context) {
-    return Card(
-      shadowColor: Colors.transparent,
+    return Container(
+      width: 18,
+      decoration: ShapeDecoration(
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
         color: appStyle.colors.buttonSecondaryFill,
-      child: Padding(
-        padding: const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
-        child: Text(c, style: style),
+      ),
+      padding: EdgeInsets.symmetric(vertical: 2),
+      child: Text(
+        c,
+        textAlign: TextAlign.center,
+        style: appStyle.fonts.H_16px.apply(color: appStyle.colors.textPrimary),
       ),
     );
   }