restyled the code editor

Author: zamoore

ui/app/styles/components.scss

@@ -27,6 +27,7 @@
 @import './components/image-file.scss';
 @import './components/inline-definitions';
 @import './components/job-diff';
+@import './components/job-editor';
 @import './components/json-viewer';
 @import './components/legend';
 @import './components/lifecycle-chart';

ui/app/styles/components/job-editor.scss

@@ -0,0 +1,31 @@
+.job-editor {
+  .job-definition-editor-header {
+    align-items: center;
+    display: flex;
+    color: var(--token-color-palette-neutral-100);
+
+    .job-definition-select {
+      border: 1px solid var(--token-color-palette-neutral-500);
+      border-radius: 5px;
+      display: grid;
+      gap: 0.25rem;
+      grid-template-columns: 1fr 1fr;
+      padding: 0.25rem;
+      margin: 0rem 1rem;
+
+      &.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .hds-button.is-active {
+        background: var(--token-color-palette-neutral-100);
+        color: var(--token-color-foreground-strong);
+      }
+    }
+
+    .hds-form-label {
+      color: var(--token-color-palette-neutral-100);
+    }
+  }
+}

ui/app/templates/components/job-editor.hbs

@@ -3,7 +3,7 @@
   SPDX-License-Identifier: BUSL-1.1
 ~}}
 
-<div>
+<div class="job-editor">
   <JobEditor::Alert 
     @data={{merge (hash error=this.error stage=this.stage) this.data}}
     @fns={{this.fns}}

ui/app/templates/components/job-editor/edit.hbs

@@ -15,8 +15,7 @@
     <CE.Title>Job Definition</CE.Title>
 
     {{#if @data.cancelable}}
-      <CE.Generic>
-        {{!-- TODO: Fix header styles --}}
+      <CE.Generic class="job-definition-editor-header">
         <span class="header-toggle">
           <Hds::Form::Toggle::Field
             {{keyboard-shortcut