(feat) More visual mods

Applies UI enhancements to the AuditInfo, FormEditor, SchemaEditor and ViewForms components.

package.json

@@ -79,5 +79,8 @@
   },
   "lint-staged": {
     "*.{js,css,md,ts}": "prettier --write"
+  },
+  "volta": {
+    "node": "12.22.12"
   }
 }

src/app/Services/storage/session.service.ts

@@ -1,36 +1,30 @@
-import { catchError } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
 import { SessionStorageService } from './session-storage.service';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Constants } from '../constants';
-// TODO inject service
 
 @Injectable()
 export class SessionService {
-  private url;
+  private sessionUrl;
 
   constructor(
     private http: HttpClient,
     private sessionStorageService: SessionStorageService
   ) {}
 
   public getUrl(): string {
-    return this.url;
+    return this.sessionUrl;
   }
 
   public getSession(credentials: any = null, baseUrl: string) {
-    this.url = baseUrl + '/ws/rest/v1/session';
+    this.sessionUrl = baseUrl + '/ws/rest/v1/session';
+
     if (credentials && credentials.username) {
       const base64 = btoa(credentials.username + ':' + credentials.password);
       this.sessionStorageService.setItem(Constants.CREDENTIALS_KEY, base64);
     }
 
-    return this.http.get(this.url).pipe(
-      catchError((error) => {
-        console.log(error);
-        return error;
-      })
-    );
+    return this.http.get(this.sessionUrl);
   }
 
   public deleteSession() {

src/app/form-editor/audit-info/audit-info.component.css

@@ -1,3 +1,5 @@
 .row {
-  margin-top: 10px;
+  display: flex;
+  align-items: baseline;
+  margin: 0.625rem;
 }

src/app/form-editor/audit-info/audit-info.component.html

@@ -1,6 +1,6 @@
 <div class="row">
   <div class="col-md-2">
-    <p>Form Name</p>
+    <p>Form name</p>
   </div>
   <div class="col-md-9">
     <input
@@ -14,7 +14,7 @@
 
 <div class="row">
   <div class="col-md-2">
-    <p>UUID</p>
+    <p>Form UUID</p>
   </div>
   <div class="col-md-9">
     <input
@@ -28,7 +28,7 @@
 
 <div class="row">
   <div class="col-md-2">
-    <p>Version</p>
+    <p>Form version</p>
   </div>
   <div class="col-md-9">
     <input
@@ -80,7 +80,7 @@
     />
   </div>
   <div class="col-md-2">
-    <p>Date</p>
+    <p>Date created</p>
   </div>
   <div class="col-md-3">
     <input
@@ -110,7 +110,7 @@
     />
   </div>
   <div class="col-md-2">
-    <p>Date</p>
+    <p>Date changed</p>
   </div>
   <div class="col-md-3">
     <input

src/app/form-editor/form-editor/form-editor.component.css

@@ -1,22 +1,42 @@
-/* .container{
-    margin: auto;
-    margin-top: 100px;
-} */
+.h-100 {
+  height: 100vh;
+}
+
+.my-4 {
+  margin: 0rem 1rem;
+}
+
+.ml-2 {
+  margin-left: 0.5rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.menuItem {
+  display: flex;
+  padding: 1rem;
+  align-items: center;
+}
 
 #create-form {
   height: 500px;
   border-right: 1px solid lightgray;
 }
+
 a {
   margin: auto;
 }
 
 h6 {
   color: #2196f3;
 }
+
 .menu {
   flex: 1 1 auto;
 }
+
 /* .mat-toolbar{
     background:#337ab7;
 }
@@ -41,7 +61,9 @@ a {
 
 .row {
   display: flex;
+  max-width: 100vw;
 }
+
 .btn-default {
   color: #fff;
   background: rgba(0, 0, 0, 0);
@@ -68,6 +90,7 @@ a {
   margin: auto;
   max-width: 760px;
 }
+
 .bold {
   font-weight: 700;
   color: black;
@@ -76,6 +99,7 @@ a {
 .schema-editor {
   margin: auto;
   height: auto;
+  max-width: 100vw;
   /* width:1600px; */
 }
 .errorToolbar {