Add Info Alert Dialog to show payment confirmation popup

Change CakePhone pages title colors
Change CakePhone popups title colors

lib/palette.dart

@@ -49,6 +49,7 @@ class Palette {
   static const Color manatee = Color.fromRGBO(153, 161, 176, 1.0);
   static const Color stateGray = Color.fromRGBO(68, 74, 89, 1.0);
   static const Color frostySky = Color.fromRGBO(0, 184, 250, 1.0);
+  static const Color darkShade = Color.fromRGBO(50, 50, 50, 1.0);
 }
 
 class PaletteDark {

lib/src/screens/cake_phone/cake_phone_auth_page.dart

@@ -23,7 +23,7 @@ class CakePhoneAuthPage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: Theme.of(context).primaryTextTheme.title.color),
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
     );
   }
 }

lib/src/screens/cake_phone/cake_phone_products_page.dart

@@ -18,7 +18,7 @@ class CakePhoneProductsPage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: Theme.of(context).primaryTextTheme.title.color),
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
     );
   }
 }

lib/src/screens/cake_phone/cake_phone_verification_page.dart

@@ -23,7 +23,7 @@ class CakePhoneVerificationPage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: Theme.of(context).primaryTextTheme.title.color),
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
     );
   }
 }

lib/src/screens/cake_phone/cake_phone_welcome_page.dart

@@ -20,8 +20,7 @@ class CakePhoneWelcomePage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: titleColor ??
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
-              Theme.of(context).primaryTextTheme.title.color),
     );
   }
 }

lib/src/screens/cake_phone/phone_number_service/auto_renew_settings_page.dart

@@ -32,7 +32,7 @@ class AutoRenewSettingsPage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: Theme.of(context).primaryTextTheme.title.color),
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
     );
   }
 }
@@ -64,7 +64,7 @@ class AutoRenewSettingsBodyState extends State<AutoRenewSettingsBody> {
                 style: TextStyle(
                   fontSize: 20,
                   fontWeight: FontWeight.w700,
-                  color: Theme.of(context).primaryTextTheme.title.color,
+                  color: Theme.of(context).primaryTextTheme.title.decorationColor,
                   fontFamily: 'Lato',
                 ),
               ),

lib/src/screens/cake_phone/phone_number_service/number_settings_page.dart

@@ -26,7 +26,7 @@ class NumberSettingsPage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: titleColor ?? Theme.of(context).primaryTextTheme.title.color),
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
     );
   }
 }

lib/src/screens/cake_phone/phone_number_service/phone_number_product_page.dart

@@ -7,6 +7,7 @@ import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/screens/cake_phone/widgets/cake_phone_settings_tile.dart';
 import 'package:cake_wallet/src/screens/cake_phone/widgets/plan_card.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
+import 'package:cake_wallet/src/widgets/info_alert_dialog.dart';
 import 'package:cake_wallet/src/widgets/picker.dart';
 import 'package:cake_wallet/store/app_store.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
@@ -40,7 +41,7 @@ class PhoneNumberProductPage extends BasePage {
           fontSize: 22,
           fontWeight: FontWeight.w700,
           fontFamily: 'Lato',
-          color: Theme.of(context).primaryTextTheme.title.color),
+          color: Theme.of(context).primaryTextTheme.title.decorationColor),
     );
   }
 }
@@ -73,7 +74,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                 style: TextStyle(
                   fontSize: 20,
                   fontWeight: FontWeight.w700,
-                  color: Theme.of(context).primaryTextTheme.title.color,
+                  color: Theme.of(context).primaryTextTheme.title.decorationColor,
                   fontFamily: 'Lato',
                 ),
               ),
