fix: fix new ui

lib/displayLayers/OverlayLayer.dart

@@ -273,7 +273,7 @@ class AboutUs extends StatelessWidget {
           style: TextStyle(fontWeight: FontWeight.bold),
         ),
         const Text(
-          "Made with <3 by bootloopmaster636, Byonicku, and other contributors",
+          "Made with ❤️ by bootloopmaster636, Byonicku, and other contributors",
           textAlign: TextAlign.center,
         ),
         const SizedBox(

lib/displayLayers/TopLayer.dart

@@ -1,29 +1,38 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:ugd_timer/main.dart';
 
 class TopLayer extends ConsumerWidget {
   const TopLayer({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final scaleFactor = ref.watch(displayStateProvider).displayFontScale;
     final displayStateWatcher = ref.watch(displayStateProvider);
     return Animate(
       effects: const [
         SlideEffect(duration: Duration(milliseconds: 450), curve: Curves.easeOutCubic, begin: Offset(0, 0), end: Offset(0.06, 0)),
         FadeEffect(duration: Duration(milliseconds: 450), curve: Curves.easeOutCubic, begin: 1.0, end: 0.6),
       ],
       target: (displayStateWatcher.settingsExpanded == true) ? 1 : 0,
-      child: const SizedBox(
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            TopBar(),
-            TimerCard(),
-            InfoCard(),
-          ],
-        ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          const TopBar(),
+          SizedBox(
+            height: MediaQuery.of(context).size.height - 50 * scaleFactor,
+            child: const Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                TimerCard(),
+                InfoCard(),
+              ],
+            ),
+          ),
+        ],
       ),
     );
   }
@@ -90,7 +99,7 @@ class TimerCard extends ConsumerWidget {
       width: MediaQuery.of(context).size.width * 0.6 * scaleFactor,
       height: MediaQuery.of(context).size.height * 0.3 * scaleFactor,
       decoration: BoxDecoration(
-        color: Theme.of(context).colorScheme.background,
+        color: Theme.of(context).colorScheme.background.withOpacity(0.9),
         borderRadius: BorderRadius.circular(16),
         boxShadow: [
           BoxShadow(
@@ -105,10 +114,11 @@ class TimerCard extends ConsumerWidget {
           "${ref.watch(timerProvider).mainTimer.inHours.toString().padLeft(2, '0')}:"
           "${ref.watch(timerProvider).mainTimer.inMinutes.remainder(60).toString().padLeft(2, '0')}:"
           "${ref.watch(timerProvider).mainTimer.inSeconds.remainder(60).toString().padLeft(2, '0')}",
-          style: TextStyle(
-            fontSize: 116 * scaleFactor,
+          style: const TextStyle(
+            fontSize: 116,
             fontWeight: FontWeight.w600,
           ),
+          overflow: TextOverflow.ellipsis,
         ),
       ),
     );
@@ -120,12 +130,68 @@ class InfoCard extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
-      crossAxisAlignment: CrossAxisAlignment.center,
-      children: [
-        Text("Pengumpulan pada pukul ${ref.watch(timerProvider).endAt.hour}:${ref.watch(timerProvider).endAt.minute}"),
-      ],
+    final scaleFactor = ref.watch(displayStateProvider).displayFontScale;
+    return Padding(
+      padding: const EdgeInsets.all(24.0),
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          Text(
+              "Pengumpulan pada pukul ${ref.watch(timerProvider).endAt.hour.toString().padLeft(2, '0')}:${ref.watch(timerProvider).endAt.minute. toString().padLeft(2, '0')}",
+            style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w600),
+          ),
+          SizedBox(height: 56 * scaleFactor,),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              Icon(
+                FontAwesomeIcons.personCircleQuestion,
+                size: 64 * scaleFactor,
+                color: Theme.of(context).colorScheme.onPrimaryContainer,
+              ),
+              SizedBox(width: 24 * scaleFactor,),
+              RichText(
+                  text: TextSpan(text: "Dapat bertanya asisten setelah\n",
+                    style: TextStyle(fontSize: 24 * scaleFactor, color: Theme.of(context).colorScheme.onTertiaryContainer),
+                    children: [TextSpan(
+                      text: "${ref.watch(timerProvider).assistTimer.inMinutes.toString().padLeft(2, '0')} menit "
+                          "${ref.watch(timerProvider).assistTimer.inSeconds.remainder(60).toString().padLeft(2, '0')} detik",
+                      style: TextStyle(fontSize: 32 * scaleFactor, fontWeight: FontWeight.bold, color: Theme.of(context).colorScheme.onSecondaryContainer),
+                      ),
+                    ],
+                  ),
+              ),
+              Container(
+                padding: EdgeInsets.symmetric(horizontal: 40 * scaleFactor),
+                height: 72 * scaleFactor,
+                child: VerticalDivider(
+                  color: Theme.of(context).colorScheme.onBackground,
+                  thickness: 6,
+                ),
+              ),
+              Icon(
+                FontAwesomeIcons.anglesUp,
+                size: 64 * scaleFactor,
+                color: Theme.of(context).colorScheme.onPrimaryContainer,
+              ),
+              SizedBox(width: 12 * scaleFactor,),
+              RichText(
+                text: TextSpan(text: "Bonus harus dikumpul sebelum\n",
+                  style: TextStyle(fontSize: 24 * scaleFactor, color: Theme.of(context).colorScheme.onTertiaryContainer),
+                  children: [TextSpan(
+                    text: "${ref.watch(timerProvider).assistTimer.inMinutes.toString().padLeft(2, '0')} menit "
+                        "${ref.watch(timerProvider).assistTimer.inSeconds.remainder(60).toString().padLeft(2, '0')} detik",
+                    style: TextStyle(fontSize: 32 * scaleFactor, fontWeight: FontWeight.bold, color: Theme.of(context).colorScheme.onSecondaryContainer),
+                  ),
+                  ],
+                ),
+              )
+            ],
+          ),
+        ],
+      ),
     );
   }
 }

test/widget_test.dart

@@ -0,0 +1,29 @@
+// This is a basic Flutter widget test.
+//
+// To perform an interaction with a widget in your test, use the WidgetTester
+// utility in the flutter_test package. For example, you can send tap and scroll
+// gestures. You can also use WidgetTester to find child widgets in the widget
+// tree, read text, and verify that the values of widget properties are correct.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+
+void main() {
+  testWidgets('Counter increments smoke test', (WidgetTester tester) async {
+    // Build our app and trigger a frame.
+    await tester.pumpWidget(const MyApp());
+
+    // Verify that our counter starts at 0.
+    expect(find.text('0'), findsOneWidget);
+    expect(find.text('1'), findsNothing);
+
+    // Tap the '+' icon and trigger a frame.
+    await tester.tap(find.byIcon(Icons.add));
+    await tester.pump();
+
+    // Verify that our counter has incremented.
+    expect(find.text('0'), findsNothing);
+    expect(find.text('1'), findsOneWidget);
+  });
+}