feat: update UI design

fleeser · fleeser · commit 515a7fe5d8a8 · 2025-09-13T15:03:31.000+02:00
diff --git a/images/banner.png b/images/banner.png
diff --git a/images/logo.png b/images/logo.png
diff --git a/lib/src/core/common/widgets/custom_app_bar.dart b/lib/src/core/common/widgets/custom_app_bar.dart
@@ -29,7 +29,7 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
     return Container(
       width: preferredSize.width,
       height: preferredSize.height,
-      color: CustomColors.brandBlue,
+      color: CustomColors.brandPurple,
       padding: EdgeInsets.only(
         top: context.topPadding,
         left: context.leftPadding + 16.0,
@@ -79,10 +79,10 @@ class _SCAppBarBackButton extends StatelessWidget {
         highlightElevation: 0.0,
         hoverElevation: 0.0,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(size / 2.0)),
-        fillColor: CustomColors.brandPink,
+        fillColor: CustomColors.brandYellow,
         child: Icon(
           LucideIcons.arrowLeft,
-          color: CustomColors.white,
+          color: CustomColors.brandDarkPurple,
           size: size / 2.0
         )
       )
diff --git a/lib/src/core/common/widgets/custom_button.dart b/lib/src/core/common/widgets/custom_button.dart
@@ -23,7 +23,7 @@ class CustomButton extends StatelessWidget {
       height: 48.0,
       child: RawMaterialButton(
         onPressed: onPressed,
-        fillColor: backgroundColor ?? CustomColors.brandPink,
+        fillColor: backgroundColor ?? CustomColors.brandYellow,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),
         padding: const EdgeInsets.symmetric(horizontal: 16.0),
         elevation: 0.0,
@@ -39,7 +39,7 @@ class CustomButton extends StatelessWidget {
           style: TextStyle(
             fontSize: 18.0,
             fontWeight: FontWeight.w600,
-            color: CustomColors.white
+            color: CustomColors.brandDarkPurple
           )
         )
       )
diff --git a/lib/src/core/common/widgets/custom_chip.dart b/lib/src/core/common/widgets/custom_chip.dart
@@ -23,7 +23,7 @@ class SPChip extends StatelessWidget {
       child: IntrinsicWidth(
         child: RawMaterialButton(
           onPressed: onPressed,
-          fillColor: isHighlighted ? CustomColors.brandPink : CustomColors.blue900,
+          fillColor: isHighlighted ? CustomColors.brandYellow : CustomColors.brandDarkPurple,
           padding: const EdgeInsets.symmetric(horizontal: 8.0),
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(19.0)),
           elevation: 0.0,
@@ -38,7 +38,7 @@ class SPChip extends StatelessWidget {
               style: TextStyle(
                 fontSize: 15.0,
                 fontWeight: FontWeight.w600,
-                color: CustomColors.white
+                color: isHighlighted ? CustomColors.brandDarkPurple : CustomColors.brandLightPurple
               )
             )
           )
diff --git a/lib/src/core/common/widgets/custom_scaffold.dart b/lib/src/core/common/widgets/custom_scaffold.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 
 import 'package:ayto_app/src/core/common/widgets/custom_app_bar.dart';
 import 'package:ayto_app/src/core/res/custom_colors.dart';
@@ -16,10 +17,20 @@ class CustomScaffold extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: CustomColors.brandBlue,
-      appBar: appBar,
-      body: body
+    return AnnotatedRegion(
+      value: SystemUiOverlayStyle(
+        systemNavigationBarColor: CustomColors.brandPurple,
+        systemNavigationBarIconBrightness: Brightness.light,
+        systemNavigationBarDividerColor: CustomColors.brandPurple,
+        statusBarColor: CustomColors.transparent,
+        statusBarBrightness: Brightness.light,
+        statusBarIconBrightness: Brightness.light
+      ),
+      child: Scaffold(
+        backgroundColor: CustomColors.brandPurple,
+        appBar: appBar,
+        body: body
+      )
     );
   }
 }
