diff --git a/lib/pages/settings_dashboard/settings/settings_item_builder.dart b/lib/pages/settings_dashboard/settings/settings_item_builder.dart index b86fbb4d3f..ea21d72814 100644 --- a/lib/pages/settings_dashboard/settings/settings_item_builder.dart +++ b/lib/pages/settings_dashboard/settings/settings_item_builder.dart @@ -1,4 +1,3 @@ -import 'package:fluffychat/config/app_config.dart'; import 'package:fluffychat/pages/settings_dashboard/settings/settings_view_style.dart'; import 'package:flutter/material.dart'; import 'package:linagora_design_flutter/linagora_design_flutter.dart'; @@ -24,7 +23,7 @@ class SettingsItemBuilder extends StatelessWidget { @override Widget build(BuildContext context) { return Material( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), + borderRadius: BorderRadius.circular(SettingsViewStyle.borderRadius), clipBehavior: Clip.hardEdge, color: isSelected ? Theme.of(context).colorScheme.secondaryContainer @@ -43,7 +42,7 @@ class SettingsItemBuilder extends StatelessWidget { size: SettingsViewStyle.iconSize, color: isHideTrailingIcon ? Theme.of(context).colorScheme.error - : Theme.of(context).colorScheme.onSurfaceVariant, + : LinagoraRefColors.material().tertiary[30], ), ), Expanded( @@ -82,7 +81,7 @@ class SettingsItemBuilder extends StatelessWidget { color: LinagoraRefColors.material() .neutral[40], ), - maxLines: 3, + maxLines: 2, overflow: TextOverflow.ellipsis, ), ), @@ -90,9 +89,10 @@ class SettingsItemBuilder extends StatelessWidget { ), ), if (!isHideTrailingIcon) - const Icon( + Icon( Icons.chevron_right_outlined, size: SettingsViewStyle.iconSize, + color: LinagoraRefColors.material().tertiary[30], ), ], ), diff --git a/lib/pages/settings_dashboard/settings/settings_view.dart b/lib/pages/settings_dashboard/settings/settings_view.dart index 56a024df42..1ee7b16894 100644 --- a/lib/pages/settings_dashboard/settings/settings_view.dart +++ b/lib/pages/settings_dashboard/settings/settings_view.dart @@ -59,7 +59,7 @@ class SettingsView extends StatelessWidget { style: responsiveUtils.isMobile(context) ? LinagoraTextStyle.material().bodyLarge1.copyWith( color: Theme.of(context).colorScheme.onSurface, - height: 24 / 17, + height: SettingsViewStyle.titleLineHeightMobile, ) : Theme.of(context).textTheme.headlineSmall, ), @@ -78,7 +78,8 @@ class SettingsView extends StatelessWidget { Padding( padding: SettingsViewStyle.bodySettingsScreenPadding, child: Material( - borderRadius: BorderRadius.circular(AppConfig.borderRadius), + borderRadius: + BorderRadius.circular(SettingsViewStyle.borderRadius), clipBehavior: Clip.hardEdge, color: controller.optionsSelectNotifier.value == SettingEnum.profile @@ -155,7 +156,7 @@ class SettingsView extends StatelessWidget { .labelLarge ?.copyWith( color: LinagoraRefColors.material() - .neutral[40], + .tertiary[30], ), maxLines: 1, overflow: TextOverflow.ellipsis, @@ -163,9 +164,11 @@ class SettingsView extends StatelessWidget { ], ), ), - const Icon( + Icon( Icons.chevron_right_outlined, size: SettingsViewStyle.iconSize, + color: + LinagoraRefColors.material().tertiary[30], ), ], ), @@ -176,7 +179,16 @@ class SettingsView extends StatelessWidget { ), ), ), - const Divider(thickness: 1), + Padding( + padding: SettingsViewStyle.profileItemDividerPadding(context), + child: Divider( + color: LinagoraStateLayer( + LinagoraSysColors.material().surfaceTint, + ).opacityLayer3, + thickness: SettingsViewStyle.settingsItemDividerThikness, + height: SettingsViewStyle.settingsItemDividerHeight, + ), + ), if (!controller.matrix.twakeSupported) ValueListenableBuilder( valueListenable: controller.showChatBackupSwitch, @@ -198,16 +210,37 @@ class SettingsView extends StatelessWidget { ), Column( children: controller.getListSettingItem.map((item) { - return Padding( - padding: SettingsViewStyle.bodySettingsScreenPadding, - child: SettingsItemBuilder( - title: item.titleSettings(context), - subtitle: item.subtitleSettings(context), - leading: item.iconLeading(), - onTap: () => controller.onClickToSettingsItem(item), - isHideTrailingIcon: item.isHideTrailingIcon, - isSelected: controller.optionSelected(item), - ), + return Column( + children: [ + Padding( + padding: SettingsViewStyle.bodySettingsScreenPadding, + child: SettingsItemBuilder( + title: item.titleSettings(context), + subtitle: item.subtitleSettings(context), + leading: item.iconLeading(), + onTap: () => controller.onClickToSettingsItem(item), + isHideTrailingIcon: item.isHideTrailingIcon, + isSelected: controller.optionSelected(item), + ), + ), + item.index == SettingEnum.logout.index + ? const SizedBox() + : Padding( + padding: + SettingsViewStyle.settingsItemDividerPadding( + context, + ), + child: Divider( + color: LinagoraStateLayer( + LinagoraSysColors.material().surfaceTint, + ).opacityLayer3, + thickness: + SettingsViewStyle.settingsItemDividerThikness, + height: + SettingsViewStyle.settingsItemDividerHeight, + ), + ), + ], ); }).toList(), ), diff --git a/lib/pages/settings_dashboard/settings/settings_view_style.dart b/lib/pages/settings_dashboard/settings/settings_view_style.dart index f97336a4d2..6f63d8d816 100644 --- a/lib/pages/settings_dashboard/settings/settings_view_style.dart +++ b/lib/pages/settings_dashboard/settings/settings_view_style.dart @@ -1,6 +1,9 @@ +import 'package:fluffychat/di/global/get_it_initializer.dart'; +import 'package:fluffychat/utils/responsive/responsive_utils.dart'; import 'package:flutter/material.dart'; class SettingsViewStyle { + static ResponsiveUtils responsiveUtils = getIt.get(); static const double iconSize = 24.0; static const double fontSizeAvatar = 9 * 2.5; @@ -12,7 +15,7 @@ class SettingsViewStyle { static const EdgeInsetsDirectional titlePaddingWeb = EdgeInsetsDirectional.symmetric(horizontal: 16, vertical: 8); static EdgeInsetsDirectional itemBuilderPadding = - const EdgeInsetsDirectional.all(16.0); + const EdgeInsetsDirectional.only(top: 16.0, bottom: 16.0, start: 8.0); static EdgeInsetsDirectional leadingItemBuilderPadding = const EdgeInsetsDirectional.only(end: 8); @@ -32,4 +35,18 @@ class SettingsViewStyle { static EdgeInsetsDirectional avatarPadding = const EdgeInsetsDirectional.only(end: 8); + + static const double borderRadius = 4.0; + static const double settingsItemDividerHeight = 1.0; + static const double settingsItemDividerThikness = 1; + static EdgeInsets settingsItemDividerPadding(BuildContext context) => + EdgeInsets.only( + left: 48.0, + right: responsiveUtils.isMobile(context) ? 0 : 8.0, + ); + static EdgeInsets profileItemDividerPadding(BuildContext context) => + EdgeInsets.only( + right: responsiveUtils.isMobile(context) ? 0 : 16.0, + ); + static const double titleLineHeightMobile = 24 / 17; } diff --git a/lib/presentation/enum/settings/settings_enum.dart b/lib/presentation/enum/settings/settings_enum.dart index 3cb9463f5a..91b4a33b4d 100644 --- a/lib/presentation/enum/settings/settings_enum.dart +++ b/lib/presentation/enum/settings/settings_enum.dart @@ -41,7 +41,7 @@ enum SettingEnum { String subtitleSettings(BuildContext context) { switch (this) { case SettingEnum.chatSettings: - return ''; + return L10n.of(context)!.settingsChatSubtitle; case SettingEnum.privacyAndSecurity: return L10n.of(context)!.settingsPrivacyAndSecuritySubtitle; case SettingEnum.notificationAndSounds: @@ -64,7 +64,7 @@ enum SettingEnum { case SettingEnum.chatSettings: return Icons.chat_bubble_outline_outlined; case SettingEnum.privacyAndSecurity: - return Icons.lock; + return Icons.lock_outline; case SettingEnum.notificationAndSounds: return Icons.notifications_none; case SettingEnum.chatFolders: