diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index c1492f3..55ee4a1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { CheckStatusComponent } from './check-status/check-status.component'; import { CreateCommitteeComponent } from './create-committee/create-committee.component'; import { EServicesComponent } from './e-services/e-services.component'; import { LoginComponent } from './login/login.component'; @@ -17,6 +18,9 @@ const routes: Routes = [ }, { path: 'e-services', component: EServicesComponent, + }, { + path:'check-status', + component: CheckStatusComponent }, { path: 'register-business', component: RegisterBusinessComponent, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3320060..1d4b651 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,6 +11,7 @@ import { MockComponent } from './mock/mock.component'; import { EServicesComponent } from './e-services/e-services.component'; import { NotificationsComponent } from './notifications/notifications.component'; import { CreateCommitteeComponent } from './create-committee/create-committee.component'; +import { CheckStatusComponent } from './check-status/check-status.component'; @NgModule({ declarations: [ @@ -21,7 +22,8 @@ import { CreateCommitteeComponent } from './create-committee/create-committee.co MockComponent, EServicesComponent, NotificationsComponent, - CreateCommitteeComponent + CreateCommitteeComponent, + CheckStatusComponent ], imports: [ BrowserModule, diff --git a/src/app/check-status/check-status.component.html b/src/app/check-status/check-status.component.html new file mode 100644 index 0000000..d0db433 --- /dev/null +++ b/src/app/check-status/check-status.component.html @@ -0,0 +1,20 @@ +
+

+ Application Status +

+
+ + +
+ +
+ + +
+ +
+
{{ error.header }}
+

{{ error.message }}

+
+
+
\ No newline at end of file diff --git a/src/app/check-status/check-status.component.scss b/src/app/check-status/check-status.component.scss new file mode 100644 index 0000000..8b09c2a --- /dev/null +++ b/src/app/check-status/check-status.component.scss @@ -0,0 +1,79 @@ +.search-input-container { + width: 60%; + 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; + + &.error { + h5 { + color: var(--error); + } + } + + &.warning { + h5 { + color: var(--warning); + } + } + + h5 { + font-size: 2rem; + color: var(--success); + filter: brightness(80%); + font-weight: 500; + margin-bottom: 1rem; + } + + p { + font-size: 1.4rem; + font-weight: 400; + color: var(--dark-grey); + } + } +} \ No newline at end of file diff --git a/src/app/check-status/check-status.component.spec.ts b/src/app/check-status/check-status.component.spec.ts new file mode 100644 index 0000000..fca82e5 --- /dev/null +++ b/src/app/check-status/check-status.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CheckStatusComponent } from './check-status.component'; + +describe('CheckStatusComponent', () => { + let component: CheckStatusComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ CheckStatusComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(CheckStatusComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/check-status/check-status.component.ts b/src/app/check-status/check-status.component.ts new file mode 100644 index 0000000..3217b95 --- /dev/null +++ b/src/app/check-status/check-status.component.ts @@ -0,0 +1,44 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-check-status', + templateUrl: './check-status.component.html', + styleUrls: ['./check-status.component.scss'] +}) +export class CheckStatusComponent implements OnInit { + applicationId: string = '398248899'; + + error?: { + header: string, + message: string, + type: 'SUCCESS' | 'WARNING' | 'DANGER', + }; + + constructor() { } + + ngOnInit(): void { + } + + 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' + }; + } + } + +} diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index 811305b..0d2742e 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -5,9 +5,8 @@ -
diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index 713a659..a362561 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -19,10 +19,7 @@ $header-height: 10rem; nav { margin: 0 2rem; - display: flex; - align-items: center; - justify-content: flex-start; - + @media print { display: none; } @@ -31,6 +28,7 @@ $header-height: 10rem; font-size: 1.6rem; letter-spacing: 0.5px; color: var(--dark-grey); + margin-right: 2rem; &.active { text-decoration: underline; @@ -85,6 +83,10 @@ $header-height: 10rem; background-color: white; margin-left: 2rem; + @media print { + display: none; + } + &.active { box-shadow: 0px 0px 10px -3px var(--primary); diff --git a/src/styles.scss b/src/styles.scss index 535948a..c2f68b0 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -25,6 +25,7 @@ button, a { --footer-grey: hsl(0, 0%, 93%); --error: #d07a7a; --success: #88b749; + --warning: #ffc409; }