change style for brands

src/app.js

@@ -41,6 +41,10 @@ import User from './user/user';
 import APIBrowser from './common/api-browser';
 
 import './styles/app.css';
+//import './branding/slew/slew.css'
+import Branding from './branding/branding';
+
+
 
 class App extends React.Component {
 
@@ -54,6 +58,40 @@ class App extends React.Component {
     this.state = {
       showSidebarMenu: false,
     }
+
+    this.setBrandingStyle();
+    //const head = document.querySelector('head');
+    /*
+    document.body.style.backgroundColor = "black";
+    
+    const rootEl = document.querySelector(':root');
+    rootEl.style.setProperty('--highlights', 'yellow');
+    rootEl.style.setProperty('--bg', 'blue');
+    **/
+  }
+
+  setBrandingStyle() {
+    const rootEl = document.querySelector(':root');
+    let background = Branding.instance.getBackgroundColor();
+
+    if (background) {
+      document.body.style.backgroundColor = background;
+    }
+
+    let highlight = Branding.instance.getHighlightColor();
+    if (highlight) {
+      rootEl.style.setProperty('--highlights', highlight);
+    }
+
+    let primary = Branding.instance.getPrimaryTextColor();
+    if (primary) {
+      rootEl.style.setProperty('--primarytext', primary);
+    }
+
+    let secondary = Branding.instance.getSecondaryTextColor();
+    if (secondary) {
+      rootEl.style.setProperty('--secondary', secondary);
+    }
   }
 
   componentDidMount() {

src/branding/branding.js

@@ -19,8 +19,8 @@ import brands from './brands'
 import config from '../config'
 import _ from 'lodash';
 
-import {villasweb_home} from './villasweb/villasweb-home';
-import {slew_home} from './slew/slew_home';
+import { villasweb_home } from './villasweb/villasweb-home';
+import { slew_home } from './slew/slew_home';
 
 
 class Branding {
@@ -38,9 +38,9 @@ class Branding {
 
     static instance = Branding.instance || new Branding(config.branding);
 
-    getHome(username = '' , userid = '', role = '') {
+    getHome(username = '', userid = '', role = '') {
         var homepage = '';
-        switch(this.name) {
+        switch (this.name) {
             case 'villasweb':
                 homepage = villasweb_home(this.brand.title, username, userid, role);
                 break;
@@ -53,6 +53,34 @@ class Branding {
         }
         return homepage;
     }
+
+    getBackgroundColor() {
+        if (this.brand.style && this.brand.style.bgcolor) {
+            return this.brand.style.bgcolor;
+        }
+        return null;
+    }
+
+    getHighlightColor() {
+        if (this.brand.style && this.brand.style.highlights) {
+            return this.brand.style.highlights;
+        }
+        return null;
+    }
+
+    getPrimaryTextColor() {
+        if (this.brand.style && this.brand.style.primarytext) {
+            return this.brand.style.primarytext;
+        }
+        return null;
+    }
+
+    getSecondaryTextColor() {
+        if (this.brand.style && this.brand.style.secondarytext) {
+            return this.brand.style.secondarytext;
+        }
+        return null;
+    }
 };
 
 

src/branding/brands.js

@@ -28,6 +28,12 @@ const brands = {
          account: true,
          api: true,
       },
+      style: {
+         bgcolor: '#6EA2B0',
+         highlights: '#527984',
+         primarytext: '#4d4d4d',
+         secondarytext: '#818181',
+      }
    },
    slew: {
       title: 'SLEW',
@@ -44,6 +50,12 @@ const brands = {
       links: {
          "DPsim Simulator": "https://dpsim.fein-aachen.org",
          "VILLASframework": "https://villas.fein-aachen.org/doc"
+      },
+      style: {
+         bgcolor: '#900603',
+         highlights: '#610C04',
+         primarytext: '#420C09',
+         secondarytext: '#710C04',
       }
    },
    test: {

src/styles/app.css

@@ -18,13 +18,21 @@
 /**
  * Application container
  */
+
+:root {
+  --bg: #6EA2B0;
+  --highlights: #527984;
+  --primarytext: #4d4d4d;
+  --secondarytext: #818181;
+}
+
 body {
-  background-color: #6EA2B0 !important;
+  background-color: var(--bg);
 }
 
 .app {
   height: 100vh;
-  color: #4d4d4d;
+  color: var(--primarytext);
 
   font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   hyphens: auto;
@@ -39,7 +47,7 @@ body {
   height: 60px;
   padding: 10px 0 0 0;
 
-  color: #527984;
+  color: var(--highlights);
   background-color: #fff;
 }
 
@@ -56,8 +64,9 @@ body {
   }
 }
 
+/* can be deleted when header-menu gets removed */
 .app-header .menu-icon {
-  color: #818181;
+  color: var(--secondarytext);
   right: 5px;
 
   padding: 6px 0 0 0;
@@ -77,7 +86,7 @@ body {
 }
 
 .app-footer a {
-  color: #4d4d4d;
+  color: var(--primarytext);
 
   text-decoration: underline;
 }
@@ -134,7 +143,7 @@ body {
 }
 
 .menu-sidebar a {
-  color: #4d4d4d;
+  color: var(--primarytext);
   text-decoration:none;
 }
 
@@ -180,7 +189,7 @@ body {
   padding: 8px 8px 8px 32px;
   text-decoration: none;
   font-size: 25px;
-  color: #818181;
+  color: var(--secondarytext);
   display: block;
   transition: 0.3s;
 }
@@ -198,7 +207,7 @@ body {
   margin-left: 50px;
   text-decoration: none;
   display: block;
-  color: #818181;
+  color: var(--secondarytext);
   transition: 0.3s;
 }
 
@@ -226,27 +235,6 @@ body {
   background-color: white;
 }
 
-/**
- * Login select
- */
- .login-select {
-  position: sticky;
-  width: 300px;
-  height: 150px;
-  top: 50%;
-  left: 50%;
-  margin-top: 50px;
-  margin-bottom: 100px;
-  transform: translate(-50%);
-
-
-  padding: 20px 20px;
-
-  background-color: #a8c7cf;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
-              0 9px 18px 0 rgba(0, 0, 0, 0.1);
-}
-
 /**
  * Login form
  */
@@ -272,7 +260,7 @@ hr {
  * Tables
  */
 .table th {
-  background-color: #527984;
+  background-color: var(--highlights);
   color: #fff;
 }
 
@@ -424,23 +412,23 @@ hr {
 }
 
 .section-buttons-group-left .btn{
-  background-color: #527984; 
-  border-color: #527984;
+  background-color: var(--highlights);
+  border-color: var(--highlights);
 }
 
 .section-buttons-group-left .btn:hover{
-  background-color: #31484f; 
+  background-color: #31484f;
   border-color: #31484f;
 }
 
 .drag-and-drop .btn{
-  color: #527984;
-  border-color: #527984;
+  color: var(--highlights);
+  border-color: var(--highlights);
 }
 
 .drag-and-drop .btn:hover{
-  color: #527984;
-  border-color: #527984;
+  color: var(--highlights);
+  border-color: var(--highlights);
 }
 
 
@@ -449,8 +437,8 @@ hr {
 }
 
 .solid-button .btn{
-  background-color: #527984; 
-  border-color: #527984;
+  background-color: var(--highlights);
+  border-color: var(--highlights);
 }
 
 .solid-button .btn:hover{
@@ -459,8 +447,8 @@ hr {
 }
 
 .solid-button .btn:disabled{
-  background-color: #527984; 
-  border-color: #527984;
+  background-color: var(--highlights);
+  border-color: var(--highlights);
 }
 
 .icon-button .btn{
@@ -474,7 +462,7 @@ hr {
 }
 
 .icon-color {
-  color: #527984;
+  color: var(--highlights);
 }
 
 .form-horizontal .form-group {