- Change design/paddings for Send page on desktop view

- Make AddTemplateButton instead of having it duplicated in send/exchange

lib/src/screens/exchange/exchange_page.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/di.dart';
 import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart';
 import 'package:cake_wallet/src/screens/exchange/widgets/mobile_exchange_cards_section.dart';
+import 'package:cake_wallet/src/widgets/add_template_button.dart';
 import 'package:cake_wallet/utils/debounce.dart';
 import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/sync_status.dart';
@@ -8,7 +9,6 @@ import 'package:cw_core/wallet_type.dart';
 import 'package:cake_wallet/entities/parse_address_from_domain.dart';
 import 'package:cake_wallet/src/screens/send/widgets/extract_address_from_parsed.dart';
 import 'package:cake_wallet/src/widgets/standard_checkbox.dart';
-import 'package:dotted_border/dotted_border.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:keyboard_actions/keyboard_actions.dart';
@@ -164,8 +164,7 @@ class ExchangePage extends BasePage {
                 bottomSectionPadding:
                     EdgeInsets.only(left: 24, right: 24, bottom: 24),
                 bottomSection: ConstrainedBox(
-                  constraints:
+                  constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
-                  BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
                   child: Column(children: <Widget>[
                     Padding(
                       padding: EdgeInsets.only(bottom: 15),
@@ -241,51 +240,9 @@ class ExchangePage extends BasePage {
       
             return Row(
               children: <Widget>[
-                GestureDetector(
+                AddTemplateButton(
-                  onTap: () =>
+                  onTap: () => Navigator.of(context).pushNamed(Routes.exchangeTemplate),
-                      Navigator.of(context).pushNamed(Routes.exchangeTemplate),
+                  currentTemplatesLength: templates.length,
-                  child: Container(
-                    padding: EdgeInsets.only(left: 1, right: 10),
-                    child: DottedBorder(
-                      borderType: BorderType.RRect,
-                      dashPattern: [6, 4],
-                      color: Theme.of(context)
-                          .primaryTextTheme!
-                          .headline3!
-                          .decorationColor!,
-                      strokeWidth: 2,
-                      radius: Radius.circular(20),
-                      child: Container(
-                        height: 34,
-                        padding: EdgeInsets.symmetric(
-                            horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30),
-                        alignment: Alignment.center,
-                        decoration: BoxDecoration(
-                          borderRadius: BorderRadius.all(Radius.circular(20)),
-                          color: Colors.transparent,
-                        ),
-                        child: templates.length >= 1
-                            ? Icon(
-                                Icons.add,
-                                color: Theme.of(context)
-                                    .primaryTextTheme!
-                                    .headline2!
-                                    .color!,
-                              )
-                            : Text(
-                                S.of(context).new_template,
-                                style: TextStyle(
-                                  fontSize: 14,
-                                  fontWeight: FontWeight.w600,
-                                  color: Theme.of(context)
-                                      .primaryTextTheme!
-                                      .headline2!
-                                      .color!,
-                                ),
-                              ),
-                      ),
-                    ),
-                  ),
                 ),
                 ListView.builder(
                   scrollDirection: Axis.horizontal,

lib/src/screens/send/send_page.dart

@@ -1,10 +1,12 @@
 import 'package:cake_wallet/entities/fiat_currency.dart';
 import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart';
 import 'package:cake_wallet/src/screens/send/widgets/send_card.dart';
+import 'package:cake_wallet/src/widgets/add_template_button.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
 import 'package:cake_wallet/src/widgets/picker.dart';
 import 'package:cake_wallet/src/widgets/template_tile.dart';
 import 'package:cake_wallet/utils/payment_request.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cake_wallet/view_model/send/output.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
@@ -19,7 +21,6 @@ import 'package:cake_wallet/src/widgets/trail_button.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
 import 'package:cake_wallet/view_model/send/send_view_model_state.dart';
 import 'package:cake_wallet/generated/i18n.dart';
-import 'package:dotted_border/dotted_border.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart';
 import 'package:smooth_page_indicator/smooth_page_indicator.dart';
@@ -53,6 +54,15 @@ class SendPage extends BasePage {
   @override
   AppBarStyle get appBarStyle => AppBarStyle.transparent;
 
+  double _sendCardHeight(BuildContext context) {
+    final double initialHeight = sendViewModel.isElectrumWallet ? 490 : 465;
+
+    if (!ResponsiveLayoutUtil.instance.isMobile(context)) {
+      return initialHeight - 77;
+    }
+    return initialHeight;
+  }
+
   @override
   void onClose(BuildContext context) {
     sendViewModel.onClose();
@@ -107,7 +117,7 @@ class SendPage extends BasePage {
           content: Column(
             children: <Widget>[
               Container(
-                  height: sendViewModel.isElectrumWallet ? 490 : 465,
+                  height: _sendCardHeight(context),
                   child: Observer(
                     builder: (_) {
                       return PageView.builder(
@@ -172,51 +182,9 @@ class SendPage extends BasePage {
 
                       return Row(
                         children: <Widget>[
-                          GestureDetector(
+                          AddTemplateButton(
-                            onTap: () => Navigator.of(context)
+                            onTap: () => Navigator.of(context).pushNamed(Routes.sendTemplate),
-                                .pushNamed(Routes.sendTemplate),
+                            currentTemplatesLength: templates.length,
-                            child: Container(
-                              padding: EdgeInsets.only(left: 1, right: 10),
-                              child: DottedBorder(
-                                borderType: BorderType.RRect,
-                                dashPattern: [6, 4],
-                                color: Theme.of(context)
-                                    .primaryTextTheme!
-                                    .headline2!
-                                    .decorationColor!,
-                                strokeWidth: 2,
-                                radius: Radius.circular(20),
-                                child: Container(
-                                  height: 34,
-                                  padding: EdgeInsets.only(left: 10, right: 10),
-                                  alignment: Alignment.center,
-                                  decoration: BoxDecoration(
-                                    borderRadius:
-                                        BorderRadius.all(Radius.circular(20)),
-                                    color: Colors.transparent,
-                                  ),
-                                  child: templates.length >= 1
-                                      ? Icon(
-                                          Icons.add,
-                                          color: Theme.of(context)
-                                              .primaryTextTheme!
-                                              .headline2!
-                                              .color!,
-                                        )
-                                      : Text(
-                                          S.of(context).new_template,
-                                          style: TextStyle(
-                                            fontSize: 14,
-                                            fontWeight: FontWeight.w600,
-                                            color: Theme.of(context)
-                                                .primaryTextTheme!
-                                                .headline2!
-                                                .color!,
-                                          ),
-                                        ),
-                                ),
-                              ),
-                            ),
                           ),
                           ListView.builder(
                             scrollDirection: Axis.horizontal,
@@ -279,7 +247,9 @@ class SendPage extends BasePage {
           ),
           bottomSectionPadding:
               EdgeInsets.only(left: 24, right: 24, bottom: 24),
-          bottomSection: Column(
+          bottomSection: ConstrainedBox(
+            constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
+            child: Column(
               children: [
                 if (sendViewModel.hasCurrecyChanger)
                   Observer(builder: (_) =>
@@ -353,6 +323,7 @@ class SendPage extends BasePage {
                   },
                 )
               ],
+            ),
           )),
     );
   }

lib/src/screens/send/widgets/send_card.dart

@@ -1,6 +1,7 @@
 import 'package:cake_wallet/entities/priority_for_wallet_type.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/utils/payment_request.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
 import 'package:cw_core/transaction_priority.dart';
 import 'package:cake_wallet/routes.dart';
 import 'package:cake_wallet/src/widgets/keyboard_done_button.dart';
@@ -119,7 +120,7 @@ class SendCardState extends State<SendCard>
               color: Colors.transparent,
             )),
         Container(
-          decoration: BoxDecoration(
+          decoration: ResponsiveLayoutUtil.instance.isMobile(context) ? BoxDecoration(
             borderRadius: BorderRadius.only(
                 bottomLeft: Radius.circular(24),
                 bottomRight: Radius.circular(24)),
@@ -130,9 +131,14 @@ class SendCardState extends State<SendCard>
                   .subtitle1!
                   .decorationColor!,
             ], begin: Alignment.topLeft, end: Alignment.bottomRight),
-          ),
+          ) : null,
           child: Padding(
-            padding: EdgeInsets.fromLTRB(24, 100, 24, 32),
+            padding: EdgeInsets.fromLTRB(
+              24,
+              ResponsiveLayoutUtil.instance.isMobile(context) ? 100 : 55,
+              24,
+              ResponsiveLayoutUtil.instance.isMobile(context) ? 32 : 0,
+            ),
             child: SingleChildScrollView(
                 child: Observer(builder: (_) => Column(
                   mainAxisSize: MainAxisSize.min,

lib/src/widgets/add_template_button.dart

@@ -0,0 +1,52 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/utils/responsive_layout_util.dart';
+import 'package:dotted_border/dotted_border.dart';
+import 'package:flutter/material.dart';
+
+class AddTemplateButton extends StatelessWidget {
+  final Function() onTap;
+  final int currentTemplatesLength;
+
+  const AddTemplateButton({Key? key, required this.onTap, required this.currentTemplatesLength})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        padding: EdgeInsets.only(left: 1, right: 10),
+        child: DottedBorder(
+          borderType: BorderType.RRect,
+          dashPattern: [6, 4],
+          color: Theme.of(context).primaryTextTheme.headline3!.decorationColor!,
+          strokeWidth: 2,
+          radius: Radius.circular(20),
+          child: Container(
+            height: 34,
+            padding: EdgeInsets.symmetric(
+                horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30),
+            alignment: Alignment.center,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.all(Radius.circular(20)),
+              color: Colors.transparent,
+            ),
+            child: currentTemplatesLength >= 1
+                ? Icon(
+                    Icons.add,
+                    color: Theme.of(context).primaryTextTheme.headline2!.color!,
+                  )
+                : Text(
+                    S.of(context).new_template,
+                    style: TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w600,
+                      color: Theme.of(context).primaryTextTheme.headline2!.color!,
+                    ),
+                  ),
+          ),
+        ),
+      ),
+    );
+  }
+}