Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
63dcbc7
style: TT-332 include Tailwind in global style file
JosueOb Sep 2, 2021
5a5f6f9
feat: TT-332 dark mode implementation
JosueOb Sep 3, 2021
b017fbd
style: TT-332 color palette
JosueOb Sep 6, 2021
2d648d7
test: TT-332 unit test on the dark mode component
JosueOb Sep 6, 2021
1e23038
fix: TT-216 add tabIndex attribute to materialDatePicker and to Date …
bytesantiago Sep 7, 2021
13fd98a
chore(release): 1.50.5 [skip ci]nn
semantic-release-bot Sep 7, 2021
c63a8a0
refactor: TT-332 application of Azure toggle function to display dark…
JosueOb Sep 8, 2021
8e1ec7e
style: TT-332 TW prefix added to the color palette
JosueOb Sep 8, 2021
181bc76
refactor: TT-332 changes in sidebar and dark mode components
JosueOb Sep 8, 2021
704ba0e
fix: TT-334 keep the sidebar item selected when the page is refreshed…
JosueOb Sep 9, 2021
0125ac6
chore(release): 1.50.6 [skip ci]nn
semantic-release-bot Sep 9, 2021
5ecda54
refactor: TT-332 changes to the button to change the page theme
JosueOb Sep 10, 2021
f6fd309
test: TT-332 unit test to check if the user has the dark-mode feature…
JosueOb Sep 11, 2021
ff1ded3
style: TT-332 include Tailwind in global style file
JosueOb Sep 2, 2021
419ff2b
feat: TT-332 dark mode implementation
JosueOb Sep 3, 2021
c4ac6f7
style: TT-332 color palette
JosueOb Sep 6, 2021
57f96d7
test: TT-332 unit test on the dark mode component
JosueOb Sep 6, 2021
1507382
refactor: TT-332 application of Azure toggle function to display dark…
JosueOb Sep 8, 2021
18997af
style: TT-332 TW prefix added to the color palette
JosueOb Sep 8, 2021
1ed1c33
refactor: TT-332 changes in sidebar and dark mode components
JosueOb Sep 8, 2021
b99fa46
refactor: TT-332 changes to the button to change the page theme
JosueOb Sep 10, 2021
1e2e392
test: TT-332 unit test to check if the user has the dark-mode feature…
JosueOb Sep 11, 2021
b8705dd
refactor: TT-332 changes in the unit test description of the dark mod…
JosueOb Sep 13, 2021
95d1ed3
refactor: TT-332 changes in the unit test description of the dark mod…
JosueOb Sep 13, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor: TT-332 changes in sidebar and dark mode components
  • Loading branch information
JosueOb committed Sep 8, 2021
commit 181bc76b5012998a5b2502cd1330c942c79f49f1
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CookieService } from 'ngx-cookie-service';
import { FeatureToggle } from 'src/environments/enum';

import { DarkModeComponent } from './dark-mode.component';

describe('DarkModeComponent', () => {
let component: DarkModeComponent;
let fixture: ComponentFixture<DarkModeComponent>;
let cookieService: CookieService;

beforeEach(async () => {
await TestBed.configureTestingModule({
Expand All @@ -17,7 +13,6 @@ describe('DarkModeComponent', () => {

beforeEach(() => {
fixture = TestBed.createComponent(DarkModeComponent);
cookieService = TestBed.inject(CookieService);
component = fixture.componentInstance;
fixture.detectChanges();
});
Expand Down
21 changes: 9 additions & 12 deletions src/app/modules/shared/components/dark-mode/dark-mode.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export class DarkModeComponent implements OnInit, AfterViewInit {

ngAfterViewInit(): void {
if (this.isFeatureToggleDarkModeActive) {
this.switchThemeToggleStyles(this.theme);
this.switchThemeToggleStyles();
}
}

Expand Down Expand Up @@ -70,20 +70,17 @@ export class DarkModeComponent implements OnInit, AfterViewInit {
changeToDarkOrLightTheme(): void {
this.theme = this.setTheme();
this.setLocalStorageTheme(this.theme);
this.switchThemeToggleStyles(this.theme);
this.switchThemeToggleStyles();
this.addOrRemoveDarkMode();
}

switchThemeToggleStyles(theme: string): void {
switch (theme) {
case 'dark':
this.themeToggle.nativeElement.classList.remove('bg-warningTW', '-translate-x-1');
this.themeToggle.nativeElement.classList.add('bg-grayTW-lighter', 'translate-x-1/2');
break;
case 'light':
this.themeToggle.nativeElement.classList.remove('bg-grayTW-lighter', 'translate-x-1/2');
this.themeToggle.nativeElement.classList.add('bg-warningTW', '-translate-x-1');
break;
switchThemeToggleStyles(): void {
if (this.isDarkTheme()) {
this.themeToggle.nativeElement.classList.remove('bg-warningTW', '-translate-x-1');
this.themeToggle.nativeElement.classList.add('bg-grayTW-lighter', 'translate-x-1/2');
} else {
this.themeToggle.nativeElement.classList.remove('bg-grayTW-lighter', 'translate-x-1/2');
this.themeToggle.nativeElement.classList.add('bg-warningTW', '-translate-x-1');
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,11 @@
</div>
</nav>
<div class="container-fluid px-0 full-height">
<div class="content_app mx-10 my-10 rounded-md bg-whiteTW dark:bg-grayTW-dark">
<div class="content_app h-100">
<div class="m-1 p-5 rounded-md bg-whiteTW dark:bg-grayTW-dark">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
</div>
</div>