fix: initialize colors from instance config

* all color variables are now initialized by the script
* removed creation of css variables during runtime
* removed unused classes in styles.scss for all apps
* formated styles.scss for all apps

Author: bodnara

apps/admin-gui/src/_styles.scss

@@ -6,11 +6,10 @@
 <ng-template [ngIf]="!isLoginScreenShow && !isServiceAccess && isLoggedIn() && !isMfaWindowOpen">
   <perun-web-apps-header
     (sidenavToggle)="sidenav.toggle()"
-    [ngStyle]="{'top': getNavMenuTop(), 'background': navBackgroundColor}"
+    [ngStyle]="{'top': getNavMenuTop()}"
     [otherApp]="otherApp"
     [showNotifications]="true"
-    id="nav-menu"
-    class="mat-elevation-z3"></perun-web-apps-header>
+    class="nav-menu mat-elevation-z3"></perun-web-apps-header>
   <mat-sidenav-container
     autosize="true"
     [ngStyle]="{'margin-top': getSideNavMarginTop(),'min-height': getSideNavMinHeight()}">
@@ -19,16 +18,14 @@
       [fixedInViewport]="true"
       [mode]="sidebarMode"
       [fixedTopGap]="getTopGap()"
-      [ngStyle]="{'border-color': sideBarBorderColor, 'background': sideMenubackgroundColor}"
-      [opened]="!isMobile()">
+      [opened]="!isMobile()"
+      class="side-nav">
       <ng-scrollbar>
         <app-side-menu [sideNav]="sidenav"></app-side-menu>
       </ng-scrollbar>
     </mat-sidenav>
 
-    <mat-sidenav-content
-      [ngStyle]="{'background-color': contentBackgroundColor}"
-      id="content-inner">
+    <mat-sidenav-content class="side-nav-content">
       <div [ngStyle]="{'min-height' : contentInnerMinHeight}" id="content-wrap">
         <router-outlet></router-outlet>
       </div>

apps/admin-gui/src/app/app.component.html

