**As** an agile user
**I want to** have the sprints on the "backlog and sprints" page styled clearly and pleasingly
**so that** they are easy to work with. 

**Acceptance criteria**

* The Begin of the insertionsprint container headersEnd of the insertion Begin of the deletion sprintsEnd of the deletion are restyled. See Figma. Sprint container header shows:

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

* Begin of the insertionInEnd of the insertion Begin of the deletion sprint name

* number of wp withinEnd of the deletion the Begin of the insertionfirst row:

End of the insertion Begin of the deletion sprint

End of the deletion * sprint Begin of the insertionname

End of the insertion Begin of the deletion status

End of the deletion * Begin of the deletion totalEnd of the deletion number of Begin of the insertionWPsEnd of the insertion Begin of the deletion story pointsEnd of the deletion within the sprint Begin of the insertionas a pill

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionDepending on the status:

End of the insertion Begin of the deletion start and end date

End of the deletion * Begin of the insertionFor an &quot;in planning&quot; sprint: AEnd of the insertion Begin of the deletion context menu

* End of the deletion &quot;Start sprint&quot; button (not just &quot;start&quot;) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * icon for the button: [https://primer.style/octicons/icon/rocket-16/](https://primer.style/octicons/icon/rocket-16/) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionThe button is disabled same as before ifEnd of the insertion Begin of the deletion For active sprintsEnd of the deletion there is Begin of the insertionanother active sprint or if the dates are missing.

* For an &quot;active&quot; sprint: AEnd of the insertion &quot;Complete sprint&quot; button (not just &quot;complete&quot;) Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * flag icon for the button \[open\] no flag icon within the primer. Can we use any other library or a custom icon similar to this one? Begin of the insertion

<imgEnd of the insertion Begin of the deletion

 <imgEnd of the deletion class="image_resized op-uc-image op-uc-image_inline" style="width:35px;" src="/api/v3/attachments/920685/content"> Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Would that might be an option?  Begin of the insertion
End of the insertion Begin of the deletion
End of the deletion <img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/920695/content"> Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionThe context menu (same as before)

* InEnd of the insertion Begin of the deletion There is no edit / pencil button. Users can editEnd of the deletion the Begin of the insertionsecond row

* End of the insertion sprint Begin of the insertionstatus

* total number of story points withinEnd of the insertion Begin of the deletion only viaEnd of the deletion the Begin of the insertionsprint

End of the insertion Begin of the deletion context menu.

End of the deletion * Begin of the insertionstart and end date

* End of the insertion The Begin of the insertionbackgroundEnd of the insertion Begin of the deletion StartEnd of the deletion and Begin of the insertionmargin/paddingEnd of the insertion Begin of the deletion finish buttonEnd of the deletion is Begin of the insertionupdated accordingEnd of the insertion Begin of the deletion movedEnd of the deletion to Begin of the insertionFigma

* The line separatingEnd of the insertion the Begin of the insertionheader fromEnd of the insertion Begin of the deletion proper position. RemoveEnd of the deletion the Begin of the insertionlist is removed

* The backlog bucket container headers are restyled
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/920720/content">

* Only a single row row:

* Bucket name

* number of WPs within the bucket as a pill

* The context menu (same as before) (not depictedEnd of the insertion Begin of the deletion makeshift Start/Finish Sprint action item implementedEnd of the deletion in Begin of the insertionthe Figma specification)

* The background and margin/padding is updated same as for sprints

* The line separating the header from the list is removed

* The inbox container header is restyled
<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/920719/content">

* Only a single row:

* The name &quot;Inbox&quot; is displayed

* number of WPs within the inbox as a pill

* The background and margin/padding is updated same as for sprints

* The line separating the header from the list is removed

* Sprints can no longer be folded:

* The icon disappears from the header

* The setting is removed from the user settings


**Technical notes**

* A migration needs to remove the existing values for the folding preferences from the database to avoid errors when saving the remaining user preferences.End of the insertion Begin of the deletion <mention class="mention" data-id="72942" data-type="work_package" data-text="##72942">##72942</mention>End of the deletion


**Out of scope**

* Restyling of the work package card. Done in <mention class="mention" data-id="73089" data-type="work_package" data-text="###73089">###73089</mention> Begin of the insertion

* There is no edit / pencil button (wrong in the Figma file). Users can edit the sprint only via the context menu.End of the insertion


<br>

<br>

<br>