Theme page added

src/app/app-routing.module.ts

@@ -14,6 +14,7 @@ import { PostDetailsComponent } from './reusable-components/forum/post-details/p
 import { ChatPageComponent } from './chat-page/chat-page.component';
 import { SettingsComponent } from './settings/settings.component';
 import { TestComponent } from './tabs/courses/test/test.component';
+import { ThemesComponent } from './settings/themes/themes.component';
 
 const routes: Routes = [
     { path: '', pathMatch: 'full', redirectTo: 'welcome' },
@@ -33,6 +34,7 @@ const routes: Routes = [
     { component: PostDetailsComponent, path: 'forum-post-details'},
     { component: ChatPageComponent, path: 'chats'},
     { component: SettingsComponent, path: 'settings'},
+    { component: ThemesComponent, path: 'theme' }
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -10,9 +10,35 @@ export class AppComponent {
     constructor(
         private updateService: UpdateService,
     ) {
+        let theme: string = '';
+
         if (!localStorage.demoType) {
             localStorage.demoType = 'Student';
-            console.log('Student');
         }
+
+        if (!localStorage.theme) {
+            localStorage.theme = 'white';
+            theme = 'white';
+        } else {
+            theme = localStorage.theme;
+        }
+
+        if (!localStorage.mode) {
+            localStorage.mode = 'day';
+        }
+
+        // if (theme === 'dark') {
+        //     document.documentElement.style.setProperty('--white', '#ffffff');
+        //     document.documentElement.style.setProperty('--black', '#1a1a1a');
+        //     // document.documentElement.style.setProperty('--ash-black', '#282828');
+        //     // document.documentElement.style.setProperty('--light-grey', '#999999');
+        // }
+        //
+        // if (theme === 'light') {
+        //     document.documentElement.style.setProperty('--white', '#1a1a1a');
+        //     document.documentElement.style.setProperty('--black', '#ffffff');
+        //     // document.documentElement.style.setProperty('--ash-black', '#bbbbbb');
+        //     // document.documentElement.style.setProperty('--light-grey', '#5d5d5d');
+        // }
     }
 }

src/app/app.module.ts

@@ -44,6 +44,7 @@ import { EndComponent } from './tabs/courses/test/end/end.component';
 import { QuestionSheetComponent } from './tabs/courses/test/question-sheet/question-sheet.component';
 import { QuestionComponent } from './tabs/courses/test/question-sheet/question/question.component';
 import { AddBroadcastComponent } from './chat-page/add-broadcast/add-broadcast.component';
+import { ThemesComponent } from './settings/themes/themes.component';
 
 @NgModule({
 	declarations: [
@@ -75,6 +76,7 @@ import { AddBroadcastComponent } from './chat-page/add-broadcast/add-broadcast.c
 		QuestionSheetComponent,
 		QuestionComponent,
 		AddBroadcastComponent,
+		ThemesComponent,
 	],
 	imports: [
 		BrowserModule,

src/app/attendance/attendance.component.scss

@@ -43,11 +43,11 @@
 
         p {
             font-size: 14px;
-            color: white;
+            color: var(--white);
         }
 
         h4 {
-            color: white;
+            color: var(--white);
             font-size: 24px;
         }
     }
@@ -75,11 +75,11 @@
             background-color: var(--teal-green);
 
             h4 {
-                color: white;
+                color: var(--white);
             }
 
             p {
-                color: white;
+                color: var(--white);
             }
         }
     }
@@ -96,7 +96,7 @@
 
     p {
         font-size: 17px;
-        color: white;
+        color: var(--white);
     }
 }
 
@@ -122,7 +122,7 @@
 
         &.active {
             background-color: var(--teal-green);
-            color: white;
+            color: var(--white);
         }
     }
 }
@@ -150,7 +150,7 @@
 
     header {
         background-color: var(--dark-grey);
-        color: white;
+        color: var(--white);
         display: flex;
         width: 100%;
         align-items: center;
@@ -166,7 +166,7 @@
     }
 
     .icon {
-        fill: white;
+        fill: var(--white);
         width: 15px;
         height: 15px;
         transform: rotate(90deg);
@@ -264,7 +264,7 @@
 
         label {
             font-size: 15px;
-            color: white;
+            color: var(--white);
         }
 
         p {
@@ -277,7 +277,7 @@
             width: 100px;
             text-align: right;
             margin-right: 15px;
-            color: white;
+            color: var(--white);
             font-size: 16px;
         }
 
@@ -311,7 +311,7 @@
 
             .progress {
                 font-size: 16px;
-                color: white;
+                color: var(--white);
             }
         }
     }
