Transportation Component Icon and title color is not compatible with background color.

[PrabeshPP]

What

• Icon of a truck and the title color in Transportation Component does not look good with the present white background color.

Screenshot/Mockup/Before-After

[PrabeshPP]

If anyone is already working on this issue ,do let me know.

[teolemon]

I believe this is something we set partly client and server side. I'd like to have @stephanegigandet 's input before changing anything there.

[stephanegigandet]

Here are the colors we currently use on the Open Food Facts website, based on colors selected by Tim:

$grade-a-color: #219653;
$grade-b-color: #60ac0e;
$grade-c-color: #c88f01;
$grade-d-color: #e07312;
$grade-e-color: #eb5757;
$grade-unknown-color: #4f4f4f;

$evaluation-good-color: #219653;
$evaluation-average-color: #f2994a;
$evaluation-bad-color: #eb5757;
$evaluation-unknown-color: #4f4f4f;

[PrabeshPP]

@teolemon currently the evaluation for the transportation is given neutral for the onboarding ,and the color for the neutral is GREY_COLOR in knowledge_panel_title_card.dart,which I think is the reason for the transportation icon not being compatible with current background.

 "manufacturing_place": {
        "elements": [{
          "element_type": "map",
          "map_element": {
            "pointers": [{
              "geo": {
                "lat": 48.7951886,
                "lng": 2.4871653
              }
            }]
          }
        }],
        "evaluation": "neutral",
        "expanded": true,
        "level": "info",
        "title_element": {
          "icon_color_from_evaluation": true,
          "icon_url": "https://static.openfoodfacts.org/images/icons/dist/transportation.svg",
          "subtitle": "SAINT-MAUR-DES-FOSSES - France",
          "title": "Manufacturing or processing place"
        },
        "topics": ["environment"]
      },

Color? _getColorFromEvaluation(Evaluation evaluation) {
    switch (evaluation) {
      case Evaluation.BAD:
        return RED_COLOR;
      case Evaluation.NEUTRAL:
        return GREY_COLOR;
      case Evaluation.AVERAGE:
        return LIGHT_ORANGE_COLOR;
      case Evaluation.GOOD:
        return LIGHT_GREEN_COLOR;
      case Evaluation.UNKNOWN:
        return null;
    }
  }

[bhattabhi013]

Hi,
I tried working on this issue and found that the text and icon color depends on the evaluation label in smooth_app\assets\onboarding\sample_knowledge_panels.json file.

[monsieurtanuki]

@bhattabhi013 Not exactly: the asset file you're referring to is the fallback file, if you don't have internet

/// Was computed from [downloadDataString] in en_US
///
/// Something like https://world.openfoodfacts.org/api/v2/product/093270067481501/?fields=knowledge_panels&lc=en&cc=US
@override
String getAssetPath() => 'assets/onboarding/sample_knowledge_panels.json';

[bhattabhi013]

Thanks for clearing the doubt @monsieurtanuki, should I do it this way?
case Evaluation.NEUTRAL: return DARK_ORANGE_COLOR;

Here is the final outcome:

[monsieurtanuki]

@bhattabhi013 I have no added value in color choice. What I can suggest is that:

• colors are supposed to be helpful to distinguish different levels - that's not good enough for accessibility but that's another story
• icons and texts are supposed to be visible in both mode, dark and light
• so far the "unknown" case is dealt with null (= default) color
• which can be good for text (which has a decent default color), but not for white svg icons
• the idea would be to set the icon color explicitly to the default text color (probably something like onBackground)

[bhattabhi013]

Hi @monsieurtanuki,
I've made the changes suggested by you and created iconColorFromEvaluation to handle icon color on a dark theme.