diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index de146a3..b58bcb0 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 { EServicesComponent } from './e-services/e-services.component'; import { LoginComponent } from './login/login.component'; import { MockComponent } from './mock/mock.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; @@ -11,7 +12,10 @@ const routes: Routes = [ { component: MockComponent, path: 'mock' }, { 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, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0bb3409..149b056 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -8,6 +8,7 @@ import { TabsComponent } from './tabs/tabs.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; import { FormsModule } from '@angular/forms'; import { MockComponent } from './mock/mock.component'; +import { EServicesComponent } from './e-services/e-services.component'; @NgModule({ declarations: [ @@ -15,7 +16,8 @@ import { MockComponent } from './mock/mock.component'; LoginComponent, TabsComponent, RegisterBusinessComponent, - MockComponent + MockComponent, + EServicesComponent ], imports: [ BrowserModule, diff --git a/src/app/e-services/e-services.component.html b/src/app/e-services/e-services.component.html new file mode 100644 index 0000000..6721cfe --- /dev/null +++ b/src/app/e-services/e-services.component.html @@ -0,0 +1,58 @@ +
+

+ E-Services +

+
+ +
+

Sole Proprietership & Partnership

+

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.

+
+ + +
+
+
S/N
+
E-Services
+
Fees (S$)
+
Actions
+
+ + +
\ No newline at end of file diff --git a/src/app/e-services/e-services.component.scss b/src/app/e-services/e-services.component.scss new file mode 100644 index 0000000..6c7c182 --- /dev/null +++ b/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; + } + } + } +} \ No newline at end of file diff --git a/src/app/e-services/e-services.component.spec.ts b/src/app/e-services/e-services.component.spec.ts new file mode 100644 index 0000000..b05cf97 --- /dev/null +++ b/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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EServicesComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/e-services/e-services.component.ts b/src/app/e-services/e-services.component.ts new file mode 100644 index 0000000..093d6d8 --- /dev/null +++ b/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 { + } + +} diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 8dccbc0..3ea54a3 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -1,4 +1,4 @@ -
+

Business Name Application

diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index 31a7555..1c54740 100644 --- a/src/app/register-business/register-business.component.scss +++ b/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; diff --git a/src/app/register-business/register-business.component.ts b/src/app/register-business/register-business.component.ts index 456feeb..961e3cc 100644 --- a/src/app/register-business/register-business.component.ts +++ b/src/app/register-business/register-business.component.ts @@ -12,7 +12,7 @@ interface Plan { styleUrls: ['./register-business.component.scss'] }) export class RegisterBusinessComponent implements OnInit { - formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'SELECT_PLAN'; + formState: 'CHECK_NAME' | 'INIT_REGISTER' | 'CONFIRM_INIT' | 'REGISTER_FORM' | 'SELECT_PLAN' | 'COMPLETE_PURCHASE' | undefined = 'CHECK_NAME'; nameToCheck: string = 'JK Enterprises ACRA Ltd'; isAppealing: boolean = false; agreeToReserve: boolean = false; diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index 3828d77..85a1af7 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -2,6 +2,10 @@ + +
@@ -16,21 +20,6 @@ -
- - - - -
-
\ No newline at end of file diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index e43534a..b7e1a95 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -17,6 +17,23 @@ $header-height: 10rem; } } + nav { + margin: 0 2rem; + display: flex; + align-items: center; + justify-content: flex-start; + + a { + font-size: 1.6rem; + letter-spacing: 0.5px; + color: var(--dark-grey); + + &:hover { + text-decoration: underline; + } + } + } + .search-input { position: relative; margin-left: auto; @@ -85,47 +102,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); } \ No newline at end of file diff --git a/src/assets/icons/services.svg b/src/assets/icons/services.svg new file mode 100644 index 0000000..f462d29 --- /dev/null +++ b/src/assets/icons/services.svg @@ -0,0 +1 @@ +ionicons-v5-o \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 5824c20..743617e 100644 --- a/src/styles.scss +++ b/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; + } } \ No newline at end of file