Merge branch 'master' of webtrigon.com:lms-app-new

src/app/app-routing.module.ts

@@ -12,6 +12,7 @@ import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-note
 import { QuizComponent } from './tabs/courses/quiz/quiz.component';
 import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component';
 import { ChatPageComponent } from './chat-page/chat-page.component';
+import { SettingsComponent } from './settings/settings.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -28,6 +29,7 @@ const routes: Routes = [
     { component: ForumPageComponent, path: 'forum'},
     { component: PostDetailsComponent, path: 'forum-post-details'},
     { component: ChatPageComponent, path: 'chats'},
+    { component: SettingsComponent, path: 'settings'},
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { QuizComponent } from './tabs/courses/quiz/quiz.component';
 import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component';
 import { ChatPageComponent } from './chat-page/chat-page.component';
 import { ChatWindowComponent } from './chat-page/chat-window/chat-window.component';
+import { SettingsComponent } from './settings/settings.component';
 
 @NgModule({
 	declarations: [
@@ -51,6 +52,7 @@ import { ChatWindowComponent } from './chat-page/chat-window/chat-window.compone
 		PostDetailsComponent,
 		ChatPageComponent,
 		ChatWindowComponent,
+		SettingsComponent,
 	],
 	imports: [
 		BrowserModule,

src/app/settings/settings.component.html

@@ -0,0 +1,46 @@
+<div class="page">
+    <header class="nav-header">
+        <button class="close-button" (click)="back()">
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+        </button>
+        <h5>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/comment.svg"></svg-icon>
+            <span> Settings </span>
+        </h5>
+    </header>
+
+    <ul>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/010-moon.svg"></svg-icon>
+            Night Mode
+
+            <div class="end-slot">
+                <div class="toggle" [ngClass]="{'active' : isNightModeOn }" (click)="isNightModeOn = !isNightModeOn"></div>
+            </div>
+        </li>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/021-paint-brush.svg"></svg-icon>
+            Theme
+        </li>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/008-bell.svg"></svg-icon>
+            Notifications
+        </li>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/017-share.svg"></svg-icon>
+            On Social Media
+        </li>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/019-favorites-button.svg"></svg-icon>
+            Share and Rate
+        </li>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/012-round.svg"></svg-icon>
+            FAQ
+        </li>
+        <li>
+            <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/015-login.svg"></svg-icon>
+            Terms & Policy
+        </li>
+    </ul>
+</div>

src/app/settings/settings.component.scss

@@ -0,0 +1,106 @@
+.page {
+    background-color: var(--black);
+    height: 100vh;
+    overflow: auto;
+}
+
+.nav-header {
+    background-color: var(--ash-black);
+    display: flex;
+    align-items: center;
+    padding: 0 5%;
+    height: 60px;
+    position: sticky;
+    position: -webkit-sticky;
+    top: 0;
+    z-index: 1;
+    box-shadow: 0px 0px 5px var(--black);
+
+    .close-button {
+        border: 0px;
+        background-color: transparent;
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: var(--light-grey);
+        }
+    }
+
+    h5 {
+        font-size: 16px;
+        color: white;
+        font-weight: 400;
+        margin-left: 20px;
+        letter-spacing: 1px;
+
+        .icon {
+            width: 15px;
+            height: 15px;
+            fill: white;
+            margin-right: 3px;
+            vertical-align: middle;
+            position: relative;
+            top: -1px;
+        }
+    }
+}
+
+
+ul {
+    list-style: none;
+}
+
+li {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid var(--dark-grey);
+    height: 70px;
+    padding: 0 15px;
+    color: var(--light-grey);
+    font-size: 14px;
+    letter-spacing: 1px;
+
+    .icon {
+        width: 25px;
+        height: 25px;
+        fill: white;
+        margin-right: 15px;
+    }
+
+    .end-slot {
+        margin-left: auto;
+    }
+
+    .toggle {
+        height: 15px;
+        background-color: var(--light-grey);
+        position: relative;
+        width: 40px;
+        overflow: visible;
+        border-radius: 30px;
+        transition: background-color 0.3s;
+
+        &.active {
+            background-color: var(--teal-green);
+
+            &::before {
+                transform: scale(1.5)translateX(100%);
+            }
+        }
+
+        &::before {
+            content: '';
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background-color: white;
+            display: block;
+            left: 0px;
+            top: 0px;
+            z-index: 1;
+            box-shadow: 0px 0px 5px var(--black);
+            transform: scale(1.5);
+            transition: transform 0.3s;
+        }
+    }
+}

src/app/settings/settings.component.spec.ts

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

src/app/settings/settings.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+    selector: 'app-settings',
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss']
+})
+export class SettingsComponent implements OnInit {
+    isNightModeOn: boolean = true;
+
+    constructor(
+        private location: Location
+    ) { }
+
+    ngOnInit(): void {
+    }
+
+    back() {
+        this.location.back();
+    }
+
+}