@@ -356,7 +356,7 @@
 
         label {
             font-size: 15px;
-            color: white;
+            color: var(--white);
         }
 
         p {
@@ -369,7 +369,7 @@
             width: 20px;
             height: 20px;
             fill: var(--light-grey);
-            background-color: white;
+            background-color: var(--white);
             border-radius: 50%;
         }
     }

src/app/calendar/calendar.component.scss

@@ -6,7 +6,7 @@
     button.show-all-button {
         margin-left: auto;
         background-color: var(--dark-grey);
-        color: white;
+        color: var(--white);
         font-size: 14px;
         height: 40px;
         border-radius: 5px;
@@ -24,7 +24,7 @@
 }
 
 .calendar-header {
-    color: white;
+    color: var(--white);
     font-size: 18px;
     font-weight: 500;
     padding: 0 5%;
@@ -49,7 +49,7 @@
             left: 5%;
             width: 90%;
             height: 1px;
-            background-color: rgba(white, 0.1);
+            background-color: var(--black);
         }
 
         span {
@@ -82,13 +82,13 @@
 			border-radius: 50%;
 
 			&.current-date {
-				color: white;
+				color: var(--white);
 				font-weight: 600;
 			}
 
 			&.active {
 				background-color: var(--black);
-                color: white;
+                color: var(--white);
 			}
 
             &.non-current-date {
@@ -99,7 +99,7 @@
 }
 
 .schedule-details {
-    background-color: white;
+    background-color: var(--white);
     padding: 0 5% 100px;
     overflow: hidden;
     border-top-left-radius: 30px;
@@ -237,7 +237,7 @@
             width: 20px;
             height: 20px;
             fill: var(--light-grey);
-            background-color: white;
+            background-color: var(--white);
 
             &.status-icon {
                 border-radius: 50%;
@@ -300,6 +300,6 @@
     .icon {
         width: 20px;
         height: 20px;
-        fill: white;
+        fill: var(--white);
     }
 }

src/app/chat-page/add-broadcast/add-broadcast.component.scss

@@ -59,7 +59,7 @@
             background-color: var(--teal-green);
             border-radius: 7px;
             label {
-                color: white;
+                color: var(--white);
             }
         }
     }
@@ -111,7 +111,7 @@
         width: 60%;
         position: relative;
         top: 1px;
-        fill: white;
+        fill: var(--white);
     }
 
     &.active {
@@ -119,7 +119,7 @@
 
         .icon {
             width: 70%;
-            fill: white;
+            fill: var(--white);
         }
     }
 }

src/app/chat-page/chat-page.component.scss

@@ -28,7 +28,7 @@
         .icon {
             width: 18px;
             height: 18px;
-            fill: white;
+            fill: var(--white);
         }
 
         img {
@@ -45,7 +45,7 @@
         margin-right: auto;
         height: 40px;
         background-color: transparent;
-        color: white;
+        color: var(--white);
         font-size: 16px;
     }
 }
@@ -65,20 +65,20 @@
         flex-grow: 1;
         border-radius: 7px;
         background-color: transparent;
-        color: white;
+        color: var(--white);
         font-size: 13px;
         border: 0px;
 
         &.active {
             background-color: var(--teal-green);
-            color: white;
+            color: var(--white);
             font-weight: 500;
         }
     }
 }
 
 .segment-details {
-    background-color: white;
+    background-color: var(--white);
     overflow: auto;
     height: calc(100vh - 140px);
     padding: 10px 5%;
@@ -103,7 +103,7 @@
             width: 70%;
             position: relative;
             top: 1px;
-            fill: white;
+            fill: var(--white);
         }
     }
 }
@@ -161,7 +161,7 @@
     bottom: 0px;
     left: 0px;
     height: calc(100vh - 70px);
-    background-color: white;
+    background-color: var(--white);
     z-index: 1;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;

src/app/chat-page/chat-window/chat-window.component.scss

