Update system status & navigation bar style

Update Breez Logo color on Blue theme
breez · Jun 11, 2024 · 0b8ac39 · 0b8ac39
1 parent ecd09bd
commit 0b8ac39
Show file tree

Hide file tree

Showing 9 changed files with 130 additions and 80 deletions.
diff --git a/lib/routes/home/home_page.dart b/lib/routes/home/home_page.dart
@@ -4,6 +4,7 @@ import 'package:breez_translations/breez_translations_locales.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
+import 'package:flutter/services.dart';
 import 'package:l_breez/handlers/handler.dart';
 import 'package:l_breez/handlers/handler_context_provider.dart';
 import 'package:l_breez/handlers/input_handler.dart';
@@ -63,49 +64,54 @@ class HomeState extends State<Home> with AutoLockMixin, HandlerContextProvider {
     final themeData = Theme.of(context);
     final mediaSize = MediaQuery.of(context).size;
 
-    return PopScope(
-      canPop: false,
-      onPopInvoked: (bool didPop) async {
-        if (didPop) {
-          return;
-        }
-        // Only close drawer if it's open
-        final NavigatorState navigator = Navigator.of(context);
-        if (_scaffoldKey.currentState?.isDrawerOpen ?? false) {
-          navigator.pop();
-          return;
-        }
+    return AnnotatedRegion<SystemUiOverlayStyle>(
+      value: Theme.of(context).appBarTheme.systemOverlayStyle!.copyWith(
+            systemNavigationBarColor: Theme.of(context).bottomAppBarTheme.color,
+          ),
+      child: PopScope(
+        canPop: false,
+        onPopInvoked: (bool didPop) async {
+          if (didPop) {
+            return;
+          }
+          // Only close drawer if it's open
+          final NavigatorState navigator = Navigator.of(context);
+          if (_scaffoldKey.currentState?.isDrawerOpen ?? false) {
+            navigator.pop();
+            return;
+          }
 
-        // If drawer is not open, prompt user to approve exiting the app
-        final texts = context.texts();
-        final bool? shouldPop = await promptAreYouSure(
-          context,
-          texts.close_popup_title,
-          Text(texts.close_popup_message),
-        );
-        if (shouldPop ?? false) {
-          exit(0);
-        }
-      },
-      child: SizedBox(
-        height: mediaSize.height,
-        width: mediaSize.width,
-        child: FadeInWidget(
-          child: Scaffold(
-            resizeToAvoidBottomInset: false,
-            key: _scaffoldKey,
-            appBar: HomeAppBar(
-              themeData: themeData,
-              scaffoldKey: _scaffoldKey,
+          // If drawer is not open, prompt user to approve exiting the app
+          final texts = context.texts();
+          final bool? shouldPop = await promptAreYouSure(
+            context,
+            texts.close_popup_title,
+            Text(texts.close_popup_message),
+          );
+          if (shouldPop ?? false) {
+            exit(0);
+          }
+        },
+        child: SizedBox(
+          height: mediaSize.height,
+          width: mediaSize.width,
+          child: FadeInWidget(
+            child: Scaffold(
+              resizeToAvoidBottomInset: false,
+              key: _scaffoldKey,
+              appBar: HomeAppBar(
+                themeData: themeData,
+                scaffoldKey: _scaffoldKey,
+              ),
+              drawerEnableOpenDragGesture: true,
+              drawerDragStartBehavior: DragStartBehavior.down,
+              drawerEdgeDragWidth: mediaSize.width,
+              drawer: HomeDrawer(key: _drawerKey),
+              bottomNavigationBar: BottomActionsBar(firstPaymentItemKey),
+              floatingActionButton: QrActionButton(firstPaymentItemKey),
+              floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
+              body: _drawerKey.currentState?.screen() ?? AccountPage(firstPaymentItemKey, scrollController),
             ),
-            drawerEnableOpenDragGesture: true,
-            drawerDragStartBehavior: DragStartBehavior.down,
-            drawerEdgeDragWidth: mediaSize.width,
-            drawer: HomeDrawer(key: _drawerKey),
-            bottomNavigationBar: BottomActionsBar(firstPaymentItemKey),
-            floatingActionButton: QrActionButton(firstPaymentItemKey),
-            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
-            body: _drawerKey.currentState?.screen() ?? AccountPage(firstPaymentItemKey, scrollController),
           ),
         ),
       ),

diff --git a/lib/routes/home/widgets/app_bar/home_app_bar.dart b/lib/routes/home/widgets/app_bar/home_app_bar.dart
@@ -1,7 +1,6 @@
-import 'package:l_breez/theme/theme_provider.dart' as theme;
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_svg/svg.dart';
+import 'package:l_breez/theme/theme_provider.dart' as theme;
 
 import 'account_required_actions.dart';
 
@@ -46,6 +45,11 @@ class HomeAppBar extends AppBar {
             color: Color.fromARGB(255, 0, 133, 251),
           ),
           backgroundColor: themeData.customData.dashboardBgColor,
-          systemOverlayStyle: themeData.isLightTheme ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light,
+          systemOverlayStyle: themeData.isLightTheme
+              ? themeData.appBarTheme.systemOverlayStyle!.copyWith(
+                  statusBarBrightness: Brightness.light, // iOS
+                  statusBarIconBrightness: Brightness.dark, // Android
+                )
+              : themeData.appBarTheme.systemOverlayStyle!,
         );
 }
diff --git a/lib/routes/home/widgets/bottom_actions_bar/bottom_actions_bar.dart b/lib/routes/home/widgets/bottom_actions_bar/bottom_actions_bar.dart
@@ -1,5 +1,6 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:breez_translations/breez_translations_locales.dart';
+import 'package:flutter/services.dart';
 import 'package:l_breez/routes/home/widgets/bottom_actions_bar/receive_options_bottom_sheet.dart';
 import 'package:l_breez/routes/home/widgets/bottom_actions_bar/send_options_bottom_sheet.dart';
 import 'package:flutter/material.dart';
@@ -59,9 +60,14 @@ class SendOptions extends StatelessWidget {
       onPress: () => showModalBottomSheet(
         context: context,
         builder: (context) {
-          return SafeArea(
-            child: SendOptionsBottomSheet(
-              firstPaymentItemKey: firstPaymentItemKey,
+          return AnnotatedRegion<SystemUiOverlayStyle>(
+            value: Theme.of(context).appBarTheme.systemOverlayStyle!.copyWith(
+                  systemNavigationBarColor: Theme.of(context).canvasColor,
+                ),
+            child: SafeArea(
+              child: SendOptionsBottomSheet(
+                firstPaymentItemKey: firstPaymentItemKey,
+              ),
             ),
           );
         },
@@ -90,9 +96,14 @@ class ReceiveOptions extends StatelessWidget {
       onPress: () => showModalBottomSheet(
         context: context,
         builder: (context) {
-          return SafeArea(
-            child: ReceiveOptionsBottomSheet(
-              firstPaymentItemKey: firstPaymentItemKey,
+          return AnnotatedRegion<SystemUiOverlayStyle>(
+            value: Theme.of(context).appBarTheme.systemOverlayStyle!.copyWith(
+                  systemNavigationBarColor: Theme.of(context).canvasColor,
+                ),
+            child: SafeArea(
+              child: ReceiveOptionsBottomSheet(
+                firstPaymentItemKey: firstPaymentItemKey,
+              ),
             ),
           );
         },

diff --git a/lib/routes/home/widgets/drawer/breez_navigation_drawer.dart b/lib/routes/home/widgets/drawer/breez_navigation_drawer.dart
@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:breez_translations/breez_translations_locales.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:l_breez/bloc/user_profile/user_profile_bloc.dart';
 import 'package:l_breez/bloc/user_profile/user_profile_state.dart';
@@ -83,22 +84,27 @@ class BreezNavigationDrawer extends StatelessWidget {
         ));
       }
 
-      return Theme(
-        data: themeData.copyWith(
-          canvasColor: themeData.customData.navigationDrawerBgColor,
-        ),
-        child: Drawer(
-          child: Column(
-            children: [
-              Expanded(
-                child: ListView(
-                  controller: _scrollController,
-                  padding: const EdgeInsets.all(0.0),
-                  children: children,
+      return AnnotatedRegion<SystemUiOverlayStyle>(
+        value: Theme.of(context).appBarTheme.systemOverlayStyle!.copyWith(
+              systemNavigationBarColor: themeData.customData.navigationDrawerBgColor,
+            ),
+        child: Theme(
+          data: themeData.copyWith(
+            canvasColor: themeData.customData.navigationDrawerBgColor,
+          ),
+          child: Drawer(
+            child: Column(
+              children: [
+                Expanded(
+                  child: ListView(
+                    controller: _scrollController,
+                    padding: const EdgeInsets.all(0.0),
+                    children: children,
+                  ),
                 ),
-              ),
-              const NavigationDrawerFooter(),
-            ],
+                const NavigationDrawerFooter(),
+              ],
+            ),
           ),
         ),
       );

diff --git a/lib/routes/initial_walkthrough/initial_walkthrough.dart b/lib/routes/initial_walkthrough/initial_walkthrough.dart
@@ -1,16 +1,16 @@
 import 'package:auto_size_text/auto_size_text.dart';
 import 'package:bip39/bip39.dart' as bip39;
 import 'package:breez_translations/breez_translations_locales.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:l_breez/bloc/account/account_bloc.dart';
 import 'package:l_breez/routes/initial_walkthrough/beta_warning_dialog.dart';
-import 'package:l_breez/theme/breez_light_theme.dart';
 import 'package:l_breez/theme/theme_provider.dart' as theme;
+import 'package:l_breez/theme/theme_provider.dart';
 import 'package:l_breez/utils/exceptions.dart';
 import 'package:l_breez/widgets/flushbar.dart';
 import 'package:l_breez/widgets/loader.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:logging/logging.dart';
 import 'package:theme_provider/theme_provider.dart';
 
@@ -56,7 +56,9 @@ class InitialWalkthroughPageState extends State<InitialWalkthroughPage>
     final themeData = Theme.of(context);
 
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: themeData.appBarTheme.systemOverlayStyle!,
+      value: themeData.appBarTheme.systemOverlayStyle!.copyWith(
+        systemNavigationBarColor: BreezColors.blue[500],
+      ),
       child: Theme(
         data: breezLightTheme,
         child: Scaffold(

diff --git a/lib/routes/splash/splash_page.dart b/lib/routes/splash/splash_page.dart
@@ -1,9 +1,9 @@
 import 'dart:async';
 
-import 'package:l_breez/theme/breez_light_theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
+import 'package:l_breez/theme/theme_provider.dart';
 
 class SplashPage extends StatefulWidget {
   final bool isInitial;
@@ -34,7 +34,9 @@ class SplashPageState extends State<SplashPage> {
   Widget build(BuildContext context) {
     final themeData = Theme.of(context);
     return AnnotatedRegion<SystemUiOverlayStyle>(
-      value: themeData.appBarTheme.systemOverlayStyle!,
+      value: themeData.appBarTheme.systemOverlayStyle!.copyWith(
+        systemNavigationBarColor: BreezColors.blue[500],
+      ),
       child: Theme(
         data: breezLightTheme,
         child: Scaffold(

diff --git a/lib/theme/breez_dark_theme.dart b/lib/theme/breez_dark_theme.dart
@@ -33,7 +33,14 @@ final ThemeData breezDarkTheme = ThemeData(
     titleTextStyle: titleTextStyle,
     elevation: 0.0,
     actionsIconTheme: const IconThemeData(color: Colors.white),
-    systemOverlayStyle: SystemUiOverlayStyle.light,
+    systemOverlayStyle: const SystemUiOverlayStyle(
+      statusBarColor: Colors.transparent,
+      statusBarBrightness: Brightness.dark, // iOS
+      statusBarIconBrightness: Brightness.light, // Android
+      systemStatusBarContrastEnforced: false,
+      systemNavigationBarColor: Color(0xFF0c2031),
+      systemNavigationBarContrastEnforced: false,
+    ),
   ),
   dialogTheme: const DialogTheme(
     titleTextStyle: TextStyle(color: Colors.white, fontSize: 20.5, letterSpacing: 0.25),

diff --git a/lib/theme/breez_light_theme.dart b/lib/theme/breez_light_theme.dart
@@ -1,8 +1,6 @@
-import 'package:l_breez/theme/theme_extensions.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-
-import 'breez_colors.dart';
+import 'package:l_breez/theme/theme_provider.dart';
 
 final ThemeData breezLightTheme = ThemeData(
   useMaterial3: false,
@@ -34,7 +32,14 @@ final ThemeData breezLightTheme = ThemeData(
     actionsIconTheme: const IconThemeData(
       color: Color.fromRGBO(0, 120, 253, 1.0),
     ),
-    systemOverlayStyle: SystemUiOverlayStyle.light,
+    systemOverlayStyle: SystemUiOverlayStyle(
+      statusBarColor: Colors.transparent,
+      statusBarBrightness: Brightness.dark, // iOS
+      statusBarIconBrightness: Brightness.light, // Android
+      systemStatusBarContrastEnforced: false,
+      systemNavigationBarColor: BreezColors.blue[500],
+      systemNavigationBarContrastEnforced: false,
+    ),
   ),
   dialogTheme: DialogTheme(
     titleTextStyle: TextStyle(color: BreezColors.grey[600], fontSize: 20.5, letterSpacing: 0.25),

diff --git a/lib/user_app.dart b/lib/user_app.dart
@@ -67,9 +67,16 @@ class UserApp extends StatelessWidget {
       child: ThemeConsumer(
         child: BlocBuilder<UserProfileBloc, UserProfileState>(
           builder: (context, state) {
-            SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
-              statusBarColor: Colors.transparent,
-            ));
+            SystemChrome.setSystemUIOverlayStyle(
+              SystemUiOverlayStyle(
+                systemNavigationBarColor: ThemeProvider.themeOf(context).data.bottomAppBarTheme.color,
+                statusBarColor: Colors.transparent,
+                statusBarBrightness: Brightness.dark, // iOS
+                statusBarIconBrightness: Brightness.light, // Android
+                systemNavigationBarContrastEnforced: false,
+                systemStatusBarContrastEnforced: false,
+              ),
+            );
             return BlocBuilder2<AccountBloc, AccountState, SecurityBloc, SecurityState>(
                 builder: (context, accState, securityState) {
               return MaterialApp(