src/app/tabs/more/more.component.html

@@ -1,7 +1,7 @@
 <div class="page-container">
 
     <header class="nav-header">
-        <button class="settings-button">
+        <button class="settings-button" [routerLink]="['/settings']">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/settings.svg"></svg-icon>
         </button>
     </header>

src/assets/custom-icons/008-bell.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M466.791,408.219c-1.673-26.06-13.707-50.235-33.703-67.484l-25.927-178.461
+			c-8.207-61.902-53.586-112.495-113.771-127.653C291.915,15.284,275.708,0,256,0s-35.915,15.284-37.391,34.621
+			c-60.184,15.158-105.563,65.748-113.758,127.561L78.912,340.735c-19.996,17.25-32.03,41.424-33.703,67.484
+			C36.371,411.256,30,419.645,30,429.5c0,12.406,10.093,22.5,22.5,22.5h124.126c9.939,35.102,42.389,60,79.374,60
+			c37.003,0,69.437-24.891,79.375-60H459.5c12.406,0,22.5-10.094,22.5-22.5C482,419.645,475.628,411.256,466.791,408.219z
+			 M90.818,350.333c1.92-1.552,2.919-3.914,2.772-6.296l26.118-179.792c7.637-57.597,50.973-104.333,107.836-116.297
+			c3.471-0.729,5.956-3.792,5.956-7.339V37.5c0-12.406,10.093-22.5,22.5-22.5c12.406,0,22.5,10.094,22.5,22.5v3.109
+			c0,3.547,2.484,6.609,5.956,7.339c56.863,11.964,100.199,58.699,107.849,116.39L418.41,344.04
+			c-0.146,2.381,0.853,4.741,2.772,6.293c17.608,14.231,28.459,34.573,30.471,56.667H60.346
+			C62.358,384.906,73.209,364.564,90.818,350.333z M256,497c-28.809,0-54.26-18.455-63.653-45h127.305
+			C310.261,478.548,284.824,497,256,497z M459.5,437H329.499c-0.012,0-0.024,0-0.036,0H52.5c-4.136,0-7.5-3.364-7.5-7.5
+			s3.364-7.5,7.5-7.5h407c4.136,0,7.5,3.364,7.5,7.5S463.636,437,459.5,437z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M378.168,337H197.524c-4.142,0-7.5,3.357-7.5,7.5s3.358,7.5,7.5,7.5h180.644c4.143,0,7.5-3.357,7.5-7.5
+			S382.311,337,378.168,337z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M167.524,337h-33.692c-4.142,0-7.5,3.357-7.5,7.5s3.357,7.5,7.5,7.5h33.692c4.142,0,7.5-3.357,7.5-7.5
+			S171.666,337,167.524,337z"/>
+	</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>

