refactor: TT-332 changes in sidebar and dark mode components

Author: JosueOb

src/app/modules/shared/components/dark-mode/dark-mode.component.spec.ts

@@ -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({
@@ -17,7 +13,6 @@ describe('DarkModeComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DarkModeComponent);
-    cookieService = TestBed.inject(CookieService);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/modules/shared/components/dark-mode/dark-mode.component.ts

@@ -31,7 +31,7 @@ export class DarkModeComponent implements OnInit, AfterViewInit {
 
   ngAfterViewInit(): void {
     if (this.isFeatureToggleDarkModeActive) {
-      this.switchThemeToggleStyles(this.theme);
+      this.switchThemeToggleStyles();
     }
   }
 
@@ -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');
     }
   }
 }

src/app/modules/shared/components/sidebar/sidebar.component.html

@@ -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>