@@ -5,7 +5,7 @@ header {
     width: 100%;
     padding: 0 5%;
     margin: 0 auto 20px;
-    background-color: white;
+    background-color: var(--white);
 
     h5 {
         font-weight: 500;
@@ -31,7 +31,7 @@ header {
             background-color: var(--teal-green);
 
             .icon {
-                fill: white;
+                fill: var(--white);
                 width: 15px;
                 height: 15px;
             }
@@ -40,7 +40,7 @@ header {
         .icon {
             width: 12px;
             height: 12px;
-            fill: white;
+            fill: var(--white);
         }
     }
 }
@@ -74,7 +74,7 @@ ul {
         }
 
         .message {
-            color: white;
+            color: var(--white);
             background-color: var(--teal);
             border-bottom-right-radius: 0px;
         }
@@ -111,7 +111,7 @@ ul {
     padding: 5px;
 
     .icon {
-        fill: white;
+        fill: var(--white);
         width: 15px;
         height: 15px;
     }

src/app/reusable-components/class-card-list/class-card-list.component.scss

@@ -11,7 +11,7 @@
         position: fixed;
         right: 2%;
         top: calc(50vh - 30px);
-        background-color: white;
+        background-color: var(--white);
         border-radius: 30px;
         padding: 15px;
         box-shadow: 0px 0px 10px rgba(black, 0.3);
@@ -20,7 +20,7 @@
     }
 
     li {
-        background-color: white;
+        background-color: var(--white);
         border-radius: 15px;
         overflow: hidden;
         display: flex;
@@ -116,7 +116,7 @@
         border-radius: 5px;
         border: 0px;
         background-color: var(--teal-green);
-        color: white;
+        color: var(--white);
         font-size: 14px;
         width: 80px;
         margin-left: 10px;

src/app/reusable-components/forum/forum.component.scss

@@ -7,7 +7,7 @@
         display: block;
         width: 100%;
         font-size: 16px;
-        color: white;
+        color: var(--white);
         padding: 10px;
         background-color: transparent;
         border: 2px solid var(--dark-grey);
@@ -50,7 +50,7 @@
             border: 0px;
             background-color: transparent;
             padding: 0 10px;
-            color: white;
+            color: var(--white);
             display: block;
             flex-grow: 1;
             resize: none;
@@ -73,7 +73,7 @@
         height: 40px;
         font-size: 14px;
         background-color: var(--teal-green);
-        color: white;
+        color: var(--white);
         border: 0px;
         border-radius: 5px;
     }
@@ -84,7 +84,7 @@
         height: 40px;
         font-size: 14px;
         background-color: var(--dark-grey);
-        color: white;
+        color: var(--white);
         border: 0px;
         border-radius: 5px;
         margin-right: 20px;
@@ -170,7 +170,7 @@
 
         li {
             text-align: center;
-            color: white;
+            color: var(--white);
             margin: 20px auto;
             font-size: 14px;
         }
@@ -211,7 +211,7 @@
 
         button {
             background-color: var(--black);
-            color: white;
+            color: var(--white);
             border-radius: 20px;
             height: 25px;
             font-size: 12px;
@@ -243,7 +243,7 @@
 
     h5 {
         font-size: 16px;
-        color: white;
+        color: var(--white);
         font-weight: 400;
         margin: 0px auto 15px;
     }
@@ -279,7 +279,7 @@
 
         label {
             font-size: 12px;
-            color: white;
+            color: var(--white);
         }
 
         .time-stamp {

src/app/settings/settings.component.html

@@ -18,7 +18,7 @@
                 <div class="toggle" [ngClass]="{'active' : isNightModeOn }" (click)="isNightModeOn = !isNightModeOn"></div>
             </div>
         </li>
-        <li>
+        <li [routerLink]="['/theme']">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/021-paint-brush.svg"></svg-icon>
             Theme
         </li>

src/app/settings/settings.component.scss

@@ -8,14 +8,14 @@ li {
     border-bottom: 1px solid var(--dark-grey);
     height: 70px;
     padding: 0 15px;
-    color: rgba(white, 0.7);
+    color: var(--white);
     font-size: 14px;
     letter-spacing: 1px;
 
     .icon {
         width: 25px;
         height: 25px;
-        fill: white;
+        fill: var(--white);
         margin-right: 15px;
     }
 
@@ -45,7 +45,7 @@ li {
             width: 15px;
             height: 15px;
             border-radius: 50%;
-            background-color: white;
+            background-color: var(--white);
             display: block;
             left: 0px;
             top: 0px;

src/app/settings/settings.component.ts

@@ -7,13 +7,16 @@ import { Location } from '@angular/common';
     styleUrls: ['./settings.component.scss']
 })
 export class SettingsComponent implements OnInit {
-    isNightModeOn: boolean = true;
+    isNightModeOn: boolean = false;
 
     constructor(
         private location: Location
     ) { }
 
     ngOnInit(): void {
+        if (localStorage.mode === 'night') {
+            this.isNightModeOn = true;
+        }
     }
 
     back() {

src/app/settings/themes/themes.component.html

@@ -0,0 +1,22 @@
+<section class="page-container full-bg" color="black">
+    <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/021-paint-brush.svg"></svg-icon>
+            <span> Theme </span>
+        </h5>
+    </header>
+
+    <ul>
+        <li [ngClass]="{'active' : themeName === 'light'}"
+        (click)="selectTheme('light')">
+            <div class="radio"></div> Light
+        </li>
+        <li [ngClass]="{'active' : themeName === 'dark'}"
+        (click)="selectTheme('dark')">
+            <div class="radio"></div> Dark
+        </li>
+    </ul>
+</section>

src/app/settings/themes/themes.component.scss

@@ -0,0 +1,50 @@
+ul {
+    list-style: none;
+}
+
+
+li {
+    border-bottom: 1px solid var(--light-grey);
+    color: var(--white);
+    font-size: 16px;
+    letter-spacing: 1px;
+    padding: 0 5%;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+
+    &.active {
+        color: var(--teal-green);
+
+        .radio {
+            border-color: var(--teal-green);
+
+            &::before {
+                background-color: var(--teal-green);
+            }
+        }
+    }
+}
+
+.radio {
+    margin-right: 20px;
+    width: 25px;
+    height: 25px;
+    border: 1px solid var(--white);
+    border-radius: 50%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &::before {
+        content: '';
+        display: block;
+        width: 15px;
+        height: 15px;
+        border-radius: 50%;
+        background-color: transparent;
+    }
+}

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

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

src/app/settings/themes/themes.component.ts

@@ -0,0 +1,29 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+	selector: 'app-themes',
+	templateUrl: './themes.component.html',
+	styleUrls: ['./themes.component.scss']
+})
+export class ThemesComponent implements OnInit {
+    themeName: string = '';
+
+	constructor(
+        private location: Location
+    ) { }
+
+	ngOnInit(): void {
+        this.themeName = localStorage.theme;
+	}
+
+    back() {
+        this.location.back();
+    }
+
+    selectTheme(theme: string) {
+        localStorage.theme = theme;
+        this.themeName = theme;        
+    }
+
+}

src/app/tabs/courses/chapter-notes/chapter-notes.component.scss

@@ -2,7 +2,7 @@ h2 {
     padding: 0 5%;
     font-size: 22px;
     margin: 20px auto 10px;
-    color: white;
+    color: var(--white);
     font-weight: 400;
 }
 
@@ -20,7 +20,7 @@ h2 {
 
     label {
         font-size: 14px;
-        color: white;
+        color: var(--white);
         margin-right: 10px;
     }
 
@@ -46,7 +46,7 @@ h2 {
 .description {
     width: 90%;
     margin: 40px auto 0;
-    color: white;
+    color: var(--white);
 
     p {
         margin: 20px auto;

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

@@ -15,7 +15,7 @@
         .icon {
             width: 15px;
             height: 15px;
-            fill: white;
+            fill: var(--white);
         }
     }
 
@@ -28,7 +28,7 @@
 
     p {
         margin-top: 10px;
-        color: white;
+        color: var(--white);
         font-size: 13px;
     }
 
@@ -86,7 +86,7 @@
         color: var(--light-grey);
 
         &.active {
-            color: white;
+            color: var(--white);
         }
     }
 }
@@ -102,7 +102,7 @@
     }
 
     p {
-        color: white;
+        color: var(--white);
         font-size: 13px;
     }
 
@@ -111,7 +111,7 @@
         display: block;
         width: 100%;
         height: 40px;
-        color: white;
+        color: var(--white);
         font-size: 14px;
         background-color: var(--teal-green);
         border-radius: 5px;
@@ -194,7 +194,7 @@
             &.checkmark {
                 width: 25px;
                 height: 25px;
-                background-color: white;
+                background-color: var(--white);
                 border-radius: 50%;
             }
         }
@@ -207,11 +207,11 @@
         label {
             font-size: 16px;
             font-weight: 500;
-            color: white;
+            color: var(--white);
         }
 
         p {
-            color: white;
+            color: var(--white);
             font-size: 14px;
         }
     }
@@ -286,14 +286,14 @@
             overflow: hidden;
 
             .type {
-                color: white;
+                color: var(--white);
                 font-weight: 500;
             }
 
             .type-icon {
                 width: 15px;
                 height: 15px;
-                fill: white;
+                fill: var(--white);
             }
         }
     }
