From 3d1345577f1f3f3a5dea88c43f3eb0734d78c710 Mon Sep 17 00:00:00 2001 From: Dain Nilsson Date: Wed, 3 Jul 2024 14:27:54 +0200 Subject: [PATCH] Fix styling of chips --- lib/about_page.dart | 3 - lib/desktop/init.dart | 1 - lib/home/views/home_screen.dart | 8 +- lib/management/views/management_screen.dart | 1 - lib/oath/icon_provider/icon_pack_dialog.dart | 1 - lib/oath/views/add_account_dialog.dart | 4 - lib/oath/views/add_account_page.dart | 2 - lib/piv/views/generate_key_dialog.dart | 2 - lib/piv/views/manage_key_dialog.dart | 2 - lib/theme.dart | 122 +++++++++++-------- lib/widgets/choice_filter_chip.dart | 5 +- 11 files changed, 75 insertions(+), 76 deletions(-) diff --git a/lib/about_page.dart b/lib/about_page.dart index d3944557..9078371f 100755 --- a/lib/about_page.dart +++ b/lib/about_page.dart @@ -155,7 +155,6 @@ class AboutPage extends ConsumerWidget { ActionChip( key: diagnosticsChip, avatar: const Icon(Symbols.bug_report), - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_run_diagnostics), onPressed: () async { _log.info('Running diagnostics...'); @@ -188,7 +187,6 @@ class AboutPage extends ConsumerWidget { FilterChip( key: screenshotChip, label: Text(l10n.s_allow_screenshots), - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, selected: ref.watch(androidAllowScreenshotsProvider), onSelected: (value) async { ref @@ -236,7 +234,6 @@ class LoggingPanel extends ConsumerWidget { ActionChip( key: logChip, avatar: const Icon(Symbols.content_copy), - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_copy_log), onPressed: () async { _log.info('Copying log to clipboard ($version)...'); diff --git a/lib/desktop/init.dart b/lib/desktop/init.dart index 2473642a..9a78868e 100755 --- a/lib/desktop/init.dart +++ b/lib/desktop/init.dart @@ -384,7 +384,6 @@ class _HelperWaiterState extends ConsumerState<_HelperWaiter> { actionsBuilder: (context, expanded) => [ ActionChip( avatar: const Icon(Symbols.content_copy), - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_copy_log), onPressed: () async { _log.info('Copying log to clipboard ($version)...'); diff --git a/lib/home/views/home_screen.dart b/lib/home/views/home_screen.dart index a2526eac..2b2416ba 100644 --- a/lib/home/views/home_screen.dart +++ b/lib/home/views/home_screen.dart @@ -358,13 +358,7 @@ class _HeroAvatar extends StatelessWidget { ), ), padding: const EdgeInsets.all(12), - child: Theme( - // Give the avatar a transparent background - data: theme.copyWith( - colorScheme: - theme.colorScheme.copyWith(surfaceVariant: Colors.transparent)), - child: child, - ), + child: child, ); } } diff --git a/lib/management/views/management_screen.dart b/lib/management/views/management_screen.dart index bd3c5ca2..8c745182 100755 --- a/lib/management/views/management_screen.dart +++ b/lib/management/views/management_screen.dart @@ -61,7 +61,6 @@ class _CapabilityForm extends StatelessWidget { .where((c) => capabilities & c.value != 0) .map((c) => FilterChip( label: Text(c.getDisplayName(l10n)), - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, key: Key('$keyPrefix.${c.name}'), selected: enabled & c.value != 0, onSelected: (_) { diff --git a/lib/oath/icon_provider/icon_pack_dialog.dart b/lib/oath/icon_provider/icon_pack_dialog.dart index 576d63c2..cc5762c1 100644 --- a/lib/oath/icon_provider/icon_pack_dialog.dart +++ b/lib/oath/icon_provider/icon_pack_dialog.dart @@ -202,7 +202,6 @@ class _ImportActionChip extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { return ActionChip( - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, onPressed: !disabled ? () async { _importAction(context, ref); diff --git a/lib/oath/views/add_account_dialog.dart b/lib/oath/views/add_account_dialog.dart index d9545271..d376491b 100644 --- a/lib/oath/views/add_account_dialog.dart +++ b/lib/oath/views/add_account_dialog.dart @@ -84,8 +84,6 @@ class _AddAccountDialogState extends ConsumerState { children: [ ActionChip( avatar: const Icon(Symbols.qr_code_scanner), - backgroundColor: - Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_qr_scan), onPressed: () async { if (qrScanner != null) { @@ -107,8 +105,6 @@ class _AddAccountDialogState extends ConsumerState { ActionChip( key: addAccountManuallyButton, avatar: const Icon(Symbols.edit), - backgroundColor: - Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_add_manually), onPressed: () async { Navigator.of(context).pop(); diff --git a/lib/oath/views/add_account_page.dart b/lib/oath/views/add_account_page.dart index aca626c2..4a88bcfb 100755 --- a/lib/oath/views/add_account_page.dart +++ b/lib/oath/views/add_account_page.dart @@ -470,8 +470,6 @@ class _OathAddAccountPageState extends ConsumerState { if (oathState?.version.isAtLeast(4, 2) ?? true) FilterChip( key: keys.requireTouchFilterChip, - backgroundColor: - Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_require_touch), selected: _touch, onSelected: (value) { diff --git a/lib/piv/views/generate_key_dialog.dart b/lib/piv/views/generate_key_dialog.dart index 11d85f04..45f472eb 100644 --- a/lib/piv/views/generate_key_dialog.dart +++ b/lib/piv/views/generate_key_dialog.dart @@ -221,8 +221,6 @@ class _GenerateKeyDialogState extends ConsumerState { ), if (_generateType == GenerateType.certificate) FilterChip( - backgroundColor: - Theme.of(context).colorScheme.surfaceVariant, label: Text(dateFormatter.format(_validTo)), onSelected: _generating ? null diff --git a/lib/piv/views/manage_key_dialog.dart b/lib/piv/views/manage_key_dialog.dart index 7df10a3a..cb0c74e5 100644 --- a/lib/piv/views/manage_key_dialog.dart +++ b/lib/piv/views/manage_key_dialog.dart @@ -346,8 +346,6 @@ class _ManageKeyDialogState extends ConsumerState { ), FilterChip( key: keys.pinLockManagementKeyChip, - backgroundColor: - Theme.of(context).colorScheme.surfaceVariant, label: Text(l10n.s_protect_key), selected: _storeKey, onSelected: (value) { diff --git a/lib/theme.dart b/lib/theme.dart index 86f50d6e..80316b1a 100755 --- a/lib/theme.dart +++ b/lib/theme.dart @@ -25,60 +25,82 @@ class AppTheme { Brightness.dark => getDarkTheme(primaryColor), }; - static ThemeData getLightTheme(Color primaryColor) => ThemeData( - useMaterial3: true, - colorScheme: ColorScheme.fromSeed( - brightness: Brightness.light, - seedColor: primaryColor, - onSurface: const Color(0xbb000000), - onSurfaceVariant: const Color(0x99000000), - ), - fontFamily: 'Roboto', - appBarTheme: const AppBarTheme( - color: Colors.transparent, - ), - listTileTheme: const ListTileThemeData( - // For alignment under menu button - contentPadding: EdgeInsets.symmetric(horizontal: 18.0), - visualDensity: VisualDensity.compact, - ), - tooltipTheme: const TooltipThemeData( - waitDuration: Duration(milliseconds: 500), - textStyle: TextStyle(color: Color(0xff3c3c3c)), - decoration: BoxDecoration( - color: Color(0xffe2e2e6), - borderRadius: BorderRadius.all(Radius.circular(8.0)), + static ColorScheme _colorScheme(Brightness brightness, Color primaryColor) => + switch (brightness) { + Brightness.dark => ColorScheme.fromSeed( + seedColor: primaryColor, + brightness: brightness, + background: const Color(0xff282828), + onSurface: const Color(0xeeffffff), + onSurfaceVariant: const Color(0xaaffffff), ), - ), - ); + Brightness.light => ColorScheme.fromSeed( + seedColor: primaryColor, + brightness: brightness, + onSurface: const Color(0xbb000000), + onSurfaceVariant: const Color(0x99000000), + ) + }; - static ThemeData getDarkTheme(Color primaryColor) => ThemeData( - useMaterial3: true, - colorScheme: ColorScheme.fromSeed( - brightness: Brightness.dark, - seedColor: primaryColor, - background: const Color(0xff282828), - onSurface: const Color(0xeeffffff), - onSurfaceVariant: const Color(0xaaffffff), + static ThemeData getLightTheme(Color primaryColor) { + final colorScheme = _colorScheme(Brightness.light, primaryColor); + return ThemeData( + useMaterial3: true, + colorScheme: colorScheme, + fontFamily: 'Roboto', + appBarTheme: const AppBarTheme( + color: Colors.transparent, + ), + listTileTheme: const ListTileThemeData( + // For alignment under menu button + contentPadding: EdgeInsets.symmetric(horizontal: 18.0), + visualDensity: VisualDensity.compact, + ), + tooltipTheme: const TooltipThemeData( + waitDuration: Duration(milliseconds: 500), + textStyle: TextStyle(color: Color(0xff3c3c3c)), + decoration: BoxDecoration( + color: Color(0xffe2e2e6), + borderRadius: BorderRadius.all(Radius.circular(8.0)), ), - fontFamily: 'Roboto', - appBarTheme: const AppBarTheme( - color: Colors.transparent, + ), + chipTheme: ChipThemeData( + backgroundColor: colorScheme.surfaceContainerHighest, + labelStyle: + TextStyle(fontFamily: 'Roboto', color: colorScheme.onSurface), + ), + ); + } + + static ThemeData getDarkTheme(Color primaryColor) { + final colorScheme = _colorScheme(Brightness.dark, primaryColor); + return ThemeData( + useMaterial3: true, + colorScheme: colorScheme, + fontFamily: 'Roboto', + appBarTheme: const AppBarTheme( + color: Colors.transparent, + ), + listTileTheme: const ListTileThemeData( + // For alignment under menu button + contentPadding: EdgeInsets.symmetric(horizontal: 18.0), + visualDensity: VisualDensity.compact, + ), + tooltipTheme: const TooltipThemeData( + waitDuration: Duration(milliseconds: 500), + textStyle: TextStyle(color: Color(0xffE2E2E6)), + decoration: BoxDecoration( + color: Color(0xff3c3c3c), + borderRadius: BorderRadius.all(Radius.circular(8.0)), ), - listTileTheme: const ListTileThemeData( - // For alignment under menu button - contentPadding: EdgeInsets.symmetric(horizontal: 18.0), - visualDensity: VisualDensity.compact, - ), - tooltipTheme: const TooltipThemeData( - waitDuration: Duration(milliseconds: 500), - textStyle: TextStyle(color: Color(0xffE2E2E6)), - decoration: BoxDecoration( - color: Color(0xff3c3c3c), - borderRadius: BorderRadius.all(Radius.circular(8.0)), - ), - ), - ); + ), + chipTheme: ChipThemeData( + backgroundColor: colorScheme.surfaceContainerHighest, + labelStyle: + TextStyle(fontFamily: 'Roboto', color: colorScheme.onSurface), + ), + ); + } } /* TODO: Remove this. It is left here as a reference as we adjust styles to work with Flutter 3.7. diff --git a/lib/widgets/choice_filter_chip.dart b/lib/widgets/choice_filter_chip.dart index 83fbf85c..ee4ead2a 100755 --- a/lib/widgets/choice_filter_chip.dart +++ b/lib/widgets/choice_filter_chip.dart @@ -71,7 +71,7 @@ class _ChoiceFilterChipState extends State> { shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(4)), ), - color: Theme.of(context).colorScheme.background, + color: Theme.of(context).colorScheme.surfaceContainerHighest, popUpAnimationStyle: AnimationStyle(duration: Duration.zero), items: widget.items .map((e) => PopupMenuItem( @@ -91,7 +91,6 @@ class _ChoiceFilterChipState extends State> { return FilterChip( tooltip: widget.tooltip, avatar: widget.avatar, - backgroundColor: Theme.of(context).colorScheme.surfaceVariant, labelPadding: const EdgeInsets.only(left: 4), label: Row( mainAxisSize: MainAxisSize.min, @@ -102,7 +101,7 @@ class _ChoiceFilterChipState extends State> { child: Icon( _showing ? Symbols.arrow_drop_up : Symbols.arrow_drop_down, color: ChipTheme.of(context).checkmarkColor, - size: 18, + size: 16, ), ), ],