fix: Colors of generic widgets replaced with globalized constants for colors (#1268)

* new colors added

* colors replaced with constants

* colors replaced with constants

* colors replaced with constants

* colors moved to design_constants.dart

* empty attribute helper deleted

* imports updated

* screenshots updated

Co-authored-by: Gayangi Seneviratne <sgayangi@gmail.com>

packages/smooth_app/lib/cards/product_cards/knowledge_panels/knowledge_panel_title_card.dart

@@ -79,13 +79,13 @@ class KnowledgePanelTitleCard extends StatelessWidget {
   Color? _getColorFromEvaluation(Evaluation evaluation) {
     switch (evaluation) {
       case Evaluation.BAD:
-        return Colors.red;
+        return RED_COLOR;
       case Evaluation.NEUTRAL:
-        return Colors.grey;
+        return GREY_COLOR;
       case Evaluation.AVERAGE:
-        return Colors.orange;
+        return LIGHT_ORANGE_COLOR;
       case Evaluation.GOOD:
-        return Colors.green;
+        return LIGHT_GREEN_COLOR;
       case Evaluation.UNKNOWN:
         return null;
     }

packages/smooth_app/lib/generic_lib/design_constants.dart

@@ -22,3 +22,24 @@ const BorderRadius ANGULAR_BORDER_RADIUS = BorderRadius.all(ANGULAR_RADIUS);
 const Radius CIRCULAR_RADIUS = Radius.circular(40.0);
 //ignore: non_constant_identifier_names
 const BorderRadius CIRCULAR_BORDER_RADIUS = BorderRadius.all(CIRCULAR_RADIUS);
+
+/// Widget Colors
+const MaterialColor WARNING_COLOR = Colors.deepOrange;
+const Color PRIMARY_BLUE_COLOR = Color(0xFF2D9CDB);
+const Color PRIMARY_GREY_COLOR = Color(0xFF4F4F4F);
+const Color GREY_COLOR = Color(0xFFF2F2F2);
+const Color WHITE_COLOR = Color(0xFFFFFFFF);
+const Color DARK_GREEN_COLOR = Color(0xFF219653);
+const Color LIGHT_GREEN_COLOR = Color(0xFF60AC0E);
+const Color LIGHT_YELLOW_COLOR = Color(0xFFF2C94C);
+const Color DARK_YELLOW_COLOR = Color(0xFFC88F01);
+const Color LIGHT_ORANGE_COLOR = Color(0xFFF2994A);
+const Color DARK_ORANGE_COLOR = Color(0xFFE07312);
+const Color RED_COLOR = Color(0xFFEB5757);
+
+/// Widget Background Colors
+const Color RED_BACKGROUND_COLOR = Color.fromRGBO(255, 204, 204, 1);
+const Color ORANGE_BACKGROUND_COLOR = Color.fromRGBO(255, 230, 204, 1);
+const Color YELLOW_BACKGROUND_COLOR = Color.fromRGBO(255, 255, 204, 1);
+const Color LIGHT_GREEN_BACKGROUND_COLOR = Color.fromRGBO(230, 255, 204, 1);
+const Color DARK_GREEN_BACKGROUND_COLOR = Color.fromRGBO(204, 255, 204, 1);

packages/smooth_app/lib/helpers/attributes_card_helper.dart

@@ -17,12 +17,12 @@ Widget getAttributeDisplayIcon(final Attribute attribute) => Padding(
       padding: const EdgeInsets.only(right: VERY_SMALL_SPACE),
       child: _attributeMatchComparison(
         attribute,
-        const Icon(CupertinoIcons.question, color: Colors.red),
-        const Icon(Icons.lens, color: Colors.red),
-        const Icon(Icons.lens, color: Colors.orange),
-        const Icon(Icons.lens, color: Colors.orange),
-        const Icon(Icons.lens, color: Colors.green),
-        const Icon(Icons.lens, color: Colors.green),
+        const Icon(CupertinoIcons.question, color: RED_COLOR),
+        const Icon(Icons.lens, color: RED_COLOR),
+        const Icon(Icons.lens, color: LIGHT_ORANGE_COLOR),
+        const Icon(Icons.lens, color: LIGHT_ORANGE_COLOR),
+        const Icon(Icons.lens, color: LIGHT_GREEN_COLOR),
+        const Icon(Icons.lens, color: LIGHT_GREEN_COLOR),
       ),
     );
 

packages/smooth_app/lib/helpers/product_compatibility_helper.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/helpers/smooth_matched_product.dart';
 
 class ProductCompatibilityHelper {
@@ -11,11 +12,11 @@ class ProductCompatibilityHelper {
     switch (matchedProduct.status) {
       case null:
       case MatchedProductStatus.UNKNOWN:
-        return Colors.grey;
+        return GREY_COLOR;
       case MatchedProductStatus.NO:
-        return Colors.red;
+        return RED_COLOR;
       case MatchedProductStatus.YES:
-        return Colors.green;
+        return LIGHT_GREEN_COLOR;
     }
   }
 

packages/smooth_app/lib/helpers/score_card_helper.dart

@@ -2,22 +2,23 @@ import 'package:flutter/material.dart';
 import 'package:openfoodfacts/model/Attribute.dart';
 import 'package:openfoodfacts/model/KnowledgePanel.dart';
 import 'package:smooth_app/cards/data_cards/score_card.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/helpers/attributes_card_helper.dart';
 
 Color getBackgroundColor(CardEvaluation evaluation) {
   switch (evaluation) {
     case CardEvaluation.UNKNOWN:
-      return const Color.fromARGB(0xff, 0xEE, 0xEE, 0xEE);
+      return GREY_COLOR;
     case CardEvaluation.VERY_BAD:
-      return const HSLColor.fromAHSL(1, 0, 1, .9).toColor();
+      return RED_BACKGROUND_COLOR;
     case CardEvaluation.BAD:
-      return const HSLColor.fromAHSL(1, 30, 1, .9).toColor();
+      return ORANGE_BACKGROUND_COLOR;
     case CardEvaluation.NEUTRAL:
-      return const HSLColor.fromAHSL(1, 60, 1, .9).toColor();
+      return YELLOW_BACKGROUND_COLOR;
     case CardEvaluation.GOOD:
-      return const HSLColor.fromAHSL(1, 90, 1, .9).toColor();
+      return LIGHT_GREEN_BACKGROUND_COLOR;
     case CardEvaluation.VERY_GOOD:
-      return const HSLColor.fromAHSL(1, 120, 1, .9).toColor();
+      return DARK_GREEN_BACKGROUND_COLOR;
   }
 }
 
@@ -28,17 +29,17 @@ Color getBackgroundColorFromAttribute(Attribute attribute) {
 Color getTextColor(CardEvaluation evaluation) {
   switch (evaluation) {
     case CardEvaluation.UNKNOWN:
-      return const Color.fromARGB(1, 75, 75, 75);
+      return PRIMARY_GREY_COLOR;
     case CardEvaluation.VERY_BAD:
-      return const Color.fromARGB(1, 235, 87, 87);
+      return RED_COLOR;
     case CardEvaluation.BAD:
-      return const Color.fromARGB(1, 242, 153, 74);
+      return LIGHT_ORANGE_COLOR;
     case CardEvaluation.NEUTRAL:
-      return const Color.fromARGB(255, 149, 116, 0);
+      return DARK_YELLOW_COLOR;
     case CardEvaluation.GOOD:
-      return const Color.fromARGB(1, 133, 187, 47);
+      return LIGHT_GREEN_COLOR;
     case CardEvaluation.VERY_GOOD:
-      return const Color.fromARGB(1, 3, 129, 65);
+      return DARK_GREEN_COLOR;
   }
 }
 

packages/smooth_app/lib/helpers/ui_helpers.dart

@@ -2,6 +2,7 @@
 import 'package:flutter/material.dart';
 import 'package:openfoodfacts/model/Attribute.dart';
 import 'package:openfoodfacts/model/KnowledgePanel.dart';
+import 'package:smooth_app/generic_lib/design_constants.dart';
 
 /// Main attributes, to be displayed on top
 const List<String> SCORE_ATTRIBUTE_IDS = <String>[
@@ -35,12 +36,12 @@ Color? getTextColorFromKnowledgePanelElementEvaluation(Evaluation evaluation) {
       // Use default color for unknown.
       return null;
     case Evaluation.AVERAGE:
-      return Colors.grey;
+      return GREY_COLOR;
     case Evaluation.NEUTRAL:
-      return Colors.orange;
+      return DARK_ORANGE_COLOR;
     case Evaluation.BAD:
-      return Colors.red;
+      return RED_COLOR;
     case Evaluation.GOOD:
-      return Colors.green;
+      return DARK_GREEN_COLOR;
   }
 }

packages/smooth_app/lib/pages/user_preferences_attribute_group.dart

@@ -8,7 +8,6 @@ import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/pages/abstract_user_preferences.dart';
 import 'package:smooth_app/themes/smooth_theme.dart';
 import 'package:smooth_app/widgets/attribute_button.dart';
-import 'package:smooth_app/widgets/attribute_helper.dart';
 
 /// Collapsed/expanded display of an attribute group for the preferences page.
 class UserPreferencesAttributeGroup extends AbstractUserPreferences {

packages/smooth_app/lib/widgets/attribute_button.dart

@@ -21,9 +21,9 @@ class AttributeButton extends StatelessWidget {
   };
 
   static const Map<String, Color> _colors = <String, Color>{
-    PreferenceImportance.ID_NOT_IMPORTANT: Color(0xFF666666),
-    PreferenceImportance.ID_IMPORTANT: Colors.blue,
-    PreferenceImportance.ID_MANDATORY: Colors.red,
+    PreferenceImportance.ID_NOT_IMPORTANT: PRIMARY_GREY_COLOR,
+    PreferenceImportance.ID_IMPORTANT: PRIMARY_BLUE_COLOR,
+    PreferenceImportance.ID_MANDATORY: RED_COLOR,
   };
 
   @override

packages/smooth_app/lib/widgets/attribute_helper.dart

@@ -1,5 +0,0 @@
-import 'package:flutter/material.dart';
-
-// Common values and methods for attribute display
-
-const MaterialColor WARNING_COLOR = Colors.deepOrange;