status component UI changes

src/app/check-status/check-status.component.html

@@ -6,15 +6,8 @@
 
 
 <div class="search-input-container">
-    <ng-container>
-        <section class="search-input">
-            <input type="text" placeholder="Enter the Application Number" [(ngModel)]="applicationId">
-            <button (click)="checkStatus()"> Check </button>
-        </section>
-                
-        <section class="form-message" [ngClass]="{'error' : error.type === 'DANGER', 'warning' : error.type === 'WARNING' }" *ngIf="error">
-            <h5> {{ error.header }} </h5>
-            <p> {{ error.message }} </p>
-        </section>
-    </ng-container>    
+    <section class="form-message" [ngClass]="{'error' : error.type === 'DANGER', 'warning' : error.type === 'WARNING' }" *ngIf="error">        
+        <p> <strong> Assigned To: </strong> {{ error.assignedTo }} </p>
+        <h5> {{ error.status }} </h5>
+    </section>
 </div>

src/app/check-status/check-status.component.scss

@@ -3,49 +3,6 @@
     margin: 0 auto;
     text-align: center;
 
-    .search-input {
-        display: flex;
-        align-items: center;
-        justify-content: flex-start;
-        background-color: white;
-        border-radius: 4rem;
-        height: 5.5rem;
-        border: 1px solid var(--border-grey);
-        width: 80%;
-        margin: 4rem auto 3rem;
-        overflow: hidden;
-    
-        input {
-            border: none;
-            background-color: transparent;
-            padding: 0 3rem;
-            font-size: 1.5rem;
-            color: var(--dark-grey);        
-            letter-spacing: 0.5px;
-            flex-grow: 1;
-    
-            &::placeholder {
-                font-weight: 300;
-            }
-        }
-    
-        button {
-            height: 100%;
-            border: none;
-            background-color: var(--highlight);
-            padding: 0 4rem;
-            color: white;
-            font-size: 1.6rem;
-            letter-spacing: 0.5px;
-            border-radius: 4rem;
-            transition: opacity 0.3s;
-
-            &:disabled {
-                opacity: 0.5;
-            }
-        }
-    }
-
     .form-message {
         margin: 6rem auto 2rem;
         line-height: 1.6;

src/app/check-status/check-status.component.ts

@@ -6,39 +6,20 @@ import { Component, OnInit } from '@angular/core';
     styleUrls: ['./check-status.component.scss']
 })
 export class CheckStatusComponent implements OnInit {
-    applicationId: string = '398248899';
-
+    
     error?: {
-        header: string,
-        message: string,
+        status: string,
+        assignedTo: string,
         type: 'SUCCESS' | 'WARNING' | 'DANGER',
     };
 
     constructor() { }
 
     ngOnInit(): void {
+        this.error = {
+            status: 'In Progress',
+            assignedTo: 'Mr Miyagi',
+            type: 'WARNING'
+        };
     }
-
-    checkStatus() {
-        if (this.applicationId === '398248899') {
-            this.error = {
-                header: 'Approved',
-                message: 'Your application has been approved, please view the notification to continue futher in the process',
-                type: 'SUCCESS'
-            };
-        } else if (this.applicationId === '100') {
-            this.error = {
-                header: 'Pending',
-                message: 'You\'ll be notified when there is a change in the status',
-                type: 'WARNING'
-            };
-        } else {
-            this.error = {
-                header: 'Rejected',
-                message: 'Please view the notifications to get more details regarding the rejection',
-                type: 'DANGER'
-            };
-        }
-    }
-
 }