Description

This PR makes marketer's life easier by showing which kind of field something is, without having to edit it.

shows info about form fields at a glance when building them, as sometimes having no header for preview can't tell you which kind of field this is, or purpose

UX planning

Colors

Green: For addition or growth actions (e.g., adding points, multiplying values).
Red: For removal, reduction, or division actions (when representing a decrease).
Blue: For filling in, updating data, or neutral/configurable actions.
Neutral (Gray): Represents relationship or when no specific action is being performed.

Other aspects

• Features use filled icons to express active state, while resources (segments, emails etc) use lined icons
• The field type label uses a high contrast color to teach how your eyes must navigate through the list, always first to create a location pattern
• All icon-only icons have tooltips
• Required is always at the right of the container
• Labels with border indicate they're operational (links; available only for actions in the next PR from this series)
• Ensures no weird things keep visible when there are no visible labels
• Includes fallbacks for icons and custom objects

Before:

After:

📋 Steps to test this PR:

1. Open this PR on Gitpod or pull down for testing locally (see docs on testing PRs here)
2. Open Forms > New
3. Open Fields tab
4. Add absolutely all types of fields
5. Play with their configurable options
6. Check how they look on the list