notification window --partial commit

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,

src/app/notifications/notifications.component.html

@@ -0,0 +1,14 @@
+<section class="notifications">
+    <header>
+        <h4> Notification </h4>
+    </header>
+
+    <ul>
+        <li *ngFor="let notification of notifications">
+            <h5> {{ notification.text }} </h5>
+            <p *ngIf="notification.description"> {{ notification.description }} </p>
+            <span class="time-stamp"> {{ notification.timeStamp }} </span>
+        </li>
+    </ul>
+
+</section>

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<NotificationsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NotificationsComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotificationsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+    }
+
+}

src/app/tabs/tabs.component.html

@@ -12,6 +12,12 @@
         <img src="assets/icons/search.svg" alt="search icon">
     </div>
 
+    <button class="notification-button">
+        <img src="assets/icons/bell.svg" alt="bell icon">
+
+        <span class="badge"> 9+ </span>
+    </button>
+
     <section class="profile-actions">
         <img src="assets/icons/user.svg" alt="user icon">
         <span> Hi, Joe Ghatto </span>
@@ -20,6 +26,10 @@
 
 </section>
 
+<div class="notifications-window">
+    <app-notifications></app-notifications>
+</div>
+
 <div class="page">
     <router-outlet></router-outlet>
 </div>

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;

src/assets/icons/bell.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 611.999 611.999" style="enable-background:new 0 0 611.999 611.999;" xml:space="preserve" fill="#6d654e">
+<g>
+	<g>
+		<g>
+			<path d="M570.107,500.254c-65.037-29.371-67.511-155.441-67.559-158.622v-84.578c0-81.402-49.742-151.399-120.427-181.203
+				C381.969,34,347.883,0,306.001,0c-41.883,0-75.968,34.002-76.121,75.849c-70.682,29.804-120.425,99.801-120.425,181.203v84.578
+				c-0.046,3.181-2.522,129.251-67.561,158.622c-7.409,3.347-11.481,11.412-9.768,19.36c1.711,7.949,8.74,13.626,16.871,13.626
+				h164.88c3.38,18.594,12.172,35.892,25.619,49.903c17.86,18.608,41.479,28.856,66.502,28.856
+				c25.025,0,48.644-10.248,66.502-28.856c13.449-14.012,22.241-31.311,25.619-49.903h164.88c8.131,0,15.159-5.676,16.872-13.626
+				C581.586,511.664,577.516,503.6,570.107,500.254z M484.434,439.859c6.837,20.728,16.518,41.544,30.246,58.866H97.32
+				c13.726-17.32,23.407-38.135,30.244-58.866H484.434z M306.001,34.515c18.945,0,34.963,12.73,39.975,30.082
+				c-12.912-2.678-26.282-4.09-39.975-4.09s-27.063,1.411-39.975,4.09C271.039,47.246,287.057,34.515,306.001,34.515z
+				 M143.97,341.736v-84.685c0-89.343,72.686-162.029,162.031-162.029s162.031,72.686,162.031,162.029v84.826
+				c0.023,2.596,0.427,29.879,7.303,63.465H136.663C143.543,371.724,143.949,344.393,143.97,341.736z M306.001,577.485
+				c-26.341,0-49.33-18.992-56.709-44.246h113.416C355.329,558.493,332.344,577.485,306.001,577.485z"/>
+			<path d="M306.001,119.235c-74.25,0-134.657,60.405-134.657,134.654c0,9.531,7.727,17.258,17.258,17.258
+				c9.531,0,17.258-7.727,17.258-17.258c0-55.217,44.923-100.139,100.142-100.139c9.531,0,17.258-7.727,17.258-17.258
+				C323.259,126.96,315.532,119.235,306.001,119.235z"/>
+		</g>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>