diff --git a/lib/src/core/common/widgets/custom_text_field.dart b/lib/src/core/common/widgets/custom_text_field.dart
@@ -28,7 +28,7 @@ class CustomTextField extends StatelessWidget {
     final InputBorder defaultBorder = OutlineInputBorder(
       borderRadius: BorderRadius.circular(12.0),
       borderSide: BorderSide(
-        color: CustomColors.blue300, 
+        color: CustomColors.brandLightPurple, 
         width: 1.5
       )
     );
@@ -45,7 +45,7 @@ class CustomTextField extends StatelessWidget {
       controller: controller,
       autocorrect: false,
       keyboardType: inputType,
-      cursorColor: CustomColors.white,
+      cursorColor: CustomColors.brandLightPurple,
       style: defaultTextStyle,
       focusNode: focusNode,
       autofocus: autoFocus,
@@ -59,9 +59,9 @@ class CustomTextField extends StatelessWidget {
         enabledBorder: defaultBorder,
         disabledBorder: defaultBorder,
         focusedErrorBorder: defaultBorder,
-        focusedBorder: defaultBorder.copyWith(borderSide: defaultBorder.borderSide.copyWith(color: CustomColors.white)),
+        focusedBorder: defaultBorder.copyWith(borderSide: defaultBorder.borderSide.copyWith(color: CustomColors.brandYellow)),
         hintText: hint,
-        hintStyle: defaultTextStyle.copyWith(color: CustomColors.gray200)
+        hintStyle: defaultTextStyle.copyWith(color: CustomColors.brandLightPurple)
       )
     );
   }
diff --git a/lib/src/core/res/custom_assets.dart b/lib/src/core/res/custom_assets.dart
@@ -3,7 +3,7 @@ class CustomAssets {
   static const String _imagesFolderName = 'images';
   static const String _dataFolderName = 'data';
 
-  static const String banner = '$_imagesFolderName/banner.png';
+  static const String logo = '$_imagesFolderName/logo.png';
 
   static const String database = '$_dataFolderName/database.json';
 }