src/assets/custom-icons/010-moon.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M503.686,326.871c-7.932-6.33-19.109-6.452-27.18-0.29c-35.597,27.194-78.143,41.567-123.041,41.567
+				c-12.218,0-24.465-1.1-36.401-3.268c-4.761-0.868-9.317,2.291-10.181,7.051c-0.865,4.758,2.292,9.317,7.051,10.181
+				c12.966,2.356,26.266,3.55,39.53,3.55c48.774,0,94.997-15.617,133.671-45.162c1.67-1.276,3.982-1.25,5.624,0.059
+				c1.641,1.31,2.176,3.559,1.303,5.469c-19.069,41.693-49.47,77.047-87.915,102.238c-39.456,25.851-85.352,39.517-132.724,39.517
+				c-133.718,0-242.506-108.788-242.506-242.506c0-47.375,13.665-93.27,39.517-132.723c25.191-38.447,60.544-68.847,102.242-87.917
+				c1.908-0.874,4.152-0.337,5.462,1.305c1.309,1.641,1.336,3.953,0.061,5.621c-29.546,38.68-45.163,84.903-45.163,133.673
+				c0,47.23,14.783,92.296,42.752,130.328c27.397,37.254,64.95,64.578,108.6,79.017c4.595,1.516,9.545-0.974,11.065-5.564
+				c1.518-4.592-0.973-9.547-5.564-11.065c-83.343-27.567-139.338-105.013-139.338-192.715c0-44.895,14.374-87.442,41.567-123.042
+				c6.163-8.068,6.042-19.244-0.292-27.179c-6.337-7.94-17.215-10.527-26.439-6.304c-44.699,20.442-82.6,53.032-109.603,94.242
+				c-27.727,42.313-42.382,91.528-42.382,142.323c0,143.376,116.646,260.021,260.021,260.021
+				c50.792,0,100.007-14.655,142.324-42.382c41.209-27.003,73.8-64.903,94.245-109.603
+				C514.213,344.081,511.622,333.208,503.686,326.871z"/>
+			<path d="M251.454,164.085c20.691,0,37.526,16.834,37.526,37.525c0,4.836,3.921,8.757,8.757,8.757s8.757-3.921,8.757-8.757
+				c0-20.691,16.834-37.525,37.525-37.525c4.836,0,8.757-3.921,8.757-8.757c0-4.836-3.921-8.757-8.757-8.757
+				c-20.691,0-37.525-16.835-37.525-37.526c0-4.836-3.921-8.757-8.757-8.757s-8.757,3.921-8.757,8.757
+				c0,20.691-16.835,37.526-37.526,37.526c-4.836,0-8.757,3.921-8.757,8.757C242.697,160.164,246.618,164.085,251.454,164.085z
+				 M297.737,138.804c4.267,6.614,9.909,12.256,16.523,16.524c-6.614,4.267-12.255,9.909-16.523,16.523
+				c-4.267-6.614-9.91-12.255-16.524-16.523C287.827,151.061,293.47,145.418,297.737,138.804z"/>
+			<path d="M375.404,276.696c15.022,0,27.244-12.221,27.244-27.242c0-15.022-12.222-27.244-27.244-27.244
+				s-27.243,12.222-27.243,27.244C348.163,264.475,360.383,276.696,375.404,276.696z M375.404,239.726
+				c5.364,0,9.729,4.364,9.729,9.729c0,5.363-4.364,9.727-9.729,9.727s-9.728-4.363-9.728-9.727
+				C365.677,244.09,370.04,239.726,375.404,239.726z"/>
+			<path d="M40.451,436.768c-15.022,0-27.243,12.221-27.243,27.243c0,15.022,12.221,27.244,27.243,27.244
+				c15.022,0,27.243-12.222,27.243-27.244C67.694,448.989,55.473,436.768,40.451,436.768z M40.451,473.739
+				c-5.364,0-9.728-4.364-9.728-9.729c0-5.365,4.364-9.727,9.728-9.727s9.728,4.363,9.728,9.728
+				C50.179,469.375,45.816,473.739,40.451,473.739z"/>
+			<circle cx="297.736" cy="260.44" r="10.979"/>
+			<circle cx="10.979" cy="392.27" r="10.979"/>
+			<circle cx="368.144" cy="90.735" r="10.979"/>
+		</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>

src/assets/custom-icons/012-round.svg

