From d82f24dc3f93e6c69847cdfebf405847384c30c8 Mon Sep 17 00:00:00 2001
From: irismarie <Ikoester@eonerc.rwth-aachen.de>
Date: Tue, 9 Mar 2021 16:23:56 +0100
Subject: [PATCH] icon & font

---
 public/index.html        |  2 +-
 src/app.js               | 34 ++++++++++++++++++++++++++--------
 src/branding/branding.js | 12 +++++++++++-
 src/branding/brands.js   |  2 ++
 src/common/home.js       |  5 ++---
 src/styles/app.css       |  3 ++-
 6 files changed, 44 insertions(+), 14 deletions(-)
diff --git a/public/index.html b/public/index.html
index 47e21e6..a223e54 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="shortcut icon" type=image/x-icon href="%PUBLIC_URL%/favicon.ico">
+    <link id="dynamic-favicon" rel="shortcut icon" type=image/x-icon href="%PUBLIC_URL%/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tag above.
       It will be replaced with the URL of the `public` folder during the build.
diff --git a/src/app.js b/src/app.js
index 4037f9d..90581f7 100644
--- a/src/app.js
+++ b/src/app.js
@@ -60,17 +60,30 @@ class App extends React.Component {
     }
 
     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');
-    **/
+  }
+
+  changeHead() {
+    if (Branding.instance.default) {
+      console.log("default branding");
+      return;
+    }
+    document.title = Branding.instance.brand.title + " " + Branding.instance.brand.subtitle;
+    var oldlink = document.getElementById('dynamic-favicon');
+
+    var link = document.createElement('link');
+    link.id = 'dynamic-favicon';
+    link.rel = 'shortcut icon'
+    link.href = Branding.instance.brand.icon;
+
+    if (oldlink) {
+      document.head.removeChild(oldlink);
+    }
+    document.head.appendChild(link);
   }
 
   setBrandingStyle() {
+    this.changeHead();
+
     const rootEl = document.querySelector(':root');
     let background = Branding.instance.getBackgroundColor();
 
@@ -92,6 +105,11 @@ class App extends React.Component {
     if (secondary) {
       rootEl.style.setProperty('--secondary', secondary);
     }
+
+    let font = Branding.instance.getFont();
+    if (font) {
+      rootEl.style.setProperty('--mainfont', font);
+    }
   }
 
   componentDidMount() {
diff --git a/src/branding/branding.js b/src/branding/branding.js
index fd9fad3..98f0a12 100644
--- a/src/branding/branding.js
+++ b/src/branding/branding.js
@@ -29,7 +29,10 @@ class Branding {
         if (!brand) {
             console.error("Branding '" + chosenbrand + "' not available, will use 'villasweb' branding");
             brand = _.get(brands, ['villasweb']);
-            chosenbrand = 'villasweb'
+            chosenbrand = 'villasweb';
+            this.default = true;
+        } else {
+            this.default = false;
         }
 
         this.brand = brand;
@@ -81,6 +84,13 @@ class Branding {
         }
         return null;
     }
+
+    getFont() {
+        if (this.brand.style && this.brand.style.font) {
+            return this.brand.style.secondarytext;
+        }
+        return null;
+    }
 };
 
 
diff --git a/src/branding/brands.js b/src/branding/brands.js
index 3518e80..671d068 100644
--- a/src/branding/brands.js
+++ b/src/branding/brands.js
@@ -39,6 +39,7 @@ const brands = {
       title: 'SLEW',
       subtitle: 'Second Life for Energiewende',
       logo: "slew-logo.png",
+      icon: "/slew_icon.png",
       pages: {
          home: true,
          scenarios: true,
@@ -56,6 +57,7 @@ const brands = {
          highlights: '#610C04',
          primarytext: '#420C09',
          secondarytext: '#710C04',
+         font: "16px Roboto, sans-serif",
       }
    },
    test: {
diff --git a/src/common/home.js b/src/common/home.js
index 6045b33..6d920fd 100644
--- a/src/common/home.js
+++ b/src/common/home.js
@@ -42,9 +42,8 @@ class Home extends React.Component {
     return (
       <div>
         {branding.getHome(currentUser.username, currentUser.id, currentUser.role)}
-        </div>
-        );
-        }
+      </div>);
+  }
 }
 
 export default Home;
diff --git a/src/styles/app.css b/src/styles/app.css
index f4d44d6..721b57f 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -24,6 +24,7 @@
   --highlights: #527984;
   --primarytext: #4d4d4d;
   --secondarytext: #818181;
+  --mainfont: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 body {
@@ -34,7 +35,7 @@ body {
   height: 100vh;
   color: var(--primarytext);
 
-  font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font: var(--mainfont);
   hyphens: auto;
 }
 
