Mostly finished header component of capability request status page

apps/web/src/app/workspaces/components/capability-request/capability-request.component.html

-<p>capability-request works! Hello, world!</p>
+<app-request-header></app-request-header>

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.html

+<div id="request-id-and-status">
+  <h2 id="request-id" class="left-aligned">Request #7</h2>
+  <button id="request-status-button" type="button" class="btn btn-success right-aligned">
+    Running<span class="fas fa-play"></span>
+  </button>
+</div>
+
+<div id="created-and-updated-timestamps">
+  <h4 id="created-time" class="left-aligned timestamp">Created 2 hours ago</h4>
+  <h4 id="last-updated-time" class="right-aligned timestamp">Updated 2 seconds ago</h4>
+</div>

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.scss

+div {
+  width: 100%;
+  padding: 0.5rem 3rem;
+  display: inline-grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.left-aligned {
+  justify-self: left;
+}
+.right-aligned {
+  justify-self: right;
+}
+.timestamp {
+  color: #757575;
+}
+
+#request-id-and-status {
+  grid-template-areas: "id status";
+  border-bottom: 1px solid #e0e0e0;
+}
+
+#request-id {
+  grid-area: id;
+}
+
+#request-status-button {
+  grid-area: status;
+}
+
+#created-and-updated-timestamps {
+  grid-template-areas: "created updated";
+  border-bottom: 1px solid #bdbdbd;
+}
+
+#created-time {
+}

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.spec.ts

+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { RequestHeaderComponent } from "./request-header.component";
+
+describe("HeaderComponent", () => {
+  let component: RequestHeaderComponent;
+  let fixture: ComponentFixture<RequestHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [RequestHeaderComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RequestHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/web/src/app/workspaces/components/capability-request/components/request-header/request-header.component.ts

+import { Component, OnInit } from "@angular/core";
+
+@Component({
+  selector: "app-request-header",
+  templateUrl: "./request-header.component.html",
+  styleUrls: ["./request-header.component.scss"],
+})
+export class RequestHeaderComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}

apps/web/src/app/workspaces/workspaces.module.ts

@@ -4,9 +4,10 @@ import { WorkspacesRoutingModule } from "./workspaces-routing.module";
 import { WorkspacesComponent } from "./workspaces.component";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { CapabilityRequestComponent } from "./components/capability-request/capability-request.component";
+import { RequestHeaderComponent } from "./components/capability-request/components/request-header/request-header.component";
 
 @NgModule({
-  declarations: [WorkspacesComponent, CapabilityRequestComponent],
+  declarations: [WorkspacesComponent, CapabilityRequestComponent, RequestHeaderComponent],
   imports: [CommonModule, WorkspacesRoutingModule, ReactiveFormsModule, FormsModule],
 })
 export class WorkspacesModule {}