Standardized Aurora Background Across All Pages via App.jsx

This commit is contained in:
2025-11-26 02:06:01 -07:00
parent 9258d0fa7b
commit 6634ecc15f
17 changed files with 61 additions and 42 deletions

View File

@@ -276,7 +276,7 @@ export default function CredentialList({ isAdmin = false }) {
if (!isAdmin) {
return (
<Paper sx={{ m: 2, p: 3, bgcolor: "#1e1e1e" }}>
<Paper sx={{ m: 2, p: 3, bgcolor: "transparent" }}>
<Typography variant="h6" sx={{ color: "#ff8080" }}>
Access denied
</Typography>
@@ -293,7 +293,7 @@ export default function CredentialList({ isAdmin = false }) {
sx={{
m: 2,
p: 0,
bgcolor: "#1e1e1e",
bgcolor: "transparent",
fontFamily: gridFontFamily,
color: "#f5f7fa",
display: "flex",

View File

@@ -17,7 +17,7 @@ import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
const paperSx = {
m: 2,
p: 0,
bgcolor: "#1e1e1e",
bgcolor: "transparent",
color: "#f5f7fa",
display: "flex",
flexDirection: "column",
@@ -147,7 +147,7 @@ export default function GithubAPIToken({ isAdmin = false }) {
if (!isAdmin) {
return (
<Paper sx={{ m: 2, p: 3, bgcolor: "#1e1e1e" }}>
<Paper sx={{ m: 2, p: 3, bgcolor: "transparent" }}>
<Typography variant="h6" sx={{ color: "#ff8080" }}>
Access denied
</Typography>

View File

@@ -30,7 +30,7 @@ import FilterListIcon from "@mui/icons-material/FilterList";
import { ConfirmDeleteDialog } from "../Dialogs.jsx";
/* ---------- Formatting helpers to keep this page in lockstep with Device_List ---------- */
const tablePaperSx = { m: 2, p: 0, bgcolor: "#1e1e1e" };
const tablePaperSx = { m: 2, p: 0, bgcolor: "transparent" };
const tableSx = {
minWidth: 820,
"& th, & td": {

View File

@@ -322,7 +322,8 @@ const defaultColDef = useMemo(
m: 0,
p: 0,
minHeight: "100%",
backgroundImage: AURORA_SHELL.background,
backgroundImage: "none",
backgroundColor: "transparent",
borderRadius: 0,
display: "flex",
flexDirection: "column",

View File

@@ -229,7 +229,7 @@ export default function PageTemplate() {
sx={{
m: 0,
p: 0,
background: AURORA_SHELL.background,
background: "transparent",
border: "none",
boxShadow: "none",
borderRadius: 0,

View File

@@ -32,7 +32,7 @@ export default function ServerInfo({ isAdmin = false }) {
if (!isAdmin) return null;
return (
<Paper sx={{ m: 2, p: 0, bgcolor: "#1e1e1e" }} elevation={2}>
<Paper sx={{ m: 2, p: 0, bgcolor: "transparent" }} elevation={2}>
<Box sx={{ p: 2 }}>
<Typography variant="h6" sx={{ color: "#58a6ff", mb: 1 }}>Server Info</Typography>
<Typography sx={{ color: '#aaa', mb: 1 }}>Basic server information will appear here for informative and debug purposes.</Typography>

View File

@@ -95,6 +95,11 @@ const darkTheme = createTheme({
}
});
const APP_AURORA_BACKGROUND =
"radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), " +
"radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), " +
"linear-gradient(180deg, #040711 0%, #050816 45%, #050816 100%)";
const LOCAL_STORAGE_KEY = "borealis_persistent_state";
export default function App() {
@@ -1333,7 +1338,19 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
return (
<ThemeProvider theme={darkTheme}>
<CssBaseline />
<Box sx={{ width: "100vw", height: "100vh", display: "flex", flexDirection: "column", overflow: "hidden" }}>
<Box
sx={{
width: "100vw",
height: "100vh",
display: "flex",
flexDirection: "column",
overflow: "hidden",
background: APP_AURORA_BACKGROUND,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundColor: "#040711",
}}
>
{/* Aurora Gradient Header (darker near the logo, brighter to the right) */}
<AppBar
position="static"
@@ -1451,7 +1468,18 @@ const LOCAL_STORAGE_KEY = "borealis_persistent_state";
</Toolbar>
</AppBar>
<Box sx={{ display: "flex", flexGrow: 1, overflow: "auto", minHeight: 0 }}>
<Box
sx={{
display: "flex",
flexGrow: 1,
overflow: "auto",
minHeight: 0,
background: APP_AURORA_BACKGROUND,
backgroundRepeat: "no-repeat",
backgroundSize: "cover",
backgroundColor: "#040711",
}}
>
<NavigationSidebar currentPage={currentPage} onNavigate={navigateTo} isAdmin={isAdmin} />
<Box
sx={{

View File

@@ -588,8 +588,7 @@ export default function AssemblyList({ onOpenWorkflow, onOpenScript, userRole =
sx={{
m: 0, // Full-bleed to parent container
p: 0,
background:
"radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), #040711",
background: "transparent",
border: "none",
boxShadow: "none",
borderRadius: 0,

View File

@@ -415,7 +415,7 @@ export default function DeviceApprovals() {
height: "100%",
borderRadius: 0,
border: `1px solid ${MAGIC_UI.panelBorder}`,
background: MAGIC_UI.shellBg,
background: "transparent",
boxShadow: "0 25px 80px rgba(6, 12, 30, 0.8)",
overflow: "hidden",
}}

View File

@@ -1510,7 +1510,7 @@ export default function DeviceDetails({ device, onBack, onQuickJobLaunch }) {
m: 0,
p: { xs: 2, md: 3 },
borderRadius: 0,
background: MAGIC_UI.shellBg,
background: "transparent",
border: `1px solid ${MAGIC_UI.panelBorder}`,
boxShadow: MAGIC_UI.glow,
display: "flex",

View File

@@ -1578,7 +1578,7 @@ export default function DeviceList({
height: "100%",
borderRadius: 0,
border: `1px solid ${MAGIC_UI.panelBorder}`,
background: MAGIC_UI.shellBg,
background: "transparent",
boxShadow: MAGIC_UI.glow,
position: "relative",
overflow: "hidden",

View File

@@ -33,7 +33,8 @@ ModuleRegistry.registerModules([AllCommunityModule]);
const AURORA_SHELL = {
background:
"radial-gradient(120% 120% at 0% 0%, rgba(76, 186, 255, 0.16), transparent 55%), " +
"radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), #040711",
"radial-gradient(120% 120% at 100% 0%, rgba(214, 130, 255, 0.18), transparent 60%), " +
"linear-gradient(180deg, #040711 0%, #050816 45%, #050816 100%)",
text: "#e2e8f0",
subtext: "#94a3b8",
border: "rgba(148,163,184,0.35)",
@@ -402,13 +403,9 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved })
display: "inline-flex",
alignItems: "center",
gap: 0.75,
px: 1.5,
py: 0.4,
borderRadius: 999,
backgroundColor: theme.background,
color: theme.color,
fontWeight: 600,
fontSize: "0.9rem",
fontWeight: 700,
fontSize: "0.95rem",
}}
>
<Icon sx={{ fontSize: 18 }} />
@@ -758,14 +755,14 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved })
elevation={0}
sx={{
minHeight: "100vh",
background: AURORA_SHELL.background,
backgroundRepeat: "no-repeat",
backgroundSize: "100% 520px",
backgroundAttachment: "scroll",
backgroundColor: "#040711",
backgroundColor: "transparent",
color: AURORA_SHELL.text,
p: 3,
borderRadius: 0,
display: "flex",
flexDirection: "column",
gap: 3,
pb: 6,
}}
>
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 3 }}>
@@ -852,6 +849,7 @@ export default function DeviceFilterEditor({ initialFilter, onCancel, onSaved })
display: "flex",
flexDirection: "column",
gap: 2.75,
flex: 1,
}}
>
<Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>

View File

@@ -123,21 +123,14 @@ function FilterTypePill({ type }) {
const meta = FILTER_TYPE_META[key];
return (
<Box
component="span"
sx={{
display: "inline-flex",
alignItems: "center",
px: 1.1,
py: 0.25,
borderRadius: 8,
minWidth: 58,
justifyContent: "center",
fontWeight: 600,
fontSize: "0.72rem",
fontWeight: 700,
fontSize: "0.9rem",
letterSpacing: 0.2,
color: meta.textColor,
border: `1px solid ${meta.borderColor}`,
backgroundColor: meta.backgroundColor,
textTransform: "none",
}}
>
{meta.label}
@@ -326,7 +319,7 @@ export default function DeviceFilterList({ onCreateFilter, onEditFilter, refresh
sx={{
height: "100vh",
minHeight: "100vh",
background: AURORA_SHELL.background,
backgroundColor: "transparent",
color: AURORA_SHELL.text,
p: 3,
borderRadius: 0,

View File

@@ -230,7 +230,7 @@ export default function SSHDevices({ type = "ssh" }) {
};
return (
<Paper sx={{ m: 2, p: 0, bgcolor: "#1e1e1e" }} elevation={2}>
<Paper sx={{ m: 2, p: 0, bgcolor: "transparent" }} elevation={2}>
<Box
sx={{
display: "flex",

View File

@@ -2862,7 +2862,7 @@ const heroTiles = useMemo(() => {
flexDirection: "column",
gap: 3,
borderRadius: 0,
background: MAGIC_UI.shellBg,
background: "transparent",
border: `1px solid ${MAGIC_UI.panelBorder}`,
boxShadow: MAGIC_UI.glow,
}}

View File

@@ -699,7 +699,7 @@ export default function ScheduledJobsList({ onCreateJob, onEditJob, refreshToken
sx={{
m: 0,
p: 0,
background: AURORA_SHELL.background,
background: "transparent",
border: "none",
boxShadow: "none",
borderRadius: 0,

View File

@@ -217,7 +217,7 @@ export default function SiteList({ onOpenDevicesForSite }) {
height: "100%",
borderRadius: 0,
border: `1px solid ${MAGIC_UI.panelBorder}`,
background: MAGIC_UI.shellBg,
background: "transparent",
boxShadow: "0 25px 80px rgba(6, 12, 30, 0.8)",
overflow: "hidden",
}}