Merge pull request #260 from ente-io/on-bording-screen-fixes

Progress bar

lib/ui/ott_verification_page.dart

@@ -52,7 +52,7 @@ class _OTTVerificationPageState extends State<OTTVerificationPage> {
                     type: MaterialType.transparency,
                     child: StepProgressIndicator(
                       totalSteps: 4,
-                      currentStep: 1,
+                      currentStep: 2,
                       selectedColor: Theme.of(context).buttonColor,
                       roundedEdges: Radius.circular(10),
                       unselectedColor: Theme.of(context).bottomAppBarColor,

lib/ui/password_entry_page.dart

@@ -1,5 +1,3 @@
-import 'dart:ui';
-
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:logging/logging.dart';
@@ -478,6 +476,7 @@ class _PasswordEntryPageState extends State<PasswordEntryPage> {
             showAppBar: false,
             isDismissible: false,
             onDone: onDone,
+            showProgressBar: true,
           ));
     } catch (e) {
       _logger.severe(e);

lib/ui/payment/stripe_subscription_page.dart

@@ -19,6 +19,7 @@ import 'package:photos/ui/progress_dialog.dart';
 import 'package:photos/ui/web_page.dart';
 import 'package:photos/utils/dialog_util.dart';
 import 'package:photos/utils/toast_util.dart';
+import 'package:step_progress_indicator/step_progress_indicator.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class StripeSubscriptionPage extends StatefulWidget {
@@ -111,9 +112,26 @@ class _StripeSubscriptionPageState extends State<StripeSubscriptionPage> {
 
   @override
   Widget build(BuildContext context) {
-    final appBar = AppBar(
+    // final appBar = AppBar(
-      title: Text("Subscription"),
+    //   title: Text("Subscription"),
-    );
+    // );
+    final appBar = widget.isOnboarding
+        ? AppBar(
+            elevation: 0,
+            title: Hero(
+                tag: "subscription",
+                child: StepProgressIndicator(
+                  totalSteps: 4,
+                  currentStep: 4,
+                  selectedColor: Theme.of(context).buttonColor,
+                  roundedEdges: Radius.circular(10),
+                  unselectedColor: Theme.of(context).bottomAppBarColor,
+                )),
+          )
+        : AppBar(
+            elevation: 0,
+            title: Text("Subscription"),
+          );
     return Scaffold(
       appBar: appBar,
       body: _getBody(),

lib/ui/payment/subscription_common_widgets.dart

@@ -25,9 +25,25 @@ class _SubscriptionHeaderWidgetState extends State<SubscriptionHeaderWidget> {
     if (widget.isOnboarding) {
       return Padding(
         padding: const EdgeInsets.fromLTRB(20, 20, 20, 24),
-        child: Text(
+        child: Column(
-          "Ente preserves your memories, so they're always available to you, even if you lose your device",
+          crossAxisAlignment: CrossAxisAlignment.start,
-          style: Theme.of(context).textTheme.caption,
+          children: [
+            Row(
+              children: [
+                Text(
+                  "Select your plan",
+                  style: Theme.of(context).textTheme.headline4,
+                ),
+              ],
+            ),
+            const SizedBox(
+              height: 10,
+            ),
+            Text(
+              "Ente preserves your memories, so they're always available to you, even if you lose your device ",
+              style: Theme.of(context).textTheme.caption,
+            ),
+          ],
         ),
       );
     } else {

lib/ui/recovery_key_page.dart

@@ -1,6 +1,4 @@
 import 'dart:io' as io;
-import 'dart:ui';
-
 import 'package:bip39/bip39.dart' as bip39;
 import 'package:dotted_border/dotted_border.dart';
 import 'package:flutter/material.dart';
@@ -11,6 +9,7 @@ import 'package:photos/ente_theme_data.dart';
 import 'package:photos/ui/common/gradientButton.dart';
 import 'package:photos/utils/toast_util.dart';
 import 'package:share_plus/share_plus.dart';
+import 'package:step_progress_indicator/step_progress_indicator.dart';
 
 class RecoveryKeyPage extends StatefulWidget {
   final bool showAppBar;
@@ -21,6 +20,7 @@ class RecoveryKeyPage extends StatefulWidget {
   final String title;
   final String text;
   final String subText;
+  final bool showProgressBar;
 
   const RecoveryKeyPage(this.recoveryKey, this.doneText,
       {Key key,
@@ -29,7 +29,8 @@ class RecoveryKeyPage extends StatefulWidget {
       this.isDismissible,
       this.title,
       this.text,
-      this.subText})
+      this.subText,
+      this.showProgressBar = false})
       : super(key: key);
 
   @override
@@ -40,7 +41,6 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
   bool _hasTriedToSave = false;
   final _recoveryKeyFile = io.File(
       Configuration.instance.getTempDirectory() + "ente-recovery-key.txt");
-  final _recoveryKey = TextEditingController();
 
   @override
   Widget build(BuildContext context) {
@@ -51,22 +51,42 @@ class _RecoveryKeyPageState extends State<RecoveryKeyPage> {
     }
 
     return Scaffold(
-      appBar: widget.showAppBar
+      appBar: widget.showProgressBar
           ? AppBar(
-              title: Text(widget.title ?? "Recovery Key"),
+              elevation: 0,
+              title: Hero(
+                tag: "recovery_key",
+                child: StepProgressIndicator(
+                  totalSteps: 4,
+                  currentStep: 3,
+                  selectedColor: Theme.of(context).buttonColor,
+                  roundedEdges: Radius.circular(10),
+                  unselectedColor: Theme.of(context).bottomAppBarColor,
+                ),
+              ),
             )
-          : null,
+          : widget.showAppBar
+              ? AppBar(
+                  title: Text(widget.title ?? "Recovery key"),
+                )
+              : null,
       body: Padding(
-        padding: EdgeInsets.fromLTRB(20, widget.showAppBar ? 40 : 120, 20, 20),
+        padding: EdgeInsets.fromLTRB(
+            20,
+            widget.showAppBar
+                ? 40
+                : widget.showProgressBar
+                    ? 32
+                    : 120,
+            20,
+            20),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.stretch,
-          // mainAxisAlignment: MainAxisAlignment.center,
-
           mainAxisSize: MainAxisSize.max,
           children: [
             widget.showAppBar
-                ? Container()
+                ? const SizedBox.shrink()
-                : Text(widget.title ?? "Recovery Key",
+                : Text(widget.title ?? "Recovery key",
                     style: Theme.of(context).textTheme.headline4),
             Padding(padding: EdgeInsets.all(widget.showAppBar ? 0 : 12)),
             Text(