Quiz UI enhancements

src/app/calendar/calendar.component.html

@@ -4,8 +4,8 @@
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
         </button>
         <button class="show-all-button" (click)="scrollToBottom()">
-            <span *ngIf="showAllSchedules"> Show All </span>
-            <span *ngIf="!showAllSchedules"> Show Today </span>
+            <span *ngIf="!showAllSchedules"> Show All </span>
+            <span *ngIf="showAllSchedules"> Show Today </span>
         </button>
     </header>
 

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

@@ -10,75 +10,100 @@
     </header>
 
     <section class="question-status">
-        <div class="question-number correct">
-            <span>
-                <label> 1 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
-        </div>
-        <div class="question-number wrong">
-            <span>
-                <label> 2 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-            </span>
-        </div>
-        <div class="question-number correct">
-            <span>
-                <label> 3 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
-        </div>
-        <div class="question-number wrong">
-            <span>
-                <label> 4 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-            </span>
-        </div>
-        <div class="question-number correct">
-            <span>
-                <label> 5 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
-        </div>
-        <div class="question-number wrong">
-            <span>
-                <label> 6 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
-            </span>
-        </div>
-        <div class="question-number current">
-            <span>
-                <label> 7 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
-        </div>
+        <div class="container">
+            <div class="question-number correct">
+                <span>
+                    <label> 1 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+            <div class="question-number wrong">
+                <span>
+                    <label> 2 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </span>
+            </div>
+            <div class="question-number correct">
+                <span>
+                    <label> 3 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+            <div class="question-number wrong">
+                <span>
+                    <label> 4 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </span>
+            </div>
+            <div class="question-number correct">
+                <span>
+                    <label> 5 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+            <div class="question-number wrong">
+                <span>
+                    <label> 6 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </span>
+            </div>
+            <div class="question-number current wrong">
+                <span>
+                    <label> 7 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
+                </span>
+            </div>
 
-        <div class="question-number">
-            <span>
-                <label> 8 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
-        </div>
+            <div class="question-number current correct">
+                <span>
+                    <label> 8 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+
+            <div class="question-number">
+                <span>
+                    <label> 9 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+
+            <div class="question-number">
+                <span>
+                    <label> 10 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
 
-        <div class="question-number">
-            <span>
-                <label> 9 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
-        </div>
 
-        <div class="question-number">
-            <span>
-                <label> 10 </label>
-                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-            </span>
+            <div class="question-number">
+                <span>
+                    <label> 11 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+
+
+            <div class="question-number">
+                <span>
+                    <label> 12 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
+
+            <div class="question-number">
+                <span>
+                    <label> 13 </label>
+                    <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                </span>
+            </div>
         </div>
     </section>
 
     <ngx-siema [options]="options">
         <ngx-siema-slide>
             <p class="question">
-                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?
+                Architecto obcaecati perferendis suscipit consequuntur labore voluptatibus vitae totam minima, tempore excepturi, cum at qui voluptas rerum nostrum odio minus, voluptatem dolores. ?
             </p>
 
             <div class="timer-holder">

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

@@ -47,22 +47,54 @@
 
 .question-status {
     background-color: var(--ash-black);
-    padding: 10px 5% 5px;
-    display: inline-block;
-    white-space: nowrap;
+    padding: 10px 0% 5px;
+    display: block;
     width: 100%;
     overflow: auto;
     margin-bottom: -10px;
+    position: relative;
+
+    .container {
+        width: 100%;
+        padding: 0 5%;
+        white-space: nowrap;
+        display: inline-block;
+        overflow: auto;
+    }
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 10px;
+        height: 100%;
+        box-shadow: 10px 0px 10px 10px var(--ash-black);
+        opacity: 0.8;
+        background-color: var(--ash-black);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 10px;
+        height: 100%;
+        box-shadow: -10px 0px 10px 10px var(--ash-black);
+        opacity: 0.8;
+        background-color: var(--ash-black);
+    }
 
     .question-number {
-        width: 20px;
-        height: 20px;
+        width: 17px;
+        height: 17px;
         background-color: var(--dark-grey);
         color: white;
         align-items: center;
         justify-content: center;
         display: inline-block;
-        margin-right: 15px;
+        margin-right: 10px;
         border-radius: 50%;
         overflow: hidden;
         border: 1px solid var(--dark-grey);
@@ -87,6 +119,26 @@
             display: none;
         }
 
+        &.current {
+            border-color: var(--light-grey);
+            background-color: var(--black);
+
+            &.wrong {
+                background-color: var(--black);
+                .icon {
+                    fill: var(--danger-dark) !important;
+                }
+            }
+
+            &.correct {
+                background-color: var(--green);
+
+                .icon {
+                    fill: var(--black) !important;
+                }
+            }
+        }
+
         &.correct {
             border-color: var(--green);
             background-color: white;
@@ -111,15 +163,11 @@
 
             .icon {
                 fill: white;
-                width: 10px;
-                height: 10px;
+                width: 7px;
+                height: 7px;
                 display: block;
             }
         }
-
-        &.current {
-            border-color: var(--light-grey);
-        }
     }
 }
 
@@ -127,9 +175,9 @@ ngx-siema-slide {
     display: block;
 
     .question {
-        line-height: 1.6;
+        line-height: 1.5;
         color: white;
-        font-size: 14px;
+        font-size: 13px;
         background-color: var(--ash-black);
         padding: 15px 5%;
     }