refactor(headerbar instance infos): adjust styles according to sugges…

…tions in PR
dhis2 · Oct 7, 2021 · cc614c3 · cc614c3
1 parent 020309f
commit cc614c3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 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
@@ -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
@@ -176,7 +176,7 @@ export const ProfileMenu = ({
                 position: absolute;
                 top: 34px;
                 right: -6px;
-                width: 310px;
+                width: 320px;
                 border-top: 4px solid transparent;
             }
         `}</style>