fleet/frontend/components/EmptyTable/_styles.scss
Jacob Shandling 333674b051
UI – Host query report page (#15511)
## Addresses second major part of #15011  (item 3) – Host query report

_Note for reviewers: The most important files here are:_
- HostQueryReport.tsx
- HQRTable.tsx
- HQRTableConfig.tsx

_The rest are associated API services, interfaces, helpers, routes,
styles, and miscellanious code improvements I made along the way._

____________

### See linked issue for enumeration of feature-related tasks

<img width="1230" alt="Screenshot 2023-12-08 at 4 23 50 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/4ae4b41b-9209-4afa-ae50-8844d01ff8fd">

<img width="1230" alt="collecting"
src="https://github.com/fleetdm/fleet/assets/61553566/061ac2bc-899f-4b29-91ba-36ebecf5ce58">

<img width="1230" alt="Screenshot 2023-12-08 at 4 24 39 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/f8b25e01-fe3b-47e6-b980-eba9538b1a01">

<img width="1230" alt="Screenshot 2023-12-08 at 4 25 01 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/46360274-8500-494c-8fb7-3a1d45347ce0">

Re-routes to host details > queries if:
- query reports are globally disabled:

https://github.com/fleetdm/fleet/assets/61553566/ac67da8c-57bc-4d9b-96be-daf3b198e704

- query has `Discard data` enabled:

https://github.com/fleetdm/fleet/assets/61553566/b797dd24-9893-4360-bf40-b80298848864

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
2023-12-08 16:54:24 -08:00

70 lines
1.3 KiB
SCSS

.empty-table {
&__container {
display: flex;
flex-direction: column;
align-items: center;
margin: 96px auto $pad-large; // 96px to top of div
max-width: 450px; // standard empty state width
gap: $pad-medium; // 16px between image, text, and buttons
}
&__inner {
display: flex;
flex-direction: column;
gap: $pad-small; // 4px from header to info text
h3,
h3 a {
text-align: center;
font-size: $small;
font-weight: $bold;
margin: 0;
}
ul {
margin: 0;
padding: 0;
color: $core-fleet-black;
list-style: none;
li {
&::before {
content: "";
color: $core-vibrant-blue;
margin-right: $pad-medium;
}
}
}
}
&__info {
max-width: 350px;
}
&__info,
&__additional-info {
line-height: 1.5;
text-align: center;
color: $core-fleet-blue;
font-size: $x-small;
margin: 0;
}
&__cta-buttons {
display: flex;
justify-content: center;
gap: $pad-medium; // 16px between buttons
}
}
// more flexible styling for empty tables within tabs
.react-tabs {
.empty-table {
&__container {
align-self: center;
justify-content: center;
margin-bottom: 20px;
min-height: 155px;
max-width: none;
}
}
}