Faq page

package-lock.json

@@ -7850,6 +7850,11 @@
         }
       }
     },
+    "moment": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser-dynamic": "~8.2.9",
     "@angular/router": "~8.2.9",
     "ionicons": "^4.6.3",
+    "moment": "^2.24.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.1"

src/app/app.module.ts

@@ -11,9 +11,9 @@ import { WidgetsHolderComponent } from './widgets-holder/widgets-holder.componen
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { OrdersComponent } from './orders/orders.component';
 import { MenuItemsComponent } from './menu-items/menu-items.component';
-import { OffersComponent } from './offers/offers.component';
 import { SchedulesComponent } from './schedules/schedules.component';
 import { CustomSelectorComponent } from './custom-selector/custom-selector.component';
+import { FaqComponent } from './faq/faq.component';
 
 @NgModule({
 	declarations: [
@@ -23,9 +23,9 @@ import { CustomSelectorComponent } from './custom-selector/custom-selector.compo
 		DashboardComponent,
 		OrdersComponent,
 		MenuItemsComponent,
-		OffersComponent,
 		SchedulesComponent,
-		CustomSelectorComponent
+		CustomSelectorComponent,
+		FaqComponent
 	],
 	imports: [
 		BrowserModule,

src/app/faq/faq.component.html

@@ -0,0 +1,39 @@
+<div class="widget-heading-holder">
+	<header> Frequently Asked Questions </header>
+
+	<div class="search-input">
+		<input type="text" placeholder="Quick Search">
+		<button> <i class="icon ion-md-search"></i> </button>
+	</div>
+</div>
+
+<div class="container">
+	<ul class="topic-list">
+		<li [ngClass]="{'active' : selectedCard === 1}" (click)="selectedCard = 1">
+			<header> General inquiries </header>
+			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+		</li>
+		<li [ngClass]="{'active' : selectedCard === 2}" (click)="selectedCard = 2">
+			<header> Mall App Features </header>
+			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+		</li>
+	</ul>
+
+	<ul class="topic-detail">
+		<div class="heading">
+			<header> General Inquiries </header>
+			<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
+		</div>
+
+		<li>
+			<header> What is the most frequently asked question?
+				<button (click)="showDetails = !showDetails" [ngClass]="{'active' : showDetails }">
+					<i class="icon" [ngClass]="{'ion-ios-add-circle-outline': !showDetails , 'ion-ios-remove-circle-outline' : showDetails}"></i>
+				</button>
+			</header>
+			<p *ngIf="showDetails">
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus at aliquid voluptatem ut similique vitae odit fuga minima cum. Eveniet, cumque? Rerum eius voluptatem ratione deserunt, quasi non. Accusantium, incidunt.
+			</p>
+		</li>
+	</ul>
+</div>

src/app/faq/faq.component.scss

@@ -0,0 +1,194 @@
+.search-input {
+	display: flex;
+	width: 35%;
+	height: 30px;
+	border-radius: 20px;
+	background-color: white;
+	color: var(--brand-blue);
+	align-items: center;
+	justify-content: space-between;
+
+	input {
+		border: 0;
+		font-size: 12px;
+		padding-left: 10px;
+		font-weight: 500;
+		color: var(--dark-grey);
+		flex-grow: 1;
+		letter-spacing: 1px;
+
+		&::placeholder {
+			color: var(--grey);
+		}
+	}
+
+	button {
+		border-radius: 50%;
+		width: 30px;
+		height: 30px;
+		color: var(--brand-blue);
+		font-size: 20px;
+		border: 1px solid var(--brand-blue);
+		background-color: white;
+		transition: background-color 0.3s, color 0.3s;
+
+		&:hover {
+			background-color: var(--brand-blue);
+			color: white;
+		}
+	}
+}
+
+.container {
+	display: flex;
+	width: 95%;
+	margin: 30px auto;
+	letter-spacing: 1px;
+}
+
+.topic-list {
+	width: 25%;
+	height: calc(100vh - 200px);
+	overflow: auto;
+	margin: 0 auto;
+	list-style: none;
+
+	&: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: white;
+		margin-bottom: 15px;
+		border-radius: 10px;
+		padding: 15px;
+		cursor: pointer;
+
+		&.active {
+			background-color: var(--brand-blue);
+			box-shadow: 0px 0px 5px #cecece;
+
+			header, p {
+				color: white;
+			}
+		}
+
+		header {
+			margin-bottom: 5px;
+			font-size: 14px;
+			color: var(--dark-grey);
+			font-weight: 500;
+		}
+
+		p {
+			font-size: 12px;
+			color: var(--grey);
+			line-height: 1.5;
+		}
+	}
+}
+
+.topic-detail {
+	width: 70%;
+	margin: 0 auto;
+	list-style: none;
+	background-color: white;
+	border-radius: 10px;
+	height: calc(100vh - 200px);
+	overflow: auto;
+	padding: 20px 25px;
+
+	&: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);
+	}
+
+	.heading {
+		margin-bottom: 20px;
+		header {
+			font-size: 20px;
+			color: var(--dark-grey);
+			font-weight: 500;
+		}
+
+		p {
+			font-size: 12px;
+			color: var(--grey);
+			line-height: 1.5;
+		}
+	}
+
+	li {
+		header {
+			display: flex;
+			width: 100%;
+			align-items: center;
+			justify-content: space-between;
+			font-size: 15px;
+			font-weight: 500;
+			color: var(--dark-grey);
+			border-bottom: 1px solid #efefef;
+			padding: 10px 0;
+
+			button {
+				background-color: transparent;
+				border: 0px;
+				color: var(--brand-blue);
+
+				&.active {
+					color: var(--grey);
+				}
+
+				i {
+					font-size: 25px;
+				}
+			}
+		}
+
+		p {
+			color: var(--grey);
+			font-size: 13px;
+			line-height: 1.5;
+			margin-top: 15px;
+		}
+	}
+}