@@ -0,0 +1,77 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path  d="M411.272,52.471c-44.929-34.326-98.621-52.47-155.273-52.47c-68.38,0-132.667,26.629-181.019,74.98
+			C26.629,123.334,0,187.621,0,256.001c0,68.463,26.686,132.807,75.143,181.178c1.626,1.622,3.755,2.434,5.885,2.434
+			c2.133,0,4.268-0.815,5.895-2.444c3.249-3.256,3.245-8.53-0.01-11.779c-45.305-45.224-70.254-105.38-70.254-169.388
+			c0-63.931,24.896-124.035,70.102-169.241c45.206-45.205,105.31-70.101,169.24-70.101c52.964,0,103.16,16.961,145.158,49.049
+			c3.657,2.793,8.883,2.093,11.676-1.561C415.626,60.49,414.927,55.264,411.272,52.471z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path  d="M437.234,75.199c-3.248-3.254-8.522-3.263-11.779-0.012c-3.257,3.248-3.263,8.522-0.014,11.778
+			c45.076,45.185,69.901,105.216,69.901,169.035c0,63.931-24.896,124.035-70.102,169.24c-45.206,45.206-105.31,70.102-169.24,70.102
+			c-52.784,0-102.841-16.856-144.76-48.744c-3.66-2.785-8.886-2.074-11.672,1.586c-2.785,3.661-2.074,8.886,1.586,11.672
+			c44.842,34.113,98.387,52.144,154.846,52.144c68.38,0,132.667-26.629,181.019-74.98C485.371,388.666,512,324.379,512,255.999
+			C512,187.738,485.447,123.528,437.234,75.199z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path  d="M262.474,352.114c-16.457,0-30.361,13.904-30.361,30.361v8.094c0,16.741,13.62,30.361,30.361,30.361
+			c17.309,0,30.361-13.052,30.361-30.361v-8.094C292.833,365.451,279.498,352.114,262.474,352.114z M276.175,390.568
+			c0,7.939-5.763,13.703-13.703,13.703c-7.556,0-13.703-6.147-13.703-13.703v-8.094c0-7.299,6.403-13.703,13.703-13.703
+			c7.811,0,13.703,5.891,13.703,13.703V390.568z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path  d="M365.673,192.283c0-56.657-46.296-102.75-103.2-102.75c-36.409,0-70.353,19.506-88.577,50.893
+			c-8.459,14.501-3.842,32.702,10.508,41.437c0.044,0.027,0.089,0.053,0.134,0.08c4.746,2.768,10.114,4.232,15.521,4.232
+			c10.962-0.001,20.848-5.729,26.468-15.364c7.301-12.679,21.074-20.556,35.947-20.556c24.073,0,42.928,18.461,42.928,42.029
+			c0,23.176-19.258,42.029-42.928,42.029c-16.174,0-30.361,14.187-30.361,30.361c0,0.328,0.014,0.642,0.04,0.944
+			c-0.028,0.302-0.04,0.589-0.04,0.855v46.761c0,16.741,13.619,30.361,30.361,30.361c17.309,0,30.361-13.052,30.361-30.361v-22.852
+			h-0.001C336.043,277.245,365.673,237.806,365.673,192.283z M282.588,275.901c-3.758,0.888-6.411,4.243-6.411,8.105v29.226
+			c0,7.939-5.763,13.703-13.703,13.703c-7.556,0-13.703-6.147-13.703-13.703v-44.853c0.345-1.038,0.45-2.011,0.45-2.807
+			c0-0.817-0.12-1.622-0.351-2.392c0.85-6.463,7.061-12.21,13.604-12.21c32.856,0,59.586-26.327,59.586-58.687
+			c0-15.908-6.222-30.739-17.519-41.762c-11.184-10.914-26.124-16.924-42.068-16.924c-20.812,0-40.118,11.075-50.359,28.861
+			c-2.578,4.419-7.085,7.057-12.057,7.058c-2.435,0-4.874-0.665-7.059-1.923c-6.577-4.048-8.604-12.105-4.705-18.788
+			c15.262-26.285,43.686-42.614,74.18-42.614c47.719,0,86.542,38.621,86.542,86.092
+			C349.015,232.264,321.699,266.649,282.588,275.901z"/>
+	</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>

src/assets/custom-icons/015-login.svg

