diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2b25f77..10bbdec 100644 --- a/src/app/app-routing.module.ts +++ b/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({ diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 6ab36de..4f37fe9 100644 --- a/src/app/app.component.ts +++ b/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'); + // } } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ed04791..1ce424a 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/attendance/attendance.component.scss b/src/app/attendance/attendance.component.scss index 7437227..091f425 100644 --- a/src/app/attendance/attendance.component.scss +++ b/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%; } } diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss index 3f39935..01fabc5 100644 --- a/src/app/calendar/calendar.component.scss +++ b/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); } } diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.scss b/src/app/chat-page/add-broadcast/add-broadcast.component.scss index 5ae8c0a..4d8f516 100644 --- a/src/app/chat-page/add-broadcast/add-broadcast.component.scss +++ b/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); } } } diff --git a/src/app/chat-page/chat-page.component.scss b/src/app/chat-page/chat-page.component.scss index 7a68b2b..f0180aa 100644 --- a/src/app/chat-page/chat-page.component.scss +++ b/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; diff --git a/src/app/chat-page/chat-window/chat-window.component.scss b/src/app/chat-page/chat-window/chat-window.component.scss index 21ba192..f020ce4 100644 --- a/src/app/chat-page/chat-window/chat-window.component.scss +++ b/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; } diff --git a/src/app/reusable-components/class-card-list/class-card-list.component.scss b/src/app/reusable-components/class-card-list/class-card-list.component.scss index 2fa1d28..9a98b36 100644 --- a/src/app/reusable-components/class-card-list/class-card-list.component.scss +++ b/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; diff --git a/src/app/reusable-components/forum/forum.component.scss b/src/app/reusable-components/forum/forum.component.scss index 48592ad..075b477 100644 --- a/src/app/reusable-components/forum/forum.component.scss +++ b/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 { diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html index 2d44707..8783e5d 100644 --- a/src/app/settings/settings.component.html +++ b/src/app/settings/settings.component.html @@ -18,7 +18,7 @@
-
  • +
  • Theme
    • diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss index aa0d890..3ea3e20 100644 --- a/src/app/settings/settings.component.scss +++ b/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; diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts index f06b663..7990a9a 100644 --- a/src/app/settings/settings.component.ts +++ b/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() { diff --git a/src/app/settings/themes/themes.component.html b/src/app/settings/themes/themes.component.html new file mode 100644 index 0000000..bf3c2cf --- /dev/null +++ b/src/app/settings/themes/themes.component.html @@ -0,0 +1,22 @@ +
    +
    + +
    + + Theme +
    +
    + + +
    diff --git a/src/app/settings/themes/themes.component.scss b/src/app/settings/themes/themes.component.scss new file mode 100644 index 0000000..f052909 --- /dev/null +++ b/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; + } +} diff --git a/src/app/settings/themes/themes.component.spec.ts b/src/app/settings/themes/themes.component.spec.ts new file mode 100644 index 0000000..9199b39 --- /dev/null +++ b/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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ThemesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ThemesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/settings/themes/themes.component.ts b/src/app/settings/themes/themes.component.ts new file mode 100644 index 0000000..0fa2a0a --- /dev/null +++ b/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; + } + +} diff --git a/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss b/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss index 7756b47..9a30de8 100644 --- a/src/app/tabs/courses/chapter-notes/chapter-notes.component.scss +++ b/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; diff --git a/src/app/tabs/courses/course-details/course-details.component.scss b/src/app/tabs/courses/course-details/course-details.component.scss index 1dcc23e..53da527 100644 --- a/src/app/tabs/courses/course-details/course-details.component.scss +++ b/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; } diff --git a/src/app/tabs/courses/courses.component.scss b/src/app/tabs/courses/courses.component.scss index 22f06c1..20f68fd 100644 --- a/src/app/tabs/courses/courses.component.scss +++ b/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); diff --git a/src/app/tabs/courses/quiz/quiz.component.scss b/src/app/tabs/courses/quiz/quiz.component.scss index 2e96e7d..fb761b4 100644 --- a/src/app/tabs/courses/quiz/quiz.component.scss +++ b/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; diff --git a/src/app/tabs/courses/test/end/end.component.scss b/src/app/tabs/courses/test/end/end.component.scss index f87552f..cf362cc 100644 --- a/src/app/tabs/courses/test/end/end.component.scss +++ b/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; diff --git a/src/app/tabs/courses/test/question-sheet/question-sheet.component.scss b/src/app/tabs/courses/test/question-sheet/question-sheet.component.scss index 90c1a92..d28c164 100644 --- a/src/app/tabs/courses/test/question-sheet/question-sheet.component.scss +++ b/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; diff --git a/src/app/tabs/courses/test/question-sheet/question/question.component.scss b/src/app/tabs/courses/test/question-sheet/question/question.component.scss index e3e414e..fede494 100644 --- a/src/app/tabs/courses/test/question-sheet/question/question.component.scss +++ b/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; } } diff --git a/src/app/tabs/courses/test/start/start.component.scss b/src/app/tabs/courses/test/start/start.component.scss index 9844a50..7e12506 100644 --- a/src/app/tabs/courses/test/start/start.component.scss +++ b/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); } } diff --git a/src/app/tabs/courses/video-chapter/video-chapter.component.scss b/src/app/tabs/courses/video-chapter/video-chapter.component.scss index eece424..916399d 100644 --- a/src/app/tabs/courses/video-chapter/video-chapter.component.scss +++ b/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%; diff --git a/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss b/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss index e1f6b7f..40981f8 100644 --- a/src/app/tabs/courses/video-chapter/video-notes/video-notes.component.scss +++ b/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; diff --git a/src/app/tabs/home/home.component.scss b/src/app/tabs/home/home.component.scss index 54702c1..5ca4d24 100644 --- a/src/app/tabs/home/home.component.scss +++ b/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; diff --git a/src/app/tabs/more/more.component.scss b/src/app/tabs/more/more.component.scss index dffb69c..feca595 100644 --- a/src/app/tabs/more/more.component.scss +++ b/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; diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index 2db0d9b..9f6fb90 100644 --- a/src/app/tabs/tabs.component.scss +++ b/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; diff --git a/src/app/welcome/welcome.component.scss b/src/app/welcome/welcome.component.scss index baf2a00..24fac93 100644 --- a/src/app/welcome/welcome.component.scss +++ b/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); } } diff --git a/src/styles.scss b/src/styles.scss index 7b0ec0f..e5fc0bb 100644 --- a/src/styles.scss +++ b/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;