UI enhancements (#1895)

* UI enhancements [skip ci]

* Fix spacing for swap screen

* Cleanup and update backup page [skip ci]

* Fix address book page

* Update address book page

* Update standard lists

* Update hamburger menu

* Make toggle rows tappable

* Make more components TextButtons

* Make button dock float

* Fix shadows

* Update [skip ci]

* Update all cards with shadow and proper alignment

* Fix component positioning and scaling

* Cleanup, update strings, rename strings

* Fix spacing on Swap and Send pages [skip ci]

* Remove Wallets action button [skip ci]

* Move Sign/Verify into settings [skip ci]

* Cleanup & fix merge conflicts (pls) [skip ci]

* Fix formatting [skip ci]

* Move bottom bar to navigation_dock.dart [skip ci]

* Fix card spacing

* Conflict resolution [skip ci]

* Conflict resolution [skip ci]

* Update shadow theming

* Update menu

* Temporarily remove shadow

* Temporarily remove shadows again

* Update setting_action_button.dart

---------

Co-authored-by: Omar Hatem <omarh.ismail1@gmail.com>

lib/src/widgets/dashboard_card_widget.dart

@@ -15,7 +15,11 @@ class DashBoardRoundedCardWidget extends StatelessWidget {
     this.icon,
     this.onClose,
     this.customBorder,
+    this.shadowSpread,
+    this.shadowBlur,
     super.key,
+    this.marginV,
+    this.marginH,
   });
 
   final VoidCallback onTap;
@@ -27,71 +31,97 @@ class DashBoardRoundedCardWidget extends StatelessWidget {
   final Widget? icon;
   final Image? image;
   final double? customBorder;
+  final double? marginV;
+  final double? marginH;
+  final double? shadowSpread;
+  final double? shadowBlur;
 
   @override
   Widget build(BuildContext context) {
     return InkWell(
-      onTap: onTap,
-      hoverColor: Colors.transparent,
-      splashColor: Colors.transparent,
-      highlightColor: Colors.transparent,
+      //onTap: onTap,
+      //hoverColor: Colors.transparent,
+      //splashColor: Colors.transparent,
+      //highlightColor: Colors.transparent,
       child: Stack(
         children: [
-          Container(
-            padding: EdgeInsets.all(20),
-            width: double.infinity,
-            decoration: BoxDecoration(
-              color: Theme.of(context).extension<SyncIndicatorTheme>()!.syncedBackgroundColor,
-              borderRadius: BorderRadius.circular(customBorder ?? 20),
-              border: Border.all(
-                color: Theme.of(context).extension<BalancePageTheme>()!.cardBorderColor,
-              ),
-            ),
-            child: Column(
-              children: [
-                Row(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Expanded(
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Text(
-                            title,
-                            style: TextStyle(
-                              color:
-                                  Theme.of(context).extension<DashboardPageTheme>()!.cardTextColor,
-                              fontSize: 24,
-                              fontWeight: FontWeight.w900,
-                            ),
-                            softWrap: true,
-                          ),
-                          SizedBox(height: 5),
-                          Text(
-                            subTitle,
-                            style: TextStyle(
+      Container(
+        margin: EdgeInsets.symmetric(horizontal: marginH ?? 20, vertical: marginV ?? 8),
+      //padding: EdgeInsets.all(20),
+      width: double.infinity,
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(customBorder ?? 20),
+        border: Border.all(
+          color: Theme.of(context).extension<BalancePageTheme>()!.cardBorderColor,
+        ),
+        // boxShadow: [
+        //   BoxShadow(
+        //       color: Theme.of(context).extension<BalancePageTheme>()!.cardBorderColor
+        //           .withAlpha(50),
+        //       spreadRadius: shadowSpread ?? 3,
+        //       blurRadius: shadowBlur ?? 7,
+        //   )
+        // ],
+      ),
+        child: TextButton(
+          onPressed: onTap,
+          style: TextButton.styleFrom(
+              backgroundColor: Theme.of(context)
+                  .extension<SyncIndicatorTheme>()!
+                  .syncedBackgroundColor,
+              shape: RoundedRectangleBorder(
+                  borderRadius: BorderRadius.circular(customBorder ?? 20)),
+              padding: EdgeInsets.all(24)
+          ),
+              child: Column(
+                children: [
+                  Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              title,
+                              style: TextStyle(
                                 color: Theme.of(context)
                                     .extension<DashboardPageTheme>()!
                                     .cardTextColor,
-                                fontWeight: FontWeight.w500,
-                                fontFamily: 'Lato'),
-                            softWrap: true,
-                          ),
-                        ],
+                                fontSize: 24,
+                                fontWeight: FontWeight.w900,
+                              ),
+                              softWrap: true,
+                            ),
+                            SizedBox(height: 5),
+                            Text(
+                              subTitle,
+                              style: TextStyle(
+                                  color: Theme.of(context)
+                                      .extension<DashboardPageTheme>()!
+                                      .cardTextColor,
+                                  fontWeight: FontWeight.w500,
+                                  fontFamily: 'Lato'),
+                              softWrap: true,
+                            ),
+                          ],
+                        ),
                       ),
-                    ),
-                    if (image != null) image!
-                    else if (svgPicture != null) svgPicture!,
-                    if (icon != null) icon!
-                  ],
-                ),
-                if (hint != null) ...[
-                  SizedBox(height: 10),
-                  hint!,
-                ]
-              ],
+                      if (image != null)
+                        image!
+                      else if (svgPicture != null)
+                        svgPicture!,
+                      if (icon != null) icon!
+                    ],
+                  ),
+                  if (hint != null) ...[
+                    SizedBox(height: 10),
+                    hint!,
+                  ]
+                ],
+              ),
+            ),
             ),