@@ -309,7 +309,7 @@
 
         &.checkmark {
             align-self: center;
-            background-color: white;
+            background-color: var(--white);
             border-radius: 50%;
         }
 
@@ -399,7 +399,7 @@
     }
 
     label {
-        color: white;
+        color: var(--white);
         font-size: 15px;
         display: block;
     }

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

@@ -1,6 +1,6 @@
 header {
     padding: 0 7%;
-    color: white;
+    color: var(--white);
     font-size: 18px;
     position: relative;
     margin-top: 50px;
@@ -13,7 +13,7 @@ header {
         margin: 20px auto 0;
 
         &.whiten {
-            color: white;
+            color: var(--white);
         }
     }
 }
@@ -36,7 +36,7 @@ ul {
         width: 42vw;
         height: 37vw;
         padding: 15px;
-        background-color: white;
+        background-color: var(--white);
         border-radius: 15px;
         margin-top: 6vw;
         box-shadow: 0px 0px 5px var(--light-grey);

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

@@ -9,7 +9,7 @@
         .icon {
             width: 20px;
             height: 20px;
-            fill: white;
+            fill: var(--white);
         }
     }
 }
@@ -60,7 +60,7 @@
         width: 17px;
         height: 17px;
         background-color: var(--dark-grey);
-        color: white;
+        color: var(--white);
         margin-right: 7px;
         border-radius: 50%;
         overflow: hidden;
