1696: Apply fonts (#1728)

* 1696: add styles to texts and text buttons * 1696: move basic widget styles to theme, create typography class variables, removed unneeded variables * 1696: readd const * 1696: applied text color on tiles and dialog
digitalfabrik · Nov 20, 2024 · 0fe8ea4 · 0fe8ea4
1 parent 3bf6e79
commit 0fe8ea4
Show file tree

Hide file tree

Showing 47 changed files with 258 additions and 171 deletions.
diff --git a/frontend/lib/about/about_page.dart b/frontend/lib/about/about_page.dart
@@ -30,6 +30,8 @@ class AboutPageState extends State<AboutPage> {
 
   @override
   Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final colorTheme = Theme.of(context).colorScheme;
     final config = Configuration.of(context);
     final t = context.t;
     return FutureBuilder<PackageInfo>(
@@ -58,10 +60,10 @@ class AboutPageState extends State<AboutPage> {
               ),
             ),
             Center(
-              child: Text(packageInfo.appName, style: Theme.of(context).textTheme.headlineSmall),
+              child: Text(packageInfo.appName, style: textTheme.headlineSmall),
             ),
             Center(
-              child: Text(packageInfo.version, style: Theme.of(context).textTheme.bodyMedium),
+              child: Text(packageInfo.version, style: TextStyle(color: colorTheme.tertiary)),
             ),
             const SizedBox(height: 20),
             const Divider(
@@ -74,18 +76,15 @@ class AboutPageState extends State<AboutPage> {
                 child: Column(
                   children: [
                     Center(
-                      child: Text(t.about.publisher, style: Theme.of(context).textTheme.titleSmall),
+                      child: Text(t.about.publisher, style: textTheme.titleSmall),
                     ),
                     Padding(
                       padding: const EdgeInsets.only(left: 10, right: 10, top: 16, bottom: 16),
-                      child: Text(buildConfig.publisherAddress, style: Theme.of(context).textTheme.bodyLarge),
+                      child: Text(buildConfig.publisherAddress),
                     ),
                     Text(
                       t.about.moreInformation,
-                      style: Theme.of(context)
-                          .textTheme
-                          .bodyMedium
-                          ?.merge(TextStyle(color: Theme.of(context).colorScheme.secondary)),
+                      style: textTheme.bodyLarge?.apply(color: colorTheme.secondary),
                     ),
                   ],
                 ),

diff --git a/frontend/lib/about/backend_switch_dialog.dart b/frontend/lib/about/backend_switch_dialog.dart
@@ -20,17 +20,18 @@ class BackendSwitchDialogState extends State<BackendSwitchDialog> {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return SimpleDialog(
       children: [
         Padding(
           padding: EdgeInsets.only(right: 10, left: 20),
           child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text('Switch Endpoint', style: Theme.of(context).textTheme.headlineMedium),
+              Text('Switch Endpoint', style: theme.textTheme.titleLarge),
               IconButton(
                 icon: const Icon(Icons.close),
-                color: Theme.of(context).appBarTheme.backgroundColor,
+                color: theme.appBarTheme.backgroundColor,
                 alignment: Alignment.topRight,
                 onPressed: () {
                   Navigator.of(context, rootNavigator: true).pop();
@@ -44,7 +45,7 @@ class BackendSwitchDialogState extends State<BackendSwitchDialog> {
           child: Column(
             children: [
               Text('Current Endpoint: \n${Configuration.of(context).graphqlUrl}',
-                  style: Theme.of(context).textTheme.bodyMedium),
+                  style: theme.textTheme.bodyLarge?.apply(color: theme.hintColor)),
               Padding(
                 padding: EdgeInsets.only(top: 10, bottom: 10),
                 child: TextField(
@@ -60,10 +61,7 @@ class BackendSwitchDialogState extends State<BackendSwitchDialog> {
               ),
               password.toLowerCase() == widget.passwordToUnlock
                   ? ElevatedButton(
-                      style: ElevatedButton.styleFrom(
-                          padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
-                          textStyle: TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
-                      child: const Text('Switch API'),
+                      child: Text('Switch API'),
                       onPressed: () => switchBackendUrl(context),
                     )
                   : Container(),

diff --git a/frontend/lib/about/dev_settings_view.dart b/frontend/lib/about/dev_settings_view.dart
@@ -3,7 +3,7 @@ import 'dart:developer';
 
 import 'package:base32/base32.dart';
 import 'package:ehrenamtskarte/app.dart';
-import 'package:ehrenamtskarte/build_config/build_config.dart';
+import 'package:ehrenamtskarte/build_config/build_config.dart' show buildConfig;
 import 'package:ehrenamtskarte/configuration/configuration.dart';
 import 'package:ehrenamtskarte/configuration/settings_model.dart';
 import 'package:ehrenamtskarte/identification/card_detail_view/self_verify_card.dart';
@@ -49,6 +49,7 @@ class DevSettingsView extends StatelessWidget {
     final settings = Provider.of<SettingsModel>(context);
     final client = GraphQLProvider.of(context).value;
     final userCodeModel = Provider.of<UserCodeModel>(context);
+    final textTheme = Theme.of(context).textTheme;
     return Padding(
       padding: const EdgeInsets.all(15.0),
       child: Column(
@@ -89,8 +90,9 @@ class DevSettingsView extends StatelessWidget {
             onTap: () {
               showDialog<bool>(
                 context: context,
-                builder: (context) =>
-                    SimpleDialog(title: const Text('Settings'), children: [Text(settings.toString())]),
+                builder: (context) => SimpleDialog(title: const Text('Settings'), children: [
+                  Text(settings.toString(), style: textTheme.bodySmall),
+                ]),
               );
             },
           ),
@@ -128,6 +130,7 @@ class DevSettingsView extends StatelessWidget {
     showDialog(
       context: context,
       builder: (BuildContext context) {
+        final theme = Theme.of(context);
         final base64Controller = TextEditingController();
         return AlertDialog(
           scrollable: true,
@@ -153,6 +156,7 @@ class DevSettingsView extends StatelessWidget {
           ),
           actions: [
             TextButton(
+              style: theme.textButtonTheme.style,
               child: const Text('Activate Card'),
               onPressed: () {
                 GoRouter.of(context).push('/$activationRouteName/code#${base64Controller.text}');

diff --git a/frontend/lib/about/language_change.dart b/frontend/lib/about/language_change.dart
@@ -11,12 +11,11 @@ class LanguageChange extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return Column(children: [
       ...buildConfig.appLocales.map((item) => DecoratedBox(
           decoration: BoxDecoration(
-              color: LocaleSettings.currentLocale.languageCode == item
-                  ? Theme.of(context).colorScheme.surfaceVariant
-                  : null),
+              color: LocaleSettings.currentLocale.languageCode == item ? theme.colorScheme.surfaceVariant : null),
           child: ListTile(
               title: Text(
                 nativeLanguageNames[item]!,
@@ -36,9 +35,7 @@ class LanguageChange extends StatelessWidget {
     Navigator.pop(context);
     messengerState.showSnackBar(
       SnackBar(
-        backgroundColor: Theme.of(context).colorScheme.primary,
-        content:
-            Text(t.about.languageChangeSuccessful, style: TextStyle(color: Theme.of(context).colorScheme.background)),
+        content: Text(t.about.languageChangeSuccessful),
       ),
     );
   }

diff --git a/frontend/lib/about/license_page.dart b/frontend/lib/about/license_page.dart
@@ -21,6 +21,7 @@ class CustomLicensePage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final t = context.t;
+    final theme = Theme.of(context);
     return FutureBuilder<List<LicenseEntry>>(
       future: LicenseRegistry.licenses.toList(),
       builder: (BuildContext context, AsyncSnapshot<List<LicenseEntry>> snapshot) {
@@ -61,8 +62,8 @@ class CustomLicensePage extends StatelessWidget {
                     final license = result[index];
                     final paragraphs = license.licenseParagraphs;
                     return ListTile(
-                      title: Text(license.packageName),
-                      subtitle: Text(t.about.numberLicenses(n: paragraphs.length)),
+                      title: Text(license.packageName, style: theme.textTheme.titleSmall),
+                      subtitle: Text(t.about.numberLicenses(n: paragraphs.length), style: theme.textTheme.bodyMedium),
                       onTap: () {
                         Navigator.push(
                           context,

diff --git a/frontend/lib/about/section.dart b/frontend/lib/about/section.dart
@@ -8,17 +8,13 @@ class Section extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Padding(
-          padding: EdgeInsets.only(top: 16, left: 16, right: 16),
-          child: Text(headline,
-              style: Theme.of(context)
-                  .textTheme
-                  .bodySmall
-                  ?.merge(TextStyle(color: Theme.of(context).colorScheme.secondary))),
-        ),
+            padding: EdgeInsets.only(top: 16, left: 16, right: 16),
+            child: Text(headline, style: theme.textTheme.bodySmall?.apply(color: theme.colorScheme.secondary))),
         Column(children: children),
         const SizedBox(height: 10),
       ],

diff --git a/frontend/lib/activation/deeplink_activation.dart b/frontend/lib/activation/deeplink_activation.dart
@@ -129,7 +129,6 @@ class _DeepLinkActivationState extends State<DeepLinkActivation> {
                                   // TODO 1656: Improve error handling!!
                                   ScaffoldMessenger.of(context).showSnackBar(
                                     SnackBar(
-                                      backgroundColor: Theme.of(context).colorScheme.primary,
                                       content: Text(t.common.unknownError),
                                     ),
                                   );
@@ -165,6 +164,7 @@ class _WarningText extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     final String cardsInUse = userCodeModel.userCodes.length.toString();
     final String maxCardAmount = buildConfig.maxCardAmount.toString();
     final text = switch (status) {
@@ -180,8 +180,8 @@ class _WarningText extends StatelessWidget {
         padding: EdgeInsets.symmetric(vertical: 8),
         child: Column(
           children: [
-            Icon(Icons.warning, color: Theme.of(context).colorScheme.secondary),
-            Text(text, textAlign: TextAlign.center)
+            Icon(Icons.warning, color: theme.colorScheme.secondary),
+            Text(text, textAlign: TextAlign.center, style: theme.textTheme.bodyMedium)
           ],
         ));
   }

diff --git a/frontend/lib/configuration/settings_model.dart b/frontend/lib/configuration/settings_model.dart
@@ -63,7 +63,7 @@ class SettingsModel extends ChangeNotifier {
   }
 
   String hideVerificationInfoKey = 'hideVerificationInfo';
-  bool get hideVerificationInfo => _getBool(hideVerificationInfoKey) ?? true;
+  bool get hideVerificationInfo => _getBool(hideVerificationInfoKey) ?? false;
 
   Future<void> setHideVerificationInfo({required bool enabled}) async {
     bool? currentlyHideVerificationInfo = hideVerificationInfo;

diff --git a/frontend/lib/identification/activation_workflow/activation_error_dialog.dart b/frontend/lib/identification/activation_workflow/activation_error_dialog.dart
@@ -9,13 +9,14 @@ class ActivationErrorDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     final t = context.t;
     return AlertDialog(
       title: Text(t.identification.activationError),
       content: SingleChildScrollView(
         child: ListBody(
           children: <Widget>[
-            Text(message),
+            Text(message, style: theme.textTheme.bodyMedium),
           ],
         ),
       ),

diff --git a/frontend/lib/identification/activation_workflow/activation_existing_card_dialog.dart b/frontend/lib/identification/activation_workflow/activation_existing_card_dialog.dart
@@ -7,19 +7,19 @@ class ActivationExistingCardDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = Theme.of(context);
     return AlertDialog(
-      title: const Text('Diese Karte existiert bereits', style: TextStyle(fontSize: 18)),
+      title: Text('Diese Karte existiert bereits'),
       content: SingleChildScrollView(
         child: ListBody(
-          children: const <Widget>[
-            Text(
-              'Diese Karte ist bereits auf ihrem Gerät aktiv.',
-            ),
+          children: <Widget>[
+            Text('Diese Karte ist bereits auf ihrem Gerät aktiv.'),
           ],
         ),
       ),
       actions: <Widget>[
         TextButton(
+          style: theme.textButtonTheme.style,
           child: Text(context.t.common.ok),
           onPressed: () {
             Navigator.of(context).pop();

diff --git a/frontend/lib/identification/activation_workflow/activation_overwrite_existing_dialog.dart b/frontend/lib/identification/activation_workflow/activation_overwrite_existing_dialog.dart
@@ -9,7 +9,7 @@ class ActivationOverwriteExistingDialog extends StatelessWidget {
   Widget build(BuildContext context) {
     final t = context.t;
     return AlertDialog(
-      title: Text(t.identification.activateCurrentDeviceTitle, style: TextStyle(fontSize: 18)),
+      title: Text(t.identification.activateCurrentDeviceTitle),
       content: SingleChildScrollView(
         child: ListBody(
           children: <Widget>[

diff --git a/frontend/lib/identification/card_detail_view/card_detail_view.dart b/frontend/lib/identification/card_detail_view/card_detail_view.dart
@@ -166,7 +166,6 @@ class QrCodeAndStatus extends StatelessWidget {
   Widget build(BuildContext context) {
     final CardStatus status = CardStatus.from(userCode);
     final t = context.t;
-
     return Padding(
       padding: const EdgeInsets.symmetric(horizontal: 4),
       child: Column(
@@ -208,7 +207,6 @@ class QrCodeAndStatus extends StatelessWidget {
               onPressed: onMoreActionsPressed,
               child: Text(
                 t.common.moreActions,
-                style: TextStyle(color: Theme.of(context).colorScheme.secondary),
               ),
             ),
           )
@@ -228,7 +226,7 @@ class _PaddedText extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.only(bottom: 4),
       constraints: const BoxConstraints(maxWidth: 300),
-      child: Text(text, textAlign: TextAlign.center),
+      child: Text(text, textAlign: TextAlign.center, style: Theme.of(context).textTheme.bodyLarge),
     );
   }
 }
diff --git a/frontend/lib/identification/card_detail_view/more_actions_dialog.dart b/frontend/lib/identification/card_detail_view/more_actions_dialog.dart
@@ -26,6 +26,7 @@ class MoreActionsDialog extends StatelessWidget {
     final String maxCardAmount = buildConfig.maxCardAmount.toString();
     final bool cardLimitIsReached = hasReachedCardLimit(userCodeModel.userCodes);
     final t = context.t;
+    final theme = Theme.of(context);
 
     return AlertDialog(
       contentPadding: const EdgeInsets.only(top: 12),
@@ -35,7 +36,7 @@ class MoreActionsDialog extends StatelessWidget {
           mainAxisSize: MainAxisSize.min,
           children: [
             ListTile(
-              title: Text(t.identification.moreActionsApplyTitle),
+              title: Text(t.identification.moreActionsApplyTitle, style: TextStyle(fontWeight: FontWeight.bold)),
               subtitle: Text(t.identification.moreActionsApplyDescription),
               leading: const Icon(Icons.assignment, size: 36),
               onTap: () {
@@ -44,7 +45,7 @@ class MoreActionsDialog extends StatelessWidget {
               },
             ),
             ListTile(
-              title: Text(t.identification.moreActionsVerifyTitle),
+              title: Text(t.identification.moreActionsVerifyTitle, style: TextStyle(fontWeight: FontWeight.bold)),
               subtitle: Text(t.identification.moreActionsVerifyDescription),
               leading: const Icon(Icons.verified, size: 36),
               onTap: () {
@@ -55,18 +56,20 @@ class MoreActionsDialog extends StatelessWidget {
             ListTile(
               enabled: !cardLimitIsReached,
               title: Text('${t.identification.moreActionsActivateTitle} ($cardsInUse/$maxCardAmount)',
-                  style: TextStyle(color: Theme.of(context).colorScheme.onBackground)),
-              subtitle: Text(cardLimitIsReached
-                  ? t.identification.moreActionsActivateLimitDescription
-                  : t.identification.moreActionsActivateDescription),
+                  style: TextStyle(color: cardLimitIsReached ? theme.hintColor : null, fontWeight: FontWeight.bold)),
+              subtitle: Text(
+                  cardLimitIsReached
+                      ? t.identification.moreActionsActivateLimitDescription
+                      : t.identification.moreActionsActivateDescription,
+                  style: TextStyle(color: cardLimitIsReached ? theme.hintColor : null)),
               leading: Icon(Icons.add_card, size: 36),
               onTap: () {
                 Navigator.pop(context);
                 startActivation();
               },
             ),
             ListTile(
-              title: Text(t.identification.moreActionsRemoveTitle),
+              title: Text(t.identification.moreActionsRemoveTitle, style: TextStyle(fontWeight: FontWeight.bold)),
               subtitle: Text(t.identification.moreActionsRemoveDescription),
               leading: const Icon(Icons.delete, size: 36),
               onTap: () {

diff --git a/frontend/lib/identification/card_detail_view/verification_code_view.dart b/frontend/lib/identification/card_detail_view/verification_code_view.dart
@@ -50,6 +50,7 @@ class VerificationCodeViewState extends State<VerificationCodeView> {
   Widget build(BuildContext context) {
     final otpCode = _otpCode;
     final userCode = widget.userCode;
+    final colorTheme = Theme.of(context).colorScheme;
 
     final time = DateTime.now().millisecondsSinceEpoch;
     final animationDuration = otpCode.validUntilMilliSeconds - time;
@@ -77,10 +78,8 @@ class VerificationCodeViewState extends State<VerificationCodeView> {
                         version: qr.QrVersions.auto,
                         gapless: false,
                         dataModuleStyle: qr.QrDataModuleStyle(
-                            dataModuleShape: qr.QrDataModuleShape.square,
-                            color: Theme.of(context).textTheme.bodyMedium?.color),
-                        eyeStyle: qr.QrEyeStyle(
-                            eyeShape: qr.QrEyeShape.square, color: Theme.of(context).textTheme.bodyMedium?.color),
+                            dataModuleShape: qr.QrDataModuleShape.square, color: colorTheme.tertiary),
+                        eyeStyle: qr.QrEyeStyle(eyeShape: qr.QrEyeShape.square, color: colorTheme.tertiary),
                       ),
                     ),
                     Positioned.fill(

diff --git a/frontend/lib/identification/connection_failed_dialog.dart b/frontend/lib/identification/connection_failed_dialog.dart
@@ -15,7 +15,7 @@ class ConnectionFailedDialog extends StatelessWidget {
       title: t.common.connectionFailed,
       icon: Icons.signal_cellular_connected_no_internet_4_bar,
       iconColor: Theme.of(context).colorScheme.onBackground,
-      child: Text(reason),
+      child: Text(reason, style: Theme.of(context).textTheme.bodyMedium),
     );
   }