Merge pull request #1360 from Yubico/rikard/color-changes

some color changes for the theme selector and across the app
2024-12-23 18:22:39 +03:00 · 2024-01-30 18:29:30 +01:00 · 2024-01-30 18:29:30 +01:00 · b651721230
commit b651721230
parent 6448d5e754 84a6db60d3
9 changed files with 61 additions and 57 deletions
--- a/lib/app/key_customization/views/key_customization_dialog.dart
+++ b/lib/app/key_customization/views/key_customization_dialog.dart
@ -61,17 +61,17 @@ class _KeyCustomizationDialogState
  Widget build(BuildContext context) {
    final l10n = AppLocalizations.of(context)!;
    final currentNode = widget.node;
-
    final theme = Theme.of(context);
+    final primaryColor = ref.watch(defaultColorProvider);

    final Widget hero;
    if (currentNode != null) {
-      hero = _CurrentDeviceAvatar(currentNode, _customColor ?? Colors.white);
+      hero = _CurrentDeviceAvatar(currentNode, _customColor ?? primaryColor);
    } else {
      hero = Column(
        children: [
          _HeroAvatar(
-            color: _customColor ?? Colors.white,
+            color: _customColor ?? primaryColor,
            child: DeviceAvatar(
              radius: 64,
              child: Icon(isAndroid ? Icons.no_cell : Icons.usb),
@ -86,8 +86,6 @@ class _KeyCustomizationDialogState
      );
    }

-    final primaryColor = ref.watch(defaultColorProvider);
-
    final didChange = widget.initialCustomization.name != _customName ||
        widget.initialCustomization.color != _customColor;

@ -143,17 +141,17 @@ class _KeyCustomizationDialogState
                      spacing: 16,
                      children: [
                        ...[
-                          Colors.yellow.withOpacity(1.0),
-                          Colors.orange.withOpacity(1.0),
-                          Colors.red.withOpacity(1.0),
-                          Colors.deepPurple.withOpacity(1.0),
-                          Colors.green.withOpacity(1.0),
-                          Colors.teal.withOpacity(1.0),
-                          Colors.cyan.withOpacity(1.0),
+                          Colors.teal,
+                          Colors.cyan,
+                          Colors.blueAccent,
+                          Colors.deepPurple,
+                          Colors.red,
+                          Colors.orange,
+                          Colors.yellow,
                          // add nice color to devices with dynamic color
                          if (isAndroid &&
                              ref.read(androidSdkVersionProvider) >= 31)
-                            Colors.blueAccent.withOpacity(1.0)
+                            Colors.lightGreen
                        ].map((e) => _ColorButton(
                              color: e,
                              isSelected: _customColor == e,
@ -167,16 +165,17 @@ class _KeyCustomizationDialogState
                          onPressed: () => _updateColor(null),
                          constraints: const BoxConstraints(
                              minWidth: 32.0, minHeight: 32.0),
-                          fillColor: _customColor == null
-                              ? theme.colorScheme.surface
-                              : theme.colorScheme.onSurface,
+                          fillColor: (isAndroid &&
+                                  ref.read(androidSdkVersionProvider) >= 31)
+                              ? theme.colorScheme.onSurface
+                              : primaryColor,
                          shape: const CircleBorder(),
                          child: Icon(
                            Icons.cancel_rounded,
                            size: 16,
                            color: _customColor == null
                                ? theme.colorScheme.onSurface
-                                : theme.colorScheme.surface,
+                                : theme.colorScheme.surface.withOpacity(0.2),
                          ),
                        ),
                      ],
--- a/lib/fido/views/pin_entry_form.dart
+++ b/lib/fido/views/pin_entry_form.dart
@ -83,7 +83,7 @@ class _PinEntryFormState extends ConsumerState<PinEntryForm> {
        children: [
          Text(l10n.l_enter_fido2_pin),
          Padding(
-            padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
+            padding: const EdgeInsets.only(top: 16.0, bottom: 4.0),
            child: AppTextField(
              autofocus: true,
              obscureText: _isObscure,
@ -116,8 +116,10 @@ class _PinEntryFormState extends ConsumerState<PinEntryForm> {
            ),
          ),
          ListTile(
-            leading:
-                noFingerprints ? const Icon(Icons.warning_amber_rounded) : null,
+            leading: noFingerprints
+                ? Icon(Icons.warning_amber,
+                    color: Theme.of(context).colorScheme.tertiary)
+                : null,
            title: noFingerprints
                ? Text(
                    l10n.l_no_fps_added,
--- a/lib/oath/views/unlock_form.dart
+++ b/lib/oath/views/unlock_form.dart
@ -73,38 +73,40 @@ class _UnlockFormState extends ConsumerState<UnlockForm> {
              Text(
                l10n.l_enter_oath_pw,
              ),
-              const SizedBox(height: 16.0),
-              AppTextField(
-                key: keys.passwordField,
-                controller: _passwordController,
-                autofocus: true,
-                obscureText: _isObscure,
-                autofillHints: const [AutofillHints.password],
-                decoration: AppInputDecoration(
-                  border: const OutlineInputBorder(),
-                  labelText: l10n.s_password,
-                  errorText: _passwordIsWrong ? l10n.s_wrong_password : null,
-                  helperText: '', // Prevents resizing when errorText shown
-                  prefixIcon: const Icon(Icons.password_outlined),
-                  suffixIcon: IconButton(
-                    icon: Icon(
-                        _isObscure ? Icons.visibility : Icons.visibility_off),
-                    onPressed: () {
-                      setState(() {
-                        _isObscure = !_isObscure;
-                      });
-                    },
-                    tooltip: _isObscure
-                        ? l10n.s_show_password
-                        : l10n.s_hide_password,
+              Padding(
+                padding: const EdgeInsets.only(top: 16.0, bottom: 4.0),
+                child: AppTextField(
+                  key: keys.passwordField,
+                  controller: _passwordController,
+                  autofocus: true,
+                  obscureText: _isObscure,
+                  autofillHints: const [AutofillHints.password],
+                  decoration: AppInputDecoration(
+                    border: const OutlineInputBorder(),
+                    labelText: l10n.s_password,
+                    errorText: _passwordIsWrong ? l10n.s_wrong_password : null,
+                    helperText: '', // Prevents resizing when errorText shown
+                    prefixIcon: const Icon(Icons.password_outlined),
+                    suffixIcon: IconButton(
+                      icon: Icon(
+                          _isObscure ? Icons.visibility : Icons.visibility_off),
+                      onPressed: () {
+                        setState(() {
+                          _isObscure = !_isObscure;
+                        });
+                      },
+                      tooltip: _isObscure
+                          ? l10n.s_show_password
+                          : l10n.s_hide_password,
+                    ),
                  ),
+                  onChanged: (_) => setState(() {
+                    _passwordIsWrong = false;
+                  }), // Update state on change
+                  onSubmitted: (_) => _submit(),
                ),
-                onChanged: (_) => setState(() {
-                  _passwordIsWrong = false;
-                }), // Update state on change
-                onSubmitted: (_) => _submit(),
              ),
-              const SizedBox(height: 8.0),
+              const SizedBox(height: 3.0),
              Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
@ -120,7 +122,9 @@ class _UnlockFormState extends ConsumerState<UnlockForm> {
                              spacing: 4.0,
                              runSpacing: 8.0,
                              children: [
-                                const Icon(Icons.warning_amber_rounded),
+                                Icon(Icons.warning_amber,
+                                    color:
+                                        Theme.of(context).colorScheme.tertiary),
                                Text(l10n.l_keystore_unavailable)
                              ],
                            )
--- a/lib/piv/views/cert_info_view.dart
+++ b/lib/piv/views/cert_info_view.dart
@ -36,7 +36,7 @@ class CertInfoTable extends ConsumerWidget {
    final textTheme = Theme.of(context).textTheme;
    // This is what ListTile uses for subtitle
    final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
    );
    final dateFormat =
        DateFormat.yMMMEd(ref.watch(currentLocaleProvider).toString());
--- a/lib/piv/views/generate_key_dialog.dart
+++ b/lib/piv/views/generate_key_dialog.dart
@ -71,7 +71,7 @@ class _GenerateKeyDialogState extends ConsumerState<GenerateKeyDialog> {
    final textTheme = Theme.of(context).textTheme;
    // This is what ListTile uses for subtitle
    final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
    );

    return ResponsiveDialog(
--- a/lib/piv/views/import_file_dialog.dart
+++ b/lib/piv/views/import_file_dialog.dart
@ -88,7 +88,7 @@ class _ImportFileDialogState extends ConsumerState<ImportFileDialog> {
    final textTheme = Theme.of(context).textTheme;
    // This is what ListTile uses for subtitle
    final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
    );
    final state = _state;
    if (state == null) {
--- a/lib/piv/views/piv_screen.dart
+++ b/lib/piv/views/piv_screen.dart
@ -75,7 +75,7 @@ class _PivScreenState extends ConsumerState<PivScreen> {
            final textTheme = theme.textTheme;
            // This is what ListTile uses for subtitle
            final subtitleStyle = textTheme.bodyMedium!.copyWith(
-              color: textTheme.bodySmall!.color,
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
            );
            return PivActions(
              devicePath: widget.devicePath,
--- a/lib/piv/views/slot_dialog.dart
+++ b/lib/piv/views/slot_dialog.dart
@ -45,7 +45,7 @@ class SlotDialog extends ConsumerWidget {
    final textTheme = Theme.of(context).textTheme;
    // This is what ListTile uses for subtitle
    final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
    );

    final pivState = ref.watch(pivStateProvider(node.path)).valueOrNull;
--- a/lib/theme.dart
+++ b/lib/theme.dart
@ -16,7 +16,7 @@

 import 'package:flutter/material.dart';

-const defaultPrimaryColor = Colors.blueAccent;
+const defaultPrimaryColor = Colors.lightGreen;

 class AppTheme {
  static ThemeData getTheme(Brightness brightness, Color primaryColor) =>
@ -58,7 +58,6 @@ class AppTheme {
          brightness: Brightness.dark,
          seedColor: primaryColor,
          background: const Color(0xff282828),
-          surface: const Color(0xff282828),
          onSurface: const Color(0xeeffffff),
          onSurfaceVariant: const Color(0xaaffffff),
        ),