Search form design updates

[vanderburgt]

Several design updates in response to testing outcomes.

Design

Figma: https://www.figma.com/file/Tcv7xuwikoVW0U8c0pqDDq/Graphics?type=design&node-id=898-206&mode=design&t=Tp4V5yymIoBCSLQi-4

Changes

• Single block for both the search fields and 'create alert' fields (to focus user attention)
• Added field labels (replacing the in-field icons which were confusing)
• Added help texts to search fields (for later testing)
• Made query and locations fields full-width (related to: Vertically expanding full-width search fields #123)
• Moved frequency select field to 'create alert' fields (to cope with spam concerns)
• Added help text about unsubscribe (to cope with spam concerns)

Screencast

124.mov

[vanderburgt]

Great! ✨

Some points of attention:

• Form bg should have no drop shadow
• Form background should be #F9F9FA (both parts)
• Check form margins (see screenshot A below)
• Check the select input field margins (see screenshot B below) and font size (inherit from body)
• When the location input field (Zoekgebied) has more than two rows the top and bottom margins reduce. They should remain 11px or equivalent.

Screenshots

Screenshot A

Screenshot B

[vanderburgt]

Only item 2 is done.

• Form bg should have no drop shadow
• Form background should be #F9F9FA (both parts)
• Check form margins (see screenshot A below)
• Check the select input field margins (see screenshot B below) and font size (inherit from body)
• When the location input field (Zoekgebied) has more than two rows the top and bottom margins reduce. They should remain 11px or equivalent.

[vanderburgt]

See comment above, plus:

• Dropdown arrow (chevron) of the frequency select field should be removed
• X icon in location select field should be removed

[vanderburgt]

See comments above, plus:

• - [ ] For the "Meer opties" checkboxes, suggested css value: "margin: 10px 10px 10px 0px;"
  

[breyten]

Regarding location select on multiple rows: I can get it correctly on either one row or multiple rows, but not both at the same time.