refactor(ui): add RoundedButton.bright constructor (#553)

This commit reduces code duplication by creating a new constructor to the `RoundedButton` class, making it usable as a replacement for the following buttons: 1. the "Resend verification email" button 2. the button in SplashErrorPage Beforehand, these two buttons used tedious boilerplate by invoking the Material ElevatedButton; a thing the RoundedButton was supposed to eliminate. Additionally, files affected this change have been simplified. closes #508 --------- Co-authored-by: Omid Marfavi <[email protected]>
AnalogIO · Nov 21, 2023 · 69db31a · 69db31a
1 parent 5278155
commit 69db31a
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 52 deletions.
diff --git a/lib/core/styles/app_text_styles.dart b/lib/core/styles/app_text_styles.dart
@@ -52,13 +52,7 @@ abstract final class AppTextStyle {
 
   static final loginError = settingKey.copyWith(color: AppColors.errorOnDark);
 
-  static final _buttonBase = _body.size(14).bold();
-
-  static final buttonText = _buttonBase.color(AppColors.white).style;
-
-  static final buttonTextDark = _buttonBase.color(AppColors.primary).style;
-
-  static final buttonTextDisabled = _buttonBase.color(AppColors.gray).style;
+  static final buttonText = _body.size(14).bold().style;
 
   static final explainer = _body.size(12).color(AppColors.secondary).style;
 

diff --git a/lib/core/widgets/components/rounded_button.dart b/lib/core/widgets/components/rounded_button.dart
@@ -3,21 +3,33 @@ import 'package:coffeecard/core/styles/app_text_styles.dart';
 import 'package:flutter/material.dart';
 
 class RoundedButton extends StatelessWidget {
-  const RoundedButton({required this.text, required this.onTap});
+  const RoundedButton({
+    required this.text,
+    required this.onTap,
+  })  : backgroundColor = AppColors.primary,
+        foregroundColor = AppColors.white;
+
+  const RoundedButton.bright({
+    required this.text,
+    required this.onTap,
+  })  : backgroundColor = AppColors.white,
+        foregroundColor = AppColors.primary;
 
   final String text;
   final void Function()? onTap;
-
-  bool get disabled => onTap == null;
+  final Color backgroundColor;
+  final Color foregroundColor;
 
   Color _getBackgroundColor(Set<MaterialState> states) {
-    if (states.contains(MaterialState.disabled)) return AppColors.lightGray;
-    return AppColors.primary;
+    return (states.contains(MaterialState.disabled))
+        ? AppColors.lightGray
+        : backgroundColor;
   }
 
   Color _getForegroundColor(Set<MaterialState> states) {
-    if (states.contains(MaterialState.disabled)) return AppColors.gray;
-    return AppColors.white;
+    return (states.contains(MaterialState.disabled))
+        ? AppColors.gray
+        : foregroundColor;
   }
 
   @override
@@ -33,12 +45,7 @@ class RoundedButton extends StatelessWidget {
         ),
       ),
       onPressed: onTap,
-      child: Text(
-        text,
-        style: disabled
-            ? AppTextStyle.buttonTextDisabled
-            : AppTextStyle.buttonText,
-      ),
+      child: Text(text, style: AppTextStyle.buttonText),
     );
   }
 }
diff --git a/lib/core/widgets/pages/splash/splash_error_page.dart b/lib/core/widgets/pages/splash/splash_error_page.dart
@@ -1,8 +1,7 @@
-import 'package:coffeecard/core/ignore_value.dart';
 import 'package:coffeecard/core/strings.dart';
-import 'package:coffeecard/core/styles/app_colors.dart';
 import 'package:coffeecard/core/styles/app_text_styles.dart';
 import 'package:coffeecard/core/widgets/components/loading_overlay.dart';
+import 'package:coffeecard/core/widgets/components/rounded_button.dart';
 import 'package:coffeecard/features/environment/presentation/cubit/environment_cubit.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -17,11 +16,25 @@ class SplashErrorPage extends StatefulWidget {
 }
 
 class _SplashErrorPageState extends State<SplashErrorPage> {
+  Future<void> onTap() async {
+    LoadingOverlay.show(context).ignore();
+
+    // Show loading overlay for at least 200 ms, otherwise it
+    // may not be obvious that a load is happening with no internet
+    await Future.wait<void>([
+      Future.delayed(const Duration(milliseconds: 200)),
+      context.read<EnvironmentCubit>().getConfig(),
+    ]);
+
+    if (mounted) {
+      LoadingOverlay.hide(context);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return Padding(
       padding: const EdgeInsets.all(48),
-      color: AppColors.primary,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
@@ -31,31 +44,7 @@ class _SplashErrorPageState extends State<SplashErrorPage> {
             textAlign: TextAlign.center,
           ),
           const Gap(8),
-          ElevatedButton(
-            style: ButtonStyle(
-              foregroundColor: MaterialStateProperty.all(AppColors.primary),
-              maximumSize: MaterialStateProperty.all(Size.infinite),
-              backgroundColor: MaterialStateProperty.all(AppColors.white),
-              shape: MaterialStateProperty.all(const StadiumBorder()),
-              padding: MaterialStateProperty.all(
-                const EdgeInsets.symmetric(horizontal: 16),
-              ),
-            ),
-            onPressed: () async {
-              final environmentLoaded =
-                  context.read<EnvironmentCubit>().getConfig();
-              ignoreValue(LoadingOverlay.show(context));
-              // Delay since it is otherwise not obvious
-              // a load is happening with no internet
-              final _ = await Future.delayed(const Duration(milliseconds: 200));
-              await environmentLoaded;
-              if (mounted) LoadingOverlay.hide(context);
-            },
-            child: Text(
-              Strings.retry,
-              style: AppTextStyle.buttonTextDark,
-            ),
-          ),
+          RoundedButton.bright(text: Strings.retry, onTap: onTap),
         ],
       ),
     );

diff --git a/lib/features/login/presentation/pages/login_page_passcode.dart b/lib/features/login/presentation/pages/login_page_passcode.dart
@@ -40,12 +40,10 @@ class _LoginPagePasscodeState extends State<LoginPagePasscode> {
       context: context,
       title: Strings.loginVerificationEmailSent,
       children: [
-        //TODO: style
         Text(Strings.loginVerificationEmailBody(widget.email)),
       ],
       actions: [
         TextButton(
-          //TODO: style
           child: const Text(Strings.buttonOK),
           onPressed: () => closeAppDialog(context),
         ),
@@ -89,7 +87,7 @@ class _LoginPagePasscodeState extends State<LoginPagePasscode> {
             error: state is LoginError ? state.errorMessage : null,
             ctaChildren: [
               if (state is LoginEmailNotVerified)
-                RoundedButton(
+                RoundedButton.bright(
                   text: Strings.loginResendVerificationEmail,
                   onTap: () => resendEmailCallback(context.read<LoginCubit>()),
                 ),