@@ -41,11 +41,6 @@ export class AppComponent implements OnInit, AfterViewInit {
   isServiceAccess: boolean;
 
   principal: PerunPrincipal;
-  theme = this.store.getProperty('theme');
-  navBackgroundColor = this.theme.nav_bg_color;
-  sideBarBorderColor = this.theme.sidemenu_border_color;
-  contentBackgroundColor = this.theme.content_bg_color;
-  sideMenubackgroundColor = this.theme.sidemenu_bg_color;
 
   displayWarning: boolean = this.store.getProperty('display_warning');
   warningMessage: string = this.store.getProperty('warning_message');

apps/admin-gui/src/app/app.component.ts

@@ -4,7 +4,7 @@ import {
   InitAuthService,
   MfaHandlerService,
 } from '@perun-web-apps/perun/services';
-import { AppConfigService, ColorConfig, EntityColorConfig } from '@perun-web-apps/config';
+import { AppConfigService } from '@perun-web-apps/config';
 import { AuthzResolverService } from '@perun-web-apps/perun/openapi';
 import { MatDialog } from '@angular/material/dialog';
 import { Location } from '@angular/common';
@@ -20,84 +20,6 @@ import { firstValueFrom } from 'rxjs';
   providedIn: 'root',
 })
 export class AdminGuiConfigService {
-  entityColorConfigs: EntityColorConfig[] = [
-    {
-      entity: 'vo',
-      configValue: 'vo_color',
-      cssVariable: '--vo-color',
-    },
-    {
-      entity: 'group',
-      configValue: 'group_color',
-      cssVariable: '--group-color',
-    },
-    {
-      entity: 'user',
-      configValue: 'user_color',
-      cssVariable: '--user-color',
-    },
-    {
-      entity: 'member',
-      configValue: 'member_color',
-      cssVariable: '--member-color',
-    },
-    {
-      entity: 'facility',
-      configValue: 'facility_color',
-      cssVariable: '--facility-color',
-    },
-    {
-      entity: 'resource',
-      configValue: 'resource_color',
-      cssVariable: '--resource-color',
-    },
-    {
-      entity: 'admin',
-      configValue: 'admin_color',
-      cssVariable: '--admin-color',
-    },
-    {
-      entity: 'service',
-      configValue: 'service_color',
-      cssVariable: '--service-color',
-    },
-  ];
-
-  colorConfigs: ColorConfig[] = [
-    {
-      configValue: 'sidemenu_hover_color',
-      cssVariable: '--side-root-item-hover',
-    },
-    {
-      configValue: 'sidemenu_active_color',
-      cssVariable: '--side-root-item-active',
-    },
-    {
-      configValue: 'sidemenu_submenu_active_color',
-      cssVariable: '--side-link-active',
-    },
-    {
-      configValue: 'sidemenu_submenu_hover_color',
-      cssVariable: '--side-link-hover',
-    },
-    {
-      configValue: 'sidemenu_hover_text_color',
-      cssVariable: '--side-root-item-text-hover',
-    },
-    {
-      configValue: 'sidemenu_active_text_color',
-      cssVariable: '--side-root-item-text-active',
-    },
-    {
-      configValue: 'sidemenu_submenu_active_text_color',
-      cssVariable: '--side-link-text-active',
-    },
-    {
-      configValue: 'sidemenu_submenu_hover_text_color',
-      cssVariable: '--side-link-text-hover',
-    },
-  ];
-
   constructor(
     private initAuthService: InitAuthService,
     private appConfigService: AppConfigService,
@@ -113,9 +35,6 @@ export class AdminGuiConfigService {
       .loadAppDefaultConfig()
       .then(() => this.appConfigService.loadAppInstanceConfig())
       .then(() => this.appConfigService.setApiUrl())
-      .then(() =>
-        this.appConfigService.initializeColors(this.entityColorConfigs, this.colorConfigs)
-      )
       .then(() => this.appConfigService.setInstanceFavicon())
       .then(() => this.initAuthService.verifyAuth())
       .catch((err) => {

apps/admin-gui/src/app/core/services/common/admin-gui-config.service.ts

@@ -1,40 +0,0 @@
-.side-menu-item {
-  a {
-    padding: 0.5rem 0.5rem 0.5rem 1rem;
-    cursor: pointer;
-    text-decoration: none;
-
-    &:hover {
-      background: var(--side-root-item-hover) !important;
-      color: var(--side-root-item-text-hover) !important;
-    }
-  }
-}
-
-.side-menu-item-label {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  word-break: break-word;
-  text-decoration: none;
-}
-
-.side-menu-link {
-  a {
-    padding: 0.25rem 0.25rem 0.25rem 2rem;
-    text-decoration: none;
-    color: #ffffff;
-    font-size: 1rem;
-    display: block;
-
-    &:hover {
-      background: var(--side-link-hover) !important;
-      color: var(--side-link-text-hover) !important;
-    }
-  }
-}
-
-.header-activated {
-  background: var(--side-root-item-active) !important;
-  color: var(--side-root-item-text-active) !important;
-}

apps/admin-gui/src/app/shared/side-menu/side-menu-item/side-menu-item.component.scss

@@ -123,7 +123,7 @@
   "profile_label_en": "Profile",
   "logo": "<svg\n   xmlns:dc=\"http://purl.org/dc/elements/1.1/\"\n   xmlns:cc=\"http://creativecommons.org/ns#\"\n   xmlns:rdf=\"http://www.w3.org/1999/02/22-rdf-syntax-ns#\"\n   xmlns:svg=\"http://www.w3.org/2000/svg\"\n   xmlns=\"http://www.w3.org/2000/svg\"\n   xmlns:sodipodi=\"http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd\"\n   xmlns:inkscape=\"http://www.inkscape.org/namespaces/inkscape\"\n   version=\"1.1\"\n   id=\"Vrstva_1\"\n   x=\"0px\"\n   y=\"0px\"\n   viewBox=\"0 0 127.33567 32\"\n   xml:space=\"preserve\"\n   sodipodi:docname=\"perun_logo-white.svg\"\n   width=\"127.33567\"\n   height=\"32\"\n   inkscape:version=\"0.92.4 (f8dce91, 2019-08-02)\"><metadata\n   id=\"metadata3987\"><rdf:RDF><cc:Work\n       rdf:about=\"\"><dc:format>image/svg+xml</dc:format><dc:type\n         rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs\n   id=\"defs3985\" /><sodipodi:namedview\n   pagecolor=\"#ffffff\"\n   bordercolor=\"#666666\"\n   borderopacity=\"1\"\n   objecttolerance=\"10\"\n   gridtolerance=\"10\"\n   guidetolerance=\"10\"\n   inkscape:pageopacity=\"0\"\n   inkscape:pageshadow=\"2\"\n   inkscape:window-width=\"1855\"\n   inkscape:window-height=\"1012\"\n   id=\"namedview3983\"\n   showgrid=\"false\"\n   fit-margin-top=\"0\"\n   fit-margin-left=\"0\"\n   fit-margin-right=\"0\"\n   fit-margin-bottom=\"0\"\n   inkscape:zoom=\"1.7355372\"\n   inkscape:cx=\"-38.079799\"\n   inkscape:cy=\"16\"\n   inkscape:window-x=\"65\"\n   inkscape:window-y=\"32\"\n   inkscape:window-maximized=\"1\"\n   inkscape:current-layer=\"Vrstva_1\" />\n<style\n   type=\"text/css\"\n   id=\"style3972\">\n\t.st0{fill:#FFFFFF;}\n</style>\n<path\n   class=\"st0\"\n   d=\"m 127.22491,24.415225 h -5.20415 V 10.851211 l -4.81661,0.05536 v 13.508651 h -5.14879 l 0.0554,-16.775087 h 5.14879 v 0.608997 c 1.21799,-0.16609 2.38062,-0.276817 3.59861,-0.387543 1.49481,-0.16609 2.65744,-0.276817 3.65398,-0.276817 1.88235,0 2.82353,0.66436 2.82353,2.048443 z m -19.26643,0 h -5.14879 v -0.608997 c -1.16263,0.16609 -2.38062,0.276817 -3.59862,0.442907 -1.43944,0.16609 -2.65744,0.221453 -3.59861,0.221453 -1.88236,0 -2.82353,-0.66436 -2.82353,-2.103806 l 0.0554,-14.782007 h 5.09343 v 13.619377 l 4.87197,-0.05536 V 7.640138 h 5.14879 z M 90.90657,14.67128 h -5.09342 v -3.820069 l -4.09689,0.05536 v 13.508651 h -5.14879 l 0.0554,-16.775087 h 5.14879 v 0.608997 c 1.0519,-0.16609 2.1038,-0.276817 3.15571,-0.442907 1.27335,-0.16609 2.32526,-0.221453 3.21107,-0.221453 1.88235,0 2.82353,0.66436 2.82353,2.048443 z M 67.54325,14.449827 v -3.986159 h -4.81661 v 3.986159 z m 4.92734,7.861592 c 0,1.384083 -0.99654,2.048443 -2.93426,2.048443 h -8.91349 c -1.93772,0 -2.8789,-0.66436 -2.8789,-2.048443 V 9.688581 c 0,-1.384083 0.99654,-2.048443 2.93426,-2.048443 h 8.9135 c 1.93771,0 2.87889,0.66436 2.87889,2.048443 v 6.145329 l -1.43945,1.051903 h -8.35986 v 4.705883 h 4.81661 v -2.768167 h 4.92733 z M 49.0519,14.00692 V 6.089965 l -4.816606,0.05536 v 9.079584 h 3.211073 c 1.051903,0 1.605533,-0.387543 1.605533,-1.217993 z m 5.20416,0.99654 c 0,1.384083 -0.66436,2.32526 -1.99308,2.878893 -0.94118,0.387543 -2.43599,0.608996 -4.373707,0.608996 -0.442906,0 -1.107266,0 -1.882353,-0.05536 -0.830449,0 -1.384083,-0.05536 -1.771626,-0.05536 v 6.034602 h -5.148789 l 0.05536,-21.536332 h 5.148789 v 0.608996 c 1.217993,-0.110726 2.380623,-0.276816 3.598616,-0.387543 1.49481,-0.16609 2.71281,-0.276817 3.59862,-0.276817 1.88235,0 2.82353,0.66436 2.82353,2.048443 z\"\n   id=\"path3974\"\n   inkscape:connector-curvature=\"0\"\n   style=\"fill:#ffffff;stroke-width:0.55363321\" />\n<g\n   id=\"g3980\"\n   transform=\"scale(0.55363322)\">\n\t<polygon\n   class=\"st0\"\n   points=\"31.1,36.7 41.6,34.8 22.5,54.3 29.9,57.8 53.1,46.4 58.4,20.7 42.8,1.3 32.8,17.7 43.8,15.9 \"\n   id=\"polygon3976\"\n   style=\"fill:#ffffff\" />\n\t<polygon\n   class=\"st0\"\n   points=\"18.9,20.1 26.6,0 15.8,0 0,20.6 6.2,46.4 19.4,52.7 25.3,37.6 17.7,38.9 26.2,18.9 \"\n   id=\"polygon3978\"\n   style=\"fill:#ffffff\" />\n</g>\n</svg>",
   "theme": {
-    "content_bg_color": "",
+    "content_bg_color": "#f2f2f2",
     "back_button_color": "#000000",
     "nav_bg_color": "#102027",
     "nav_text_color": "#ffffff",
@@ -140,6 +140,7 @@
     "sidemenu_active_color": "#465258",
     "sidemenu_active_text_color": "#ffffff",
     "sidemenu_text_color": "#ffffff",
+    "sidemenu_item_icon_color": "#ffffff",
     "sidemenu_submenu_bg_color": "#1b2428",
     "sidemenu_submenu_hover_color": "#566268",
     "sidemenu_submenu_hover_text_color": "#ffffff",