@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M432.624,214.472h-2.628v-67.811c0-39.275-15.378-76.194-43.302-103.959C358.977,15.144,322.304,0,283.343,0
+			c-0.287,0-0.576,0.001-0.864,0.002C202.081,0.464,136.673,66.94,136.673,148.188v36.321c0,4.355,3.53,7.885,7.885,7.885h42.053
+			c4.355,0,7.885-3.53,7.885-7.885v-36.615c0-49.193,39.459-89.597,87.96-90.067c23.882-0.187,46.361,8.91,63.356,25.741
+			c16.998,16.835,26.36,39.241,26.36,63.093v67.811H134.045c-21.74,0-39.425,17.686-39.425,39.425v250.218
+			c0,4.355,3.53,7.885,7.885,7.885h361.659c4.355,0,7.885-3.53,7.885-7.885V253.897
+			C472.049,232.158,454.364,214.472,432.624,214.472z M356.909,72.363c-20.009-19.816-46.504-30.609-74.605-30.305
+			c-57.113,0.554-103.577,48.031-103.577,105.836v28.73h-26.283v-28.436c0-72.602,58.374-132.003,130.126-132.416
+			c0.259-0.001,0.512-0.002,0.771-0.002c34.765,0,67.497,13.519,92.235,38.115c24.924,24.782,38.651,57.731,38.651,92.776v67.811
+			h-26.283v-67.811C387.942,118.568,376.921,92.182,356.909,72.363z M456.279,496.23H110.39V253.897
+			c0-13.044,10.611-23.655,23.655-23.655h246.037h42.029h10.513c13.044,0,23.655,10.611,23.655,23.655V496.23z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M297.578,350.283c22.964-6.271,39.9-27.304,39.9-52.229c0-29.855-24.289-54.144-54.144-54.144
+			s-54.144,24.289-54.144,54.144c0,24.925,16.936,45.958,39.9,52.229c-39.322,6.783-69.338,41.112-69.338,82.342v42.053
+			c0,4.355,3.53,7.885,7.885,7.885h151.392c4.355,0,7.885-3.53,7.885-7.885v-42.053C366.916,391.395,336.9,357.066,297.578,350.283z
+			 M244.961,298.053c0-21.159,17.215-38.374,38.374-38.374s38.374,17.215,38.374,38.374s-17.215,38.374-38.374,38.374
+			S244.961,319.213,244.961,298.053z M351.146,466.793H215.524v-34.168c0-37.391,30.42-67.811,67.811-67.811
+			s67.811,30.42,67.811,67.811V466.793z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M422.111,269.142c-4.355,0-7.885,3.53-7.885,7.885V382.16c0,4.355,3.53,7.885,7.885,7.885s7.885-3.53,7.885-7.885V277.027
+			C429.996,272.672,426.465,269.142,422.111,269.142z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M422.111,403.713c-4.355,0-7.885,3.53-7.885,7.885v42.053c0,4.355,3.53,7.885,7.885,7.885s7.885-3.53,7.885-7.885v-42.053
+			C429.996,407.243,426.465,403.713,422.111,403.713z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M80.546,175.305h-32.71c-4.355,0-7.885,3.53-7.885,7.885s3.53,7.885,7.885,7.885h32.71c4.355,0,7.885-3.53,7.885-7.885
+			S84.9,175.305,80.546,175.305z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M95.253,150.851l-20.815-20.815c-3.079-3.079-8.072-3.079-11.15,0c-3.079,3.079-3.079,8.072,0,11.151l20.815,20.815
+			c1.539,1.539,3.558,2.31,5.575,2.31s4.036-0.77,5.575-2.31C98.332,158.923,98.332,153.93,95.253,150.851z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M95.042,204.377c-3.079-3.079-8.072-3.079-11.15,0l-20.815,20.815c-3.079,3.079-3.079,8.072,0,11.15
+			c1.539,1.54,3.558,2.31,5.575,2.31s4.036-0.77,5.575-2.31l20.815-20.815C98.122,212.45,98.122,207.457,95.042,204.377z"/>
+	</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>

