Unsuitable Meal Card Update

[samikabhatkar-web]

Summary

• Added an amber tint to food cards that conflict with a user's dietary preferences or allergies (this replaces the original "grayed" out effect which used the "opacity-70" class.
• I had to do this through the sx props instead of a Tailwind class. This is because MUI takes preference for component styling from CSS over Tailwind classes, so the Tailwind background color would be overridden if I implemented it that way.
  "rgba(245, 158, 11, 0.2)) instead of Tailwind's bg-amber-500/20"

Changes

• Updated food-card.tsx and popular-dish-card.tsx

Testing Instructions

• Set any kind of preferences (allergies, dietary restrictions, etc) and ensure that the food card returns "orange-grayed out".

Closes #735

[TheAbubakrAbu]

Looks good overall, nice job!

However, I noticed two small differences between this and the Figma:

• For light mode the tint is perfect. Nice job. But for dark mode there is a different tint which is: rgba(255, 183, 103, 0.21).

• When you use opacity: 0.7 to the entire card, it makes the text, icons, and ratings look much more faded than in the design as in the Figma, the background is tinted, but the content remains readable and doesn't have opacity.

Nice job though!