diff --git a/lib/src/core/res/custom_colors.dart b/lib/src/core/res/custom_colors.dart
@@ -3,9 +3,9 @@ import 'package:flutter/material.dart';
 class CustomColors {
 
   static const Color brandPurple = Color(0xFF726CB2);
-
-  static const Color brandBlue = Color(0xFF0A9FDF);
-  static const Color brandPink = Color(0xFFEA598F);
+  static const Color brandLightPurple = Color(0xFFDAD5F5);
+  static const Color brandDarkPurple = Color(0xFF261D66);
+  static const Color brandYellow = Color(0xFFEAF463);
 
   static const Color transparent = Color(0x00000000);
   
diff --git a/lib/src/features/create_game/presentation/pages/create_game_page.dart b/lib/src/features/create_game/presentation/pages/create_game_page.dart
@@ -27,13 +27,19 @@ class _CreateGamePageState extends ConsumerState<CreateGamePage> {
   final TextEditingController _playerNamesController = TextEditingController();
 
   Future<void> _onPlayGame() async {
+    final GameState state = ref.read(gameStateNotifierProvider);
+    if (state.playerNames.length < 2) return;
+
     ref.read(gameStateNotifierProvider.notifier).setInitials();
     await const PlayGameRoute().push(context);
   }
 
   void _addPlayerName(String playerName) {
-    ref.read(gameStateNotifierProvider.notifier).addPlayerName(playerName);
-    _playerNamesController.clear();
+    if (playerName.isNotEmpty) {
+      ref.read(gameStateNotifierProvider.notifier).addPlayerName(playerName);
+      _playerNamesController.clear();
+    }
+
     _playerNamesFocusNode.requestFocus();
   }
 
diff --git a/lib/src/features/menu/presentation/pages/menu_page.dart b/lib/src/features/menu/presentation/pages/menu_page.dart
@@ -35,7 +35,7 @@ class MenuPage extends StatelessWidget {
                 child: Column(
                   children: <Widget>[
                     Image.asset(
-                      CustomAssets.banner,
+                      CustomAssets.logo,
                       width: (context.screenWidth - context.horizontalPadding - 2.0 * 16.0) * 0.8,
                     ),
                     Gap(32.0),
diff --git a/lib/src/features/play_game/presentation/pages/play_game_page.dart b/lib/src/features/play_game/presentation/pages/play_game_page.dart
@@ -53,7 +53,7 @@ class _PlayGamePageState extends ConsumerState<PlayGamePage> {
         useSafeArea: false,
         builder: (BuildContext context) {
           return Material(
-            color: CustomColors.brandBlue,
+            color: CustomColors.brandPurple,
             child: Padding(
               padding: EdgeInsets.only(
                 top: context.topPadding + 16.0,
@@ -72,7 +72,7 @@ class _PlayGamePageState extends ConsumerState<PlayGamePage> {
                     style: TextStyle(
                       fontSize: 30.0,
                       fontWeight: FontWeight.w700,
-                      color: CustomColors.brandPink
+                      color: CustomColors.brandYellow
                     )
                   ),
                   Gap(32.0),
@@ -188,7 +188,7 @@ class _PlayGamePageState extends ConsumerState<PlayGamePage> {
                       right: context.rightPadding + 16.0,
                     ),
                     decoration: BoxDecoration(
-                      color: CustomColors.blue900,
+                      color: CustomColors.brandYellow,
                       borderRadius: BorderRadius.circular(12.0)
                     ),
                     child: CustomText(
@@ -197,7 +197,7 @@ class _PlayGamePageState extends ConsumerState<PlayGamePage> {
                       style: TextStyle(
                         fontSize: 22.0,
                         fontWeight: FontWeight.w700,
-                        color: CustomColors.white
+                        color: CustomColors.brandDarkPurple
                       )
                     )
                   )
@@ -230,15 +230,15 @@ class _PlayGamePageState extends ConsumerState<PlayGamePage> {
                       child: CustomButton(
                         onPressed: _onRight,
                         title: 'Richtig',
-                        backgroundColor: CustomColors.green500
+                        backgroundColor: CustomColors.green400
                       )
                     ),
                     Gap(16.0),
                     Expanded(
                       child: CustomButton(
                         onPressed: _onWrong,
                         title: 'Falsch',
-                        backgroundColor: CustomColors.red500
+                        backgroundColor: CustomColors.red400
                       )
                     )
                   ]
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,7 +1,7 @@
 name: ayto_app
 description: "A new Flutter project."
 publish_to: 'none'
-version: 1.0.0
+version: 1.1.0
 
 environment:
   sdk: 3.9.2
@@ -46,7 +46,7 @@ flutter:
   assets:
     - data/database.json
 
-    - images/banner.png
+    - images/logo.png
 
   fonts:
     - family: Switzer

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ class CustomButton extends StatelessWidget {`
`23`	`23`	`height: 48.0,`
`24`	`24`	`child: RawMaterialButton(`
`25`	`25`	`onPressed: onPressed,`
`26`		`- fillColor: backgroundColor ?? CustomColors.brandPink,`
	`26`	`+ fillColor: backgroundColor ?? CustomColors.brandYellow,`
`27`	`27`	`shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)),`
`28`	`28`	`padding: const EdgeInsets.symmetric(horizontal: 16.0),`
`29`	`29`	`elevation: 0.0,`
`@@ -39,7 +39,7 @@ class CustomButton extends StatelessWidget {`
`39`	`39`	`style: TextStyle(`
`40`	`40`	`fontSize: 18.0,`
`41`	`41`	`fontWeight: FontWeight.w600,`
`42`		`- color: CustomColors.white`
	`42`	`+ color: CustomColors.brandDarkPurple`
`43`	`43`	`)`
`44`	`44`	`)`
`45`	`45`	`)`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@ class SPChip extends StatelessWidget {`
`23`	`23`	`child: IntrinsicWidth(`
`24`	`24`	`child: RawMaterialButton(`
`25`	`25`	`onPressed: onPressed,`
`26`		`- fillColor: isHighlighted ? CustomColors.brandPink : CustomColors.blue900,`
	`26`	`+ fillColor: isHighlighted ? CustomColors.brandYellow : CustomColors.brandDarkPurple,`
`27`	`27`	`padding: const EdgeInsets.symmetric(horizontal: 8.0),`
`28`	`28`	`shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(19.0)),`
`29`	`29`	`elevation: 0.0,`
`@@ -38,7 +38,7 @@ class SPChip extends StatelessWidget {`
`38`	`38`	`style: TextStyle(`
`39`	`39`	`fontSize: 15.0,`
`40`	`40`	`fontWeight: FontWeight.w600,`
`41`		`- color: CustomColors.white`
	`41`	`+ color: isHighlighted ? CustomColors.brandDarkPurple : CustomColors.brandLightPurple`
`42`	`42`	`)`
`43`	`43`	`)`
`44`	`44`	`)`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ class CustomAssets {`
`3`	`3`	`static const String _imagesFolderName = 'images';`
`4`	`4`	`static const String _dataFolderName = 'data';`
`5`	`5`
`6`		`- static const String banner = '$_imagesFolderName/banner.png';`
	`6`	`+ static const String logo = '$_imagesFolderName/logo.png';`
`7`	`7`
`8`	`8`	`static const String database = '$_dataFolderName/database.json';`
`9`	`9`	`}`