Acceptance criteria:

General

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

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-
  • superseeded by MGNLUI-4730 
• Tabsheet and Content also slide down and are covered by 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 with white color until you reach the "footer" 
  • 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)

(Added after 1st estimate, might need re-estimation)

Switching between find bar and app launcher:

• If find bar is open and user clicks on app launcher, slide app launcher in from the right
• If App launcher is open and user clicks on find bar, slide find bar in from the left

Animated mockup

• see attached