fix: 5145 - bold style for unknown ingredients in KP

[monsieurtanuki]

What

• Applied an ad-hoc bold CSS style to unknown ingredients in KP
• Example of html code for
  • a known ingredient: <span>raisins secs</span>
  • an unknown ingredient: <span class=\"text_info unknown_ingredient\">raisins de sultane</span>

Screenshots

Example on "raisins de sultane" for 5010477348678.

before	after

Fixes bug(s)

• Fixes: In the detail of ingredient analysis knowledge panel: unrecognized ingredients are not visible on mobile (visible in bold on the web app) #5145

Impacted files

• pubspec.lock: wtf
• pubspec.yaml: added a needed dependency to html (already implicitly there anyway because of flutter_widget_from_html_core)
• smooth_html_widget.dart: specific "bold" effect for css class name unknown_ingredient

[monsieurtanuki]

@jusdekiwi ping

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 0% with 3 lines in your changes are missing coverage. Please review.

Project coverage is 9.51%. Comparing base (4d9c7fc) to head (d0dca2f).
Report is 66 commits behind head on develop.

Files	Patch %	Lines
...smooth_app/lib/generic_lib/smooth_html_widget.dart	0.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5149      +/-   ##
==========================================
- Coverage     9.54%   9.51%   -0.03%     
==========================================
  Files          325     327       +2     
  Lines        16411   16557     +146     
==========================================
+ Hits          1567    1576       +9     
- Misses       14844   14981     +137     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[jusdekiwi]

That would be very useful!!! Will it work for dark mode as well?

[monsieurtanuki]

That would be very useful!!! Will it work for dark mode as well?

@jusdekiwi It works in dark mode too:

[jusdekiwi]

amazing! Thank you so much!

[teolemon]

I will approve. My slight concern is that this could be mistaken for an allergen, but worst case scenario, we change the name of the class, and it all disappears.

[monsieurtanuki]

Thank you @teolemon @jusdekiwi for your review and comments!

this could be mistaken for an allergen

Indeed, but "bold" was the initial requirement. Which other CSS style would you suggest?

worst case scenario, we change the name of the class, and it all disappears.

Indeed. The only solution would be for the server to provide the KP with an inline css, assuming that we're able to interpret it in flutter.