fix(console): dont apply colors from branding settings (#6853)

fix: dont apply colors in console, clean up theme service
(cherry picked from commit c8dc14ca9d33c2d9502cddc119a3baabad1cb9c1)

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -20,15 +20,7 @@ import { AdminService } from 'src/app/services/admin.service';
 import { AssetEndpoint, AssetService, AssetType } from 'src/app/services/asset.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
 import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
-import {
+import { ThemeService } from 'src/app/services/theme.service';
-  BACKGROUND,
-  DARK_BACKGROUND,
-  DARK_PRIMARY,
-  DARK_WARN,
-  PRIMARY,
-  ThemeService,
-  WARN,
-} from 'src/app/services/theme.service';
 import { ToastService } from 'src/app/services/toast.service';
 
 import * as opentype from 'opentype.js';
@@ -658,7 +650,6 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               this.getData().then((data) => {
                 if (data.policy) {
                   this.data = data.policy;
-                  this.applyToConsole(data.policy);
                 }
               });
               this.getPreviewData().then((data) => {
@@ -680,7 +671,6 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
               this.getData().then((data) => {
                 if (data.policy) {
                   this.data = data.policy;
-                  this.applyToConsole(data.policy);
                 }
               });
             }, 1000);
@@ -691,26 +681,6 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
     }
   }
 
-  private applyToConsole(labelpolicy: LabelPolicy.AsObject): void {
-    const darkPrimary = labelpolicy?.primaryColorDark || DARK_PRIMARY;
-    const lightPrimary = labelpolicy?.primaryColor || PRIMARY;
-
-    const darkWarn = labelpolicy?.warnColorDark || DARK_WARN;
-    const lightWarn = labelpolicy?.warnColor || WARN;
-
-    const darkBackground = labelpolicy?.backgroundColorDark || DARK_BACKGROUND;
-    const lightBackground = labelpolicy?.backgroundColor || BACKGROUND;
-
-    this.themeService.savePrimaryColor(darkPrimary, true);
-    this.themeService.savePrimaryColor(lightPrimary, false);
-
-    this.themeService.saveWarnColor(darkWarn, true);
-    this.themeService.saveWarnColor(lightWarn, false);
-
-    this.themeService.saveBackgroundColor(darkBackground, true);
-    this.themeService.saveBackgroundColor(lightBackground, false);
-  }
-
   public resetPolicy(): Promise<any> {
     return (this.service as ManagementService)
       .resetLabelPolicyToDefault()

console/src/app/services/theme.service.ts

@@ -10,26 +10,11 @@ export interface Color {
   contrastColor: string;
 }
 
-export const DARK_PRIMARY = '#2073c4';
-export const PRIMARY = '#5469d4';
-
-export const DARK_WARN = '#ff3b5b';
-export const WARN = '#cd3d56';
-
-export const DARK_BACKGROUND = '#111827';
-export const BACKGROUND = '#fafafa';
-
-export const DARK_TEXT = '#ffffff';
-export const TEXT = '#000000';
-
 @Injectable()
 export class ThemeService {
   private _darkTheme: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
   public isDarkTheme: Observable<boolean> = this._darkTheme.asObservable();
   public loading: boolean = false;
-  private primaryColorPalette: Color[] = [];
-  private warnColorPalette: Color[] = [];
-  private backgroundColorPalette: Color[] = [];
 
   constructor() {
     const theme = localStorage.getItem('theme');
@@ -45,82 +30,4 @@ export class ThemeService {
   setDarkTheme(isDarkTheme: boolean): void {
     this._darkTheme.next(isDarkTheme);
   }
-
-  public updateTheme(colors: Color[], type: string, theme: string): void {
-    colors.forEach((color) => {
-      document.documentElement.style.setProperty(`--theme-${theme}-${type}-${color.name}`, color.hex);
-      document.documentElement.style.setProperty(`--theme-${theme}-${type}-contrast-${color.name}`, color.contrastColor);
-    });
-  }
-
-  public savePrimaryColor(color: string, isDark: boolean): void {
-    this.primaryColorPalette = this.computeColors(color);
-    this.updateTheme(this.primaryColorPalette, 'primary', isDark ? 'dark' : 'light');
-  }
-
-  public saveWarnColor(color: string, isDark: boolean): void {
-    this.warnColorPalette = this.computeColors(color);
-    this.updateTheme(this.warnColorPalette, 'warn', isDark ? 'dark' : 'light');
-  }
-
-  public saveBackgroundColor(color: string, isDark: boolean): void {
-    this.backgroundColorPalette = this.computeColors(color);
-    this.updateTheme(this.backgroundColorPalette, 'background', isDark ? 'dark' : 'light');
-  }
-
-  public saveTextColor(colorHex: string, isDark: boolean): void {
-    const theme = isDark ? 'dark' : 'light';
-    document.documentElement.style.setProperty(`--theme-${theme}-${'text'}`, colorHex);
-    const secondaryTextHex = tinycolor(colorHex).setAlpha(0.78).toHex8String();
-    document.documentElement.style.setProperty(`--theme-${theme}-${'secondary-text'}`, secondaryTextHex);
-  }
-
-  private computeColors(hex: string): Color[] {
-    return [
-      this.getColorObject(tinycolor(hex).lighten(52), '50'),
-      this.getColorObject(tinycolor(hex).lighten(37), '100'),
-      this.getColorObject(tinycolor(hex).lighten(26), '200'),
-      this.getColorObject(tinycolor(hex).lighten(12), '300'),
-      this.getColorObject(tinycolor(hex).lighten(6), '400'),
-      this.getColorObject(tinycolor(hex), '500'),
-      this.getColorObject(tinycolor(hex).darken(6), '600'),
-      this.getColorObject(tinycolor(hex).darken(12), '700'),
-      this.getColorObject(tinycolor(hex).darken(18), '800'),
-      this.getColorObject(tinycolor(hex).darken(24), '900'),
-      this.getColorObject(tinycolor(hex).lighten(50).saturate(30), 'A100'),
-      this.getColorObject(tinycolor(hex).lighten(30).saturate(30), 'A200'),
-      this.getColorObject(tinycolor(hex).lighten(10).saturate(15), 'A400'),
-      this.getColorObject(tinycolor(hex).lighten(5).saturate(5), 'A700'),
-    ];
-  }
-
-  private getColorObject(value: any, name: string): Color {
-    const c = tinycolor(value);
-    return {
-      name: name,
-      hex: c.toHexString(),
-      rgb: c.toRgbString(),
-      contrastColor: this.getContrast(c.toHexString()),
-    };
-  }
-
-  public isLight(hex: string): boolean {
-    const color = tinycolor(hex);
-    return color.isLight();
-  }
-
-  public isDark(hex: string): boolean {
-    const color = tinycolor(hex);
-    return color.isDark();
-  }
-
-  public getContrast(color: string): string {
-    const onBlack = tinycolor.readability('#000', color);
-    const onWhite = tinycolor.readability('#fff', color);
-    if (onBlack > onWhite) {
-      return 'hsla(0, 0%, 0%, 0.87)';
-    } else {
-      return '#ffffff';
-    }
-  }
 }