src/assets/custom-icons/017-share.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 58 58" style="enable-background:new 0 0 58 58;" xml:space="preserve">
+<g>
+	<path  d="M54.319,37.839C54.762,35.918,55,33.96,55,32c0-9.095-4.631-17.377-12.389-22.153c-0.473-0.29-1.087-0.143-1.376,0.327
+		c-0.29,0.471-0.143,1.086,0.327,1.376C48.724,15.96,53,23.604,53,32c0,1.726-0.2,3.451-0.573,5.147C51.966,37.051,51.489,37,51,37
+		c-3.86,0-7,3.141-7,7s3.14,7,7,7s7-3.141,7-7C58,41.341,56.509,39.024,54.319,37.839z M51,49c-2.757,0-5-2.243-5-5s2.243-5,5-5
+		s5,2.243,5,5S53.757,49,51,49z"/>
+	<path  d="M38.171,54.182C35.256,55.388,32.171,56,29,56c-6.385,0-12.527-2.575-17.017-7.092C13.229,47.643,14,45.911,14,44
+		c0-3.859-3.14-7-7-7s-7,3.141-7,7s3.14,7,7,7c1.226,0,2.378-0.319,3.381-0.875C15.26,55.136,21.994,58,29,58
+		c3.435,0,6.778-0.663,9.936-1.971c0.51-0.211,0.753-0.796,0.542-1.307C39.267,54.213,38.681,53.971,38.171,54.182z M2,44
+		c0-2.757,2.243-5,5-5s5,2.243,5,5s-2.243,5-5,5S2,46.757,2,44z"/>
+	<path  d="M4,31.213c0.024,0.002,0.048,0.003,0.071,0.003c0.521,0,0.959-0.402,0.997-0.93c0.712-10.089,7.586-18.52,17.22-21.314
+		C23.142,11.874,25.825,14,29,14c3.86,0,7-3.141,7-7s-3.14-7-7-7c-3.851,0-6.985,3.127-6.999,6.975
+		C11.42,9.922,3.851,19.12,3.073,30.146C3.034,30.696,3.449,31.175,4,31.213z M29,2c2.757,0,5,2.243,5,5s-2.243,5-5,5s-5-2.243-5-5
+		S26.243,2,29,2z"/>
+</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>

src/assets/custom-icons/019-favorites-button.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 294.843 294.843" style="enable-background:new 0 0 294.843 294.843;" xml:space="preserve">
+<g>
+	<path  d="M199.628,175.487c-0.632-1.977,0.067-4.131,1.741-5.358l37.422-27.455c5.958-4.371,8.333-11.736,6.049-18.763
+		c-2.283-7.028-8.533-11.591-15.922-11.625l-46.413-0.215c-2.076-0.01-3.908-1.34-4.558-3.311l-14.547-44.076
+		c-2.316-7.017-8.586-11.55-15.975-11.551h0c-7.389,0-13.66,4.534-15.976,11.55l-6.557,19.859c-1.039,3.146,0.669,6.54,3.816,7.578
+		c3.147,1.041,6.539-0.669,7.579-3.816l6.557-19.859c1.014-3.073,3.762-3.312,4.581-3.312c0.818,0,3.566,0.239,4.58,3.312
+		l14.547,44.077c2.27,6.875,8.658,11.516,15.897,11.55l46.413,0.215c3.236,0.015,4.313,2.555,4.565,3.333
+		c0.253,0.778,0.875,3.465-1.734,5.379l-37.423,27.455c-5.837,4.283-8.277,11.793-6.072,18.689l14.143,44.222
+		c0.986,3.083-1.097,4.892-1.759,5.372c-0.662,0.481-3.025,1.904-5.652,0.013l-37.677-27.114c-5.878-4.229-13.776-4.229-19.654,0
+		l-37.684,27.119c-2.627,1.89-4.991,0.468-5.652-0.012c-0.662-0.481-2.745-2.289-1.76-5.371l14.139-44.229
+		c2.205-6.895-0.236-14.405-6.072-18.688l-37.421-27.455c-2.609-1.914-1.987-4.602-1.734-5.379c0.253-0.778,1.33-3.318,4.565-3.333
+		l46.416-0.215c3.313-0.016,5.987-2.714,5.972-6.028c-0.016-3.304-2.699-5.972-6-5.972c-0.009,0-0.019,0-0.028,0l-46.416,0.215
+		c-7.389,0.034-13.639,4.597-15.922,11.625c-2.283,7.028,0.091,14.393,6.048,18.764l37.421,27.455
+		c1.673,1.228,2.373,3.381,1.741,5.358l-14.138,44.229c-2.25,7.038,0.159,14.392,6.137,18.734c3,2.179,6.442,3.269,9.886,3.269
+		c3.419,0,6.84-1.075,9.829-3.225l37.683-27.119c1.685-1.213,3.95-1.213,5.635,0l37.677,27.114c5.998,4.316,13.736,4.3,19.715-0.044
+		c5.979-4.343,8.387-11.697,6.136-18.736L199.628,175.487z"/>
+	<path  d="M147.421,0C66.133,0,0,66.133,0,147.421s66.133,147.421,147.421,147.421c3.313,0,6-2.687,6-6s-2.687-6-6-6
+		C72.75,282.843,12,222.093,12,147.421S72.75,12,147.421,12s135.421,60.75,135.421,135.421c0,46.48-23.42,89.182-62.65,114.228
+		c-2.793,1.783-3.612,5.493-1.829,8.286c1.783,2.793,5.492,3.612,8.286,1.829c42.7-27.262,68.193-73.745,68.193-124.342
+		C294.843,66.133,228.71,0,147.421,0z"/>
+</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>

