From 4799932f293e65236aca8e3f3f93f6e3cd29fbb9 Mon Sep 17 00:00:00 2001 From: Nicole Rappe Date: Fri, 3 Oct 2025 14:25:03 -0600 Subject: [PATCH 1/3] Centralize assembly editor background colors --- .../WebUI/src/Assemblies/Assembly_Editor.jsx | 39 +++++++++++++------ 1 file changed, 27 insertions(+), 12 deletions(-) diff --git a/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx b/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx index 0516d70..73817d6 100644 --- a/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx +++ b/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx @@ -46,9 +46,20 @@ const VARIABLE_TYPE_OPTIONS = [ { key: "credential", label: "Credential" } ]; +const BACKGROUND_COLORS = { + field: "#2A2A2A", /* Background for text inputs, inline editors, and script content */ + sectionCard: "#2E2E2E", /* Background for section container cards */ + menu: "#202734", /* Background for dropdown menus and code editor frames */ + 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 +106,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 +114,14 @@ const SECTION_CARD_SX = { const MENU_PROPS = { PaperProps: { sx: { - bgcolor: "#202734", + bgcolor: BACKGROUND_COLORS.menu, 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 +276,7 @@ function toServerDocument(assembly) { function RenameFileDialog({ open, value, onChange, onCancel, onSave }) { return ( - + Rename Assembly File Script Content - + updateAssembly({ script: value })} @@ -771,7 +786,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 +903,7 @@ export default function AssemblyEditor({ {assembly.variables.map((variable) => ( @@ -1007,7 +1022,7 @@ export default function AssemblyEditor({ key={file.id} sx={{ p: 1.5, - bgcolor: "#202734", + bgcolor: BACKGROUND_COLORS.menu, border: "1px solid #2b3544", display: "flex", alignItems: "center", From 5a1e165abf8041716cb8a96423d4c9f7c7e688b1 Mon Sep 17 00:00:00 2001 From: Nicole Rappe Date: Fri, 3 Oct 2025 14:31:53 -0600 Subject: [PATCH 2/3] Unify assembly editor field background color --- .../WebUI/src/Assemblies/Assembly_Editor.jsx | 21 ++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx b/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx index 73817d6..149520c 100644 --- a/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx +++ b/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx @@ -47,9 +47,8 @@ const VARIABLE_TYPE_OPTIONS = [ ]; const BACKGROUND_COLORS = { - field: "#2A2A2A", /* Background for text inputs, inline editors, and script content */ + field: "#2A2A2A", /* Shared surface color for text fields, dropdown inputs, and script editors */ sectionCard: "#2E2E2E", /* Background for section container cards */ - menu: "#202734", /* Background for dropdown menus and code editor frames */ 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 */ @@ -114,7 +113,7 @@ const SECTION_CARD_SX = { const MENU_PROPS = { PaperProps: { sx: { - bgcolor: BACKGROUND_COLORS.menu, + bgcolor: BACKGROUND_COLORS.field, color: "#e6edf3", border: "1px solid #2b3544", "& .MuiMenuItem-root.Mui-selected": { @@ -698,7 +697,7 @@ export default function AssemblyEditor({ textTransform: "none", backgroundColor: saving ? BACKGROUND_COLORS.primaryActionSaving - : BACKGROUND_COLORS.menu, + : BACKGROUND_COLORS.field, "&:hover": { borderColor: "#7db7ff", backgroundColor: BACKGROUND_COLORS.primaryActionHover @@ -732,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" } + }} /> @@ -773,9 +772,7 @@ export default function AssemblyEditor({ Script Content - + updateAssembly({ script: value })} @@ -1022,7 +1019,7 @@ export default function AssemblyEditor({ key={file.id} sx={{ p: 1.5, - bgcolor: BACKGROUND_COLORS.menu, + bgcolor: BACKGROUND_COLORS.field, border: "1px solid #2b3544", display: "flex", alignItems: "center", From d27e70dc2db6295c4da9aec6b2cb480f823e4349 Mon Sep 17 00:00:00 2001 From: Nicole Rappe Date: Fri, 3 Oct 2025 14:48:19 -0600 Subject: [PATCH 3/3] Darkened Fields of Assembly Editor to Match UI Elsewhere --- Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx b/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx index 149520c..147a2bd 100644 --- a/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx +++ b/Data/Server/WebUI/src/Assemblies/Assembly_Editor.jsx @@ -47,7 +47,7 @@ const VARIABLE_TYPE_OPTIONS = [ ]; const BACKGROUND_COLORS = { - field: "#2A2A2A", /* Shared surface color for text fields, dropdown inputs, and script editors */ + 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 */