fix: #3188 - colored button for "ignore" in hunger games (#3195)

Impacted files: * `question_answers_options.dart`: now using for "ignore" a button similar to yes/no * `question_card.dart`: created a shared `Color`
openfoodfacts · Oct 23, 2022 · bf30f3e · bf30f3e
1 parent fe2d8db
commit bf30f3e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 25 deletions.
diff --git a/packages/smooth_app/lib/pages/hunger_games/question_answers_options.dart b/packages/smooth_app/lib/pages/hunger_games/question_answers_options.dart
@@ -3,10 +3,13 @@ import 'package:flutter_gen/gen_l10n/app_localizations.dart';
 import 'package:openfoodfacts/model/Insight.dart';
 import 'package:openfoodfacts/model/RobotoffQuestion.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
+import 'package:smooth_app/pages/hunger_games/question_card.dart';
 
 const Color _yesBackground = Colors.lightGreen;
 const Color _noBackground = Colors.redAccent;
+const Color _maybeBackground = QuestionCard.robotoffBackground;
 const Color _yesNoTextColor = Colors.white;
+const Color _maybeTextColor = Colors.black;
 
 /// Display of the typical Yes / No / Maybe options for Robotoff
 class QuestionAnswersOptions extends StatelessWidget {
@@ -53,18 +56,14 @@ class QuestionAnswersOptions extends StatelessWidget {
               ),
             ],
           ),
-          const SizedBox(height: SMALL_SPACE),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              _buildAnswerButton(
-                context,
-                insightAnnotation: InsightAnnotation.MAYBE,
-                backgroundColor: const Color(0xFFFFEFB7),
-                contentColor: Colors.black,
-                textButton: true,
-              ),
-            ],
+          SizedBox(
+            width: double.infinity,
+            child: _buildAnswerButton(
+              context,
+              insightAnnotation: InsightAnnotation.MAYBE,
+              backgroundColor: _maybeBackground,
+              contentColor: _maybeTextColor,
+            ),
           ),
         ],
       ),
@@ -76,7 +75,6 @@ class QuestionAnswersOptions extends StatelessWidget {
     required InsightAnnotation insightAnnotation,
     required Color backgroundColor,
     required Color contentColor,
-    bool textButton = false,
     EdgeInsets padding = const EdgeInsets.all(VERY_SMALL_SPACE),
   }) {
     final AppLocalizations appLocalizations = AppLocalizations.of(context);
@@ -102,16 +100,14 @@ class QuestionAnswersOptions extends StatelessWidget {
       padding: padding,
       child: TextButton.icon(
         onPressed: () => onAnswer(insightAnnotation),
-        style: textButton
-            ? null
-            : ButtonStyle(
-                backgroundColor: MaterialStateProperty.all(backgroundColor),
-                shape: MaterialStateProperty.all(
-                  const RoundedRectangleBorder(
-                    borderRadius: ROUNDED_BORDER_RADIUS,
-                  ),
-                ),
-              ),
+        style: ButtonStyle(
+          backgroundColor: MaterialStateProperty.all(backgroundColor),
+          shape: MaterialStateProperty.all(
+            const RoundedRectangleBorder(
+              borderRadius: ROUNDED_BORDER_RADIUS,
+            ),
+          ),
+        ),
         icon: Icon(
           iconData,
           color: contentColor,

diff --git a/packages/smooth_app/lib/pages/hunger_games/question_card.dart b/packages/smooth_app/lib/pages/hunger_games/question_card.dart
@@ -14,6 +14,8 @@ class QuestionCard extends StatelessWidget {
 
   final RobotoffQuestion question;
 
+  static const Color robotoffBackground = Color(0xFFFFEFB7);
+
   @override
   Widget build(BuildContext context) {
     final Future<Product> productFuture = OpenFoodAPIClient.getProduct(
@@ -64,7 +66,7 @@ class QuestionCard extends StatelessWidget {
 
   Widget _buildQuestionText(BuildContext context, RobotoffQuestion question) {
     return Container(
-      color: const Color(0xFFFFEFB7),
+      color: robotoffBackground,
       padding: const EdgeInsets.all(SMALL_SPACE),
       child: Column(
         children: <Widget>[
@@ -99,7 +101,7 @@ class QuestionCard extends StatelessWidget {
   }
 
   Widget _buildQuestionShimmer() => Shimmer.fromColors(
-        baseColor: const Color(0xFFFFEFB7),
+        baseColor: robotoffBackground,
         highlightColor: Colors.white,
         child: Card(
           elevation: 4,