CWA-205 | applied new design to restore button, restore options page and restore wallet options page; deleted base restore widget and image widget

lib/src/screens/base_page.dart

@@ -63,7 +63,7 @@ abstract class BasePage extends StatelessWidget {
         : Text(
             title,
             style: TextStyle(
-                fontSize: 22.0,
+                fontSize: 18.0,
                 fontWeight: FontWeight.bold,
                 color: Colors.white),
                 //color: Theme.of(context).primaryTextTheme.title.color),

lib/src/screens/restore/restore_options_page.dart

@@ -3,57 +3,47 @@ import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:cake_wallet/src/screens/restore/widgets/restore_button.dart';
-import 'package:cake_wallet/src/screens/restore/widgets/image_widget.dart';
-import 'package:cake_wallet/src/screens/restore/widgets/base_restore_widget.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 
 class RestoreOptionsPage extends BasePage {
-  static const _aspectRatioImage = 2.086;
 
   @override
   String get title => S.current.restore_restore_wallet;
 
   @override
-  Color get backgroundColor => Palette.creamyGrey;
+  Color get backgroundColor => PaletteDark.historyPanel;
 
-  final _imageSeedKeys = Image.asset('assets/images/seedKeys.png');
-  final _imageRestoreSeed = Image.asset('assets/images/restoreSeed.png');
+  final imageSeedKeys = Image.asset('assets/images/restore_wallet_image.png');
+  final imageBackup = Image.asset('assets/images/backup.png');
 
   @override
   Widget body(BuildContext context) {
-    final isLargeScreen = MediaQuery.of(context).size.height > largeHeight;
-
-    return BaseRestoreWidget(
-      firstRestoreButton: RestoreButton(
-        onPressed: () =>
-          Navigator.pushNamed(
-              context, Routes.restoreWalletOptionsFromWelcome),
-        imageWidget: ImageWidget(
-          image: _imageSeedKeys,
-          aspectRatioImage: _aspectRatioImage,
-          isLargeScreen: isLargeScreen,
+    return Container(
+      padding: EdgeInsets.all(24),
+      child: SingleChildScrollView(
+        child: Column(
+          children: <Widget>[
+            RestoreButton(
+                onPressed: () =>
+                    Navigator.pushNamed(
+                        context, Routes.restoreWalletOptionsFromWelcome),
+                image: imageSeedKeys,
+                title: S.of(context).restore_title_from_seed_keys,
+                description: S.of(context).restore_description_from_seed_keys
+            ),
+            Padding(
+              padding: EdgeInsets.only(top: 24),
+              child: RestoreButton(
+                  onPressed: () {},
+                  image: imageBackup,
+                  title: S.of(context).restore_title_from_backup,
+                  description: S.of(context).restore_description_from_backup
+              ),
+            )
+          ],
         ),
-        titleColor: Palette.lightViolet,
-        color: Palette.lightViolet,
-        title: S.of(context).restore_title_from_seed_keys,
-        description: S.of(context).restore_description_from_seed_keys,
-        textButton: S.of(context).restore_next,
-      ),
-      secondRestoreButton: RestoreButton(
-        onPressed: () {},
-        imageWidget: ImageWidget(
-          image: _imageRestoreSeed,
-          aspectRatioImage: _aspectRatioImage,
-          isLargeScreen: isLargeScreen,
-        ),
-        titleColor: Palette.cakeGreen,
-        color: Palette.cakeGreen,
-        title: S.of(context).restore_title_from_backup,
-        description: S.of(context).restore_description_from_backup,
-        textButton: S.of(context).restore_next,
-      ),
-      isLargeScreen: isLargeScreen,
+      )
     );
   }
 }

lib/src/screens/restore/restore_wallet_options_page.dart

@@ -3,31 +3,59 @@ import 'package:flutter/cupertino.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/src/screens/restore/widgets/restore_button.dart';
-import 'package:cake_wallet/src/screens/restore/widgets/image_widget.dart';
-import 'package:cake_wallet/src/screens/restore/widgets/base_restore_widget.dart';
 import 'package:cake_wallet/src/screens/base_page.dart';
 import 'package:cake_wallet/generated/i18n.dart';
 import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
 import 'package:provider/provider.dart';
 
 class RestoreWalletOptionsPage extends BasePage {
-  static const _aspectRatioImage = 2.086;
 
   @override
   String get title => S.current.restore_seed_keys_restore;
 
   @override
-  Color get backgroundColor => Palette.creamyGrey;
+  Color get backgroundColor => PaletteDark.historyPanel;
 
-  final _imageSeed = Image.asset('assets/images/seedIco.png');
-  final _imageKeys = Image.asset('assets/images/keysIco.png');
+  final imageSeed = Image.asset('assets/images/restore_seed.png');
+  final imageKeys = Image.asset('assets/images/restore_keys.png');
 
   @override
   Widget body(BuildContext context) {
     final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
-    final isLargeScreen = MediaQuery.of(context).size.height > largeHeight;
 
-    return BaseRestoreWidget(
+    return Container(
+      padding: EdgeInsets.all(24),
+      child: SingleChildScrollView(
+        child: Column(
+          children: <Widget>[
+            RestoreButton(
+                onPressed: () {
+                  seedLanguageStore.setCurrentRoute(Routes.restoreWalletFromSeed);
+                  Navigator.pushNamed(context, Routes.seedLanguage);
+                },
+                image: imageSeed,
+                title: S.of(context).restore_title_from_seed,
+                description: S.of(context).restore_description_from_seed
+            ),
+            Padding(
+              padding: EdgeInsets.only(top: 24),
+              child: RestoreButton(
+                  onPressed: () {
+                    seedLanguageStore.setCurrentRoute(Routes.restoreWalletFromKeys);
+                    Navigator.pushNamed(context, Routes.seedLanguage);
+                  },
+                  image: imageKeys,
+                  title: S.of(context).restore_title_from_keys,
+                  description: S.of(context).restore_description_from_keys
+              ),
+            )
+          ],
+        ),
+      )
+    );
+
+
+      /*BaseRestoreWidget(
       firstRestoreButton: RestoreButton(
         onPressed: () {
           seedLanguageStore.setCurrentRoute(Routes.restoreWalletFromSeed);
@@ -59,6 +87,6 @@ class RestoreWalletOptionsPage extends BasePage {
         textButton: S.of(context).restore_next,
       ),
       isLargeScreen: isLargeScreen,
-    );
+    );*/
   }
 }

lib/src/screens/restore/widgets/base_restore_widget.dart

@@ -1,44 +0,0 @@
-import 'package:flutter/material.dart';
-
-const largeHeight = 700;
-
-class BaseRestoreWidget extends StatelessWidget {
-  BaseRestoreWidget({
-    @required this.firstRestoreButton,
-    @required this.secondRestoreButton,
-    this.isLargeScreen = false
-  });
-
-  final Widget firstRestoreButton;
-  final Widget secondRestoreButton;
-  final bool isLargeScreen;
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-        padding: EdgeInsets.only(
-          left: 20.0,
-          right: 20.0,
-        ),
-        child: isLargeScreen
-            ? Column(
-              children: <Widget>[
-                Flexible(
-                  child: firstRestoreButton
-                ),
-                Flexible(
-                  child: secondRestoreButton
-                )
-              ],
-            )
-            : SingleChildScrollView(
-              child: Column(
-                children: <Widget>[
-                  firstRestoreButton,
-                  secondRestoreButton
-                ],
-              ),
-            )
-    );
-  }
-}

lib/src/screens/restore/widgets/image_widget.dart

@@ -1,29 +0,0 @@
-import 'package:flutter/material.dart';
-
-class ImageWidget extends StatelessWidget {
-  ImageWidget({
-    @required this.image,
-    @required this.aspectRatioImage,
-    this.isLargeScreen = false});
-
-  final Image image;
-  final double aspectRatioImage;
-  final bool isLargeScreen;
-
-  @override
-  Widget build(BuildContext context) {
-    return isLargeScreen
-    ? Flexible(
-      child: Container(
-        child: AspectRatio(
-          aspectRatio: aspectRatioImage,
-          child: FittedBox(
-            fit: BoxFit.contain,
-            child: image,
-          ),
-        ),
-      ),
-    )
-    : image;
-  }
-}

lib/src/screens/restore/widgets/restore_button.dart

@@ -1,101 +1,71 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:cake_wallet/palette.dart';
-import 'package:auto_size_text/auto_size_text.dart';
 
 class RestoreButton extends StatelessWidget {
-  const RestoreButton(
-      {@required this.onPressed,
-      @required this.imageWidget,
-      @required this.color,
-      @required this.titleColor,
-      this.title = '',
-      this.description = '',
-      this.textButton = ''});
+  const RestoreButton({
+    @required this.onPressed,
+    @required this.image,
+    @required this.title,
+    @required this.description});
 
   final VoidCallback onPressed;
-  final Widget imageWidget;
-  final Color color;
-  final Color titleColor;
+  final Image image;
   final String title;
   final String description;
-  final String textButton;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      margin: EdgeInsets.only(top: 20.0, bottom: 20.0),
-      decoration: BoxDecoration(
-          color: Theme.of(context).accentTextTheme.headline.backgroundColor,
-          borderRadius: BorderRadius.all(Radius.circular(20.0)),
-          boxShadow: [
-            BoxShadow(
-              color: Palette.buttonShadow,
-              blurRadius: 10,
-              offset: Offset(
-                0,
-                12,
+    return GestureDetector(
+      onTap: onPressed,
+      child: Container(
+        width: double.infinity,
+        height: 140,
+        padding: EdgeInsets.all(24),
+        alignment: Alignment.topLeft,
+        decoration: BoxDecoration(
+            borderRadius: BorderRadius.all(Radius.circular(12)),
+            color: PaletteDark.menuList
+        ),
+        child: Row(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            image,
+            Expanded(
+              child: Padding(
+                padding: EdgeInsets.only(left: 16),
+                child: Column(
+                  mainAxisSize: MainAxisSize.max,
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: <Widget>[
+                    Text(
+                      title,
+                      style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: Colors.white
+                      ),
+                    ),
+                    Padding(
+                      padding: EdgeInsets.only(top: 5),
+                      child: Text(
+                        title,
+                        style: TextStyle(
+                            fontSize: 14,
+                            color: PaletteDark.walletCardText
+                        ),
+                      ),
+                    )
+                  ],
+                ),
               ),
             )
-          ]),
-      child: InkWell(
-          onTap: onPressed,
-          borderRadius: BorderRadius.all(Radius.circular(20.0)),
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: <Widget>[
-              imageWidget,
-              Column(
-                children: <Widget>[
-                  Padding(
-                    padding: EdgeInsets.only(left: 20, right: 20),
-                    child: AutoSizeText(
-                      title,
-                      textAlign: TextAlign.center,
-                      style: TextStyle(
-                          color: titleColor,
-                          fontWeight: FontWeight.bold),
-                      maxLines: 2,
-                    ),
-                  ),
-                  Padding(
-                    padding: EdgeInsets.only(left: 20, right: 20, top: 10),
-                    child: AutoSizeText(
-                      description,
-                      textAlign: TextAlign.center,
-                      style: TextStyle(
-                        color: Theme.of(context).accentTextTheme.subhead.color,
-                      ),
-                      maxLines: 2,
-                    )
-                  )
-                ],
-              ),
-              SizedBox(
-                height: 20,
-              ),
-              Container(
-                  height: 56.0,
-                  decoration: BoxDecoration(
-                    border: Border(
-                        top: BorderSide(
-                            color: Theme.of(context)
-                                .accentTextTheme
-                                .headline
-                                .decorationColor,
-                            width: 1.15)),
-                    color: Colors.transparent,
-                  ),
-                  child: Center(
-                    child: Text(
-                      textButton,
-                      style: TextStyle(
-                          color: color,
-                          fontSize: 16.0,
-                          fontWeight: FontWeight.bold),
-                    ),
-                  ))
-            ],
-          )),
+          ],
+        ),
+      ),
     );
   }
 }