[ADF-2094] Task Form - Doesn't follow the specification (#2786)

* [ADF-2094] Task Form - Doesn't follow the specification

* Removed icon visible beside title

* Made font-size for title as semibold 20px

* Set the outcome buttons on bottom right side

* set color of Complete button as primary

* [ADF-2094] Task Form - Doesn't follow the specification
* Changed the css for the Adf-form according to zeplin design

* Removed icon visible beside title

* Made font-size for title as semibold 20px

* Set the outcome buttons on bottom right side

* set color of Complete button as primary

* [ADF-2094] Task Form - Doesn't follow the specification

* Changed the css for the adf-form according to zeplin design

* Removed icon visible beside title

* Made font-size for title as semibold 20px

* Set the outcome buttons on bottom right side

* set color of Complete button as primary

lib/core/form/components/form.component.html

@@ -2,7 +2,7 @@
     <ng-content select="[empty-form]">
     </ng-content>
 </div>
-<div *ngIf="hasForm()" class="{{form.className}}">
+<div *ngIf="hasForm()" class="{{form.className}} adf-form-container">
     <mat-card>
         <mat-card-header>
             <mat-card-title>
@@ -12,8 +12,7 @@
                             <mat-icon>refresh</mat-icon>
                         </button>
                     </div>
-                    <mat-icon>{{ form.isValid ? 'event_available' : 'event_busy' }}</mat-icon>
-                    <span>{{form.taskName}}</span>
+                    <span class="adf-form-title">{{form.taskName}}</span>
 
                 </h4>
             </mat-card-title>
@@ -29,9 +28,10 @@
                 </div>
             </div>
         </mat-card-content>
-        <mat-card-actions *ngIf="form.hasOutcomes()">
+        <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
             <!--[class.mdl-button--colored]="!outcome.isSystem"-->
             <button *ngFor="let outcome of form.outcomes" 
+                    [color]="getColorForOutcome(outcome.name)"
                     mat-button
                     [disabled]="!isOutcomeButtonEnabled(outcome)"
                     [class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"

lib/core/form/components/form.component.scss

@@ -1,8 +1,44 @@
 .adf {
     &-form-container {
-        width: 100%;
-        min-height: 100px;
-        overflow: visible;
+        width: 576px !important;
+        min-height: 814px !important;
+
+        & .mat-card {
+            padding: 16px 24px;
+            overflow: hidden;
+        }
+
+        & .mat-card-header-text {
+            margin: 0px !important;
+        }
+
+        & .mat-tab-body-content {
+            overflow: hidden;
+        }
+
+        & .mat-tab-label {
+            font-size: 16px;
+            line-height: 1.5;
+            letter-spacing: -0.4px;
+            text-align: left;
+            color: rgba(0, 0, 0, 0.54);
+            text-transform: uppercase;
+        }
+
+        & .mat-ink-bar {
+            height: 4px;
+        }
+
+        & .mat-input-wrapper {
+            margin: 0px 12px 0px 0px;
+        }
+    }    
+
+    &-form-title {
+        font-weight: 600;
+        font-size: 20px;
+        letter-spacing: -0.5px;
+        line-height: 32px;
     }
 
     &-form-debug-container {
@@ -20,8 +56,8 @@
 
     &-form-reload-button {
         position: absolute;
-        right: 0;
-        top: 0;
+        right: 12px;
+        top: 30px;
     }
 
     &-form-hide-button {
@@ -31,6 +67,36 @@
     &-task-title {
         text-align: center
     }
+
+    &-label {
+        width: 32px;
+        height: 16px;
+        font-size: 12px;
+        line-height: 1.33;
+        text-align: left;
+        white-space: nowrap;
+    }
+
+    &-form-mat-card-actions {
+        float: right;
+        padding-bottom: 25px !important;
+        padding-right: 25px !important; 
+
+        & .mat-button {
+            width: 74px;
+            height: 36px;
+            border-radius: 5px;
+    
+        }
+
+        & .mat-button-wrapper {
+            width: 58px;
+            height: 20px;
+            opacity: 0.54;
+            font-size: 14px;
+            font-weight: bold;
+        }
+    }
 }
 
 form-field {

lib/core/form/components/form.component.spec.ts

@@ -77,6 +77,10 @@ describe('FormComponent', () => {
         expect(formComponent.isTitleEnabled()).toBeFalsy();
     });
 
+    it('should return primary color for complete button', () => {
+        expect(formComponent.getColorForOutcome('Complete')).toBe('primary');
+    });
+
     it('should not enable outcome button when model missing', () => {
         expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
     });

lib/core/form/components/form.component.ts

@@ -38,6 +38,8 @@ export class FormComponent implements OnInit, OnChanges {
     static COMPLETE_OUTCOME_ID: string = '$complete';
     static START_PROCESS_OUTCOME_ID: string = '$startProcess';
     static CUSTOM_OUTCOME_ID: string = '$custom';
+    static COMPLETE_BUTTON_COLOR: string = 'primary';
+    static COMPLETE_OUTCOME_NAME: string ='Complete'
 
     @Input()
     form: FormModel;
@@ -138,6 +140,10 @@ export class FormComponent implements OnInit, OnChanges {
         return false;
     }
 
+    getColorForOutcome(outcomeName: string): string {
+        return outcomeName === FormComponent.COMPLETE_OUTCOME_NAME ? FormComponent.COMPLETE_BUTTON_COLOR : '';
+    }
+
     isOutcomeButtonEnabled(outcome: FormOutcomeModel): boolean {
         if (this.form.readOnly) {
             return false;