Support page completed

src/app/app.module.ts

@@ -14,6 +14,7 @@ import { MenuItemsComponent } from './menu-items/menu-items.component';
 import { SchedulesComponent } from './schedules/schedules.component';
 import { CustomSelectorComponent } from './custom-selector/custom-selector.component';
 import { FaqComponent } from './faq/faq.component';
+import { SupportComponent } from './support/support.component';
 
 @NgModule({
 	declarations: [
@@ -25,7 +26,8 @@ import { FaqComponent } from './faq/faq.component';
 		MenuItemsComponent,
 		SchedulesComponent,
 		CustomSelectorComponent,
-		FaqComponent
+		FaqComponent,
+		SupportComponent
 	],
 	imports: [
 		BrowserModule,

src/app/support/support.component.html

@@ -0,0 +1,57 @@
+<div class="container">
+	<section class="contact-details">
+		<header> Are you facing any problem? </header>
+		<p>
+			If you need instant support then use live chat option to reach us quickly. Our support will relpy
+			as soon as possible after you send us a message.
+		</p>
+		<div class="sub-header"> Or you can contact at </div>
+		<div class="contact-links-holder">
+			<a href="#"> <label> E-mail: </label> support@domain.com </a>
+			<a href="#"> <label> Phone: </label> +91 83938 83922 </a>
+		</div>
+	</section>
+
+	<section class="chat">
+		<header class="heading"> <i class="icon ion-ios-chatbubbles"></i> Start Live Chat </header>
+		<div class="sub-header">
+			<header> Ask us anything! </header>
+			<p> Our team typically replies in few minutes </p>
+		</div>
+		<ul class="conversation">
+			<li class="received-message">
+				Hi, How are you?
+			</li>
+			<li>
+				Hi
+			</li>
+			<li class="received-message">
+				Hi, How are you?
+			</li>
+			<li>
+				Hi
+			</li>
+			<li class="received-message">
+				Hi, How are you?
+			</li>
+			<li>
+				Hi
+			</li>
+			<li class="received-message">
+				Hi, How are you?
+			</li>
+			<li>
+				Hi
+			</li>
+			<li class="received-message">
+				Hi, How are you?
+			</li>
+			<li>
+				Hi
+			</li>
+		</ul>
+		<div class="chat-input-holder">
+			<input type="text" placeholder="Start Typing..."> <button> <i class="icon ion-md-send"></i> </button>
+		</div>
+	</section>
+</div>

src/app/support/support.component.scss

@@ -0,0 +1,168 @@
+.container {
+	width: 95%;
+	margin-left: auto;
+	display: flex;
+}
+
+.contact-details {
+	width: 65%;
+	text-align: center;
+	margin-top: 100px;
+	letter-spacing: 1px;
+
+	header {
+		font-size: 20px;
+		color: var(--dark-grey);
+		font-weight: 500;
+	}
+
+	p {
+		color: var(--grey);
+		font-size: 13px;
+		line-height: 1.5;
+		margin: 20px 0;
+	}
+
+	.sub-header {
+		font-size: 16px;
+		color: var(--dark-grey);
+		font-weight: 500;
+		margin-bottom: 20px;
+	}
+
+	.contact-links-holder {
+		a {
+			font-weight: 600;
+			background-color: #dce9f5;
+			padding: 7px 10px;
+			margin: 0 10px;
+			border-radius: 5px;
+			color: var(--brand-blue);
+			font-size: 13px;
+
+			label {
+				color: var(--dark-grey);
+			}
+		}
+	}
+}
+
+.chat {
+	background-color: white;
+	width: 30%;
+	margin-left: auto;
+	letter-spacing: 1px;
+	position: relative;
+
+	.heading {
+		font-size: 16px;
+		color: var(--dark-grey);
+		font-weight: 500;
+		margin: 30px 0 20px;
+		padding-left: 25px;
+
+		i {
+			color: var(--brand-blue);
+			font-size: 20px;
+			margin-right: 10px;
+		}
+	}
+
+	.sub-header {
+		background-color: #f5f9fd;
+		padding: 15px 25px;
+
+		header {
+			font-size: 14px;
+			color: var(--dark-grey);
+			font-weight: 500;
+		}
+
+		p {
+			font-size: 12px;
+			color: var(--grey);
+			line-height: 1.5;
+			margin-top: 5px;
+		}
+	}
+
+	.conversation {
+		list-style: none;
+		padding: 10px 25px;
+		height: calc(100vh - 275px);
+		overflow: auto;
+
+		&:hover {
+			&::-webkit-scrollbar {
+			  display: block;
+			}
+		}
+
+		&::-webkit-scrollbar {
+			width: 8px;
+			display: none;
+		}
+
+			/* Track */
+		&::-webkit-scrollbar-track {
+			background-color: white;
+		}
+		/* Handle */
+		&::-webkit-scrollbar-thumb {
+			background-color: rgba(black, 0.2);
+		}
+		/* Handle on hover */
+		&::-webkit-scrollbar-thumb:hover {
+			background-color: rgba(black, 0.5);
+		}
+
+		li {
+			background-color: #efefef;
+			color: var(--dark-grey);
+			font-size: 13px;
+			padding: 10px;
+			border-radius: 10px;
+			margin: 20px 0;
+			font-weight: 500;
+			text-align: right;
+
+			&.received-message {
+				background-color: #dce9f5;
+				text-align: left;
+			}
+		}
+	}
+
+	.chat-input-holder {
+		margin: 0 auto;
+		width: 90%;
+		height: 50px;
+		display: flex;
+		align-items: center;
+		border-radius: 5px;
+		box-shadow: inset 0px 0px 5px #cecece;
+		padding: 10px;
+		background: white;
+
+		input {
+			height: 100%;
+			flex-grow: 1;
+			border: 0;
+			font-weight: 500;
+			letter-spacing: 1px;
+			color: var(--grey);
+			padding-right: 10px;
+		}
+
+		button {
+			width: 30px;
+			height: 30px;
+			border-radius: 50%;
+			color: var(--brand-blue);
+			font-size: 15px;
+			background-color: white;
+			border: 1px solid #cecece;
+			box-shadow: 0px 0px 5px #cecece;
+		}
+	}
+}

src/app/support/support.component.spec.ts

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

src/app/support/support.component.ts

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

src/app/widgets-holder/widgets-holder.component.html

@@ -48,5 +48,6 @@
 		<app-menu-items *ngIf="selected_nav === 'items'"></app-menu-items>
 		<app-schedules *ngIf="selected_nav === 'schedule'"></app-schedules>
 		<app-faq *ngIf="selected_nav === 'faq'"></app-faq>
+		<app-support *ngIf="selected_nav === 'support'"></app-support>
 	</section>
 </div>

src/app/widgets-holder/widgets-holder.component.ts

@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'faq';
+	selected_nav: string = 'support';
 
 	constructor() { }