kobotoolbox / kpi / 16726115707

81%

master: 76%

push

github

feat(usageLimits): Add limit banners to new pages DEV-443 (#5937)

### 📣 Summary
This PR adds the service limits banner to the following views:
- Project summary
- Project form
- Project data
- Project settings (’general’ sub-section)

### 💭 Notes

To add the limits banner it took a different strategy for each view,
since all around the app the code is still missing some patterns.

**Form Summary:** It was needed to add a container for the banner and
separate the panels

**Form Landing:** Just adding the banner component worked nicely

**Form Data:** This is the most sensible one. Since there are a lot of
calculations already in place for the table and containers, I decided to
add the banner and rework the minimum possible the CSS for the tabele to
keep behaving as it should. There's also a small CSS 'hack' to remove
margins from the banner component. Not ideal, but the other option would
be a massive rework of the component, which is not fit for this PR.

**Form Settings:** Some CSS needed to be moved so the banner would fit
properly in the expected margins.

⚠️ There are some CSS and text changes when looking at the Figma design,
but changing the banner colors could also mean changing the global CSS
variables being used, so I decided to not change those. As for the
texts, I believe it's a matter for another task, if needed, taking in
account some specific definitions we would need to get from Product.

### 👀 Preview steps
1. ℹ️ have an account and a project
2. Navigate through the project views
3. Mock service usage data if needed
4. 🟢 Banner should be displayed properly, when needed, without breaking
any view

6388 of 10070 branches covered (63.44%)

24251 of 29868 relevant lines covered (81.19%)

1.6 hits per line