diff --git a/Data/Engine/web-interface/src/Devices/Device_Details.jsx b/Data/Engine/web-interface/src/Devices/Device_Details.jsx index edb323ae..3e237857 100644 --- a/Data/Engine/web-interface/src/Devices/Device_Details.jsx +++ b/Data/Engine/web-interface/src/Devices/Device_Details.jsx @@ -49,6 +49,8 @@ const MAGIC_UI = { accentC: "#34d399", }; +const TAB_HOVER_GRADIENT = "linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))"; + const gridFontFamily = '"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif'; const iconFontFamily = '"Quartz Regular"'; @@ -1668,14 +1670,30 @@ export default function DeviceDetails({ device, onBack, onQuickJobLaunch }) { }, }} sx={{ - borderBottom: `1px solid rgba(148,163,184,0.35)`, + borderBottom: `1px solid ${MAGIC_UI.panelBorder}`, mb: 2, "& .MuiTab-root": { color: MAGIC_UI.textMuted, textTransform: "none", fontWeight: 600, + fontFamily: '"IBM Plex Sans","Helvetica Neue",Arial,sans-serif', + fontSize: 15, + 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, + }, }, - "& .Mui-selected": { color: MAGIC_UI.textBright }, }} > {TOP_TABS.map((label) => ( diff --git a/Data/Engine/web-interface/src/GUI_STYLING_GUIDE.md b/Data/Engine/web-interface/src/GUI_STYLING_GUIDE.md deleted file mode 100644 index 5dc24876..00000000 --- a/Data/Engine/web-interface/src/GUI_STYLING_GUIDE.md +++ /dev/null @@ -1,3 +0,0 @@ -# This guide moved - -The MagicUI styling language and AG Grid rules now live in `Docs/Codex/Shared/ui/README.md` alongside references to `Data/Engine/web-interface/src/Admin/Page_Template.jsx`. Use that doc as the single source of truth for UI patterns and AG Grid behavior. diff --git a/Data/Engine/web-interface/src/Scheduling/Create_Job.jsx b/Data/Engine/web-interface/src/Scheduling/Create_Job.jsx index 6f88fba2..756fb81d 100644 --- a/Data/Engine/web-interface/src/Scheduling/Create_Job.jsx +++ b/Data/Engine/web-interface/src/Scheduling/Create_Job.jsx @@ -338,6 +338,8 @@ const TAB_SECTION_SX = { py: { xs: 1.25, md: 1.75 }, }; +const TAB_HOVER_GRADIENT = "linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))"; + const PRIMARY_CTA_SX = { borderRadius: 999, px: 3, @@ -2700,14 +2702,21 @@ const heroTiles = useMemo(() => { color: MAGIC_UI.textMuted, textTransform: "none", fontWeight: 600, - transition: "background 0.2s ease, color 0.2s ease", + opacity: 1, + borderRadius: 1, + transition: "background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease", "&:hover": { - color: MAGIC_UI.accentA, - backgroundColor: "rgba(30,64,175,0.35)", + color: MAGIC_UI.textBright, + backgroundImage: TAB_HOVER_GRADIENT, + opacity: 1, + boxShadow: "0 0 0 1px rgba(148,163,184,0.25) inset", }, }, "& .Mui-selected": { color: MAGIC_UI.textBright, + "&:hover": { + backgroundImage: TAB_HOVER_GRADIENT, + }, }, }} > diff --git a/Docs/Codex/USER_INTERFACE.md b/Docs/Codex/USER_INTERFACE.md index 9d831b89..66e3b0c9 100644 --- a/Docs/Codex/USER_INTERFACE.md +++ b/Docs/Codex/USER_INTERFACE.md @@ -25,6 +25,63 @@ Applies to all Borealis frontends. Use `Data/Engine/web-interface/src/Admin/Page - Default grid cell padding: keep roughly 18px on the left edge and 12px on the right for standard cells (12px/9px for `auto-col-tight`) so text never hugs a column edge. Target the center + pinned containers so both regions stay aligned. - Overlays/menus: `rgba(8,12,24,0.96)` canvas, blurred backdrops, thin steel borders; bright typography; deep blue glass inputs; cyan confirm, mauve destructive accents. +## Aurora Tabs (MagicUI Tabbed Interfaces) +- Placement: sit directly below the hero title/subtitle band (8–16px gap). Tabs span the full width of the content column and anchor secondary hero metrics (see `Scheduling/Create_Job.jsx` and `Devices/Device_Details.jsx`). +- Typography: IBM Plex Sans, `fontSize: 15`, mixed case labels (`textTransform: "none"`). Use `fontWeight: 600` for emphasis, but avoid uppercase that crowds the aurora glow. +- Indicator: 3px tall bar with rounded corners that uses the cyan→violet aurora gradient `linear-gradient(90deg,#7dd3fc,#c084fc)`. Keep it flush with the bottom border so it looks like a light strip under the active tab. +- Hover/active treatment: tabs float on a translucent aurora panel `linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))` with a 1px inset steel outline. This gradient applies on hover for both selected and non-selected tabs to keep parity. +- Colors: base text `MAGIC_UI.textMuted` (`#94a3b8`). Hovering switches to `MAGIC_UI.textBright` (`#e2e8f0`). Always force `opacity: 1` to avoid MUI’s default faded text on unfocused tabs. +- Shape/spacing: tabs are pill-like with `borderRadius: 4` (MUI unit `1`). Maintain `minHeight: 44px` so targets are touchable. Provide `borderBottom: 1px solid MAGIC_UI.panelBorder` to anchor the rail. +- CSS/SX snippet to copy into new tab stacks: + ```jsx + const TAB_HOVER_GRADIENT = "linear-gradient(120deg, rgba(125,211,252,0.18), rgba(192,132,252,0.22))"; + + setTab(v)} + variant="scrollable" + scrollButtons="auto" + TabIndicatorProps={{ + style: { + height: 3, + borderRadius: 3, + background: "linear-gradient(90deg,#7dd3fc,#c084fc)", + }, + }} + sx={{ + borderBottom: `1px solid ${MAGIC_UI.panelBorder}`, + "& .MuiTab-root": { + color: MAGIC_UI.textMuted, + fontFamily: "\"IBM Plex Sans\", \"Helvetica Neue\", Arial, sans-serif", + fontSize: 15, + textTransform: "none", + 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, + }, + }, + }} + > + {TABS.map((t) => ( + + ))} + + ``` +- Interaction rules: tabs should never scroll vertically; rely on horizontal scroll for overflow. Always align the tab rail with the first section header on the page so the aurora indicator lines up with hero metrics. +- Accessibility: keep `aria-label`/`aria-controls` pairs when the panes hold complex content, and ensure the gradient backgrounds preserve 4.5:1 contrast for the text (the current cyan on dark meets this). + ## AG Grid Column Behavior (All Tables) - Auto-size value columns and let the last column absorb remaining width so views span available space. - Declare `AUTO_SIZE_COLUMNS` near the grid component (exclude the fill column).