Quiz List UI to mimic calendar UI

src/app/tabs/courses/course-details/course-details.component.ts

@@ -62,7 +62,7 @@ export class CourseDetailsComponent implements OnInit {
             mediaState: 'none',
             isCompleted: true,
             type: 'quiz',
-            url: '/quiz-chapter',
+            url: '/quiz',
             param: 'Earth-2'
         }]
     }];

src/app/tabs/courses/quiz/quiz.component.html

@@ -1,4 +1,4 @@
-<div class="page" *ngIf="questionList.length > 0">
+<section class="page" *ngIf="questionList.length > 0">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -7,64 +7,134 @@
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
             <span> Quiz </span>
         </h5>
+        <button class="list-button" (click)="showQuestionList = !showQuestionList" *ngIf="quizSegment === 'QUESTIONS'">
+            <svg-icon *ngIf="!showQuestionList" [applyClass]="true" class="icon" src="assets/custom-icons/list.svg"></svg-icon>
+            <svg-icon *ngIf="showQuestionList" [applyClass]="true" class="icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+        </button>
     </header>
 
-    <section class="question-status">
-        <div class="container">
-            <div class="question-number correct" *ngFor="let question of questionList; let i = index"
-            [ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id,
-            'correct' : question.userAnswer === question.correctAnswer,
-            'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer}">
-                <span>
-                    <label> {{ i + 1 }} </label>
-                    <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                </span>
+    <div *ngIf="quizSegment === 'START_PAGE'">
+        <section class="upfold">
+            <div class="upfold-container">
+                <figure>
+                    <img src="assets/custom-icons/beaker.svg" alt="">
+                </figure>
+
+                <header>
+                    <img src="assets/custom-icons/xpcoins.svg" alt="">
+                    <h3>
+                        Today's
+                    </h3>
+                    <h2>
+                        Super Quiz
+                    </h2>
+                </header>
+                <p> Play super quiz and earn 500 XP </p>
             </div>
+        </section>
+
+        <div class="quiz-details-holder">
+            <section class="quiz-details">
+                <header>
+                    <p> Today's Quiz is on </p>
+                    <h3> Chemistry - Oxidation &amp; Reduction </h3>
+                    <p>
+                        Time Duration : 15 minutes
+                    </p>
+                </header>
+                <p class="people-count">
+                    70 Students have completed
+                </p>
+                <button class="play-button" (click)="quizSegment = 'QUESTIONS'">
+                    PLAY QUIZ NOW
+                </button>
+            </section>
         </div>
-    </section>
+    </div>
 
-    <ngx-siema [options]="options">
-        <ngx-siema-slide *ngFor="let question of questionList; let i = index">
-            <p class="question">
-                {{ question.question }}
-            </p>
 
-            <div class="timer-holder">
-                <div class="timer">
-                    <span> 00:60 </span>
-                    <svg width="55" height="55" viewBox="0 0 55 55">
-                        <circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke="#cecece" stroke-width="3" />
-                        <circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke-width="3"
-                        stroke-dasharray="135.2" stroke-dashoffset="52.08" id="progress" />
-                    </svg>
+    <div *ngIf="quizSegment === 'QUESTIONS'">
+        <section class="question-status">
+            <div class="container">
+                <div class="question-number correct" *ngFor="let question of questionList; let i = index"
+                [ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id,
+                'correct' : question.userAnswer === question.correctAnswer,
+                'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer}">
+                    <span>
+                        <label> {{ i + 1 }} </label>
+                        <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                        <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                    </span>
                 </div>
             </div>
+        </section>
 
-            <!-- 135.2 * (1 - 0.6) -->
+        <ngx-siema [options]="options">
+            <ngx-siema-slide *ngFor="let question of questionList; let i = index">
+                <p class="question">
+                    {{ question.question }}
+                </p>
 
-            <ol class="option-list">
-                <li *ngFor="let option of question.options; let j = index"
-                [ngClass]="{'correct' : question.userAnswer === question.correctAnswer && question.userAnswer === option.id,
-                'wrong': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.userAnswer === option.id,
-                'show-correct': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.correctAnswer === option.id }"
-                (click)="question.userAnswer = option.id; isAnswerWrong(question.correctAnswer, question.userAnswer)">
-                    <label> {{ j + 1 }}. {{ option.text }} </label>
-                    <div class="icon-holder">
-                        <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                        <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <div class="timer-holder">
+                    <div class="timer">
+                        <span> 00:60 </span>
+                        <svg width="55" height="55" viewBox="0 0 55 55">
+                            <circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke="#cecece" stroke-width="3" />
+                            <circle cx="27.5" cy="27.5" r="21.5" fill="none" stroke-width="3"
+                            stroke-dasharray="135.2" stroke-dashoffset="52.08" id="progress" />
+                        </svg>
                     </div>
-                </li>
-            </ol>
-        </ngx-siema-slide>
-    </ngx-siema>
+                </div>
 
-    <div class="action-buttons">
-        <button class="prev-button" *ngIf="selectedQuestion.id !== questionList[0].id" (click)="prev()"> Previous </button>
-        <button class="next-button" (click)="next()">
-            <span *ngIf="selectedQuestion.userAnswer !== 0"> Next </span>
-            <span *ngIf="selectedQuestion.userAnswer === 0"> Skip </span>
-        </button>
+                <!-- 135.2 * (1 - 0.6) -->
+
+                <ol class="option-list">
+                    <li *ngFor="let option of question.options; let j = index"
+                    [ngClass]="{'correct' : question.userAnswer === question.correctAnswer && question.userAnswer === option.id,
+                    'wrong': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.userAnswer === option.id,
+                    'show-correct': question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer && question.correctAnswer === option.id }"
+                    (click)="question.userAnswer = option.id; isAnswerWrong(question.correctAnswer, question.userAnswer)">
+                        <label> {{ j + 1 }}. {{ option.text }} </label>
+                        <div class="icon-holder">
+                            <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                            <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                        </div>
+                    </li>
+                </ol>
+            </ngx-siema-slide>
+        </ngx-siema>
+
+        <div class="action-buttons">
+            <button class="prev-button" *ngIf="selectedQuestion.id !== questionList[0].id" (click)="prev()"> Previous </button>
+            <button class="next-button" [ngClass]="{'skip' : selectedQuestion.userAnswer === 0 }" (click)="next()">
+                <span *ngIf="selectedQuestion.userAnswer !== 0"> Next </span>
+                <span *ngIf="selectedQuestion.userAnswer === 0"> Skip </span>
+            </button>
+        </div>
+
+
+
+        <section class="quiz-list-slideup" [ngClass]="{'active' : showQuestionList }">
+            <header> Question List </header>
+            <ul>
+                <li *ngFor="let question of questionList;let i = index"
+                [ngClass]="{'current': selectedQuestion && selectedQuestion.id === question.id && selectedQuestion.userAnswer === 0,
+                'correct' : question.userAnswer === question.correctAnswer,
+                'wrong' : question.userAnswer !== 0 && question.userAnswer !== question.correctAnswer,
+                'none' : question.userAnswer === 0}">
+                <svg-icon [applyClass]="true" class="icon correct-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon wrong-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                <svg-icon [applyClass]="true" class="icon progress-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                    <div class="content-holder" (click)="goToSlide(i)">
+                        <section class="content">
+                            <label>
+                                {{ i + 1 }}. {{ question.question }}
+                            </label>
+                        </section>
+                    </div>
+                </li>
+            </ul>
+        </section>
     </div>
 
