Acceptance criteria:

General

• Apply new theme & styles based on this mockup https://zpl.io/an9QmBr

Search field styles & behavior

• Replace placeholder text with "Find…"
• Placeholder text color is dark-grey #cacaca
• Input text color is black #232323
• Hide placeholder text as soon as user clicks into search field
• Show delete icon only after user started to type

Search results styles

• Make sure all UI components are styled as in mock
  • title space, paddings and margins
  • text styles (sizes, colors, etc)
  • table styles: columns, rows
• Re-order and re-size columns as in mock
• Add icons (instead of text) in the type columns as in mock
• Style & fix alignment of full text search snippet and position it under title as in mock

Find bar animation & behavior

Open find bar

• Find bar search results slide down (animation) to bottom-border = 77px, when
  • clicking into search field
  • clicking on magnify icon
• Tabsheet and Content also slide down and get a dark overlay
• If available screen space is not enough for search results, make them scrollable within dedicated area
• if available screen space is plenty for search results, fill remaining space to the "footer" with white color
  • If search results take time to come, slide down immediately anyway with white results curtain. 

Close find bar

• Find bar search results slide up (animation), when
  • clicking on a search result
  • clicking on the magnify icon (works like a toggle button)
  • clicking on the dark overlay in the footer
  • writing a command such as "open assets app"
• Tabsheet and Content slide back up and dark overlay is removed, taking you back to the app that was overlayed.
• If find bar is closed, remove/delete search term (this needs to be tested if it makes sense to the user)

Responsive find bar

• Based on 3 screen resolutions…
  • Tablet: 1024px (970px)
  • Desktop: 1440px (1312px)
  • HD: 1920px (1825px)

• …there are 2 breakpoints
  • BP 1: 1200px
  • BP 2: 1600px

• The title space height changes at the BPs
• The font size, that shows amount of results, changes at the BPs
• see mocks here
• 970px https://zpl.io/aMvnmXK
• 1312px https://zpl.io/an9QmBr
• 1825px https://zpl.io/VYRnA0E