@@ -312,6 +313,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                     builder: (dialogContext) {
                       return AlertWithTwoActions(
                           alertTitle: S.of(context).confirm_payment,
+                          alertTitleColor: Theme.of(context).primaryTextTheme.title.decorationColor,
                           alertContent: S.of(context).confirm_delete_template,
                           contentWidget: Column(
                             mainAxisSize: MainAxisSize.min,
@@ -348,6 +350,7 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                     builder: (dialogContext) {
                       return AlertWithTwoActions(
                           alertTitle: S.of(context).confirm_sending,
+                          alertTitleColor: Theme.of(context).primaryTextTheme.title.decorationColor,
                           alertContent: S.of(context).confirm_delete_template,
                           contentWidget: Column(
                             mainAxisSize: MainAxisSize.min,
@@ -373,12 +376,13 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
                                 ),
                               ),
                               const SizedBox(height: 16),
-                              Text( //TODO: remove static address if it will be generated everytime
+                              Text(
+                                //TODO: remove static address if it will be generated everytime
                                 "4B6c5ApfayzRN8jYxXyprv9me1vttSjF21WAz4HQ8JvS13RgRbgfQg7PPgvm2QMA8N1ed7izqPFsnCKGWWwFoGyjTFstzXm",
                                 style: TextStyle(
                                   fontSize: 10,
                                   fontWeight: FontWeight.w600,
-                                  color: Theme.of(context).primaryTextTheme.title.color,
+                                  color: Theme.of(context).accentTextTheme.subhead.color,
                                 ),
                                 textAlign: TextAlign.center,
                               ),
@@ -510,10 +514,87 @@ class PhoneNumberProductBodyState extends State<PhoneNumberProductBody> {
   }
 
   void showPaymentConfirmationPopup() {
-    // showPopUp<void>(
+    showPopUp<void>(
-    //     context: context,
+        context: context,
-    //     builder: (dialogContext) {
+        builder: (dialogContext) {
-    //
+          return InfoAlertDialog(
-    //     });
+            alertTitle: S.of(context).awaiting_payment_confirmation,
+            alertTitleColor: Theme.of(context).primaryTextTheme.title.decorationColor,
+            alertContentPadding: EdgeInsets.zero,
+            alertContent: Padding(
+              padding: const EdgeInsets.only(top: 8, bottom: 32),
+              child: Column(
+                children: [
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 24),
+                    child: Text(
+                      S.of(context).transaction_sent_popup_info,
+                      style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w500,
+                        color: Theme.of(context).primaryTextTheme.title.color,
+                      ),
+                    ),
+                  ),
+                  Padding(
+                    padding: EdgeInsets.symmetric(vertical: 24),
+                    child: Container(
+                      height: 1,
+                      color: Theme.of(context).dividerColor,
+                    ),
+                  ),
+                  Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 24),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          "${S.of(context).transaction_details_transaction_id}:",
+                          style: TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w500,
+                            color: Theme.of(context).accentTextTheme.subhead.color,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.only(top: 4, bottom: 16),
+                          child: Text(
+                            // TODO: Replace with the transaction id
+                            "dsyf5ind7akwryewkmf5nf4eakdrm4infd4i8rm4fd8nrmsein",
+                            style: TextStyle(
+                              fontSize: 12,
+                              fontWeight: FontWeight.w500,
+                              color: Theme.of(context).primaryTextTheme.title.color,
+                            ),
+                          ),
+                        ),
+                        Text(
+                          "${S.of(context).view_in_block_explorer}:",
+                          style: TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w500,
+                            color: Theme.of(context).accentTextTheme.subhead.color,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.only(top: 4),
+                          child: Text(
+                            // TODO: get it from transaction details view model
+                            S.of(context).view_transaction_on,
+                            style: TextStyle(
+                              fontSize: 12,
+                              fontWeight: FontWeight.w500,
+                              color: Theme.of(context).primaryTextTheme.title.color,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          );
+        });
   }
 }

lib/src/widgets/alert_with_two_actions.dart

@@ -15,6 +15,7 @@ class AlertWithTwoActions extends BaseAlertDialog {
     this.contentWidget,
     this.leftActionButtonColor,
     this.rightActionButtonColor,
+    this.alertTitleColor,
   }) : assert(alertContent != null || contentWidget != null);
 
   final String alertTitle;
@@ -24,6 +25,7 @@ class AlertWithTwoActions extends BaseAlertDialog {
   final VoidCallback actionLeftButton;
   final VoidCallback actionRightButton;
   final bool alertBarrierDismissible;
+  final Color alertTitleColor;
 
   @override
   String get titleText => alertTitle;
@@ -47,4 +49,6 @@ class AlertWithTwoActions extends BaseAlertDialog {
   final Color leftActionButtonColor;
   @override
   final Color rightActionButtonColor;
+  @override
+  Color get titleColor => alertTitleColor;
 }

lib/src/widgets/base_alert_dialog.dart

@@ -12,8 +12,10 @@ class BaseAlertDialog extends StatelessWidget {
   VoidCallback get actionRight => () {};
   bool get barrierDismissible => true;
   Widget get contentWidget => null;
+  EdgeInsets get contentPadding => null;
   Color get leftActionButtonColor => null;
   Color get rightActionButtonColor => null;
+  Color get titleColor => null;
 
   Widget title(BuildContext context) {
     return Text(
@@ -23,7 +25,7 @@ class BaseAlertDialog extends StatelessWidget {
         fontSize: 20,
         fontFamily: 'Lato',
         fontWeight: FontWeight.w600,
-        color: Theme.of(context).primaryTextTheme.title.color,
+        color: titleColor ?? Theme.of(context).primaryTextTheme.title.color,
         decoration: TextDecoration.none,
       ),
     );
@@ -151,7 +153,7 @@ class BaseAlertDialog extends StatelessWidget {
                             )
                             : Offstage(),
                             Padding(
-                              padding: EdgeInsets.fromLTRB(24, 8, 24, 32),
+                              padding: contentPadding ?? EdgeInsets.fromLTRB(24, 8, 24, 32),
                               child: content(context),
                             )
                           ],

lib/src/widgets/info_alert_dialog.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
+
+class InfoAlertDialog extends BaseAlertDialog {
+  InfoAlertDialog({
+    @required this.alertTitle,
+    @required this.alertContent,
+    this.alertTitleColor,
+    this.alertContentPadding,
+    this.alertBarrierDismissible = true
+  });
+
+  final String alertTitle;
+  final Color alertTitleColor;
+  final Widget alertContent;
+  final EdgeInsets alertContentPadding;
+  final bool alertBarrierDismissible;
+
+  @override
+  String get titleText => alertTitle;
+
+  @override
+  Widget get contentWidget => alertContent;
+
+  @override
+  bool get barrierDismissible => alertBarrierDismissible;
+
+  @override
+  bool get isDividerExists => true;
+
+  @override
+  Color get titleColor => alertTitleColor;
+
+  @override
+  EdgeInsets get contentPadding => alertContentPadding;
+
+  @override
+  Widget actionButtons(BuildContext context) {
+    return const SizedBox();
+  }
+}

lib/themes/bright_theme.dart

@@ -89,7 +89,8 @@ class BrightTheme extends ThemeBase {
       primaryTextTheme: TextTheme(
           title: TextStyle(
               color: Palette.darkBlueCraiola, // title color
-              backgroundColor: Palette.wildPeriwinkle // textfield underline
+              backgroundColor: Palette.wildPeriwinkle, // textfield underline
+              decorationColor: Palette.darkShade // cake phone title color
           ),
           caption: TextStyle(
               color: PaletteDark.pigeonBlue, // secondary text

lib/themes/dark_theme.dart

@@ -88,7 +88,8 @@ class DarkTheme extends ThemeBase {
       primaryTextTheme: TextTheme(
           title: TextStyle(
               color: Colors.white, // title color
-              backgroundColor: PaletteDark.darkOceanBlue // textfield underline
+              backgroundColor: PaletteDark.darkOceanBlue, // textfield underline
+              decorationColor: Colors.white // cake phone title color
           ),
           caption: TextStyle(
               color: PaletteDark.darkCyanBlue, // secondary text

lib/themes/light_theme.dart

@@ -89,7 +89,8 @@ class LightTheme extends ThemeBase {
       primaryTextTheme: TextTheme(
           title: TextStyle(
               color: Palette.darkBlueCraiola, // title color
-              backgroundColor: Palette.wildPeriwinkle // textfield underline
+              backgroundColor: Palette.wildPeriwinkle, // textfield underline
+              decorationColor: Palette.darkBlueCraiola // cake phone title color
           ),
           caption: TextStyle(
               color: PaletteDark.pigeonBlue, // secondary text

res/values/strings_en.arb

@@ -589,5 +589,7 @@
   "term": "Term",
   "disable": "Disable",
   "update": "Update",
-  "auto_renew_term_description": "Optionally auto-renew your phone number if a sufficient balance is available. We will attempt to pay the balance a day before the service is set to expire."
+  "auto_renew_term_description": "Optionally auto-renew your phone number if a sufficient balance is available. We will attempt to pay the balance a day before the service is set to expire.",
+  "awaiting_payment_confirmation": "Awaiting Payment Confirmation",
+  "transaction_sent_popup_info": "Your transaction was sent. \n\nIf the screen doesn’t proceed after 1 minute, check a block explorer and your email."
 }