UI Enhancements (#1308)

* Center the account text on the balance page

* Modify dashboard button spacing

* Change default theme to Dark theme

* Remove legacyTheme and modify theme order

* Add condition for Monero.com wallet default theme

* Add locale for new themes

* Add new themes

* Update padding

* Fixes

* Update settings_store.dart

---------

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

lib/core/backup_service.dart

@@ -464,8 +464,6 @@ class BackupService {
       PreferencesKey.disableSellKey: _sharedPreferences.getBool(PreferencesKey.disableSellKey),
       PreferencesKey.defaultBuyProvider:
           _sharedPreferences.getInt(PreferencesKey.defaultBuyProvider),
-      PreferencesKey.isDarkThemeLegacy:
-          _sharedPreferences.getBool(PreferencesKey.isDarkThemeLegacy),
       PreferencesKey.currentPinLength: _sharedPreferences.getInt(PreferencesKey.currentPinLength),
       PreferencesKey.currentTransactionPriorityKeyLegacy:
           _sharedPreferences.getInt(PreferencesKey.currentTransactionPriorityKeyLegacy),

lib/entities/preferences_key.dart

@@ -28,7 +28,6 @@ class PreferencesKey {
   static const disableExchangeKey = 'disable_exchange';
   static const exchangeStatusKey = 'exchange_status';
   static const currentTheme = 'current_theme';
-  static const isDarkThemeLegacy = 'dark_theme';
   static const displayActionListModeKey = 'display_list_mode';
   static const currentPinLength = 'current_pin_length';
   static const currentLanguageCode = 'language_code';

lib/palette.dart

@@ -23,6 +23,7 @@ class Palette {
   static const Color cornflower = Color.fromRGBO(85, 147, 240, 1.0);
   static const Color royalBlue = Color.fromRGBO(43, 114, 221, 1.0);
   static const Color lightRed = Color.fromRGBO(227, 87, 87, 1.0);
+  static const Color veryLightRed = Color.fromRGBO(239, 156, 156, 1.0);
   static const Color persianRed = Color.fromRGBO(206, 55, 55, 1.0);
   static const Color blueCraiola = Color.fromRGBO(69, 110, 255, 1.0);
   static const Color blueGreyCraiola = Color.fromRGBO(106, 177, 207, 1.0);
@@ -97,4 +98,6 @@ class PaletteDark {
   static const Color matrixGreen = Color.fromRGBO(18, 229, 90, 1.0);
   static const Color moneroOrange = Color.fromRGBO(255, 102, 0, 1.0);
   static const Color moneroCard = Color.fromRGBO(20, 21, 24, 1.0);
+  static const Color red = Color.fromRGBO(190, 30, 30, 1.0);
+  static const Color darkPurple = Color.fromRGBO(117, 36, 204, 1.0);
 }

lib/src/screens/dashboard/dashboard_page.dart

@@ -224,7 +224,7 @@ class _DashboardPageView extends BasePage {
                             .syncedBackgroundColor,
                       ),
                       child: Container(
-                        padding: EdgeInsets.only(left: 32, right: 32),
+                        padding: EdgeInsets.only(left: 24, right: 32),
                         child: Row(
                           mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: MainActions.all

lib/src/screens/dashboard/widgets/home_screen_account_widget.dart

@@ -19,8 +19,8 @@ class HomeScreenAccountWidget extends StatelessWidget {
     builder: (_) => getIt.get<MoneroAccountListPage>());
     },
       behavior: HitTestBehavior.opaque,
-      child: Container(
-        height: 100.0,
+      child: Padding(
+        padding: EdgeInsets.only(top: 25, bottom: 25, left: 25, right: 0),
         child: Row(
           mainAxisSize: MainAxisSize.min,
           mainAxisAlignment: MainAxisAlignment.center,

lib/store/settings_store.dart

@@ -19,6 +19,7 @@ import 'package:cake_wallet/exchange/provider/trocador_exchange_provider.dart';
 import 'package:cake_wallet/view_model/settings/sync_mode.dart';
 import 'package:cake_wallet/utils/device_info.dart';
 import 'package:cake_wallet/ethereum/ethereum.dart';
+import 'package:cake_wallet/wallet_type_utils.dart';
 import 'package:cw_core/transaction_priority.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
 import 'package:cake_wallet/themes/theme_list.dart';
@@ -789,12 +790,9 @@ abstract class SettingsStoreBase with Store {
     final exchangeStatus = ExchangeApiMode.deserialize(
         raw: sharedPreferences.getInt(PreferencesKey.exchangeStatusKey) ??
             ExchangeApiMode.enabled.raw);
-    final legacyTheme = (sharedPreferences.getBool(PreferencesKey.isDarkThemeLegacy) ?? false)
-        ? ThemeType.dark.index
-        : ThemeType.bright.index;
     final savedTheme = initialTheme ??
         ThemeList.deserialize(
-            raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? legacyTheme);
+            raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? (isMoneroOnly ? ThemeList.moneroDarkTheme.raw : ThemeList.darkTheme.raw));
     final actionListDisplayMode = ObservableList<ActionListDisplayMode>();
     actionListDisplayMode.addAll(deserializeActionlistDisplayModes(
         sharedPreferences.getInt(PreferencesKey.displayActionListModeKey) ?? defaultActionsMode));
@@ -1152,11 +1150,8 @@ abstract class SettingsStoreBase with Store {
     exchangeStatus = ExchangeApiMode.deserialize(
         raw: sharedPreferences.getInt(PreferencesKey.exchangeStatusKey) ??
             ExchangeApiMode.enabled.raw);
-    final legacyTheme = (sharedPreferences.getBool(PreferencesKey.isDarkThemeLegacy) ?? false)
-        ? ThemeType.dark.index
-        : ThemeType.bright.index;
     currentTheme = ThemeList.deserialize(
-        raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? legacyTheme);
+        raw: sharedPreferences.getInt(PreferencesKey.currentTheme) ?? (isMoneroOnly ? ThemeList.moneroDarkTheme.raw : ThemeList.darkTheme.raw));
     actionlistDisplayMode = ObservableList<ActionListDisplayMode>();
     actionlistDisplayMode.addAll(deserializeActionlistDisplayModes(
         sharedPreferences.getInt(PreferencesKey.displayActionListModeKey) ?? defaultActionsMode));

lib/themes/monero_dark_theme.dart

@@ -95,12 +95,12 @@ class MoneroDarkTheme extends DarkTheme {
 
   @override
   CakeMenuTheme get menuTheme => super.menuTheme.copyWith(
-      headerFirstGradientColor: containerColor,
+      headerFirstGradientColor: primaryColor,
       headerSecondGradientColor: containerColor,
       backgroundColor: containerColor,
       subnameTextColor: Colors.grey,
       dividerColor: colorScheme.secondaryContainer,
-      iconColor: colorScheme.secondaryContainer,
+      iconColor: Colors.white,
       settingActionsIconColor: colorScheme.secondaryContainer);
 
   @override

lib/themes/purple_dark_theme.dart

@@ -0,0 +1,13 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/themes/monero_dark_theme.dart';
+import 'package:flutter/material.dart';
+
+class PurpleDarkTheme extends MoneroDarkTheme {
+  PurpleDarkTheme({required int raw}) : super(raw: raw);
+
+  @override
+  String get title => S.current.purple_dark_theme;
+  @override
+  Color get primaryColor => PaletteDark.darkPurple;
+}

lib/themes/red_dark_theme.dart

@@ -0,0 +1,13 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/themes/monero_dark_theme.dart';
+import 'package:flutter/material.dart';
+
+class RedDarkTheme extends MoneroDarkTheme {
+  RedDarkTheme({required int raw}) : super(raw: raw);
+
+  @override
+  String get title => S.current.red_dark_theme;
+  @override
+  Color get primaryColor => PaletteDark.red;
+}

lib/themes/red_light_theme.dart

@@ -0,0 +1,13 @@
+import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/palette.dart';
+import 'package:cake_wallet/themes/monero_light_theme.dart';
+import 'package:flutter/material.dart';
+
+class RedLightTheme extends MoneroLightTheme {
+  RedLightTheme({required int raw}) : super(raw: raw);
+
+  @override
+  String get title => S.current.red_light_theme;
+  @override
+  Color get primaryColor => Palette.darkRed;
+}

lib/themes/theme_list.dart

@@ -3,23 +3,29 @@ import 'package:cake_wallet/themes/dark_theme.dart';
 import 'package:cake_wallet/themes/light_theme.dart';
 import 'package:cake_wallet/themes/monero_light_theme.dart';
 import 'package:cake_wallet/themes/monero_dark_theme.dart';
+import 'package:cake_wallet/themes/purple_dark_theme.dart';
 import 'package:cake_wallet/themes/matrix_green_theme.dart';
 import 'package:cake_wallet/themes/bitcoin_dark_theme.dart';
 import 'package:cake_wallet/themes/bitcoin_light_theme.dart';
 import 'package:cake_wallet/themes/high_contrast_theme.dart';
+import 'package:cake_wallet/themes/red_dark_theme.dart';
+import 'package:cake_wallet/themes/red_light_theme.dart';
 import 'package:cake_wallet/themes/theme_base.dart';
 
 class ThemeList {
   static final all = [
-    brightTheme,
-    lightTheme,
     darkTheme,
+    lightTheme,
+    brightTheme,
     moneroDarkTheme,
     moneroLightTheme,
-    matrixGreenTheme,
+    purpleDarkTheme,
     bitcoinDarkTheme,
     bitcoinLightTheme,
-    highContrastTheme
+    matrixGreenTheme,
+    redDarkTheme,
+    redLightTheme,
+    highContrastTheme,
   ];
 
   static final lightTheme = LightTheme(raw: 0);
@@ -31,6 +37,9 @@ class ThemeList {
   static final bitcoinDarkTheme = BitcoinDarkTheme(raw: 6);
   static final bitcoinLightTheme = BitcoinLightTheme(raw: 7);
   static final highContrastTheme = HighContrastTheme(raw: 8);
+  static final redLightTheme = RedLightTheme(raw: 9);
+  static final redDarkTheme = RedDarkTheme(raw: 10);
+  static final purpleDarkTheme = PurpleDarkTheme(raw: 11);
 
   static ThemeBase deserialize({required int raw}) {
     switch (raw) {
@@ -52,6 +61,12 @@ class ThemeList {
         return bitcoinLightTheme;
       case 8:
         return highContrastTheme;
+      case 9:
+        return redLightTheme;
+      case 10:
+        return redDarkTheme;
+      case 11:
+        return purpleDarkTheme;
       default:
         throw Exception(
             'Unexpected token raw: $raw for deserialization of ThemeBase');