From 8ebfafba383928fc210a00253f5789a6759d88f5 Mon Sep 17 00:00:00 2001 From: Konstantin Ullrich Date: Mon, 13 Oct 2025 17:09:19 +0200 Subject: [PATCH] feat: update support page design (#2579) --- assets/images/support_chat.svg | 31 +++++++++++ assets/images/support_chat_dark.svg | 21 +++++++ assets/images/support_docs.svg | 38 +++++++++++++ assets/images/support_docs_dark.svg | 33 +++++++++++ assets/images/support_links.svg | 39 +++++++++++++ assets/images/support_links_dark.svg | 34 ++++++++++++ lib/src/screens/support/support_page.dart | 67 +++++++++++------------ lib/src/widgets/option_tile.dart | 23 +++++--- 8 files changed, 242 insertions(+), 44 deletions(-) create mode 100644 assets/images/support_chat.svg create mode 100644 assets/images/support_chat_dark.svg create mode 100644 assets/images/support_docs.svg create mode 100644 assets/images/support_docs_dark.svg create mode 100644 assets/images/support_links.svg create mode 100644 assets/images/support_links_dark.svg diff --git a/assets/images/support_chat.svg b/assets/images/support_chat.svg new file mode 100644 index 000000000..1b91e1a6d --- /dev/null +++ b/assets/images/support_chat.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/support_chat_dark.svg b/assets/images/support_chat_dark.svg new file mode 100644 index 000000000..cab112a2e --- /dev/null +++ b/assets/images/support_chat_dark.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/support_docs.svg b/assets/images/support_docs.svg new file mode 100644 index 000000000..4f8c054eb --- /dev/null +++ b/assets/images/support_docs.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/support_docs_dark.svg b/assets/images/support_docs_dark.svg new file mode 100644 index 000000000..27bb029a6 --- /dev/null +++ b/assets/images/support_docs_dark.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/support_links.svg b/assets/images/support_links.svg new file mode 100644 index 000000000..8a7b80e5a --- /dev/null +++ b/assets/images/support_links.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/images/support_links_dark.svg b/assets/images/support_links_dark.svg new file mode 100644 index 000000000..8604a493c --- /dev/null +++ b/assets/images/support_links_dark.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/src/screens/support/support_page.dart b/lib/src/screens/support/support_page.dart index bc762c68d..44975d53e 100644 --- a/lib/src/screens/support/support_page.dart +++ b/lib/src/screens/support/support_page.dart @@ -2,10 +2,11 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/widgets/option_tile.dart'; -import 'package:flutter/material.dart'; -import 'package:url_launcher/url_launcher.dart'; import 'package:cake_wallet/utils/device_info.dart'; import 'package:cake_wallet/view_model/support_view_model.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_svg/svg.dart'; +import 'package:url_launcher/url_launcher.dart'; class SupportPage extends BasePage { SupportPage(this.supportViewModel); @@ -18,56 +19,46 @@ class SupportPage extends BasePage { @override AppBarStyle get appBarStyle => AppBarStyle.regular; - @override - Widget body(BuildContext context) { - final iconColor = Theme.of(context).colorScheme.primary; + String get _imageSupportChat => currentTheme.isDark + ? 'assets/images/support_chat_dark.svg' + : 'assets/images/support_chat.svg'; - return Container( - child: Center( + String get _imageSupportDocs => currentTheme.isDark + ? 'assets/images/support_docs_dark.svg' + : 'assets/images/support_docs.svg'; + + String get _imageSupportLinks => currentTheme.isDark + ? 'assets/images/support_links_dark.svg' + : 'assets/images/support_links.svg'; + + @override + Widget body(BuildContext context) => Center( child: Container( - padding: EdgeInsets.only(left: 24, right: 24), + padding: const EdgeInsets.only(left: 24, right: 24), child: Column( children: [ Padding( - padding: EdgeInsets.only(top: 20), + padding: const EdgeInsets.only(top: 20), child: OptionTile( - icon: Icon( - Icons.support_agent, - color: iconColor, - size: 50, - ), + image: SvgPicture.asset(_imageSupportChat, width: 55, height: 55), title: S.of(context).support_title_live_chat, description: S.of(context).support_description_live_chat, - onPressed: () { - if (DeviceInfo.instance.isDesktop) { - _launchUrl(supportViewModel.fetchUrl()); - } else { - Navigator.pushNamed(context, Routes.supportLiveChat); - } - }, + onPressed: () => _onPressedSupportChat(context), ), ), Padding( - padding: EdgeInsets.only(top: 20), + padding: const EdgeInsets.only(top: 20), child: OptionTile( - icon: Icon( - Icons.find_in_page, - color: iconColor, - size: 50, - ), + image: SvgPicture.asset(_imageSupportDocs, width: 55, height: 55), title: S.of(context).support_title_guides, description: S.of(context).support_description_guides, onPressed: () => _launchUrl(supportViewModel.docsUrl), ), ), Padding( - padding: EdgeInsets.only(top: 20), + padding: const EdgeInsets.only(top: 20), child: OptionTile( - icon: Icon( - Icons.contact_support, - color: iconColor, - size: 50, - ), + image: SvgPicture.asset(_imageSupportLinks, width: 55, height: 55), title: S.of(context).support_title_other_links, description: S.of(context).support_description_other_links, onPressed: () => Navigator.pushNamed(context, Routes.supportOtherLinks), @@ -76,8 +67,14 @@ class SupportPage extends BasePage { ], ), ), - ), - ); + ); + + void _onPressedSupportChat(BuildContext context) { + if (DeviceInfo.instance.isDesktop) { + _launchUrl(supportViewModel.fetchUrl()); + } else { + Navigator.pushNamed(context, Routes.supportLiveChat); + } } void _launchUrl(String url) async { diff --git a/lib/src/widgets/option_tile.dart b/lib/src/widgets/option_tile.dart index f241797da..046f5ca25 100644 --- a/lib/src/widgets/option_tile.dart +++ b/lib/src/widgets/option_tile.dart @@ -1,5 +1,5 @@ -import 'package:flutter/material.dart'; import 'package:cake_wallet/themes/core/theme_extension.dart'; +import 'package:flutter/material.dart'; class OptionTile extends StatelessWidget { const OptionTile({ @@ -13,7 +13,7 @@ class OptionTile extends StatelessWidget { }) : assert(image != null || icon != null); final VoidCallback onPressed; - final Image? image; + final Widget? image; final Icon? icon; final String title; final String description; @@ -65,13 +65,18 @@ class OptionTile extends StatelessWidget { ), if (tag != null) Container( - decoration: BoxDecoration( - border: Border.all(), - borderRadius: BorderRadius.circular(20), - color: Theme.of(context).colorScheme.onSurfaceVariant), - padding: EdgeInsets.symmetric(horizontal: 5), - margin: EdgeInsets.only(left: 5), - child: Text(tag!)) + decoration: BoxDecoration( + border: Border.all(style: BorderStyle.none), + borderRadius: BorderRadius.circular(20), + color: Theme.of(context).colorScheme.onSurfaceVariant, + ), + padding: EdgeInsets.symmetric(horizontal: 5), + margin: EdgeInsets.only(left: 5), + child: Text( + tag!, + style: TextStyle(color: Theme.of(context).colorScheme.onPrimary), + ), + ) ], ), Padding(