Stepper form style and formatting

Change-Id: I22d2ceba1f3673872d8e458daff7838d475e4872
Issue-ID: CCSDK-703
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

3 files changed, 45 insertions, 31 deletions

diff --git a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss
index 1c0c05a54..21c06784c 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/blueprint.component.scss
@@ -21,4 +21,12 @@ limitations under the License.
 
 .mat-card {
     padding: 0px !important;
+}
+
+.matStepNextBtn {
+    color: white;
+    background: gray;
+    margin-top: 10px;
+    position: absolute;
+    margin-bottom: 5px;
 }
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html
index bcd78323e..a9c604224 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.html
@@ -19,30 +19,27 @@ limitations under the License.
 ============LICENSE_END============================================
 -->
 <mat-vertical-stepper linear>
-  <mat-step [stepControl]="step1FormGroup">
-    <ng-template matStepLabel>Choose CBA Template file</ng-template>
-    <app-template-options></app-template-options>
-    <br>
-    <div>
-      <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
-    </div>
-  </mat-step>
+    <mat-step [stepControl]="step1FormGroup">
+        <ng-template matStepLabel>Choose CBA Template file</ng-template>
+        <app-template-options></app-template-options>
+        <br>
+        <div>
+            <button mat-button matStepperNext class="matStepNextBtn">Proceed</button>
+        </div>
+    </mat-step>
 
-  <mat-step [stepControl]="step2FormGroup">
-    <ng-template matStepLabel>Browse CBA Template file</ng-template>
-    <app-search-template (change)="fileChange(fileupload.files)"></app-search-template>
-    <br>
-    <div>
-      <button mat-button matStepperNext class="matStepNextBtn">Upload</button>
-    </div>
-  </mat-step>
-  <mat-step [stepControl]="step3FormGroup">
-    <ng-template matStepLabel>Enter Metadata details</ng-template>
-    <app-metadata></app-metadata>
-    <br>
-  </mat-step>
+    <mat-step [stepControl]="step2FormGroup">
+        <ng-template matStepLabel>Browse CBA Template file</ng-template>
+        <app-search-template (cbaFile)="fileChange($event)"></app-search-template>
+        <br>
+        <div>
+            <button mat-button matStepperNext class="matStepNextBtn">Upload</button>
+        </div>
+    </mat-step>
+    <mat-step [stepControl]="step3FormGroup">
+        <ng-template matStepLabel>Enter Metadata details</ng-template>
+        <app-metadata (metadataform)="metaDataDetail($event)"></app-metadata>
+        <br>
+    </mat-step>
 </mat-vertical-stepper>
-<button mat-button matStepperNext class="matStepNextBtn">Next</button>
-<!-- <router-outlet></router-outlet> -->
-
-<!-- </form> -->
\ No newline at end of file
+<button mat-button matStepperNext class="matStepNextBtn" (click)="saveBlueprintModel()">Next</button>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss
index 47ae92a20..c0e3dfb99 100644
--- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/select-template.component.scss
@@ -19,10 +19,19 @@ limitations under the License.
 ============LICENSE_END============================================
 */
 
-.matStepNextBtn{
-    color:white;
-    background:gray; 
-    margin-top: 10px; 
+.matStepNextBtn {
+    color: white;
+    background: gray;
+    margin-top: 10px;
     position: absolute;
-    
-}
\ No newline at end of file
+    margin-bottom: 5px;
+}
+
+.matStep {
+    margin-top: 15px !important;
+    margin-bottom: 20px !important;
+}
+
+// .mat-vertical-content {
+//     margin: 10px !important;
+// }
\ No newline at end of file