bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-10-27 01:41:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

Style device grid with Quartz theme

Browse Source
This commit is contained in:
Nicole Rappe
2025-10-16 00:56:15 -06:00
parent 278f00e396
commit c9caca2f6e
1 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
Data/Server/WebUI/src/Devices/Device_List.jsx
View File

@@ -42,6 +42,8 @@ const myTheme = themeQuartz.withParams({
headerFontSize: 14, headerFontSize: 14,
}); });
const themeClassName = myTheme.themeName || "ag-theme-quartz";
function formatLastSeen(tsSec, offlineAfter = 300) { function formatLastSeen(tsSec, offlineAfter = 300) {
if (!tsSec) return "unknown"; if (!tsSec) return "unknown";
const now = Date.now() / 1000; const now = Date.now() / 1000;
@@ -196,6 +198,11 @@ export default function DeviceList({
const [repoHash, setRepoHash] = useState(null); const [repoHash, setRepoHash] = useState(null);
const lastRepoFetchRef = useRef(0); const lastRepoFetchRef = useRef(0);
const gridWrapperClass = useMemo(
() => `${themeClassName} borealis-device-grid`,
[themeClassName]
);
const fetchLatestRepoHash = useCallback(async (options = {}) => { const fetchLatestRepoHash = useCallback(async (options = {}) => {
const { force = false } = options || {}; const { force = false } = options || {};
const now = Date.now(); const now = Date.now();
@@ -1074,13 +1081,38 @@ export default function DeviceList({
</Box> </Box>
<Box sx={{ px: 2, pb: 2 }}> <Box sx={{ px: 2, pb: 2 }}>
<Box <Box
className={gridWrapperClass}
sx={{ sx={{
width: "100%", width: "100%",
height: 600, height: 600,
minHeight: 400, minHeight: 400,
"& .ag-root-wrapper": { bgcolor: "#111822",
border: "1px solid #2c3645",
borderRadius: 1, borderRadius: 1,
"& .ag-root-wrapper, & .ag-header, & .ag-cell": {
fontFamily: '"IBM Plex Sans", sans-serif',
},
"& .ag-root-wrapper": {
borderRadius: 1,
border: "1px solid rgba(255, 255, 255, 0.08)",
boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.35)",
},
"& .ag-header": {
borderBottom: "1px solid rgba(255, 255, 255, 0.1)",
},
"& .ag-row": {
borderColor: "rgba(255, 255, 255, 0.04)",
},
"& .ag-row-hover": {
backgroundColor: "rgba(88, 166, 255, 0.08) !important",
},
"& .ag-row-selected": {
backgroundColor: "rgba(255, 166, 255, 0.12) !important",
},
"& .ag-header-cell-text": {
fontWeight: 600,
},
"& .ag-paging-panel": {
borderTop: "1px solid rgba(255, 255, 255, 0.08)",
}, },
}} }}
> >