bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-12-16 03:25:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

Overhaul for Tabbed Interfaces

Browse Source
This commit is contained in:
Nicole Rappe
2025-11-22 02:42:40 -07:00
parent 2c903d4dc1
commit 9995619eea
4 changed files with 89 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
Data/Engine/web-interface/src/Devices/Device_Details.jsx
View File

@@ -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) => (

3
Data/Engine/web-interface/src/GUI_STYLING_GUIDE.md
View File

@@ -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.

15
Data/Engine/web-interface/src/Scheduling/Create_Job.jsx
View File

@@ -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,
},
},
}}
>