[#1791] Update design for case statuses

[jiromaykin]

Major change issue: https://taiga.maykinmedia.nl/project/open-inwoner/task/1791

Final design: https://www.figma.com/file/iKGhWhstaLIlFSaND2q7cE/OIP---Designs-(new)?type=design&node-id=67%3A4147&mode=design&t=Dux8ArfAUpVuR1Ls-1

• What makes this complicated: a status can be 'current' and then needs to be 'open', but... the final status is also sort of 'current' but is not allowed to be part of the accordion; endstatuses should just be shown as 'open' visually but should not have a toggle or a caret-icon;
• the final 'visual' status in the frontend can either be the semi-static 'future' status or the final status that is also basically current. Past statuses are shown as 'completed' and should be part of the accordion.
• Each current status can have a configurable color.
• The final active status after case has ended has a default Info color.

Additionally:

• status colors, and exceptions inside exceptions in these colors
• margins between components
• disable button for contact-form

For testing: use BSN 111111110,

1. Aanvraag with current active status (+ 1 past completed status) and future status: http://127.0.0.1:8000/mijn-aanvragen/1229a0d7-e52a-47f2-a524-7a9dca94d1bf/status/
2. Aanvraag finished (with multiple completed past statuses and final) http://127.0.0.1:8000/mijn-aanvragen/054847a7-1ccb-4cd4-8768-1fff29f08cf6/status/

[codecov-commenter]

Codecov Report

Merging #821 (28e76a9) into develop (88ae2db) will increase coverage by 0.02%.
The diff coverage is 93.02%.

@@             Coverage Diff             @@
##           develop     #821      +/-   ##
===========================================
+ Coverage    93.08%   93.10%   +0.02%     
===========================================
  Files          749      751       +2     
  Lines        25914    25947      +33     
===========================================
+ Hits         24123    24159      +36     
+ Misses        1791     1788       -3     

Files	Coverage Δ
...c/open_inwoner/cms/cases/tests/test_contactform.py	100.00% <100.00%> (ø)
src/open_inwoner/cms/cases/views/status.py	88.93% <100.00%> (+0.25%)	⬆️
...open_inwoner/components/templatetags/table_tags.py	97.95% <ø> (ø)
...ner/openzaak/migrations/0027_auto_20231101_1641.py	100.00% <100.00%> (ø)
...er/openzaak/migrations/0028_merge_20231101_1705.py	100.00% <100.00%> (ø)
src/open_inwoner/openzaak/models.py	98.56% <ø> (ø)
...rc/open_inwoner/openzaak/tests/test_case_detail.py	100.00% <100.00%> (ø)
src/open_inwoner/cms/cases/tests/test_htmx.py	20.47% <0.00%> (-0.50%)	⬇️

... and 1 file with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[alextreme]

Should be refactored in develop?

[jiromaykin]

@alextreme Do you mean there is an equivalent for this in Develop already? These values are part of Steven's commits on which I am relying to build the front-end, so I need them :-)

[alextreme]

@jiromaykin I mean that the objects.all() call is incorrect/inefficient, but this should have already been fixed on develop. The values should remain the same afaik

[pi-sigma]

Looking good for the most part. I find the spacing between statuses and toggle on mobile/tablet too big (see screenshot), but I'll leave the decision about this to you.

[alextreme]

@pi-sigma could you give this a final review? After that I'll merge Jiro's changes

[jiromaykin]

... the spacing between statuses and toggle on mobile/tablet too big (see screenshot), but I'll leave the decision about this to you.

Just some more info about this spacing: it looks too big now because you only see the date, but this is where in a new PR the 'Zaaktype statustype description field' will be added so it will look better with more text.