App Branding (#21)

* Update drawer footer image
* Update system status & navigation bar style
* Update Breez Logo color on Blue theme
* Update Breez Liquid logo
* Update Android launcher icons & splash theme
* Update App Icon color

README.md

@@ -5,7 +5,7 @@
 # l-Breez
 
 <img align="right" width="112" height="42" title="Breez logo"
-src="./src/images/logo-color.svg">
+src="./src/images/liquid-logo-color.svg">
 
 l-Breez is a migration of [Breez mobile app](https://github.com/breez/breezmobile) to
 the [Breez Liquid SDK](https://github.com/breez/breez-liquid-sdk) infrastructure.

android/app/src/main/AndroidManifest.xml

@@ -5,8 +5,8 @@
     <application
         android:label="Misty Breez"
         android:name="${applicationName}"
-        android:roundIcon="@mipmap/ic_launcher"
-        android:icon="@mipmap/ic_launcher">
+        android:roundIcon="@mipmap/ic_launcher_round"
+        android:icon="@mipmap/ic_launcher_round">
         <activity
             android:name=".MainActivity"
             android:exported="true"

android/app/src/main/res/drawable/launch_background.xml

@@ -1,12 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<!-- Modify this file to customize your launch splash screen -->
-<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
-    <item android:drawable="@android:color/white" />
-
-    <!-- You can insert your own image assets here -->
-    <!-- <item>
-        <bitmap
-            android:gravity="center"
-            android:src="@mipmap/launch_image" />
-    </item> -->
-</layer-list>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
+    <item android:drawable="@color/breez_primary_color" />
+    <item android:drawable="@drawable/liquid_logo" android:gravity="center"/>
+</layer-list>

android/app/src/main/res/drawable/liquid_logo.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
+    android:width="200dp"
+    android:height="64.69344dp"
+    android:viewportWidth="473"
+    android:viewportHeight="153">
+  <path
+      tools:ignore="VectorPath"
+      android:pathData="M122.03,50.49C122.03,56.89 120,62.77 116.57,67.57C128.26,72.71 136.44,84.53 136.42,98.24C136.42,116.72 121.63,131.74 103.36,131.74H95.5H95.48H89.22V134.99C89.22,139 86.01,142.28 82.03,142.28C78.07,142.28 74.83,139.03 74.83,134.99V131.74H50.04C45.69,131.74 42.18,127.94 42.61,123.44C42.98,119.51 46.46,116.61 50.36,116.61H58.65H102.72C112.81,116.61 120.99,108.32 120.99,98.11C120.99,89.49 115.18,82.28 107.35,80.19C105.91,79.81 104.38,79.71 102.88,79.71H88.28C84.43,79.71 81.01,76.86 80.61,72.99C80.15,68.54 83.55,64.83 87.8,64.72H87.86H87.96C87.96,64.72 92.24,64.75 93.66,64.72C101.39,64.56 107.54,57.97 107.54,50.09V50.06C107.54,41.96 101.07,35.4 93.07,35.4H67.51V35.37H62.88C59.06,35.37 55.93,32.23 55.93,28.33C55.93,24.45 59.03,21.28 62.88,21.28H67.51V21.25H74.83V18.08C74.83,14.07 78.04,10.79 82.03,10.79C85.98,10.79 89.22,14.04 89.22,18.08V21.25H93.18C109.11,21.25 122.03,34.34 122.03,50.49ZM183.96,55.6C183.93,55.6 183.9,55.6 183.9,55.58C183.84,55.58 183.79,55.56 183.74,55.54C183.72,55.53 183.71,55.53 183.69,55.52C183.64,55.52 183.56,55.52 183.5,55.5H183.37C181.74,55.36 177.96,55.36 175.98,55.6V55.63C172.26,56.04 168.19,57.31 165.35,59.48C164.12,60.43 162.99,61.46 161.97,62.57C161.87,58.75 158.81,55.68 155.01,55.68C151.16,55.68 148.05,58.86 148.05,62.73V124.22C148.05,125.2 148.24,126.12 148.61,126.99C149.68,129.53 152.17,131.32 155.07,131.32C158.92,131.32 162.05,128.15 162.05,124.25V123.82V117.2V90.7C162.05,84.47 163.71,79.32 167.01,75.41C169.71,72.22 172.71,70.37 176.11,69.83C177.8,69.61 179.51,69.67 179.51,69.67H182.94C186.8,69.67 189.93,66.5 189.93,62.6C189.9,59.02 187.33,56.12 183.96,55.6ZM341.63,116.67H366.9C370.68,116.67 373.77,119.8 373.74,123.57C373.74,127.41 370.65,130.54 366.87,130.54H327.09C323.29,130.54 320.23,127.41 320.23,123.57C320.23,122.44 320.52,121.39 321,120.44C321.03,120.37 321.07,120.3 321.1,120.22L321.15,120.12C321.25,119.9 321.35,119.69 321.48,119.47L350.73,71.97C351.21,71.16 350.65,70.11 349.7,70.11H327.6C323.58,70.11 320.36,66.63 320.76,62.47C321.1,58.86 324.3,56.19 327.89,56.19H364.23C368.01,56.19 371.1,59.32 371.1,63.15C371.1,63.5 371.05,63.82 371,64.15C371,64.23 371,64.34 370.97,64.42C370.95,64.56 370.91,64.71 370.87,64.85L370.86,64.89L370.84,64.94C370.83,64.98 370.82,65.02 370.81,65.06C370.76,65.33 370.68,65.6 370.57,65.87C370.57,65.89 370.56,65.9 370.56,65.92L370.55,65.92C370.55,65.93 370.55,65.93 370.55,65.94C370.55,65.94 370.54,65.95 370.54,65.96C370.51,66.03 370.47,66.11 370.44,66.19L370.44,66.19C370.32,66.46 370.2,66.73 370.04,66.98L340.59,114.8C340.11,115.61 340.67,116.67 341.63,116.67ZM78.62,90.62C82.71,90.62 86.01,93.97 86.01,98.06C86.01,102.15 82.68,105.47 78.62,105.49H32.13C28.03,105.49 24.74,102.15 24.74,98.06C24.74,93.94 28.06,90.62 32.13,90.62H78.62ZM58.08,72.23C58.08,68.14 54.77,64.8 50.65,64.8H17.43C13.34,64.8 10,68.11 10,72.23C10,76.32 13.31,79.67 17.43,79.67H50.65C54.77,79.67 58.08,76.32 58.08,72.23ZM77.02,57.75H43.8C39.68,57.75 36.37,54.41 36.37,50.32C36.37,46.2 39.71,42.88 43.8,42.88H77.02C81.14,42.88 84.46,46.22 84.46,50.32C84.46,54.43 81.11,57.75 77.02,57.75ZM241.4,63.7C246.16,68.48 248.87,74.35 249.51,81.21V81.27C249.83,84.4 249.49,90.1 249.49,90.1C249.49,94.72 245.75,98.48 241.16,98.48H208.23C207.55,98.48 207.02,99.02 207.02,99.7V101.72C207.02,106.97 208.66,111.05 212.07,114.16C215.47,117.26 219.96,118.83 225.41,118.83C226.86,118.83 228.41,118.67 229.84,118.4C232.39,117.81 235.31,116.48 237.35,114.91C237.47,114.83 237.59,114.75 237.7,114.67L237.7,114.67C237.82,114.59 237.93,114.51 238.05,114.43C238.08,114.41 238.1,114.39 238.13,114.37L238.13,114.37C238.16,114.35 238.18,114.33 238.21,114.32C238.45,114.16 238.72,114 238.96,113.86C238.98,113.85 239,113.84 239.02,113.83C239.04,113.83 239.06,113.82 239.07,113.81L239.79,113.48C239.85,113.48 239.9,113.45 239.96,113.43C240.22,113.32 240.49,113.24 240.79,113.18C240.8,113.18 240.81,113.18 240.82,113.18C240.82,113.18 240.83,113.18 240.84,113.18C240.85,113.18 240.86,113.18 240.86,113.17L240.88,113.17L240.9,113.17C240.91,113.17 240.91,113.17 240.92,113.16C240.92,113.16 240.93,113.16 240.94,113.16C240.95,113.16 240.96,113.16 240.98,113.16C241.24,113.1 241.54,113.08 241.84,113.08H241.91H241.94C244.76,113.08 247.15,114.91 248.01,117.48C248.01,117.54 248.04,117.59 248.06,117.64C248.09,117.78 248.12,117.89 248.14,118C248.2,118.13 248.22,118.24 248.25,118.37C248.33,118.72 248.36,119.1 248.36,119.45V119.56V119.7C248.36,119.94 248.33,120.21 248.3,120.45C248.28,120.51 248.28,120.54 248.28,120.59C248.22,120.89 248.14,121.18 248.06,121.45C248.06,121.47 248.05,121.49 248.04,121.51C248.04,121.52 248.04,121.53 248.03,121.54L248.02,121.56L248.01,121.58L248.01,121.6L248,121.63C247.99,121.64 247.99,121.66 247.98,121.67C247.93,121.89 247.85,122.1 247.74,122.29C247.73,122.31 247.72,122.33 247.71,122.35C247.68,122.39 247.65,122.45 247.63,122.51C247.5,122.78 247.34,123.02 247.18,123.26C246.13,124.94 244.2,126.56 241.22,128.29C236.87,130.83 231.42,132.1 225.03,132.1C215.69,132.1 207.96,129.24 202.03,123.62C196.07,118 193.03,110.48 193.03,101.35V85.4C193.03,77.29 195.88,70.21 201.49,64.32C207.1,58.4 213.94,55.4 221.84,55.4C229.33,55.4 235.93,58.19 241.4,63.7ZM233.51,86.51C234.99,86.51 236.2,85.32 236.2,83.83V82.89C236.2,78.59 234.8,75.78 231.96,72.54C229.14,69.35 225.78,67.81 221.7,67.81C217.68,67.81 214.32,69.24 211.4,72.21C208.47,75.19 207.05,78.75 207.05,83.1V83.78C207.05,85.27 208.25,86.48 209.73,86.48L233.51,86.51ZM314.66,81.21C314.02,74.35 311.3,68.48 306.55,63.7C301.08,58.19 294.47,55.4 286.98,55.4C279.09,55.4 272.25,58.4 266.64,64.32C261.02,70.21 258.18,77.29 258.18,85.4V101.35C258.18,110.48 261.21,118 267.17,123.62C273.11,129.24 280.84,132.1 290.18,132.1C296.57,132.1 302.02,130.83 306.36,128.29C309.34,126.56 311.28,124.94 312.32,123.26L312.32,123.26C312.48,123.02 312.65,122.78 312.78,122.51C312.8,122.45 312.83,122.39 312.86,122.35C312.87,122.33 312.88,122.31 312.89,122.29C312.99,122.1 313.08,121.89 313.13,121.67C313.14,121.63 313.16,121.6 313.17,121.56C313.18,121.53 313.2,121.49 313.21,121.45C313.29,121.18 313.37,120.89 313.42,120.59C313.42,120.54 313.42,120.51 313.45,120.45C313.48,120.21 313.51,119.94 313.51,119.7V119.56V119.45C313.51,119.1 313.48,118.72 313.4,118.37C313.37,118.24 313.34,118.13 313.29,118C313.26,117.89 313.24,117.78 313.21,117.64C313.18,117.59 313.16,117.54 313.16,117.48C312.3,114.91 309.91,113.08 307.09,113.08H307.06H306.98C306.69,113.08 306.39,113.1 306.12,113.16C306.1,113.16 306.06,113.16 306.03,113.17C306,113.18 305.96,113.18 305.93,113.18C305.64,113.24 305.37,113.32 305.1,113.43C305.05,113.45 305,113.48 304.94,113.48L304.22,113.81C304.21,113.81 304.2,113.82 304.19,113.82C304.18,113.83 304.17,113.83 304.16,113.83C304.14,113.84 304.12,113.85 304.11,113.86C303.87,114 303.6,114.16 303.36,114.32C303.34,114.33 303.33,114.34 303.31,114.35C303.3,114.36 303.29,114.36 303.28,114.37C303.25,114.39 303.22,114.41 303.2,114.43C303.08,114.51 302.96,114.59 302.85,114.67L302.85,114.67L302.85,114.67C302.73,114.75 302.62,114.83 302.5,114.91C300.46,116.48 297.53,117.81 294.98,118.4C293.56,118.67 292,118.83 290.55,118.83C285.1,118.83 280.62,117.26 277.21,114.16C273.8,111.05 272.17,106.97 272.17,101.72V99.7C272.17,99.02 272.7,98.48 273.37,98.48H306.31C310.9,98.48 314.63,94.72 314.63,90.1C314.63,90.1 314.98,84.4 314.66,81.27V81.21ZM301.35,83.83C301.35,85.32 300.14,86.51 298.66,86.51L274.88,86.48C273.4,86.48 272.19,85.27 272.19,83.78V83.1C272.19,78.75 273.62,75.19 276.54,72.21C279.47,69.24 282.82,67.81 286.85,67.81C290.93,67.81 294.29,69.35 297.1,72.54C299.95,75.78 301.35,78.59 301.35,82.89V83.83ZM423.65,41.22C426.39,35.98 433.49,36.01 436.51,40.59L436.51,40.59L436.52,40.61L436.52,40.61L436.64,40.78C443.06,50.52 449.55,60.37 454.42,69.58C459.25,78.72 463,88.14 463,96.9C463,115 448.32,129.68 430.21,129.68C412.4,129.68 400.28,118.13 397.46,102.69C396.82,99.16 399.16,95.78 402.69,95.13C406.22,94.49 409.61,96.83 410.25,100.36C412,109.93 418.99,116.68 430.21,116.68C441.14,116.68 450,107.83 450,96.9C450,91.47 447.55,84.4 442.93,75.66C439.66,69.47 435.56,62.9 431.07,56C430.54,57.2 430,58.44 429.45,59.7L429.45,59.71L429.44,59.71L429.41,59.8C428.95,60.84 428.48,61.9 428.02,62.97C426.34,66.77 424.53,70.82 422.78,74.15C419.65,81.51 412.36,86.66 403.86,86.66C392.5,86.66 383.29,77.46 383.29,66.1C383.29,57.49 389.99,46.57 397.1,34.99L397.11,34.98C398.24,33.13 399.39,31.26 400.53,29.37C402.07,26.81 405.79,26.7 407.42,29.2C412.11,36.35 416.49,43.29 419.64,49.72C421.04,46.57 422.41,43.59 423.65,41.22ZM410.95,68.73C411.26,67.91 411.42,67.02 411.42,66.1C411.42,64.15 410.54,60.59 407.69,54.88C406.66,52.82 405.47,50.67 404.15,48.42C402.77,50.74 401.49,52.96 400.33,55.17C397.18,61.15 396.29,64.5 396.29,66.1C396.29,70.28 399.68,73.66 403.86,73.66C406.17,73.66 408.23,72.63 409.62,71C410.02,70.39 410.47,69.62 410.95,68.73Z"
+      android:fillColor="#ffffff"
+      android:fillType="evenOdd"/>
+</vector>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_round_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_round_foreground"/>
+</adaptive-icon>

android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_round_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_round_foreground"/>
+</adaptive-icon>

android/app/src/main/res/values/color.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <color name="breez_primary_color">#055deb</color>
-    <color name="breez_notification_color">#0089f9</color>
+    <color name="breez_app_icon_color">#1F34E7</color>
 </resources>

android/app/src/main/res/values/ic_launcher_round_background.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_round_background">@color/breez_app_icon_color</color>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -5,6 +5,12 @@
         <!-- Show a splash screen on the activity. Automatically removed when
              Flutter draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
+        <!-- Apply Breez primary color to status & navigation bar -->
+        <item name="windowActionBar">false</item>
+        <item name="windowNoTitle">true</item>
+        <item name="android:statusBarColor">@color/breez_primary_color</item>
+        <item name="android:navigationBarColor">@color/breez_primary_color</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

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),
           ),
         ),
       ),

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';
 
@@ -33,7 +32,7 @@ class HomeAppBar extends AppBar {
           title: IconButton(
             padding: EdgeInsets.zero,
             icon: SvgPicture.asset(
-              "src/images/cloud-logo-color.svg",
+              "src/images/liquid-logo-color.svg",
               colorFilter: ColorFilter.mode(
                 themeData.appBarTheme.actionsIconTheme!.color!,
                 BlendMode.srcATop,
@@ -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!,
         );
 }