bunny-lab/Borealis-Github-Replica
1
0
Fork 0
mirror of https://github.com/bunny-lab-io/Borealis.git synced 2025-10-26 17:41: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

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

@@ -46,9 +46,19 @@ const VARIABLE_TYPE_OPTIONS = [
{ 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 = {
"& .MuiOutlinedInput-root": {
bgcolor: "#2A2A2A", /* Text Field Background Color */
bgcolor: BACKGROUND_COLORS.field,
color: "#e6edf3", /* Text Color */
borderRadius: 1, /* Roundness of UI Elements */
minHeight: 40,
@@ -95,7 +105,7 @@ const SECTION_TITLE_SX = {
};
const SECTION_CARD_SX = {
bgcolor: "#2E2E2E", /* Color of Page Background */
bgcolor: BACKGROUND_COLORS.sectionCard,
borderRadius: 2,
border: "1px solid #262f3d",
};
@@ -103,14 +113,14 @@ const SECTION_CARD_SX = {
const MENU_PROPS = {
PaperProps: {
sx: {
bgcolor: "#202734",
bgcolor: BACKGROUND_COLORS.field,
color: "#e6edf3",
border: "1px solid #2b3544",
"& .MuiMenuItem-root.Mui-selected": {
bgcolor: "rgba(88,166,255,0.16)"
bgcolor: BACKGROUND_COLORS.menuSelected
},
"& .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 }) {
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>
<DialogContent>
<TextField
@@ -685,10 +695,12 @@ export default function AssemblyEditor({
color: "#58a6ff",
borderColor: "#58a6ff",
textTransform: "none",
backgroundColor: saving ? "rgba(88,166,255,0.12)" : "#202734",
backgroundColor: saving
? BACKGROUND_COLORS.primaryActionSaving
: BACKGROUND_COLORS.field,
"&:hover": {
borderColor: "#7db7ff",
backgroundColor: "rgba(88,166,255,0.18)"
backgroundColor: BACKGROUND_COLORS.primaryActionHover
},
"&.Mui-disabled": {
color: "#3c4452",
@@ -719,10 +731,10 @@ export default function AssemblyEditor({
minRows={3}
fullWidth
variant="outlined"
sx={{
...INPUT_BASE_SX,
"& .MuiOutlinedInput-inputMultiline": {padding: "4px 8px"}
}}
sx={{
...INPUT_BASE_SX,
"& .MuiOutlinedInput-inputMultiline": { padding: "4px 8px" }
}}
/>
</Grid>
<Grid item xs={12} md={6}>
@@ -760,7 +772,7 @@ export default function AssemblyEditor({
<Typography variant="caption" sx={{ ...SECTION_TITLE_SX, mb: 1 }}>
Script Content
</Typography>
<Box sx={{ border: "1px solid #2b3544", borderRadius: 1, background: "#202734" }}>
<Box sx={{ border: "1px solid #2b3544", borderRadius: 1, background: BACKGROUND_COLORS.field }}>
<Editor
value={assembly.script}
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',
fontSize: 14,
color: "#e6edf3",
background: "#2A2A2A", /* Color of Script Box */
background: BACKGROUND_COLORS.field, /* Color of Script Box */
outline: "none",
minHeight: 320,
lineHeight: 1.45,
@@ -888,7 +900,7 @@ export default function AssemblyEditor({
{assembly.variables.map((variable) => (
<Paper
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 item xs={12} md={3}>
@@ -1007,7 +1019,7 @@ export default function AssemblyEditor({
key={file.id}
sx={{
p: 1.5,
bgcolor: "#202734",
bgcolor: BACKGROUND_COLORS.field,
border: "1px solid #2b3544",
display: "flex",
alignItems: "center",