From cc614c3249d78e71198f6bdcce295856d06e0d57 Mon Sep 17 00:00:00 2001
From: Jan-Gerke Salomon <jgs.salomon@gmail.com>
Date: Thu, 7 Oct 2021 11:43:43 +0200
Subject: [PATCH] refactor(headerbar instance infos): adjust styles according
 to suggestions in PR

---
 .../src/profile-menu/instance-and-app-info.js | 23 ++++++++++++++-----
 .../src/profile-menu/profile-menu.js          |  2 +-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/header-bar/src/profile-menu/instance-and-app-info.js b/components/header-bar/src/profile-menu/instance-and-app-info.js
index f07cc09e5e..66ad5bf06b 100644
--- a/components/header-bar/src/profile-menu/instance-and-app-info.js
+++ b/components/header-bar/src/profile-menu/instance-and-app-info.js
@@ -10,7 +10,7 @@ const InstanceInfo = ({ instanceData }) => {
     const { version, revision } = instanceData
 
     return (
-        <div className="instance-info">
+        <>
             <span className="version">
                 {`${i18n.t('DHIS2 version')} ${version}`}
             </span>
@@ -25,7 +25,7 @@ const InstanceInfo = ({ instanceData }) => {
                     white-space: nowrap;
                 }
             `}</style>
-        </div>
+        </>
     )
 }
 
@@ -41,6 +41,7 @@ const menuItemWithBorderTopStyles = resolve`
         border-top: 1px solid ${colors.grey400};
         color: ${colors.grey700};
         font-size: 14px;
+        line-height: 17px;
     }
 `
 
@@ -66,15 +67,25 @@ export const InstanceAndAppInfo = ({ appName, appVersion }) => {
     // other instance info when an error occurs
     return (
         <MenuItemWithBorderTop>
-            {loading && <div>{i18n.t('Loading instance information..')}</div>}
+            <div className="instance-infos">
+                {loading && <div>{i18n.t('Checking DHIS2 version...')}</div>}
 
-            {!loading && !error && (
-                <InstanceInfo instanceData={data.systemInfo} />
-            )}
+                {error && <div>{i18n.t('There was a problem getting DHIS2 version.')}</div>}
+
+                {!loading && !error && (
+                    <InstanceInfo instanceData={data.systemInfo} />
+                )}
+            </div>
 
             {appName && appVersion && (
                 <div className="app-info">{`${appName}, ${appVersion}`}</div>
             )}
+
+            <style jsx>{`
+                .instance-infos {
+                    margin-bottom: 6px;
+                }
+            `}</style>
         </MenuItemWithBorderTop>
     )
 }
diff --git a/components/header-bar/src/profile-menu/profile-menu.js b/components/header-bar/src/profile-menu/profile-menu.js
index d0174beb58..a06b6a72f4 100755
--- a/components/header-bar/src/profile-menu/profile-menu.js
+++ b/components/header-bar/src/profile-menu/profile-menu.js
@@ -176,7 +176,7 @@ export const ProfileMenu = ({
                 position: absolute;
                 top: 34px;
                 right: -6px;
-                width: 310px;
+                width: 320px;
                 border-top: 4px solid transparent;
             }
         `}</style>