Additional UI Changes for Scheduler

This commit is contained in:
2025-11-22 02:56:19 -07:00
parent 9995619eea
commit 584cc940e2

View File

@@ -3229,23 +3229,47 @@ const heroTiles = useMemo(() => {
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<Box sx={{ display: "flex", gap: 1 }}> <Tabs
{["scripts", "ansible", "workflows"].map((key) => ( value={compTab}
<Button onChange={(_, value) => setCompTab(value)}
key={key} TabIndicatorProps={{
size="small" style: {
variant={compTab === key ? "outlined" : "text"} height: 3,
onClick={() => setCompTab(key)} borderRadius: 3,
background: "linear-gradient(90deg, #7dd3fc, #c084fc)",
},
}}
sx={{ sx={{
minHeight: 0,
borderBottom: `1px solid ${MAGIC_UI.panelBorder}`,
"& .MuiTab-root": {
textTransform: "none", textTransform: "none",
color: compTab === key ? MAGIC_UI.accentA : MAGIC_UI.textMuted, color: MAGIC_UI.textMuted,
borderColor: MAGIC_UI.accentA, fontFamily: '"IBM Plex Sans","Helvetica Neue",Arial,sans-serif',
fontSize: 15,
fontWeight: 600,
minHeight: 40,
opacity: 1,
borderRadius: 1,
transition: "background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease",
"&:hover": {
color: MAGIC_UI.textBright,
backgroundImage: TAB_HOVER_GRADIENT,
boxShadow: "0 0 0 1px rgba(148,163,184,0.25) inset",
},
},
"& .Mui-selected": {
color: MAGIC_UI.textBright,
"&:hover": {
backgroundImage: TAB_HOVER_GRADIENT,
},
},
}} }}
> >
{key.charAt(0).toUpperCase() + key.slice(1)} <Tab label="Scripts" value="scripts" />
</Button> <Tab label="Ansible" value="ansible" />
))} <Tab label="Workflows" value="workflows" />
</Box> </Tabs>
<Box sx={{ display: "flex", gap: 1, alignItems: "center" }}> <Box sx={{ display: "flex", gap: 1, alignItems: "center" }}>
<TextField <TextField
size="small" size="small"
@@ -3342,14 +3366,39 @@ const heroTiles = useMemo(() => {
<Tabs <Tabs
value={targetPickerTab} value={targetPickerTab}
onChange={(_, value) => setTargetPickerTab(value)} onChange={(_, value) => setTargetPickerTab(value)}
TabIndicatorProps={{
style: {
height: 3,
borderRadius: 3,
background: "linear-gradient(90deg, #7dd3fc, #c084fc)",
},
}}
sx={{ sx={{
mb: 2, mb: 2,
borderBottom: `1px solid ${MAGIC_UI.panelBorder}`, borderBottom: `1px solid ${MAGIC_UI.panelBorder}`,
"& .MuiTab-root": { textTransform: "none", color: MAGIC_UI.textMuted }, "& .MuiTab-root": {
"& .Mui-selected": { color: MAGIC_UI.textBright }, textTransform: "none",
color: MAGIC_UI.textMuted,
fontFamily: '"IBM Plex Sans","Helvetica Neue",Arial,sans-serif',
fontSize: 15,
fontWeight: 600,
minHeight: 44,
opacity: 1,
borderRadius: 1,
transition: "background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease",
"&:hover": {
color: MAGIC_UI.textBright,
backgroundImage: TAB_HOVER_GRADIENT,
boxShadow: "0 0 0 1px rgba(148,163,184,0.25) inset",
},
},
"& .Mui-selected": {
color: MAGIC_UI.textBright,
"&:hover": {
backgroundImage: TAB_HOVER_GRADIENT,
},
},
}} }}
textColor="inherit"
indicatorColor="primary"
> >
<Tab label="Devices" value="devices" /> <Tab label="Devices" value="devices" />
<Tab label="Filters" value="filters" /> <Tab label="Filters" value="filters" />