-</div>
+</section>

src/app/tabs/courses/quiz/quiz.component.scss

@@ -2,7 +2,6 @@
     background-color: var(--black);
     height: 100vh;
     overflow: auto;
-    padding-bottom: 60px;
 }
 
 .nav-header {
@@ -17,7 +16,7 @@
     z-index: 1;
     box-shadow: 0px 0px 5px var(--black);
 
-    .close-button {
+    button {
         border: 0px;
         background-color: transparent;
         .icon {
@@ -25,6 +24,16 @@
             height: 16px;
             fill: var(--light-grey);
         }
+
+        &.list-button {
+            margin-left: auto;
+
+            .icon {
+                width: 20px;
+                height: 20px;
+                fill: white;
+            }
+        }
     }
 
     h5 {
@@ -175,6 +184,7 @@
 
 ngx-siema-slide {
     display: block;
+    padding-bottom: 60px;
 
     .question {
         line-height: 1.5;
@@ -332,11 +342,19 @@ ngx-siema-slide {
         border: 0px;
         height: 40px;
         background-color: transparent;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        font-weight: 500;
+        font-size: 14px;
 
         &.next-button {
             background-color: var(--teal);
             color: white;
             margin-left: auto;
+
+            &.skip {
+                background-color: var(--dark-grey);
+            }
         }
 
         &.prev-button {
@@ -345,3 +363,283 @@ ngx-siema-slide {
         }
     }
 }
+
+
+.upfold {
+    overflow: hidden;
+    padding: 0px 5% 20px;
+    height: 50vh;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    background-color: var(--ash-black);
+
+    .upfold-container {
+        width: 100%;
+    }
+
+    figure {
+        display: block;
+        width: 100%;
+
+        img {
+            width: 150px;
+            height: 150px;
+            display: block;
+            margin-left: auto;
+        }
+    }
+
+    header {
+        color: white;
+        margin-top: -60px;
+
+        img {
+            display: block;
+            width: 50px;
+            height: 50px;
+            margin: 0 0 10px;
+        }
+    }
+
+    h3 {
+        font-size: 22px;
+        font-weight: 500;
+        margin: 5px auto;
+    }
+
+    h2 {
+        font-size: 30px;
+        font-weight: 500;
+        margin: 5px auto;
+    }
+
+    p {
+        font-size: 16px;
+        color: var(--light-grey);
+    }
+}
+
+.quiz-details-holder {
+    background-color: var(--ash-black);
+    height: calc(50vh - 60px);
+}
+
+.quiz-details {
+    height: 100%;
+    width: 100%;
+    padding: 25px 5% 80px 5%;
+    background-color: white;
+    border-top-right-radius: 30px;
+    border-top-left-radius: 30px;
+    position: relative;
+
+    header {
+        margin-bottom: 10px;
+        p {
+            font-size: 14px;
+            margin: 0;
+            color: var(--dark-grey);
+            font-weight: 400;
+        }
+
+        h3 {
+            font-size: 22px;
+            font-weight: 500;
+            margin: 5px auto;
+            color: var(--teal-green);
+            line-height: 1.1;
+        }
+    }
+
+    .people-count {
+        font-size: 14px;
+        color: var(--danger-dark);
+    }
+
+    .play-button {
+        display: block;
+        position: absolute;
+        bottom: 10px;
+        left: 5%;
+        width: 90%;
+        border-radius: 30px;
+        height: 45px;
+        color: white;
+        background: linear-gradient(180deg, var(--teal), var(--teal-green));
+        border: 0px;
+        font-size: 14px;
+        letter-spacing: 1px;
+        font-weight: 500;
+        margin: 15px auto;
+    }
+}
+
+.quiz-list-slideup {
+    width: 100%;
+    background-color: white;
+    overflow: hidden;
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    position: fixed;
+    z-index: 1;
+    bottom: 0;
+    left: 0;
+    transform: translateY(100vh);
+    transition: transform 0.5s;
+
+    &.active {
+        transform: translateY(0vh);
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        width: 60px;
+        height: 4px;
+        border-radius: 30px;
+        background-color: var(--light-grey);
+        left: calc(50% - 30px);
+        top: 20px;
+    }
+
+    header {
+        color: var(--dark-grey);
+        font-size: 16px;
+        font-weight: 700;
+        margin: 40px auto 10px;
+        padding: 0 5%;
+    }
+
+    ul {
+        list-style: none;
+        max-height: 60vh;
+        overflow: auto;
+        padding-bottom: 40px;
+    }
+
+    li {
+        display: flex;
+        width: 90%;
+        align-items: center;
+        justify-content: space-between;
+        margin: 0px auto;
+        padding: 10px 0;
+        position: relative;
+        overflow: visible;
+
+        .icon {
+            z-index: 1;
+            position: relative;
+            width: 20px;
+            height: 20px;
+            fill: var(--light-grey);
+            background-color: white;
+            border-radius: 50%;
+            display: none;
+        }
+
+        &.correct {
+            .icon.correct-icon {
+                fill: var(--green);
+                display: block;
+            }
+
+            &::before {
+                border-color: var(--green);
+            }
+        }
+
+        &.wrong {
+            .icon.wrong-icon {
+                fill: var(--danger);
+                display: block;
+            }
+
+            &::before {
+                border-color: var(--danger);
+            }
+        }
+
+        &.none {
+            .icon.progress-icon {
+                fill: var(--light-grey);
+                display: block;
+            }
+
+            &::before {
+                border-color: var(--light-grey);
+            }
+        }
+
+        &.current {
+            .icon.progress-icon {
+                fill: var(--teal);
+                animation: ripple 1.5s infinite;
+                display: block;
+            }
+
+            &::before {
+                border-color: var(--teal);
+            }
+        }
+
+        &:last-child::before {
+            display: none;
+        }
+
+        @keyframes ripple {
+            50% {
+                box-shadow: 0px 0px 1px 10px transparent;
+            }
+            0% {
+                box-shadow: 0px 0px 1px 0px var(--teal);
+            }
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: 8px;
+            top: 50%;
+            height: 100%;
+            width: 1px;
+            border-right: 1px dashed var(--light-grey);
+        }
+
+        .content-holder {
+            width: calc(100% - 40px);
+            display: flex;
+            padding: 15px 15px;
+            align-items: center;
+            box-shadow: 1px 1px 5px var(--light-grey);
+            border-radius: 7px;
+            margin-left: auto;
+
+            .content {
+                flex-grow: 1;
+            }
+
+            .status {
+                font-size: 14px;
+                text-align: right;
+                margin-left: auto;
+            }
+        }
+
+        label {
+            display: block;
+            font-size: 14px;
+            color: var(--dark-grey);
+            overflow: hidden;
+        }
+
+        p {
+            font-size: 12px;
+            color: var(--light-grey);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
+}

src/app/tabs/courses/quiz/quiz.component.ts

@@ -25,6 +25,9 @@ export class QuizComponent implements OnInit {
 		},
 	};
 
+    quizSegment: string = 'QUESTIONS';
+    showQuestionList: boolean = false;
+
     selectedQuestion: any;
 
     questionList = [{
@@ -99,6 +102,114 @@ export class QuizComponent implements OnInit {
             id: 4,
             text: 'Gambler',
         }]
+    }, {
+        id: 5,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }, {
+        id: 6,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }, {
+        id: 7,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }, {
+        id: 8,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }, {
+        id: 9,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
+    }, {
+        id: 10,
+        question: 'Who is Newton ?',
+        userAnswer: 0,
+        correctAnswer: 3,
+        options: [{
+            id: 1,
+            text: 'Dancer',
+        }, {
+            id: 2,
+            text: 'Actor',
+        }, {
+            id: 3,
+            text: 'Scientist',
+        }, {
+            id: 4,
+            text: 'Gambler',
+        }]
     }];
 
 
@@ -112,10 +223,20 @@ export class QuizComponent implements OnInit {
 	}
 
     next() {
-        this.ngxSiemaService.next(1);
-        this.ngxSiemaService.currentSlide().subscribe((index) => {
-            this.selectedQuestion = this.questionList[index.currentSlide];
-        }).unsubscribe();
+        if (this.selectedQuestion.id === this.questionList[this.questionList.length - 1].id) {
+            this.quizSegment = 'END_PAGE';
+        } else {
+            this.ngxSiemaService.next(1);
+            this.ngxSiemaService.currentSlide().subscribe((index) => {
+                this.selectedQuestion = this.questionList[index.currentSlide];
+            }).unsubscribe();
+        }
+    }
+
+    goToSlide(index: number) {
+        this.ngxSiemaService.goTo(index);
+        this.selectedQuestion = this.questionList[index];
+        this.showQuestionList = false;
     }
 
     prev() {

src/assets/custom-icons/beaker.svg

@@ -0,0 +1 @@
+<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="74.981" x2="437.019" y1="74.981" y2="437.019"><stop offset="0" stop-color="#54747f"/><stop offset="1" stop-color="#455e72"/></linearGradient><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="166.536" x2="343.43" y1="111.382" y2="288.275"><stop offset="0" stop-color="#e9f2f2"/><stop offset="1" stop-color="#d5e5e5"/></linearGradient><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="167.621" x2="343.318" y1="290.369" y2="466.066"><stop offset="0" stop-color="#94e5cf"/><stop offset="1" stop-color="#5a9898"/></linearGradient><g><circle cx="256" cy="256" fill="url(#SVGID_1_)" r="256"/><g><path d="m341.792 289.913s-28.79 5.642-46.882 5.642c-21.593 0-42.408 10.31-43.185 10.699-.195.195-17.703 8.754-34.627 8.754s-34.432-8.559-34.627-8.754l-7.586-23.149 32.486-48.827v-124.825h-19.453v-19.453h136.172v19.453h-19.453v124.824z" fill="url(#SVGID_2_)"/><path d="m401.125 406.438c-5.058 9.532-14.979 15.562-25.873 15.562h-238.495c-10.894 0-20.815-6.03-25.873-15.562s-4.28-21.009 1.751-29.763l51.356-77.424h.195l10.699-16.146 7.587 3.696c.195.194 17.702 8.754 34.627 8.754s34.432-8.559 34.627-8.754c.259-.13 2.691-1.336 6.614-2.898 7.976-3.171 22.099-7.801 36.572-7.801 23.078 0 46.882 13.812 46.882 13.812 2.133 3.151-2.244-3.482 18.87 28.402l38.906 58.359c5.835 8.753 6.613 20.23 1.555 29.763z" fill="url(#SVGID_3_)"/><g id="Medical_Lab_1_"><g><path d="m285.184 324.734h19.453v19.453h-19.453z" fill="#5a9898"/></g><g><path d="m246.278 363.641h19.453v19.453h-19.453z" fill="#7ccbbf"/></g><g><path d="m207.372 344.188h19.453v19.453h-19.453z" fill="#7ccbbf"/></g><g><path d="m246.278 246.922h19.453v19.453h-19.453z" fill="#7ccbbf"/></g></g></g></g></svg>

src/assets/custom-icons/list.svg

@@ -0,0 +1,71 @@
+<?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 343.5 343.5" style="enable-background:new 0 0 343.5 343.5;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M322.05,161.8h-182.6c-5.5,0-10,4.5-10,10s4.5,10,10,10h182.6c5.5,0,10-4.5,10-10C332.05,166.3,327.65,161.8,322.05,161.8
+			z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M57.95,125.3c-25.7,0-46.5,20.8-46.5,46.5s20.8,46.5,46.5,46.5s46.5-20.8,46.5-46.5S83.65,125.3,57.95,125.3z
+			 M57.95,198.3c-14.7,0-26.5-11.9-26.5-26.5c0-14.7,11.9-26.5,26.5-26.5c14.6,0,26.5,11.9,26.5,26.5S72.55,198.3,57.95,198.3z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M322.05,36.8h-182.6c-5.5,0-10,4.5-10,10s4.5,10,10,10h182.6c5.5,0,10-4.5,10-10C332.05,41.3,327.65,36.8,322.05,36.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M57.95,0c-25.7,0-46.5,20.8-46.5,46.5c0,25.7,20.8,46.5,46.5,46.5s46.5-20.8,46.5-46.5C104.45,20.9,83.65,0.1,57.95,0z
+			 M57.95,73.1c-14.7,0-26.5-11.9-26.5-26.5c0-14.6,11.9-26.5,26.5-26.5c14.7,0,26.5,11.9,26.5,26.5
+			C84.45,61.2,72.55,73.1,57.95,73.1z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M322.05,286.8h-182.6c-5.5,0-10,4.5-10,10s4.5,10,10,10h182.6c5.5,0,10-4.5,10-10S327.65,286.8,322.05,286.8z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M57.95,250.5c-25.7,0-46.5,20.8-46.5,46.5c0,25.7,20.8,46.5,46.5,46.5s46.5-20.8,46.5-46.5
+			C104.45,271.4,83.65,250.5,57.95,250.5z M57.95,323.6c-14.7,0-26.5-11.9-26.5-26.5c0-14.7,11.9-26.5,26.5-26.5
+			c14.7,0,26.5,11.9,26.5,26.5S72.55,323.6,57.95,323.6z"/>
+	</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/xpcoins.svg

@@ -0,0 +1,122 @@
+<?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.007 58.007" style="enable-background:new 0 0 58.007 58.007;" xml:space="preserve">
+<g id="XMLID_22_">
+	<path id="XMLID_143_" style="fill:#FCC62D;" d="M52.003,29.211v1.238c0,6.932-11.641,12.551-26,12.551
+		c-7.926,0-15.019-1.714-19.788-4.414C7.823,44.831,18.751,50,32.003,50c14.359,0,26-6.068,26-13
+		C58.003,33.952,55.747,31.266,52.003,29.211"/>
+	<path id="XMLID_142_" style="fill:#E4AF18;" d="M32.003,50c-14.359,0-26-6.068-26-13v8.448c0,6.932,11.641,12.552,26,12.552
+		s26-5.62,26-12.552V37C58.003,43.932,46.362,50,32.003,50"/>
+	<path id="XMLID_141_" style="fill:#CE9912;" d="M9.003,51.349c0.59,0.539,1.259,1.055,2,1.545v-8.291
+		c-0.741-0.51-1.41-1.045-2-1.603V51.349z"/>
+	<path id="XMLID_140_" style="fill:#CE9912;" d="M53.003,44.603v8.291c0.741-0.489,1.41-1.006,2-1.545V43
+		C54.414,43.558,53.745,44.093,53.003,44.603"/>
+	<path id="XMLID_139_" style="fill:#CE9912;" d="M13.003,54.06c0.632,0.327,1.3,0.636,2,0.929v-8.193
+		c-0.7-0.308-1.368-0.633-2-0.975V54.06z"/>
+	<path id="XMLID_138_" style="fill:#CE9912;" d="M49.003,54.988c0.7-0.292,1.368-0.602,2-0.929V45.82
+		c-0.632,0.342-1.3,0.668-2,0.975V54.988z"/>
+	<path id="XMLID_137_" style="fill:#CE9912;" d="M17.003,55.745c0.646,0.221,1.313,0.427,2,0.619V48.25
+		c-0.687-0.204-1.354-0.423-2-0.656V55.745z"/>
+	<path id="XMLID_136_" style="fill:#CE9912;" d="M45.003,56.364c0.687-0.192,1.354-0.398,2-0.619v-8.151
+		c-0.646,0.233-1.313,0.452-2,0.656V56.364z"/>
+	<path id="XMLID_135_" style="fill:#CE9912;" d="M22.003,57.084c0.653,0.132,1.321,0.25,2,0.355v-8.044
+		c-0.679-0.113-1.347-0.239-2-0.379V57.084z"/>
+	<path id="XMLID_134_" style="fill:#CE9912;" d="M40.003,57.439c0.679-0.106,1.347-0.224,2-0.355v-8.069
+		c-0.653,0.14-1.321,0.266-2,0.38V57.439z"/>
+	<path id="XMLID_133_" style="fill:#CE9912;" d="M28.003,57.899c0.658,0.049,1.326,0.083,2,0.107v-8.003
+		c-0.674-0.026-1.342-0.062-2-0.115V57.899z"/>
+	<path id="XMLID_132_" style="fill:#CE9912;" d="M34.003,58.007c0.674-0.025,1.342-0.058,2-0.107v-8.012
+		c-0.658,0.053-1.326,0.089-2,0.116V58.007z"/>
+	<path id="XMLID_131_" style="fill:#E4AF18;" d="M26.003,34.993c-14.359,0-26-6.068-26-13v8.448c0,6.932,11.641,12.552,26,12.552
+		s26-5.62,26-12.552v-8.448C52.003,28.925,40.362,34.993,26.003,34.993"/>
+	<path id="XMLID_130_" style="fill:#CE9912;" d="M3.003,36.342c0.59,0.539,1.259,1.055,2,1.545v-8.291
+		c-0.741-0.51-1.41-1.045-2-1.602V36.342z"/>
+	<path id="XMLID_129_" style="fill:#CE9912;" d="M47.003,29.596v8.291c0.741-0.489,1.41-1.006,2-1.545v-8.349
+		C48.414,28.551,47.745,29.086,47.003,29.596"/>
+	<path id="XMLID_128_" style="fill:#CE9912;" d="M7.003,39.053c0.632,0.327,1.3,0.636,2,0.929v-8.193
+		c-0.7-0.308-1.368-0.633-2-0.975V39.053z"/>
+	<path id="XMLID_127_" style="fill:#CE9912;" d="M43.003,39.981c0.7-0.292,1.368-0.601,2-0.929v-8.239
+		c-0.632,0.342-1.3,0.668-2,0.975V39.981z"/>
+	<path id="XMLID_126_" style="fill:#CE9912;" d="M11.003,40.738c0.646,0.221,1.313,0.427,2,0.619v-8.114
+		c-0.687-0.204-1.354-0.423-2-0.656V40.738z"/>
+	<path id="XMLID_125_" style="fill:#CE9912;" d="M39.003,41.357c0.687-0.192,1.354-0.398,2-0.619v-8.151
+		c-0.646,0.233-1.313,0.452-2,0.656V41.357z"/>
+	<path id="XMLID_124_" style="fill:#CE9912;" d="M16.003,42.077c0.653,0.132,1.321,0.25,2,0.355v-8.044
+		c-0.679-0.113-1.347-0.239-2-0.379V42.077z"/>
+	<path id="XMLID_123_" style="fill:#CE9912;" d="M34.003,42.433c0.679-0.106,1.347-0.224,2-0.355v-8.069
+		c-0.653,0.14-1.321,0.266-2,0.38V42.433z"/>
+	<path id="XMLID_122_" style="fill:#CE9912;" d="M22.003,42.893c0.658,0.049,1.326,0.083,2,0.107v-8.003
+		c-0.674-0.026-1.342-0.062-2-0.115V42.893z"/>
+	<path id="XMLID_121_" style="fill:#CE9912;" d="M28.003,43c0.674-0.025,1.342-0.058,2-0.107v-8.012
+		c-0.658,0.053-1.326,0.089-2,0.116V43z"/>
+	<path id="XMLID_120_" style="fill:#FFD949;" d="M51.32,33.302C48.643,38.858,38.329,43,26.003,43c-4.604,0-8.926-0.58-12.677-1.593
+		c3.628,2.463,10.085,4.559,18.677,4.559c13.682,0,22-5.311,22-8.966C54.003,35.78,53.064,34.486,51.32,33.302"/>
+	<path id="XMLID_119_" style="fill:#FFD949;" d="M31.003,33c-14.359,0-26-5.62-26-12.552v-5.652c-3.141,1.969-5,4.438-5,7.204
+		c0,6.932,11.641,13,26,13c6.914,0,13.192-1.409,17.849-3.642C40.061,32.401,35.678,33,31.003,33"/>
+	<path id="XMLID_118_" style="fill:#E4AF18;" d="M31.003,24.993c-14.359,0-26-6.068-26-13v8.448c0,6.932,11.641,12.552,26,12.552
+		c14.359,0,26-5.62,26-12.552v-8.448C57.003,18.925,45.362,24.993,31.003,24.993"/>
+	<path id="XMLID_117_" style="fill:#CE9912;" d="M8.003,26.342c0.59,0.539,1.259,1.055,2,1.545v-8.291
+		c-0.741-0.51-1.41-1.045-2-1.602V26.342z"/>
+	<path id="XMLID_116_" style="fill:#CE9912;" d="M52.003,19.596v8.291c0.741-0.489,1.41-1.006,2-1.545v-8.349
+		C53.414,18.551,52.745,19.086,52.003,19.596"/>
+	<path id="XMLID_115_" style="fill:#CE9912;" d="M12.003,29.053c0.632,0.327,1.3,0.636,2,0.929v-8.193
+		c-0.7-0.308-1.368-0.633-2-0.975V29.053z"/>
+	<path id="XMLID_114_" style="fill:#CE9912;" d="M48.003,29.981c0.7-0.292,1.368-0.601,2-0.929v-8.239
+		c-0.632,0.342-1.3,0.668-2,0.975V29.981z"/>
+	<path id="XMLID_113_" style="fill:#CE9912;" d="M16.003,30.738c0.646,0.221,1.313,0.427,2,0.619v-8.114
+		c-0.687-0.204-1.354-0.423-2-0.656V30.738z"/>
+	<path id="XMLID_112_" style="fill:#CE9912;" d="M44.003,31.357c0.687-0.192,1.354-0.398,2-0.619v-8.151
+		c-0.646,0.233-1.313,0.452-2,0.656V31.357z"/>
+	<path id="XMLID_111_" style="fill:#CE9912;" d="M21.003,32.077c0.653,0.132,1.321,0.25,2,0.355v-8.044
+		c-0.679-0.113-1.347-0.239-2-0.379V32.077z"/>
+	<path id="XMLID_110_" style="fill:#CE9912;" d="M39.003,32.433c0.679-0.106,1.347-0.224,2-0.355v-8.069
+		c-0.653,0.14-1.321,0.266-2,0.38V32.433z"/>
+	<path id="XMLID_109_" style="fill:#CE9912;" d="M27.003,32.893c0.658,0.049,1.326,0.083,2,0.107v-8.003
+		c-0.674-0.026-1.342-0.062-2-0.115V32.893z"/>
+	<path id="XMLID_108_" style="fill:#CE9912;" d="M33.003,33c0.674-0.025,1.342-0.058,2-0.107v-8.012
+		c-0.658,0.053-1.326,0.089-2,0.116V33z"/>
+	<path id="XMLID_107_" style="fill:#FCC62D;" d="M57.003,12c0,6.932-11.641,13-26,13c-14.359,0-26-6.068-26-13
+		c0-6.932,11.641-12,26-12C45.362,0,57.003,5.068,57.003,12"/>
+	<path id="XMLID_106_" style="fill:#FFD949;" d="M31.003,20.966c-13.682,0-22-5.31-22-8.966c0-3.655,8.318-9,22-9
+		c13.682,0,22,5.345,22,9C53.003,15.656,44.685,20.966,31.003,20.966"/>
+	<path id="XMLID_105_" style="fill:#F0C41B;" d="M37.784,13.359c0.82-0.174,1.301-0.68,1.124-1.257l-0.19-0.616
+		c-0.139-0.453-0.68-0.831-1.343-1.019c-0.902-1.927-3.202-2.625-6.618-2.625c-0.162,0-0.32,0.004-0.476,0.01
+		c-1.166,0.048-2.329-0.064-3.236-0.396c-0.37-0.135-0.671-0.276-0.87-0.423c-0.09-0.066-0.308-0.024-0.308,0.06
+		c0,0.146,0.011,0.319,0.043,0.511c0.124,0.747-0.024,0.635-0.762,1.38c-0.428,0.434-0.769,0.934-1.016,1.486
+		c-0.659,0.189-1.197,0.566-1.336,1.017l-0.19,0.616c-0.177,0.577,0.304,1.083,1.124,1.257c0.234,1.476,1.237,2.772,3.424,3.486
+		l-0.12,1.037c-0.032,0.277-0.271,0.533-0.619,0.659l-4.411,1.592C24.58,20.674,27.516,21,30.757,21
+		c3.196,0,6.095-0.317,8.645-0.842l-4.315-1.613c-0.341-0.128-0.575-0.382-0.606-0.654l-0.121-1.045
+		C36.547,16.132,37.55,14.835,37.784,13.359"/>
+</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>