Testing how pinned vs unpinned food items look in the meal log, and how pin/unpin actions work. Each option has independent state — pin and unpin items to test the interactions.
Option B: Coral Accent Row + Toggle
Pinned items get a coral left border, pink tint background, and a "staple" badge. Pin icon is always visible with a coral pill bg when pinned — acts as a clear toggle. Unpinned items show the pin icon on hover only. Easiest to distinguish at a glance.
Staple
🥣 Greek Yogurt with Honey
283 cal48g P
☀️Breakfast
1138 cal
Greek Yogurt with Honeystaple
8:30 AM
283 cal
48g P
Overnight Oats
8:30 AM
350 cal
12g P
Protein Shakestaple
180 cal
30g P
Banana~
105 cal
1g P
Scrambled Eggs (3)
9:00 AM
220 cal
18g P
Action Log
Interact with the items above — pin/unpin actions will appear here.
Current Pinned Staples (2/5)
Greek Yogurt with HoneyProtein Shake
Test Notes
• Can you instantly tell which items are pinned vs not?
• Is it obvious how to unpin something?
• Does the pin/unpin actually toggle correctly?
• On mobile — are touch targets big enough?
• Does the visual weight of pinned indicators feel right (not too loud, not too subtle)?
• Greek Yogurt and Protein Shake start pinned. Try unpinning one, then re-pinning it.