@@ -82,7 +82,7 @@
         .icon {
             width: 100%;
             height: 100%;
-            fill: white;
+            fill: var(--white);
             display: none;
         }
 
@@ -107,13 +107,13 @@
             }
 
             .icon {
-                fill: white;
+                fill: var(--white);
             }
         }
 
         &.correct {
             border-color: var(--green);
-            background-color: white;
+            background-color: var(--white);
 
             label {
                 display: none;
@@ -127,7 +127,7 @@
 
         &.wrong {
             border-color: var(--danger-dark);
-            background-color: white;
+            background-color: var(--white);
 
             label {
                 display: none;
@@ -147,7 +147,7 @@ ngx-siema-slide {
 
     .question {
         line-height: 1.5;
-        color: white;
+        color: var(--white);
         font-size: 13px;
         background-color: var(--ash-black);
         padding: 0 5% 15px 5%;
@@ -176,7 +176,7 @@ ngx-siema-slide {
             width: 60px;
             height: 60px;
             border-radius: 50%;
-            background-color: white;
+            background-color: var(--white);
             display: flex;
             align-items: center;
             justify-content: center;
@@ -211,7 +211,7 @@ ngx-siema-slide {
         display: flex;
         width: 100%;
         border: 1px solid var(--light-grey);
-        color: white;
+        color: var(--white);
         border-radius: 15px;
         align-items: center;
         min-height: 50px;
@@ -236,7 +236,7 @@ ngx-siema-slide {
             .icon {
                 width: 100%;
                 height: 100%;
-                fill: white;
+                fill: var(--white);
                 display: none;
             }
         }
@@ -251,7 +251,7 @@ ngx-siema-slide {
 
             .icon-holder {
                 border-color: var(--green);
-                background-color: white;
+                background-color: var(--white);
 
                 .correct-icon {
                     fill: var(--green);
@@ -270,7 +270,7 @@ ngx-siema-slide {
 
             .icon-holder {
                 border-color: var(--danger-dark);
-                background-color: white;
+                background-color: var(--white);
 
                 .wrong-icon {
                     fill: var(--danger-dark);
@@ -308,7 +308,7 @@ ngx-siema-slide {
 
         &.next-button {
             background-color: var(--teal);
-            color: white;
+            color: var(--white);
             margin-left: auto;
 
             &.skip {
@@ -350,7 +350,7 @@ ngx-siema-slide {
     }
 
     header {
-        color: white;
+        color: var(--white);
         margin-top: -60px;
 
         img {
@@ -388,7 +388,7 @@ ngx-siema-slide {
     height: 100%;
     width: 100%;
     padding: 25px 5% 80px 5%;
-    background-color: white;
+    background-color: var(--white);
     border-top-right-radius: 30px;
     border-top-left-radius: 30px;
     position: relative;
@@ -424,7 +424,7 @@ ngx-siema-slide {
         width: 90%;
         border-radius: 30px;
         height: 45px;
-        color: white;
+        color: var(--white);
         background: linear-gradient(180deg, var(--teal), var(--teal-green));
         border: 0px;
         font-size: 14px;
@@ -436,7 +436,7 @@ ngx-siema-slide {
 
 .quiz-list-slideup {
     width: 100%;
-    background-color: white;
+    background-color: var(--white);
     overflow: hidden;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
@@ -482,7 +482,7 @@ ngx-siema-slide {
             .icon {
                 width: 10px;
                 height: 10px;
-                fill: white;
+                fill: var(--white);
             }
         }
     }
@@ -510,7 +510,7 @@ ngx-siema-slide {
             width: 20px;
             height: 20px;
             fill: var(--light-grey);
-            background-color: white;
+            background-color: var(--white);
             border-radius: 50%;
             display: none;
         }
@@ -714,7 +714,7 @@ ngx-siema-slide {
         }
 
         label {
-            color: white;
+            color: var(--white);
             position: absolute;
             top: -5px;
             left: calc(50% - 50px);
@@ -731,14 +731,14 @@ ngx-siema-slide {
 
         span {
             font-weight: 500;
-            color: white;
+            color: var(--white);
             font-size: 60px;
         }
     }
 
     p {
         font-size: 16px;
-        color: white;
+        color: var(--white);
         margin-bottom: 20px;
         text-align: center;
     }
@@ -754,7 +754,7 @@ ngx-siema-slide {
         display: flex;
         align-items: stretch;
         justify-content: flex-start;
-        background-color: white;
+        background-color: var(--white);
 
         .correct {
             background-color: var(--green);
@@ -776,7 +776,7 @@ ngx-siema-slide {
 }
 
 .answers-report {
-    background-color: white;
+    background-color: var(--white);
     border-top-right-radius: 30px;
     border-top-left-radius: 30px;
     height: 100%;
@@ -860,7 +860,7 @@ ngx-siema-slide {
             width: 48%;
             border: 0px;
             background-color: var(--light-grey);
-            color: white;
+            color: var(--white);
             font-size: 14px;
             height: 40px;
             border-radius: 5px;

src/app/tabs/courses/test/end/end.component.scss

@@ -13,12 +13,12 @@
         fill: var(--green);
         display: block;
         margin: 20px auto;
-        background-color: white;
+        background-color: var(--white);
         border-radius: 50%;
     }
 
     h2 {
-        color: white;
+        color: var(--white);
         font-size: 20px;
         line-height: 1.5;
         margin: 10px auto 50px;
@@ -71,7 +71,7 @@
     z-index: 1;
     left: 0;
     background-color: var(--teal-green);
-    color: white;
+    color: var(--white);
     font-size: 14px;
     height: 50px;
     border: 0px;

src/app/tabs/courses/test/question-sheet/question-sheet.component.scss

@@ -64,7 +64,7 @@
 
     header {
         background-color: var(--dark-grey);
-        color: white;
+        color: var(--white);
         display: flex;
         width: 100%;
         padding: 0 5%;
@@ -85,7 +85,7 @@
 
 .acknowledgement {
     background-color: var(--dark-grey);
-    color: white;
+    color: var(--white);
     padding: 15px 5%;
 
     .container {
@@ -102,13 +102,13 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        background-color: white;
+        background-color: var(--white);
         border-radius: 3px;
         transition: background-color 0.2s, border-color 0.2s;
 
         &.active {
             background-color: var(--teal-green);
-            color: white;
+            color: var(--white);
             border-color: var(--teal-green);
         }
 
@@ -130,7 +130,7 @@
         background-color: var(--teal-green);
         font-size: 14px;
         height: 40px;
-        color: white;
+        color: var(--white);
         margin: 10px auto 0;
         border: 0px;
         transition: background-color 0.3s;

src/app/tabs/courses/test/question-sheet/question/question.component.scss

@@ -5,7 +5,7 @@
     transition: background-color 0.3s;
 
     &.active {
-        background-color: white;
+        background-color: var(--white);
 
         .question-text {
             p {
@@ -30,7 +30,7 @@
         height: 25px;
         border-radius: 5px;
         background-color: var(--dark-grey);
-        color: white;
+        color: var(--white);
         font-size: 12px;
         display: flex;
         align-items: center;
@@ -45,7 +45,7 @@
     p {
         width: calc(100% - 60px);
         padding: 0 10px 0;
-        color: white;
+        color: var(--white);
         min-height: 25px;
         display: flex;
         align-items: center;
@@ -87,7 +87,7 @@
         width: 100%;
         margin: 20px auto 10px;
         background-color: var(--teal-green);
-        color: white;
+        color: var(--white);
         font-size: 13px;
         height: 40px;
         border-radius: 5px;
@@ -129,7 +129,7 @@
         display: flex;
         width: 100%;
         border: 1px solid transparent;
-        color: white;
+        color: var(--white);
         border-radius: 30px;
         align-items: center;
         min-height: 50px;
@@ -159,7 +159,7 @@
             .icon {
                 width: 100%;
                 height: 100%;
-                fill: white;
+                fill: var(--white);
                 display: none;
             }
         }
@@ -170,15 +170,15 @@
             background-color: var(--green);
 
             label {
-                color: white;
+                color: var(--white);
             }
 
             .icon-holder {
-                border-color: white;
+                border-color: var(--white);
                 background-color: transparent;
 
                 .correct-icon {
-                    fill: white;
+                    fill: var(--white);
                     display: block;
                 }
             }

src/app/tabs/courses/test/start/start.component.scss

@@ -47,7 +47,7 @@
 
     h2 {
         font-size: 26px;
-        color: white;
+        color: var(--white);
         font-weight: 500;
         margin: 10px auto;
     }
@@ -85,7 +85,7 @@
         border-radius: 30px;
         background-color: var(--teal-green);
         border: 0px;
-        color: white;
+        color: var(--white);
         width: 150px;
         display: block;
         margin: 20px auto 0;
@@ -109,7 +109,7 @@
     z-index: 1;
     max-height: calc(100vh - 100px);
     width: 100%;
-    background-color: white;
+    background-color: var(--white);
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
     padding: 0px 7% 30px;
@@ -129,7 +129,7 @@
         position: -webkit-sticky;
         z-index: 1;
         top: 0;
-        background-color: white;
+        background-color: var(--white);
         padding: 30px 0 10px;
     }
 
@@ -155,13 +155,13 @@
         height: 30px;
         background-color: var(--light-grey);
         border: 0px;
-        color: white;
+        color: var(--white);
         border-radius: 50%;
 
         .icon {
             width: 12px;
             height: 12px;
-            fill: white;
+            fill: var(--white);
         }
     }
 

src/app/tabs/courses/video-chapter/video-chapter.component.scss

@@ -1,6 +1,6 @@
 .video-player {
     background-color: var(--dark-grey);
-    color: white;
+    color: var(--white);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,7 +15,7 @@
     .icon {
         width: 50px;
         height: 50px;
-        fill: white;
+        fill: var(--white);
     }
 }
 
@@ -33,12 +33,12 @@
         flex-grow: 1;
         border-radius: 7px;
         background-color: transparent;
-        color: white;
+        color: var(--white);
         font-size: 13px;
         border: 0px;
 
         &.active {
-            background-color: white;
+            background-color: var(--white);
             color: var(--teal);
             font-weight: 500;
         }
@@ -58,7 +58,7 @@
         margin-bottom: 20px;
 
         .highlight {
-            color: white;
+            color: var(--white);
         }
     }
 }
@@ -82,7 +82,7 @@
     }
 
     label {
-        color: white;
+        color: var(--white);
         font-size: 15px;
         display: block;
     }
@@ -123,7 +123,7 @@
     }
 
     label {
-        color: white;
+        color: var(--white);
         font-size: 15px;
         display: block;
     }
@@ -195,7 +195,7 @@
         width: 100%;
         height: 50px;
         background-color: var(--ash-black);
-        color: white;
+        color: var(--white);
         align-items: center;
         justify-content: space-between;
         padding: 0 5%;

src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss

@@ -9,14 +9,14 @@ h2 {
     padding: 0 5%;
     font-size: 22px;
     margin: 20px auto 10px;
-    color: white;
+    color: var(--white);
     font-weight: 400;
 }
 
 .description {
     width: 90%;
     margin: 0 auto;
-    color: white;
+    color: var(--white);
 
     p {
         margin-bottom: 20px;

src/app/tabs/home/home.component.scss

@@ -28,7 +28,7 @@
     .icon {
         width: 20px;
         height: 20px;
-        fill: white;
+        fill: var(--white);
     }
 
     button {
@@ -55,7 +55,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
+    color: var(--white);
     position: sticky;
     position: -webkit-sticky;
     top: 0;
@@ -101,7 +101,7 @@
     }
 
     .tutor {
-        color: white;
+        color: var(--white);
         width: 100%;
 
         .go-live-button {
@@ -111,7 +111,7 @@
             background-color: var(--teal-green);
             border-radius: 5px;
             border: 0px;
-            color: white;
+            color: var(--white);
             font-size: 14px;
             height: 35px;
         }
@@ -161,7 +161,7 @@
                 font-size: 20px;
                 font-weight: 500;
                 margin-bottom: 15px;
-                color: white;
+                color: var(--white);
             }
         }
 
@@ -192,13 +192,13 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            background-color: white;
+            background-color: var(--white);
             border-radius: 3px;
             transition: background-color 0.2s, border-color 0.2s;
 
             &.active {
                 background-color: var(--teal-green);
-                color: white;
+                color: var(--white);
                 border-color: var(--teal-green);
             }
 
@@ -264,7 +264,7 @@
     @media screen and (min-width: 1023px) {
         width: 56%;
         margin: 5vh 0 0 4%;
-        background-color: white;
+        background-color: var(--white);
         box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
         border-radius: 30px;
         height: 40vh;
@@ -286,7 +286,7 @@
         display: flex;
         align-items: center;
         justify-content: space-between;
-        color: white;
+        color: var(--white);
         font-size: 14px;
         height: 45px;
         border-radius: 7px;
@@ -305,7 +305,7 @@
         }
 
         .icon {
-            fill: white;
+            fill: var(--white);
             width: 15px;
             height: 15px;
 
@@ -337,7 +337,7 @@
             width: calc(100% / 2);
             border: 0px;
             background-color: transparent;
-            color: white;
+            color: var(--white);
             border-radius: 10px;
 
             @media screen and (min-width: 1023px) {
@@ -347,7 +347,7 @@
 
             &.active {
                 background-color: var(--teal-green);
-                color: white;
+                color: var(--white);
             }
         }
     }
@@ -390,7 +390,7 @@
             margin-bottom: 15px;
 
             @media screen and (min-width: 1023px) {
-                background-color: white;
+                background-color: var(--white);
                 box-shadow: 0px 0px 5px var(--light-grey);
                 width: 98%;
                 margin: 5px auto 15px;
@@ -402,7 +402,7 @@
         }
 
         label {
-            color: white;
+            color: var(--white);
             font-size: 15px;
             display: block;
 

src/app/tabs/more/more.component.scss

@@ -69,7 +69,7 @@
     h5 {
         font-weight: 500;
         font-size: 16px;
-        color: white;
+        color: var(--white);
     }
 
     p {
@@ -86,7 +86,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: white;
+    color: var(--white);
     font-size: 15px;
     height: 50px;
     border-radius: 0px;
@@ -97,7 +97,7 @@
     }
 
     .icon {
-        fill: white;
+        fill: var(--white);
         width: 15px;
         height: 15px;
     }
@@ -134,13 +134,13 @@
         flex-grow: 1;
         border-radius: 7px;
         background-color: transparent;
-        color: white;
+        color: var(--white);
         font-size: 13px;
         border: 0px;
 
         &.active {
             background-color: var(--teal-green);
-            color: white;
+            color: var(--white);
             font-weight: 500;
         }
     }
@@ -157,7 +157,7 @@
     li {
         text-align: center;
         width: 30%;
-        background-color: white;
+        background-color: var(--white);
         border-radius: 10px;
         box-shadow: 1px 1px 5px var(--light-grey);
         padding: 15px 15px 10px;
@@ -185,7 +185,7 @@
     width: 90%;
     margin: 0 auto 20px;
     background-color: var(--danger);
-    color: white;
+    color: var(--white);
     border: 0px;
     border-radius: 5px;
     height: 50px;

src/app/tabs/tabs.component.scss

@@ -83,7 +83,7 @@
 
         &.mid-button {
             height: calc(90vw / 5);
-            background-color: white;
+            background-color: var(--white);
             border-radius: 50%;
             position: relative;
             transform: translateY(calc(-90vw / 13))scale(0.9);
@@ -102,7 +102,7 @@
             @media screen and (max-width: 1023px) {
                 display: block;
                 margin-top: 5px;
-                color: white;
+                color: var(--white);
                 font-size: 10px;
             }
         }
@@ -113,7 +113,7 @@
         display: block;
         width: 15px;
         height: 15px;
-        fill: white;
+        fill: var(--white);
 
         @media screen and (min-width: 1023px) {
             width: 18px;

src/app/welcome/welcome.component.scss

@@ -4,7 +4,7 @@
 
 .upfold {
     width: 100%;
-    color: white;
+    color: var(--white);
     position: sticky;
     position: -webkit-sticky;
     z-index: 1;
@@ -28,7 +28,7 @@
     width: 70%;
     height: 50px;
     box-shadow: 2px 2px 20px -5px var(--teal);
-    color: white;
+    color: var(--white);
     background-color: var(--teal);
     border-radius: 10px;
     font-size: 14px;
@@ -47,12 +47,12 @@
 
         &:first-child {
             header {
-                color: white;
+                color: var(--white);
             }
         }
 
         header.white-header {
-            color: white;
+            color: var(--white);
         }
     }
 

src/styles.scss

@@ -20,6 +20,7 @@
     --teal-green: #08c17e;
     --danger: #ea8b8b;
     --danger-dark: #d65f5f;
+    --white: #ffffff;
 }
 
 // Confirmation pop up container style
@@ -62,6 +63,7 @@
     height: 100vh;
     overflow: auto;
     padding-bottom: 70px;
+    background-color: var(--white);
 
     &.half-bg {
         &::before {
@@ -128,15 +130,15 @@
 
     h5 {
         font-size: 16px;
-        color: white;
-        font-weight: 400;
+        color: var(--white);
+        font-weight: 500;
         margin-left: 20px;
         letter-spacing: 1px;
 
         .icon {
             width: 15px;
             height: 15px;
-            fill: white;
+            fill: var(--white);
             margin-right: 3px;
             vertical-align: middle;
             position: relative;