src/app/offers/offers.component.spec.ts → src/app/faq/faq.component.spec.ts

@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { OffersComponent } from './offers.component';
+import { FaqComponent } from './faq.component';
 
-describe('OffersComponent', () => {
-  let component: OffersComponent;
-  let fixture: ComponentFixture<OffersComponent>;
+describe('FaqComponent', () => {
+  let component: FaqComponent;
+  let fixture: ComponentFixture<FaqComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ OffersComponent ]
+      declarations: [ FaqComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(OffersComponent);
+    fixture = TestBed.createComponent(FaqComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/faq/faq.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+	selector: 'app-faq',
+	templateUrl: './faq.component.html',
+	styleUrls: ['./faq.component.scss']
+})
+export class FaqComponent implements OnInit {
+	showDetails: boolean = true;
+	selectedCard: number = 1;
+
+	constructor() { }
+
+	ngOnInit() {
+	}
+
+}

src/app/offers/offers.component.html

@@ -1 +0,0 @@
-<p>offers works!</p>

src/app/offers/offers.component.ts

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

src/app/orders/orders.component.scss

@@ -25,6 +25,7 @@
 		font-weight: 500;
 		color: var(--dark-grey);
 		flex-grow: 1;
+		letter-spacing: 1px;
 
 		&::placeholder {
 			color: var(--grey);

src/app/schedules/schedules.component.html

@@ -1,6 +1,6 @@
 <div class="calendar-holder">
 	<div class="widget-heading-holder">
-		<header> Shop Events &amp; Timings </header>
+		<header> Shop Events and Timings </header>
 	</div>
 
 	<section class="calendar">
@@ -9,12 +9,12 @@
 		</div>
 
 		<div class="days">
-			<span> Sun </span><span> Mon </span><span> Tue </span><span> Wed </span>
-			<span> Thu </span><span> Fri </span><span> Sat </span>
+			<span> Sunday </span><span> Monday </span><span> Tuesday </span><span> Wednesday </span>
+			<span> Thursday </span><span> Friday </span><span> Saturday </span>
 		</div>
 		<div class="dates">
 			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
-			<span [ngClass]="{'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectedDate = selectedMonthDay; filterEvents()"> {{ selectedMonthDay }}
+			<span [ngClass]="{'current-date': currentDate === selectedMonthDay, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectDay(selectedMonthDay)"> {{ selectedMonthDay }}
 			</span>
 			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
 		</div>

src/app/schedules/schedules.component.scss

@@ -8,8 +8,7 @@
 }
 
 .calendar {
-    box-shadow: 0 0 10px -1px #bcbcbc;
-    padding: 15px 0;
+    padding: 15px 30px;
     background-color: white;
 	width: 100%;
 	border-radius: 10px;
@@ -19,26 +18,11 @@
 	    text-align: center;
 	    padding: 5px 0 20px;
 
-	    button,
 	    span {
-	        vertical-align: middle;
-	    }
-
-	    button {
-	        --padding-start: 0;
-	        --padding-end: 0;
-	    }
-
-	    i {
-	        color: var(--ion-color-lighter-grey);
-	        font-size: 22px;
-	    }
-
-	    span {
-	        color: var(--ion-color-blue);
-	        text-transform: uppercase;
-	        font-size: 18px;
-	        padding: 0 5px;
+	        color: black;
+	        text-transform: capitalize;
+	        font-size: 16px;
+			font-weight: 500;
 	        display: inline-block;
 	        width: 180px;
 	    }
@@ -48,17 +32,14 @@
     .days {
         display: flex;
         width: 100%;
-        margin: 5px 0;
 
         span {
             width: calc(100% / 7);
             text-align: center;
-            font-size: 14px;
-            color: var(--ion-color-brand-black);
-
-            &:first-child {
-                color: #f05525;
-            }
+            font-size: 12px;
+            color: var(--grey);
+			border-right: 1px solid #efefef;
+			padding: 5px 0;
         }
     }
 
@@ -68,57 +49,46 @@
         flex-wrap: wrap;
 
         span {
-            margin: 15px 0;
+			display: block;
+			cursor: pointer;
             font-size: 14px;
             width: calc(100% / 7);
-            text-align: center;
-            color: var(--ion-color-brand-black);
+            color: var(--dark-grey);
+			font-weight: 400;
             position: relative;
-
-            &::before {
-                content: '';
-                position: absolute;
-                left: 0;
-                top: -70%;
-                overflow: visible;
-                width: 100%;
-                height: 52px;
-                box-shadow: none;
-                border-radius: 50%;
-                transform: scale(0.8);
-            }
-
-            &::after {
-                content: '';
-                position: absolute;
-                left: 46%;
-                bottom: -5px;
-                width: 5px;
-                height: 5px;
-                border-radius: 50%;
-                overflow: hidden;
-                background-color: var(--ion-color-lighter-grey);
-                display: none;
-            }
+			height: 60px;
+			padding-left: 10px;
+			padding-top: 10px;
+			border-top: 1px solid #efefef;
+			border-right: 1px solid #efefef;
+			transition: background-color 0.3s, color 0.3s;
+
+			&:hover {
+				background-color: #efefef;
+			}
+
+			&.current-date {
+				color: var(--brand-blue);
+				font-weight: 700;
+
+				&::before {
+					content: '';
+					position: absolute;
+					left: 0;
+					top: 0;
+					width: 100%;
+					height: 3px;
+					background-color: var(--brand-blue);
+				}
+			}
 
             &.active {
-                &::before {
-                    box-shadow: 0 0 5px -1px var(--ion-color-light-grey);
-                }
-            }
-
-            &.taken {
-                &::after {
-                    display: block;
-                }
-            }
-
-            &:nth-child(7n + 1) {
-                color: #f05525;
+				background-color: var(--brand-blue);
+				color: white;
             }
 
             &.non-current-date {
-                color: var(--ion-color-lighter-grey);
+                color: #cecece;
             }
         }
     }

src/app/schedules/schedules.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import * as moment from 'moment';
 
 @Component({
 	selector: 'app-schedules',
@@ -6,6 +7,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./schedules.component.scss']
 })
 export class SchedulesComponent implements OnInit {
+	currentDate: number;
 	selectedDate: number;
     selectedMonth: string;
     selectedYear: number;
@@ -20,10 +22,14 @@ export class SchedulesComponent implements OnInit {
 	ngOnInit() {
 		this.selectedMonth = this.monthMap[(new Date()).getMonth()];
         this.selectedYear = (new Date()).getFullYear();
-        this.selectedDate = new Date().getDate();
+		this.currentDate = new Date().getDate();
         this.renderCalendar();
 	}
 
+	selectDay(selectedMonthDay: number) {
+		this.selectedDate = selectedMonthDay;
+	}
+
 	renderCalendar() {
         // Generate dates for the calendar
         let i = 1,

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

@@ -2,8 +2,10 @@
 	<img src="assets/logo.svg" alt="Logo">
 
 	<nav>
-		<a> FAQ's </a>
-		<a> Support </a>
+		<a [ngClass]="{'active' : selected_nav === 'faq'}"
+		(click)="selected_nav = 'faq'"> FAQ's </a>
+		<a [ngClass]="{'active' : selected_nav === 'support'}"
+		(click)="selected_nav = 'support'"> Support </a>
 		<button class="rect-button"> Logout </button>
 	</nav>
 </section>
@@ -45,5 +47,6 @@
 		<app-orders *ngIf="selected_nav === 'orders'"></app-orders>
 		<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>
 	</section>
 </div>

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

@@ -15,14 +15,34 @@
 	}
 
 	nav {
+		height: 70px;
+		display: flex;
+		align-items: center;
 
 		a, button {
-			margin: 0 15px;
+			margin: 0 25px;
 		}
 
 		a {
 			color: var(--grey);
 			font-size: 16px;
+			height: 70px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+
+			&.active {
+				&::before {
+					content: '';
+					position: absolute;
+					left: 0;
+					bottom: 0;
+					height: 3px;
+					width: 100%;
+					background-color: var(--brand-blue);
+				}
+			}
 		}
 
 		button {

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 = 'schedule';
+	selected_nav: string = 'faq';
 
 	constructor() { }