E Services Page UI

src/app/app-routing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { EServicesComponent } from './e-services/e-services.component';
 import { LoginComponent } from './login/login.component';
 import { RegisterBusinessComponent } from './register-business/register-business.component';
 import { TabsComponent } from './tabs/tabs.component';
@@ -9,7 +10,10 @@ const routes: Routes = [
     { component: LoginComponent, path: 'login' },
     { component: TabsComponent, path: 'tabs', children : [
         {
-            path: '', pathMatch: 'full', redirectTo: 'register-business'
+            path: '', pathMatch: 'full', redirectTo: 'e-services'
+        }, {
+            path: 'e-services',
+            component: EServicesComponent,
         }, {
             path: 'register-business',
             component: RegisterBusinessComponent,

src/app/app.module.ts

@@ -7,13 +7,15 @@ import { LoginComponent } from './login/login.component';
 import { TabsComponent } from './tabs/tabs.component';
 import { RegisterBusinessComponent } from './register-business/register-business.component';
 import { FormsModule } from '@angular/forms';
+import { EServicesComponent } from './e-services/e-services.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     LoginComponent,
     TabsComponent,
-    RegisterBusinessComponent
+    RegisterBusinessComponent,
+    EServicesComponent
   ],
   imports: [
     BrowserModule,

src/app/e-services/e-services.component.html

@@ -0,0 +1,58 @@
+<header class="tab-header">
+    <h2>
+        E-Services
+    </h2>
+</header>
+
+<header class="page-heading">
+    <h1> Sole Proprietership &amp; Partnership </h1>
+    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti, adipisci doloribus maxime cum voluptatibus ea, ratione at odit ab modi nihil ipsam? Odit cum ullam harum. Voluptatem, fugiat vel. </p>
+</header>
+
+
+<section class="table">
+    <header>
+        <div class="cell"> S/N </div>
+        <div class="cell"> E-Services </div>
+        <div class="cell"> Fees (₹) </div>
+        <div class="cell"> Actions </div>
+    </header>
+
+    <ul>
+        <li>
+            <div class="cell"> 1 </div>
+            <div class="cell">
+                <h5> Application for a New Business Name </h5>
+                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi sapiente beatae est nobis voluptatibus. Pariatur, unde enim libero dignissimos quos ipsa sed vitae ex illum rem, eius explicabo fugit nisi! </p>
+            </div>
+            <div class="cell"> 2000 </div>
+            <div class="cell">
+                <button [routerLink]="['/tabs/register-business']"> Apply </button>
+            </div>
+        </li>
+
+        <li>
+            <div class="cell"> 2 </div>
+            <div class="cell">
+                <h5> Application to register Person(s) Business </h5>
+                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi sapiente beatae est nobis voluptatibus. Pariatur, unde enim libero dignissimos quos ipsa sed vitae ex illum rem, eius explicabo fugit nisi! </p>
+            </div>
+            <div class="cell"> 2000 </div>
+            <div class="cell">
+                <button [routerLink]="['/tabs/register-business']"> Apply </button>
+            </div>
+        </li>
+
+        <li>
+            <div class="cell"> 2 </div>
+            <div class="cell">
+                <h5> Withdrawal of Name Application </h5>
+                <p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi sapiente beatae est nobis voluptatibus. Pariatur, unde enim libero dignissimos quos ipsa sed vitae ex illum rem, eius explicabo fugit nisi! </p>
+            </div>
+            <div class="cell"> 2000 </div>
+            <div class="cell">
+                <button [routerLink]="['/tabs/register-business']"> Apply </button>
+            </div>
+        </li>
+    </ul>
+</section>

src/app/e-services/e-services.component.scss

@@ -0,0 +1,115 @@
+.page-heading {
+    text-align: center;
+    line-height: 1.5;
+    margin: 3rem auto;
+
+    h1 {
+        font-size: 3rem;
+        color: var(--dark-grey);
+        filter: brightness(80%);
+        font-weight: 300;
+        letter-spacing: 0.5px;
+        margin-bottom: 1.5rem;
+    }
+
+    p {
+        font-size: 1.4rem;
+        color: var(--dark-grey);
+        width: 50%;
+        margin: 0 auto;
+    }
+}
+
+.table {
+    margin: 4rem auto;
+    width: calc(100% - 4rem);
+    border-radius: 1rem;
+    overflow: auto;
+    border: 2px solid var(--border-grey);
+    min-height: 10rem;
+
+    header {
+        background: linear-gradient(90deg, var(--secondary) 0%, var(--primary));
+        color: white;
+        font-size: 1.6rem;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        text-align: center;
+        height: 5.5rem;
+        font-weight: 300;
+        letter-spacing: 0.5px;
+    }
+
+    .cell {
+        &:nth-child(1) {
+            width: 10%;
+        }
+        &:nth-child(2) {
+            text-align: left;
+            width: calc(90% - 30rem);
+        }       
+        &:nth-child(3) {
+            width: 10rem;
+        }
+        &:nth-child(4) {
+            width: 20rem;
+        }
+    }
+
+    ul {
+        list-style: none;        
+    }
+    
+    li {
+        display: flex;
+        align-items: flex-start;
+        justify-content: flex-start;
+        text-align: center;
+        padding: 2rem 0;            
+
+        &:nth-child(even) {
+            background-color: var(--border-grey);
+        }
+
+        .cell {
+            font-size: 1.4rem;
+            color: var(--dark-grey);
+            line-height: 1.7;
+
+            &:nth-child(1) {
+                margin-top: 1rem;
+                font-weight: 500;
+            }
+
+            &:nth-child(3) {
+                font-size: 1.6rem;
+                margin-top: 1rem;
+                letter-spacing: 0.5px;
+            }
+
+            &:nth-child(4) {
+                align-self: center;
+            }
+
+            h5 {
+                font-weight: 500;
+                filter: brightness(80%);
+                font-size: 1.6rem;
+            }
+
+            button {
+                background-color: var(--highlight);
+                font-size: 1.5rem;
+                letter-spacing: 0.5px;
+                color: white;
+                border-radius: 4rem;
+                height: 4rem;
+                width: 90%;
+                display: block;
+                margin: 0 auto;
+                border: 0px;
+            }
+        }
+    }
+}

src/app/e-services/e-services.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EServicesComponent } from './e-services.component';
+
+describe('EServicesComponent', () => {
+  let component: EServicesComponent;
+  let fixture: ComponentFixture<EServicesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EServicesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EServicesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/e-services/e-services.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-e-services',
+  templateUrl: './e-services.component.html',
+  styleUrls: ['./e-services.component.scss']
+})
+export class EServicesComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/register-business/register-business.component.html

@@ -1,4 +1,4 @@
-<header>
+<header class="tab-header">
     <h2>
         Business Name Application
     </h2>

src/app/register-business/register-business.component.scss

@@ -1,26 +1,3 @@
-header {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 0 2rem;
-
-    &::after {
-        content: '';
-        display: block;
-        flex-grow: 1;
-        height: 2px;
-        background-color: var(--border-grey);
-        opacity: 0.7;
-        margin-left: 2rem;
-    }
-
-    h2 {
-        font-size: 2.4rem;
-        color: var(--primary);
-        font-weight: 400;
-    }
-}
-
 .search-input-container {
     width: 60%;
     margin: 0 auto;

src/app/tabs/tabs.component.html

@@ -2,6 +2,10 @@
     <figure class="logo">
         <img src="assets/icons/logo.svg" alt="logo image">
     </figure>
+    
+    <nav>
+        <a [routerLink]="['/tabs/e-services']"> E-Services </a>
+    </nav>
 
     <div class="search-input">
         <input type="text" placeholder="Search for Business Entities">
@@ -16,21 +20,6 @@
 
 </section>
 
-<section class="tabs">
-    <button class="active">
-        <img src="assets/icons/home.svg" alt="home icon">
-    </button>
-    <button>
-        <img src="assets/icons/dashboard.svg" alt="dashboard icon">
-    </button>
-    <button>
-        <img src="assets/icons/tiles-dashboard.svg" alt="tiles dashboard icon">
-    </button>
-    <button>
-        <img src="assets/icons/settings.svg" alt="settings icon">
-    </button>
-</section>
-
 <div class="page">
     <router-outlet></router-outlet>
 </div>

src/app/tabs/tabs.component.scss

@@ -85,47 +85,9 @@ $header-height: 10rem;
     }
 }
 
-$tabs-width: 7rem;
-$tabs-offset: 20px;
-
-.tabs {
-    position: fixed;
-    height: calc(100% - #{$header-height} - 20px);
-    top: $header-height;
-    left: $tabs-offset;
-    background-color: var(--primary);
-    border-radius: $tabs-width;
-    width: $tabs-width;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    button {
-        display: block;
-        width: 100%;
-        background-color: transparent;
-        border: 0px;
-        margin: 2.5rem 0;
-
-        &:last-child {
-            margin-top: auto;
-        }
-
-        img {
-            width: 1.8rem;
-        }
-
-        &.active {
-            img {
-                opacity: 0.6;
-            }
-        }
-    }
-}
-
 .page {
     height: calc(100vh - #{$header-height});
+    margin: 0 auto;
     overflow: auto;
-    margin-left: calc(#{$tabs-width} + #{$tabs-offset});
+    width: calc(100% - 4rem);
 }

src/assets/icons/services.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-o</title><line x1="160" y1="144" x2="448" y2="144" style="fill:none;stroke:#f0ead1;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="160" y1="256" x2="448" y2="256" style="fill:none;stroke:#f0ead1;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="160" y1="368" x2="448" y2="368" style="fill:none;stroke:#f0ead1;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="80" cy="144" r="16" style="fill:none;stroke:#f0ead1;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="80" cy="256" r="16" style="fill:none;stroke:#f0ead1;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="80" cy="368" r="16" style="fill:none;stroke:#f0ead1;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

src/styles.scss

@@ -23,4 +23,28 @@ button, a {
     --border-grey: #e8e8e8;
     --error: #d07a7a;
     --success: #88b749;
+}
+
+
+.tab-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 0 2rem;
+
+    &::after {
+        content: '';
+        display: block;
+        flex-grow: 1;
+        height: 2px;
+        background-color: var(--border-grey);
+        opacity: 0.7;
+        margin-left: 2rem;
+    }
+
+    h2 {
+        font-size: 2.4rem;
+        color: var(--primary);
+        font-weight: 400;
+    }
 }