**Context**

An extension of the work done in <mention class="mention" data-id="66122" data-type="work_package" data-text="##66122">##66122</mention>.

**Acceptance criteria**

* Replace contents of the project status with Primer components:

* StatusButton, with a dropdown (similar to meetings)

* Description (long text)

* Begin of the insertionThe status can be changed directly viaEnd of the insertion Begin of the deletion OnEnd of the deletion the Begin of the deletion **overview** tab, there is a pencil icon in the header which is an invisible iconEnd of the deletion button Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionTheEnd of the insertion Begin of the deletion When clicking that, the statusEnd of the deletion description Begin of the deletion will switch to CKEditor edit mode (similar to meeting notes), with two actions:

* Save (primary)

* Cancel (secondary)

* On the **dashboard** tab, thereEnd of the deletion is Begin of the insertionnot editable (will be done in ##67690)

End of the insertion Begin of the deletion a three dots menu.

End of the deletion * Begin of the deletion Clicking on the three dots, will open a menu with:

* an option to edit the status description

* End of the deletion When Begin of the deletion clicking that, the status description will switch to CKEditor edit mode (similar to meeting notes) with two actions:

* Save (primary)

* Cancel (secondary)

* an option to remove the widget

* WhenEnd of the deletion lacking the permission:

* the StatusButton button can be read-only to some users (no dropdown) Begin of the deletion

* the description text can also be read-only to some users (no pencil button or option in the menu)End of the deletion


Begin of the deletion **Screens**

Display mode on the overview tab:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:454px;" src="/api/v3/attachments/785802/content">

Display mode on the dashboard tab:

<img class="image_resized op-uc-image op-uc-image_inline" style="width:457px;" src="/api/v3/attachments/779558/content">

Edit edit mode of the description field:

<figure class="image image_resized op-uc-figure" style="width:281px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/785764/content"></div></figure>

End of the deletion <br>