Fix styling of chips

2024-11-22 00:12:09 +03:00 · 2024-07-03 14:27:54 +02:00 · 2024-07-03 14:27:54 +02:00 · 3d1345577f
commit 3d1345577f
parent 97d9f328ee
11 changed files with 75 additions and 76 deletions
--- 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)...');
--- 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)...');
--- 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,
    );
  }
 }
--- 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: (_) {
--- 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);
--- a/lib/oath/views/add_account_dialog.dart
+++ b/lib/oath/views/add_account_dialog.dart
@ -84,8 +84,6 @@ class _AddAccountDialogState extends ConsumerState<AddAccountDialog> {
                  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<AddAccountDialog> {
                    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();
--- a/lib/oath/views/add_account_page.dart
+++ b/lib/oath/views/add_account_page.dart
@ -470,8 +470,6 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage> {
                        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) {
--- a/lib/piv/views/generate_key_dialog.dart
+++ b/lib/piv/views/generate_key_dialog.dart
@ -221,8 +221,6 @@ class _GenerateKeyDialogState extends ConsumerState<GenerateKeyDialog> {
                  ),
                  if (_generateType == GenerateType.certificate)
                    FilterChip(
-                      backgroundColor:
-                          Theme.of(context).colorScheme.surfaceVariant,
                      label: Text(dateFormatter.format(_validTo)),
                      onSelected: _generating
                          ? null
--- a/lib/piv/views/manage_key_dialog.dart
+++ b/lib/piv/views/manage_key_dialog.dart
@ -346,8 +346,6 @@ class _ManageKeyDialogState extends ConsumerState<ManageKeyDialog> {
                    ),
                  FilterChip(
                    key: keys.pinLockManagementKeyChip,
-                    backgroundColor:
-                        Theme.of(context).colorScheme.surfaceVariant,
                    label: Text(l10n.s_protect_key),
                    selected: _storeKey,
                    onSelected: (value) {
--- 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.
--- a/lib/widgets/choice_filter_chip.dart
+++ b/lib/widgets/choice_filter_chip.dart
@ -71,7 +71,7 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
      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<T>(
@ -91,7 +91,6 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
    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<T> extends State<ChoiceFilterChip<T>> {
            child: Icon(
              _showing ? Symbols.arrow_drop_up : Symbols.arrow_drop_down,
              color: ChipTheme.of(context).checkmarkColor,
-              size: 18,
+              size: 16,
            ),
          ),
        ],