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

Merge pull request #47 from bunny-lab-io:codex/refactor-background-colors-in-assembly_editor.jsx

Browse Source 
Centralize assembly editor background colors
This commit is contained in:
Nicole Rappe
2025-10-03 14:48:39 -06:00
committed by GitHub
parent ffe1c880cb d27e70dc2d
commit 48a6a6e2ad
1 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx
View File

@@ -46,9 +46,19 @@ const VARIABLE_TYPE_OPTIONS = [
{ key: "credential", label: "Credential" } { key: "credential", label: "Credential" }
]; ];
const BACKGROUND_COLORS = {
field: "#1C1C1C", /* Shared surface color for text fields, dropdown inputs, and script editors */
sectionCard: "#2E2E2E", /* Background for section container cards */
menuSelected: "rgba(88,166,255,0.16)", /* Background for selected dropdown items */
menuSelectedHover: "rgba(88,166,255,0.24)", /* Background for hovered selected dropdown items */
primaryActionSaving: "rgba(88,166,255,0.12)", /* Background for primary action button while saving */
primaryActionHover: "rgba(88,166,255,0.18)", /* Background for primary action button hover state */
dialog: "#1a1f27" /* Background for modal dialogs */
};
const INPUT_BASE_SX = { const INPUT_BASE_SX = {
"& .MuiOutlinedInput-root": { "& .MuiOutlinedInput-root": {
bgcolor: "#2A2A2A", /* Text Field Background Color */ bgcolor: BACKGROUND_COLORS.field,
color: "#e6edf3", /* Text Color */ color: "#e6edf3", /* Text Color */
borderRadius: 1, /* Roundness of UI Elements */ borderRadius: 1, /* Roundness of UI Elements */
minHeight: 40, minHeight: 40,
@@ -95,7 +105,7 @@ const SECTION_TITLE_SX = {
}; };
const SECTION_CARD_SX = { const SECTION_CARD_SX = {
bgcolor: "#2E2E2E", /* Color of Page Background */ bgcolor: BACKGROUND_COLORS.sectionCard,
borderRadius: 2, borderRadius: 2,
border: "1px solid #262f3d", border: "1px solid #262f3d",
}; };
@@ -103,14 +113,14 @@ const SECTION_CARD_SX = {
const MENU_PROPS = { const MENU_PROPS = {
PaperProps: { PaperProps: {
sx: { sx: {
bgcolor: "#202734", bgcolor: BACKGROUND_COLORS.field,
color: "#e6edf3", color: "#e6edf3",
border: "1px solid #2b3544", border: "1px solid #2b3544",
"& .MuiMenuItem-root.Mui-selected": { "& .MuiMenuItem-root.Mui-selected": {
bgcolor: "rgba(88,166,255,0.16)" bgcolor: BACKGROUND_COLORS.menuSelected
}, },
"& .MuiMenuItem-root.Mui-selected:hover": { "& .MuiMenuItem-root.Mui-selected:hover": {
bgcolor: "rgba(88,166,255,0.24)" bgcolor: BACKGROUND_COLORS.menuSelectedHover
} }
} }
} }
@@ -265,7 +275,7 @@ function toServerDocument(assembly) {
function RenameFileDialog({ open, value, onChange, onCancel, onSave }) { function RenameFileDialog({ open, value, onChange, onCancel, onSave }) {
return ( return (
<Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: "#1a1f27", color: "#fff" } }}> <Dialog open={open} onClose={onCancel} PaperProps={{ sx: { bgcolor: BACKGROUND_COLORS.dialog, color: "#fff" } }}>
<DialogTitle>Rename Assembly File</DialogTitle> <DialogTitle>Rename Assembly File</DialogTitle>
<DialogContent> <DialogContent>
<TextField <TextField
@@ -685,10 +695,12 @@ export default function AssemblyEditor({
color: "#58a6ff", color: "#58a6ff",
borderColor: "#58a6ff", borderColor: "#58a6ff",
textTransform: "none", textTransform: "none",
backgroundColor: saving ? "rgba(88,166,255,0.12)" : "#202734", backgroundColor: saving
? BACKGROUND_COLORS.primaryActionSaving
: BACKGROUND_COLORS.field,
"&:hover": { "&:hover": {
borderColor: "#7db7ff", borderColor: "#7db7ff",
backgroundColor: "rgba(88,166,255,0.18)" backgroundColor: BACKGROUND_COLORS.primaryActionHover
}, },
"&.Mui-disabled": { "&.Mui-disabled": {
color: "#3c4452", color: "#3c4452",
@@ -721,7 +733,7 @@ export default function AssemblyEditor({
variant="outlined" variant="outlined"
sx={{ sx={{
...INPUT_BASE_SX, ...INPUT_BASE_SX,
"& .MuiOutlinedInput-inputMultiline": {padding: "4px 8px"} "& .MuiOutlinedInput-inputMultiline": { padding: "4px 8px" }
}} }}
/> />
</Grid> </Grid>
@@ -760,7 +772,7 @@ export default function AssemblyEditor({
<Typography variant="caption" sx={{ ...SECTION_TITLE_SX, mb: 1 }}> <Typography variant="caption" sx={{ ...SECTION_TITLE_SX, mb: 1 }}>
Script Content Script Content
</Typography> </Typography>
<Box sx={{ border: "1px solid #2b3544", borderRadius: 1, background: "#202734" }}> <Box sx={{ border: "1px solid #2b3544", borderRadius: 1, background: BACKGROUND_COLORS.field }}>
<Editor <Editor
value={assembly.script} value={assembly.script}
onValueChange={(value) => updateAssembly({ script: value })} onValueChange={(value) => updateAssembly({ script: value })}
@@ -771,7 +783,7 @@ export default function AssemblyEditor({
fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace', fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
fontSize: 14, fontSize: 14,
color: "#e6edf3", color: "#e6edf3",
background: "#2A2A2A", /* Color of Script Box */ background: BACKGROUND_COLORS.field, /* Color of Script Box */
outline: "none", outline: "none",
minHeight: 320, minHeight: 320,
lineHeight: 1.45, lineHeight: 1.45,
@@ -888,7 +900,7 @@ export default function AssemblyEditor({
{assembly.variables.map((variable) => ( {assembly.variables.map((variable) => (
<Paper <Paper
key={variable.id} key={variable.id}
sx={{ p: 2, bgcolor: "#2A2A2A", border: "1px solid #2b3544", borderRadius: 1 }} sx={{ p: 2, bgcolor: BACKGROUND_COLORS.field, border: "1px solid #2b3544", borderRadius: 1 }}
> >
<Grid container spacing={2} alignItems="center"> <Grid container spacing={2} alignItems="center">
<Grid item xs={12} md={3}> <Grid item xs={12} md={3}>
@@ -1007,7 +1019,7 @@ export default function AssemblyEditor({
key={file.id} key={file.id}
sx={{ sx={{
p: 1.5, p: 1.5,
bgcolor: "#202734", bgcolor: BACKGROUND_COLORS.field,
border: "1px solid #2b3544", border: "1px solid #2b3544",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",