-          ),
           if (onClose != null)
             Positioned(
               top: 10,
@@ -99,7 +129,9 @@ class DashBoardRoundedCardWidget extends StatelessWidget {
               child: IconButton(
                 icon: Icon(Icons.close),
                 onPressed: onClose,
-                color: Theme.of(context).extension<DashboardPageTheme>()!.cardTextColor,
+                color: Theme.of(context)
+                    .extension<DashboardPageTheme>()!
+                    .cardTextColor,
               ),
             ),
         ],

lib/src/widgets/option_tile.dart

@@ -19,16 +19,17 @@ class OptionTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: onPressed,
-      child: Container(
-        width: double.infinity,
-        padding: EdgeInsets.all(24),
-        alignment: Alignment.center,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.all(Radius.circular(12)),
-          color: Theme.of(context).cardColor,
+    return Container(
+      width: double.infinity,
+      padding: EdgeInsets.only(left: 6, right: 6),
+      alignment: Alignment.center,
+      child: TextButton(
+        style: TextButton.styleFrom(
+          backgroundColor: Theme.of(context).cardColor,
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+          padding: EdgeInsets.all(24)
         ),
+        onPressed: onPressed,
         child: Row(
           mainAxisSize: MainAxisSize.max,
           mainAxisAlignment: MainAxisAlignment.center,
@@ -48,7 +49,9 @@ class OptionTile extends StatelessWidget {
                       style: TextStyle(
                         fontSize: 20,
                         fontWeight: FontWeight.w500,
-                        color: Theme.of(context).extension<OptionTileTheme>()!.titleColor,
+                        color: Theme.of(context)
+                            .extension<OptionTileTheme>()!
+                            .titleColor,
                       ),
                     ),
                     Padding(
@@ -58,7 +61,9 @@ class OptionTile extends StatelessWidget {
                         style: TextStyle(
                           fontSize: 14,
                           fontWeight: FontWeight.normal,
-                          color: Theme.of(context).extension<OptionTileTheme>()!.descriptionColor,
+                          color: Theme.of(context)
+                              .extension<OptionTileTheme>()!
+                              .descriptionColor,
                         ),
                       ),
                     )

lib/src/widgets/setting_action_button.dart

@@ -1,6 +1,10 @@
 import 'package:cake_wallet/palette.dart';
 import 'package:cake_wallet/themes/extensions/menu_theme.dart';
 import 'package:flutter/material.dart';
+import 'package:cake_wallet/themes/extensions/sync_indicator_theme.dart';
+import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
+import 'package:cake_wallet/themes/extensions/balance_page_theme.dart';
+import 'package:cake_wallet/themes/extensions/option_tile_theme.dart';
 
 class SettingActionButton extends StatelessWidget {
   final bool isLastTile;
@@ -29,56 +33,64 @@ class SettingActionButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final isLightMode = Theme.of(context).extension<OptionTileTheme>()?.useDarkImage ?? false;
     Color? color = isSelected
         ? Theme.of(context).extension<CakeMenuTheme>()!.settingTitleColor
         : selectionActive
-            ? Palette.darkBlue
-            : Theme.of(context).extension<CakeMenuTheme>()!.settingTitleColor;
-    return InkWell(
-      onTap: onTap,
-      hoverColor: Colors.transparent,
-      child: Container(
-        height: tileHeight,
-        padding: isLastTile
-            ? EdgeInsets.only(
-                left: 24,
-                right: 24,
-                top: fromBottomEdge,
-              )
-            : EdgeInsets.only(left: 24, right: 24),
-        alignment: isLastTile ? Alignment.topLeft : null,
-        child: Row(
-          mainAxisAlignment: MainAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: <Widget>[
-            Image.asset(
-              image,
-              height: 16,
-              width: 16,
-              color: Theme.of(context)
-                  .extension<CakeMenuTheme>()!
-                  .settingActionsIconColor,
+        ? Palette.darkBlue
+        : Theme.of(context).extension<CakeMenuTheme>()!.settingTitleColor;
+    return Container(
+      //padding: EdgeInsets.only(top: 5, left: 15, bottom: 5),
+      margin: EdgeInsets.only(top: 10, left: 20, bottom: 0, right: 20),
+      child: TextButton(
+        style: ButtonStyle(
+          backgroundColor: MaterialStateProperty.all(isLightMode ? Theme.of(context).cardColor : Colors.black12),
+          shape: MaterialStateProperty.all(
+            RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(20),
             ),
-            SizedBox(width: 16),
-            Expanded(
-              child: Text(
-                title,
-                style: TextStyle(
-                  color: color,
-                  fontSize: 16,
-                  fontWeight: FontWeight.bold,
+          ),
+        ),
+        onPressed: onTap,
+        //hoverColor: Colors.transparent,
+        child: Container(
+          width: double.infinity,
+          padding: EdgeInsets.only(top: 12, left: 20, bottom: 12, right: 15),
+          //margin: EdgeInsets.only(top: 5, left: 15, bottom: 5),
+          alignment: isLastTile ? Alignment.topLeft : null,
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: <Widget>[
+              Image.asset(
+                image,
+                height: 16,
+                width: 16,
+                color: Theme.of(context)
+                    .extension<CakeMenuTheme>()!
+                    .settingActionsIconColor,
+              ),
+              SizedBox(width: 16),
+              Expanded(
+                child: Text(
+                  title,
+                  style: TextStyle(
+                    color: color,
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                  ),
                 ),
               ),
-            ),
-            if (isArrowVisible)
-              Icon(
-                Icons.arrow_forward_ios,
-                color: color,
-                size: 16,
-              )
-          ],
+              if(isArrowVisible)
+                Icon(
+                  Icons.arrow_forward_ios,
+                  color: Colors.grey,
+                  size: 16,
+                )
+            ],
+          ),
         ),
       ),
     );
   }
-}
+}

lib/src/widgets/setting_actions.dart

@@ -17,7 +17,6 @@ class SettingActions {
 
   static List<SettingActions> all = [
     connectionSettingAction,
-    walletSettingAction,
     addressBookSettingAction,
     silentPaymentsSettingAction,
     litecoinMwebSettingAction,
@@ -31,7 +30,6 @@ class SettingActions {
 
   static List<SettingActions> desktopSettings = [
     connectionSettingAction,
-    walletSettingAction,
     addressBookSettingAction,
     silentPaymentsSettingAction,
     securityBackupSettingAction,
@@ -77,18 +75,6 @@ class SettingActions {
     },
   );
 
-  static SettingActions walletSettingAction = SettingActions._(
-    key: ValueKey('dashboard_page_menu_widget_wallet_menu_button_key'),
-    name: (context) => S.of(context).wallets,
-    image: 'assets/images/wallet_menu.png',
-    onTap: (BuildContext context) {
-      Navigator.of(context).pushNamed(Routes.walletList, arguments: (_) {
-        Navigator.of(context).pop(); // pops wallet list
-        Navigator.of(context).pop(); // pops drawer
-      });
-    },
-  );
-
   static SettingActions addressBookSettingAction = SettingActions._(
     key: ValueKey('dashboard_page_menu_widget_address_book_button_key'),
     name: (context) => S.of(context).address_book_menu,

lib/src/widgets/standard_list.dart

@@ -21,16 +21,20 @@ class StandardListRow extends StatelessWidget {
   Widget build(BuildContext context) {
     final leading = buildLeading(context);
     final trailing = buildTrailing(context);
-
-    return InkWell(
-      onTap: () => onTap?.call(context),
-      child: Container(
+    return Container(
         height: 56,
-        padding: EdgeInsets.only(left: 24, right: 24),
-        decoration: decoration ??
-            BoxDecoration(
-              color: Theme.of(context).colorScheme.background,
+        padding: EdgeInsets.only(left: 12, right: 12),
+      child: TextButton(
+        onPressed: () => onTap?.call(context),
+        style: ButtonStyle(
+          //backgroundColor: MaterialStateProperty.all(Theme.of(context).cardColor),
+          shape: MaterialStateProperty.all(
+            RoundedRectangleBorder(
+              borderRadius: BorderRadius.all(Radius.circular(10)
+              ),
             ),
+          ),
+        ),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
@@ -97,10 +101,10 @@ class StandardListSeparator extends StatelessWidget {
     return Container(
       height: height,
       padding: padding,
-      color: Theme.of(context).colorScheme.background,
+      color: Colors.transparent,
       child: Container(
         height: height,
-        color: Theme.of(context).extension<CakeTextTheme>()!.textfieldUnderlineColor,
+        color: Colors.transparent,
       ),
     );
   }
@@ -140,6 +144,7 @@ class SectionStandardList extends StatelessWidget {
 
   final int sectionCount;
   final bool hasTopSeparator;
+
   final int Function(int sectionIndex) itemCounter;
   final Widget Function(int sectionIndex, int itemIndex) itemBuilder;
   final Widget Function(int sectionIndex)? sectionTitleBuilder;