diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 1053bcb..ffc8a92 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -12,6 +12,7 @@ import { ChapterNotesComponent } from './tabs/courses/chapter-notes/chapter-note import { QuizComponent } from './tabs/courses/quiz/quiz.component'; import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component'; import { ChatPageComponent } from './chat-page/chat-page.component'; +import { SettingsComponent } from './settings/settings.component'; const routes: Routes = [ { path: '', pathMatch: 'full', redirectTo: 'welcome' }, @@ -28,6 +29,7 @@ const routes: Routes = [ { component: ForumPageComponent, path: 'forum'}, { component: PostDetailsComponent, path: 'forum-post-details'}, { component: ChatPageComponent, path: 'chats'}, + { component: SettingsComponent, path: 'settings'}, ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7418485..6314cbf 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -28,6 +28,7 @@ import { QuizComponent } from './tabs/courses/quiz/quiz.component'; import { PostDetailsComponent } from './reusable-components/forum/post-details/post-details.component'; import { ChatPageComponent } from './chat-page/chat-page.component'; import { ChatWindowComponent } from './chat-page/chat-window/chat-window.component'; +import { SettingsComponent } from './settings/settings.component'; @NgModule({ declarations: [ @@ -51,6 +52,7 @@ import { ChatWindowComponent } from './chat-page/chat-window/chat-window.compone PostDetailsComponent, ChatPageComponent, ChatWindowComponent, + SettingsComponent, ], imports: [ BrowserModule, diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html new file mode 100644 index 0000000..659eb37 --- /dev/null +++ b/src/app/settings/settings.component.html @@ -0,0 +1,46 @@ +
+
+ +
+ + Settings +
+
+ + +
diff --git a/src/app/settings/settings.component.scss b/src/app/settings/settings.component.scss new file mode 100644 index 0000000..e915f9b --- /dev/null +++ b/src/app/settings/settings.component.scss @@ -0,0 +1,106 @@ +.page { + background-color: var(--black); + height: 100vh; + overflow: auto; +} + +.nav-header { + background-color: var(--ash-black); + display: flex; + align-items: center; + padding: 0 5%; + height: 60px; + position: sticky; + position: -webkit-sticky; + top: 0; + z-index: 1; + box-shadow: 0px 0px 5px var(--black); + + .close-button { + border: 0px; + background-color: transparent; + .icon { + width: 15px; + height: 15px; + fill: var(--light-grey); + } + } + + h5 { + font-size: 16px; + color: white; + font-weight: 400; + margin-left: 20px; + letter-spacing: 1px; + + .icon { + width: 15px; + height: 15px; + fill: white; + margin-right: 3px; + vertical-align: middle; + position: relative; + top: -1px; + } + } +} + + +ul { + list-style: none; +} + +li { + display: flex; + align-items: center; + border-bottom: 1px solid var(--dark-grey); + height: 70px; + padding: 0 15px; + color: var(--light-grey); + font-size: 14px; + letter-spacing: 1px; + + .icon { + width: 25px; + height: 25px; + fill: white; + margin-right: 15px; + } + + .end-slot { + margin-left: auto; + } + + .toggle { + height: 15px; + background-color: var(--light-grey); + position: relative; + width: 40px; + overflow: visible; + border-radius: 30px; + transition: background-color 0.3s; + + &.active { + background-color: var(--teal-green); + + &::before { + transform: scale(1.5)translateX(100%); + } + } + + &::before { + content: ''; + width: 15px; + height: 15px; + border-radius: 50%; + background-color: white; + display: block; + left: 0px; + top: 0px; + z-index: 1; + box-shadow: 0px 0px 5px var(--black); + transform: scale(1.5); + transition: transform 0.3s; + } + } +} diff --git a/src/app/settings/settings.component.spec.ts b/src/app/settings/settings.component.spec.ts new file mode 100644 index 0000000..91588f3 --- /dev/null +++ b/src/app/settings/settings.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SettingsComponent } from './settings.component'; + +describe('SettingsComponent', () => { + let component: SettingsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ SettingsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(SettingsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts new file mode 100644 index 0000000..f06b663 --- /dev/null +++ b/src/app/settings/settings.component.ts @@ -0,0 +1,23 @@ +import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-settings', + templateUrl: './settings.component.html', + styleUrls: ['./settings.component.scss'] +}) +export class SettingsComponent implements OnInit { + isNightModeOn: boolean = true; + + constructor( + private location: Location + ) { } + + ngOnInit(): void { + } + + back() { + this.location.back(); + } + +} diff --git a/src/app/tabs/more/more.component.html b/src/app/tabs/more/more.component.html index 2e7e301..3e40283 100644 --- a/src/app/tabs/more/more.component.html +++ b/src/app/tabs/more/more.component.html @@ -1,7 +1,7 @@
-
diff --git a/src/assets/custom-icons/008-bell.svg b/src/assets/custom-icons/008-bell.svg new file mode 100644 index 0000000..7fce410 --- /dev/null +++ b/src/assets/custom-icons/008-bell.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/010-moon.svg b/src/assets/custom-icons/010-moon.svg new file mode 100644 index 0000000..3440783 --- /dev/null +++ b/src/assets/custom-icons/010-moon.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/012-round.svg b/src/assets/custom-icons/012-round.svg new file mode 100644 index 0000000..a3f2f4e --- /dev/null +++ b/src/assets/custom-icons/012-round.svg @@ -0,0 +1,77 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/015-login.svg b/src/assets/custom-icons/015-login.svg new file mode 100644 index 0000000..5ac04c9 --- /dev/null +++ b/src/assets/custom-icons/015-login.svg @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/017-share.svg b/src/assets/custom-icons/017-share.svg new file mode 100644 index 0000000..aa7bd7a --- /dev/null +++ b/src/assets/custom-icons/017-share.svg @@ -0,0 +1,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/019-favorites-button.svg b/src/assets/custom-icons/019-favorites-button.svg new file mode 100644 index 0000000..1b15cde --- /dev/null +++ b/src/assets/custom-icons/019-favorites-button.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/021-paint-brush.svg b/src/assets/custom-icons/021-paint-brush.svg new file mode 100644 index 0000000..558676b --- /dev/null +++ b/src/assets/custom-icons/021-paint-brush.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/custom-icons/book (1).svg b/src/assets/custom-icons/book-1.svg similarity index 100% rename from src/assets/custom-icons/book (1).svg rename to src/assets/custom-icons/book-1.svg