fix: New UI for the food preferences

[chetanr25]

What

Refactored Food Preferences UI

Changes

• Made UI improvements in the Food Preferences screen and wrapped certain elements with Card() for better layout consistency.
• Converted AttributeButton to a StatefulWidget in packages/smooth_app/lib/widgets/attribute_button.dart. Edit mode can now be toggled by pressing the edit option, and once an option is selected from the list, other options are hidden.
• Wrapped widgets with Card() in the Food Preferences onboarding screen to prevent ColorBox from overwriting the background color of AttributeButton.
• Added two optional named parameters to getAttributeDisplayIcon in packages/smooth_app/lib/helpers/attributes_card_helper.dart to reuse the same icon in Food Preferences without code duplication. Implemented the changes in packages/smooth_app/lib/widgets/attribute_button.dart
• Updated section headings UI in packages/smooth_app/lib/pages/preferences/attribute_group_list_tile.dart.

Screenshot

Food preferences screen	Onboarding Food preferences screen

Demo video food preferences screen

food_preferences.mp4

Demo video onboarding screen

onboarding.mp4

Fixes bug(s)

• Fixes: New UI for the food preferences #6459

Part of

• New UI for the food preferences #6459

[codecov-commenter]

Codecov Report

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

Project coverage is 5.83%. Comparing base (4d9c7fc) to head (da91c0d).
Report is 843 commits behind head on develop.

Files with missing lines	Patch %	Lines
...kages/smooth_app/lib/widgets/attribute_button.dart	0.00%	68 Missing ⚠️
.../preferences/user_preferences_attribute_group.dart	0.00%	19 Missing ⚠️
...smooth_app/lib/helpers/attributes_card_helper.dart	0.00%	4 Missing ⚠️
...p/lib/pages/preferences/user_preferences_food.dart	0.00%	2 Missing ⚠️
...th_app/lib/pages/product/attribute_extensions.dart	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6466      +/-   ##
==========================================
- Coverage     9.54%   5.83%   -3.71%     
==========================================
  Files          325     498     +173     
  Lines        16411   29865   +13454     
==========================================
+ Hits          1567    1744     +177     
- Misses       14844   28121   +13277     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[chetanr25]

@g123k

As @monsieurtanuki suggested in #6459 (comment)

Shall I commit these changes? Let me know which version looks better

	previous version

[g123k]

Thanks for your PR.

Before checking your code, please implement what's in the mockup:

• Help icon VS info
• Edit icon should be aligned with the Help icon…
• Wrong color for the Checkbox
• Titles in bold…

[chetanr25]

Let me know if i have to make any changes to this.

[g123k]

Let me know if i have to make any changes to this.

Still KO.
Please check the link.

• Rounded corners of the card are incorrect (top and bottom are different)
• There is a dot before titles
• Values (eg: mandatory) must be aligned with the corresponding title…

[chetanr25]

Understood, I am working on that.

[chetanr25]

Please suggest any changes if needed. I have committed the latest changes

Food preferences screen	Onboarding screen

[g123k]

The dot before the titles is still KO.
Once again, please have a deep look at the mockup.

[teolemon]

Note: This dot is also used in other cards in the app, so you can reuse it if you're not already doing it.

[chetanr25]

Thanks for pointing that out!
I will work on this.

[g123k]

Thanks for pointing that out! I will work on this.

Any update on this?
If you can't work on this PR, please let us know.

[chetanr25]

Apologies for the delay. I’m working on it and will update the PR soon.

[chetanr25]

• Reduced white circle size to match UI design
• Rounded corners for the first tile in AttributeButton
• Added optional named params isFirst and isLast to control corner rounding in packages/smooth_app/lib/widgets/attribute_button.dart
• Increased radio button size as per design

The dot from the Knowledge panel didn’t match the UI for this screen, so I used circle icon instead.
Let me know if the approach is correct or not.

[chetanr25]

Here is the preview of the PR