diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 149b056..440b8a6 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -9,6 +9,7 @@ import { RegisterBusinessComponent } from './register-business/register-business import { FormsModule } from '@angular/forms'; import { MockComponent } from './mock/mock.component'; import { EServicesComponent } from './e-services/e-services.component'; +import { NotificationsComponent } from './notifications/notifications.component'; @NgModule({ declarations: [ @@ -17,7 +18,8 @@ import { EServicesComponent } from './e-services/e-services.component'; TabsComponent, RegisterBusinessComponent, MockComponent, - EServicesComponent + EServicesComponent, + NotificationsComponent ], imports: [ BrowserModule, diff --git a/src/app/notifications/notifications.component.html b/src/app/notifications/notifications.component.html new file mode 100644 index 0000000..a940991 --- /dev/null +++ b/src/app/notifications/notifications.component.html @@ -0,0 +1,14 @@ +
+
+

Notification

+
+ + + +
\ No newline at end of file diff --git a/src/app/notifications/notifications.component.scss b/src/app/notifications/notifications.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/notifications/notifications.component.spec.ts b/src/app/notifications/notifications.component.spec.ts new file mode 100644 index 0000000..4ae22ed --- /dev/null +++ b/src/app/notifications/notifications.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotificationsComponent } from './notifications.component'; + +describe('NotificationsComponent', () => { + let component: NotificationsComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NotificationsComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NotificationsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/notifications/notifications.component.ts b/src/app/notifications/notifications.component.ts new file mode 100644 index 0000000..243dfe2 --- /dev/null +++ b/src/app/notifications/notifications.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-notifications', + templateUrl: './notifications.component.html', + styleUrls: ['./notifications.component.scss'] +}) +export class NotificationsComponent implements OnInit { + notifications: Array<{ + text: string, + timeStamp: string, + description?: string, + redirectionUrl?: string, + }> = [{ + text: "New name application has been submitted", + description: "A new Applicant in the company name Kimao has applied for an appeal", + timeStamp: "1 hour ago", + }, { + text: "Request to create a new Committee", + timeStamp: "2 hours ago", + }, { + text: "New name application has been submitted", + description: "A new Applicant in the company name Kimao has applied for an appeal", + timeStamp: "1 hour ago", + }, { + text: "Request to create a new Committee", + timeStamp: "2 hours ago", + }]; + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index 85a1af7..05420ef 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -12,6 +12,12 @@ search icon + +
user icon Hi, Joe Ghatto @@ -20,6 +26,10 @@
+
+ +
+
\ No newline at end of file diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index 916fb51..4c3966e 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -75,6 +75,60 @@ $header-height: 10rem; } } + + .notification-button { + width: 5rem; + height: 5rem; + border-radius: 50%; + border: none; + position: relative; + background-color: white; + margin-left: 2rem; + + &:hover { + box-shadow: 0px 0px 10px -3px var(--primary); + } + + .badge { + background-color: var(--highlight); + color: white; + font-size: 1.1rem; + border-radius: 7px; + position: absolute; + right: 0; + top: -0.5rem; + width: 2rem; + height: 2rem; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + } + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: var(--secondary); + opacity: 0.3; + filter: brightness(110%); + border-radius: 50%; + } + + & > * { + position: relative; + } + + img { + width: 40%; + height: 40%; + } + } + .profile-actions { margin: 0 2rem; display: flex; @@ -119,6 +173,19 @@ $header-height: 10rem; } } +.notifications-window { + position: fixed; + top: calc(#{$header-height} - 1rem); + background-color: white; + width: 40rem; + min-height: 10rem; + max-height: 40rem; + box-shadow: 0px 0px 15px -7px var(--dark-grey); + z-index: 2; + right: 26rem; + border-radius: 1.5rem; +} + .page { height: calc(100vh - #{$header-height}); margin: 0 auto; diff --git a/src/assets/icons/bell.svg b/src/assets/icons/bell.svg new file mode 100644 index 0000000..f960a67 --- /dev/null +++ b/src/assets/icons/bell.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +