In <mention class="mention" data-id="41814" data-type="work_package" data-text="#41814">#41814</mention> a banner section was introduced which needs to be filled with life

**Acceptance criteria**

* The banner can be in two different colours (or not existent at all)
* There can be two types of banners:
* An **information banner** has a blue background
* A **warning banner**  has an orange background
* There are 4 identified cases in which this banner is displayed:
* **Warning:** Begin of the insertion&quot;ManualEnd of the insertion Begin of the deletion ManualEnd of the deletion scheduling Begin of the insertionenabled,End of the insertion Begin of the deletion is enabled soEnd of the deletion all Begin of the deletion existing work packageEnd of the deletion relations Begin of the insertionignored.&quot;
_(ThisEnd of the insertion Begin of the deletion are ignored. (ThisEnd of the deletion is only visible when the work package in question has relations; a manually scheduled work package with no relations will not show this Begin of the insertionbanner)._End of the insertion Begin of the deletion banner).End of the deletion
* **Warning:** Begin of the insertion&quot;Changing theseEnd of the insertion Begin of the deletion Changing theEnd of the deletion dates Begin of the deletion of this work packageEnd of the deletion will Begin of the insertionaffectEnd of the insertion Begin of the deletion change theEnd of the deletion dates of related work Begin of the insertionpackages.&quot;End of the insertion Begin of the deletion packagesEnd of the deletion
* **Information:** Begin of the insertion&quot;AvailableEnd of the insertion Begin of the deletion AvailableEnd of the deletion start and finish dates are limited by Begin of the insertionrelations.&quot;End of the insertion Begin of the deletion relations.End of the deletion
* **Information:** Begin of the insertion &quot;Automatically scheduled. DatesEnd of the insertion Begin of the deletion The datesEnd of the deletion are Begin of the deletion automaticallyEnd of the deletion derived from Begin of the insertionrelations.&quot;End of the insertion Begin of the deletion relations (and date input is disabled).End of the deletion
* I created a small [diagram for the logic](https://www.figma.com/file/KYn7UFJIoKZfq7MOPEznEe/Banner-logic?node-id=0%3A1)
* Structure (may already be done in <mention class="mention" data-id="41814" data-type="work_package" data-text="#41814">#41814</mention> )
* an icon
* two-line message, the first in bold
* a &quot;Show relations&quot; button that, when clicked, opens up a GANTT preview in a new window
* This is a filtered work package list (table view + GANTT view) showing only work packages related to the &quot;main&quot; work package (the one for which the GANTT preview was requested).
* The mobile date picker displays a simplified version of the banner:
* Without the left-side icon
* Without the second line of text (only the first line is displayed)
* With the usual &quot;Show relations&quot; button.
*


**Default**

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32095/content"></div></figure>

**Mobile**

<figure class="image op-uc-figure" style="width:50%;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/32108/content"></div></figure>