refactor: Removed additional themes (#353)

Author: tammy-a11y

packages/angular-sdk-components/src/lib/_components/infra/navbar/navbar.component.html

@@ -47,18 +47,9 @@
         </div>
       </mat-list-item>
       <mat-menu #menu="matMenu">
-        <button mat-menu-item [matMenuTriggerFor]="themes">Switch Theme</button>
         <button mat-menu-item>Profile</button>
         <button mat-menu-item (click)="navPanelLogoutClick()">{{ localizedVal('Log off', localeCategory) }}</button>
       </mat-menu>
-      <mat-menu #themes="matMenu">
-        <button *ngFor="let theme of themeService.getThemes()" mat-menu-item (click)="themeService.setTheme(theme.id)">
-          <div class="theme-menu-item">
-            <div class="color-preview" [style.background-color]="theme.primary"></div>
-            <span>{{ theme.displayName }}</span>
-          </div>
-        </button>
-      </mat-menu>
     </mat-list>
   </div>
 </div>

packages/angular-sdk-components/src/lib/_components/infra/navbar/navbar.component.ts

@@ -6,7 +6,6 @@ import { logout } from '@pega/auth/lib/sdk-auth-manager';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { ProgressSpinnerService } from '../../../_messages/progress-spinner.service';
 import { Utils } from '../../../_helpers/utils';
-import { ThemeService } from '../../../_services/theme.service';
 
 interface NavBarProps {
   // If any, enter additional props that only exist on this component
@@ -56,8 +55,7 @@ export class NavbarComponent implements OnInit, OnDestroy {
     private chRef: ChangeDetectorRef,
     private psService: ProgressSpinnerService,
     private ngZone: NgZone,
-    private utils: Utils,
-    public themeService: ThemeService
+    private utils: Utils
   ) {}
 
   ngOnInit(): void {

packages/angular-sdk-components/src/lib/_components/infra/root-container/root-container.component.ts

@@ -5,7 +5,6 @@ import { interval, Subscription } from 'rxjs';
 import { AngularPConnectData, AngularPConnectService } from '../../../_bridge/angular-pconnect';
 import { ServerConfigService } from '../../../_services/server-config.service';
 import { ProgressSpinnerService } from '../../../_messages/progress-spinner.service';
-import { ThemeService } from '../../../_services/theme.service';
 import { ReferenceComponent } from '../reference/reference.component';
 import { PreviewViewContainerComponent } from '../Containers/preview-view-container/preview-view-container.component';
 import { ModalViewContainerComponent } from '../Containers/modal-view-container/modal-view-container.component';
@@ -59,13 +58,10 @@ export class RootContainerComponent implements OnInit, OnDestroy {
   constructor(
     private angularPConnect: AngularPConnectService,
     private psService: ProgressSpinnerService,
-    private ngZone: NgZone,
-    private themeService: ThemeService
+    private ngZone: NgZone
   ) {}
 
   ngOnInit(): void {
-    const themeClass = this.themeService.getDefaultTheme();
-    this.themeService.setTheme(themeClass);
     const { containers } = PCore.getStore().getState();
     const items = Object.keys(containers).filter(item => item.includes('root'));
 

packages/angular-sdk-components/src/lib/_services/theme.service.spec.ts

@@ -15,7 +15,6 @@ import { MainScreenComponent } from './main-screen/main-screen.component';
 
 import { getSdkComponentMap } from 'packages/angular-sdk-components/src/lib/_bridge/helpers/sdk_component_map';
 import localSdkComponentMap from 'packages/angular-sdk-components/src/sdk-local-component-map';
-import { ThemeService } from 'packages/angular-sdk-components/src/lib/_services/theme.service';
 import { initializeAuthentication } from './utils';
 
 declare global {
@@ -44,8 +43,7 @@ export class EmbeddedComponent implements OnInit, OnDestroy {
 
   constructor(
     private psservice: ProgressSpinnerService,
-    private ngZone: NgZone,
-    private themeService: ThemeService
+    private ngZone: NgZone
   ) {}
 
   ngOnInit() {
@@ -66,8 +64,8 @@ export class EmbeddedComponent implements OnInit, OnDestroy {
     document.addEventListener('SdkConstellationReady', () => this.handleSdkConstellationReady());
 
     const { authConfig, theme } = await getSdkConfig();
-    this.themeService.setTheme(theme);
-
+    document.body.classList.remove(...['light', 'dark']);
+    document.body.classList.add(theme);
     initializeAuthentication(authConfig);
 
     // Login if needed, without doing an initial main window redirect

packages/angular-sdk-components/src/lib/_services/theme.service.ts

@@ -47,10 +47,11 @@ export class FullPortalComponent implements OnInit, OnDestroy {
     private scservice: ServerConfigService
   ) {}
 
-  ngOnInit() {
-    this.scservice.readSdkConfig().then(() => {
-      this.initialize();
-    });
+  async ngOnInit() {
+    const { theme } = await this.scservice.readSdkConfig();
+    document.body.classList.remove(...['light', 'dark']);
+    document.body.classList.add(theme);
+    this.initialize();
   }
 
   ngOnDestroy() {

packages/angular-sdk-components/src/lib/_types/Theme.interface.ts

@@ -257,16 +257,6 @@
   --mat-sys-pressed-state-layer-opacity: 0.12;
 }
 
-.azure {
-  @include mat.theme(
-    (
-      color: mat.$azure-palette,
-      typography: Roboto,
-      density: 0
-    )
-  );
-}
-
 .light {
   @include mat.theme(
     (
@@ -277,26 +267,6 @@
   );
 }
 
-.green {
-  @include mat.theme(
-    (
-      color: mat.$green-palette,
-      typography: Roboto,
-      density: 0
-    )
-  );
-}
-
-.red {
-  @include mat.theme(
-    (
-      color: mat.$red-palette,
-      typography: Roboto,
-      density: 0
-    )
-  );
-}
-
 //Mixins
 @mixin generate-theme-vars() {
   --app-alert-error-color: rgb(82, 21, 8);

projects/angular-test-app/src/app/_samples/embedded/embedded.component.ts

@@ -2,7 +2,7 @@
   "comment_sdk_config": "This is the configuration file for the Angular-SDK",
   "sdk_optional_configs_doc_comment": "See the document(link below) for more details on all the available config settings",
   "sdk_optional_configs_doc": "https://docs.pega.com/bundle/constellation-sdk/page/constellation-sdks/sdks/configuring-sdk-config-json.html",
-  "theme": "light",
+  "theme": "dark",
   "authConfig": {
     "authService": "pega",