From babc6ce21dd4810a1a0ffccb8ab5b587e2e8c2d5 Mon Sep 17 00:00:00 2001
From: Viktor Varland <varl@vlv.io>
Date: Tue, 12 Nov 2019 17:12:04 +0100
Subject: [PATCH 1/3] fix(headerbar): fallback when api responds with blob

---
 src/HeaderBar/LogoImage.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/HeaderBar/LogoImage.js b/src/HeaderBar/LogoImage.js
index 4566200..e8f277c 100644
--- a/src/HeaderBar/LogoImage.js
+++ b/src/HeaderBar/LogoImage.js
@@ -18,18 +18,27 @@ const query = {
     },
 }
 
+const pathExists = data =>
+    data &&
+    data.customLogo &&
+    data.customLogo.images &&
+    data.customLogo.images.png
+
 export const LogoImage = () => {
     const { loading, error, data } = useDataQuery(query)
 
     if (loading) return null
 
+    let Logo
+    if (!error && pathExists(data)) {
+        Logo = <img alt="Headerbar Logo" src={data.customLogo.images.png} />
+    } else {
+        Logo = <LogoIconWhite className={defaultLogo.className} />
+    }
+
     return (
         <div>
-            {error ? (
-                <LogoIconWhite className={defaultLogo.className} />
-            ) : (
-                <img alt="Headerbar Logo" src={data.customLogo.images.png} />
-            )}
+            {Logo}
 
             {defaultLogo.styles}
             <style jsx>{`
@@ -42,7 +51,7 @@ export const LogoImage = () => {
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    overflow-x: hidden;
+                    overflow: hidden;
                 }
 
                 img {

From d37c9c413eadd2440968d22b200abae4a0469ab0 Mon Sep 17 00:00:00 2001
From: Viktor Varland <varl@vlv.io>
Date: Tue, 12 Nov 2019 17:38:37 +0100
Subject: [PATCH 2/3] fix(headerbar): move style outside

---
 src/HeaderBar/LogoImage.js | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/HeaderBar/LogoImage.js b/src/HeaderBar/LogoImage.js
index e8f277c..d0cce6d 100644
--- a/src/HeaderBar/LogoImage.js
+++ b/src/HeaderBar/LogoImage.js
@@ -10,6 +10,12 @@ const defaultLogo = css.resolve`
         height: 25px;
         width: 27px;
     }
+
+    img {
+        max-height: 100%;
+        min-height: auto;
+        width: auto;
+    }
 `
 
 const query = {
@@ -31,7 +37,13 @@ export const LogoImage = () => {
 
     let Logo
     if (!error && pathExists(data)) {
-        Logo = <img alt="Headerbar Logo" src={data.customLogo.images.png} />
+        Logo = (
+            <img
+                alt="Headerbar Logo"
+                src={data.customLogo.images.png}
+                className={defaultLogo.className}
+            />
+        )
     } else {
         Logo = <LogoIconWhite className={defaultLogo.className} />
     }
@@ -53,12 +65,6 @@ export const LogoImage = () => {
                     align-items: center;
                     overflow: hidden;
                 }
-
-                img {
-                    max-height: 100%;
-                    min-height: auto;
-                    width: auto;
-                }
             `}</style>
         </div>
     )

From c271d1492db00006f4e39d76b34755786a2d76be Mon Sep 17 00:00:00 2001
From: Viktor Varland <varl@vlv.io>
Date: Tue, 12 Nov 2019 17:41:32 +0100
Subject: [PATCH 3/3] refactor(headerbar): rename to logo styles

---
 src/HeaderBar/LogoImage.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/HeaderBar/LogoImage.js b/src/HeaderBar/LogoImage.js
index d0cce6d..a31f4dd 100644
--- a/src/HeaderBar/LogoImage.js
+++ b/src/HeaderBar/LogoImage.js
@@ -5,7 +5,7 @@ import css from 'styled-jsx/css'
 import { useDataQuery } from '@dhis2/app-runtime'
 import { LogoIconWhite } from '@dhis2/ui-core'
 
-const defaultLogo = css.resolve`
+const logoStyles = css.resolve`
     svg {
         height: 25px;
         width: 27px;
@@ -41,18 +41,18 @@ export const LogoImage = () => {
             <img
                 alt="Headerbar Logo"
                 src={data.customLogo.images.png}
-                className={defaultLogo.className}
+                className={logoStyles.className}
             />
         )
     } else {
-        Logo = <LogoIconWhite className={defaultLogo.className} />
+        Logo = <LogoIconWhite className={logoStyles.className} />
     }
 
     return (
         <div>
             {Logo}
 
-            {defaultLogo.styles}
+            {logoStyles.styles}
             <style jsx>{`
                 div {
                     padding: 4px;