src/assets/custom-icons/021-paint-brush.svg

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, 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 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
+<g>
+	<g>
+		<path  d="M330.972,205.67h-38.204c1.33-17.874,4.506-43.238,9.65-77.117c0.622-4.095-2.194-7.919-6.289-8.541
+			c-4.104-0.62-7.919,2.193-8.541,6.289c-6.029,39.704-9.396,68.001-10.293,86.506c-0.1,2.05,0.646,4.051,2.062,5.536
+			c1.415,1.486,3.378,2.327,5.43,2.327h46.186c30.8,0,56.271,24.657,59.783,56.333H121.245
+			c3.512-31.676,28.983-56.334,59.784-56.334h46.186c2.052,0,4.015-0.841,5.43-2.327c1.416-1.485,2.161-3.486,2.062-5.536
+			c-1.597-32.932-10.808-90.447-16.312-124.812c-2.169-13.543-4.218-26.334-4.295-28.438c0-24.566,18.796-44.554,41.901-44.556
+			c23.104,0.002,41.899,19.989,41.9,44.485c-0.044,1.218-0.797,6.464-2.237,15.595c-0.646,4.091,2.147,7.932,6.239,8.577
+			c4.086,0.646,7.932-2.147,8.577-6.239c2.046-12.962,2.42-16.185,2.42-17.862c0-32.837-25.524-59.554-56.903-59.556
+			C224.624,0.002,199.1,26.719,199.1,59.556c0,2.597,1.096,9.654,4.483,30.81c5.033,31.426,13.195,82.393,15.649,115.303h-38.203
+			c-41.463,0-75.197,35.364-75.197,78.834v49.333v30.668c0,4.143,3.357,7.5,7.5,7.5c4.143,0,7.5-3.357,7.5-7.5v-23.168h270.336
+			v155.664h-29.667v-31.833c0-4.143-3.357-7.5-7.5-7.5c-4.143,0-7.5,3.357-7.5,7.5v31.833h-34v-77.832c0-4.143-3.357-7.5-7.5-7.5
+			c-4.143,0-7.5,3.357-7.5,7.5v77.832h-34v-31.833c0-4.143-3.357-7.5-7.5-7.5s-7.5,3.357-7.5,7.5v31.833h-34v-77.832
+			c0-4.143-3.357-7.5-7.5-7.5c-4.143,0-7.5,3.357-7.5,7.5v77.832h-34v-31.833c0-4.143-3.357-7.5-7.5-7.5c-4.143,0-7.5,3.357-7.5,7.5
+			v31.833h-29.667v-80.997c0-4.143-3.357-7.5-7.5-7.5c-4.143,0-7.5,3.357-7.5,7.5v83.497c0,6.893,5.607,12.5,12.5,12.5h275.336
+			c6.893,0,12.5-5.607,12.5-12.5V333.837v-49.333C406.169,241.034,372.435,205.67,330.972,205.67z M391.168,326.337H120.832v-34.333
+			h270.336V326.337z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path  d="M256.001,32.359c-14.788,0-26.819,12.031-26.819,26.819c0,14.788,12.031,26.819,26.819,26.819
+			c14.788,0,26.819-12.031,26.819-26.819C282.821,44.39,270.79,32.359,256.001,32.359z M256.001,70.998
+			c-6.517,0-11.819-5.302-11.819-11.819c0-6.517,5.302-11.819,11.819-11.819c6.517,0,11.819,5.301,11.819,11.819
+			C267.821,65.696,262.518,70.998,256.001,70.998z"/>
+	</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>