fleet/frontend/components/MainContent/_styles.scss
Gabriel Hernandez e07313c7de
Add UI banner when VPP token is about to expire/has expired (#20734)
relate to #19691

Adds a UI banner that conditionally shows on every page (excluding my
device page) if the VPP token that was uploaded is within 30 days of
expiring. It will also show a warning banner if the token has already
expired.

**Token about to expire:**


![image](https://github.com/user-attachments/assets/f82a6cf5-405a-4911-87fe-1a354bfadee3)

**Token has expired:**


![image](https://github.com/user-attachments/assets/87bc51b9-f948-4d5b-835a-ff81116b0fa1)

- [x] Changes file added for user-visible changes in `changes/`,
`orbit/changes/` or `ee/fleetd-chrome/changes`.
- [ ] Added/updated tests
- [c] Manual QA for all new/changed functionality
2024-07-26 15:39:27 +01:00

20 lines
604 B
SCSS

.main-content {
padding: $pad-xlarge;
background-color: $core-white;
flex-grow: 1;
// overflow: auto allows for horizontal scrolling
// of the main-content when there is a banner. (e.g. sandbox mode)
// Without it the main content pushes the banner off the page.
overflow: auto;
> :not(.main-content--animation-disabled) {
animation: fade-in 250ms ease-out;
}
&__warning-banner {
margin-bottom: $pad-large;
// TODO: figure out if sticky styling is needed?
position: sticky; // Needed for settings page scroll
z-index: 4; // Needed for settings page scroll
}
}