From ae351b8886fdcfed05f1fc3d90a701c2195444ff Mon Sep 17 00:00:00 2001
From: Michael Clelland <michael.clelland@mender.io>
Date: Wed, 24 Aug 2022 11:10:04 +0200
Subject: [PATCH] fix: moved announcement section of header to its own row

Ticket: None
Changelog: None
Signed-off-by: Michael Clelland <michael.clelland@mender.io>
---
 src/js/__snapshots__/main.test.js.snap        |  1 -
 .../components/__snapshots__/app.test.js.snap |  1 -
 .../__snapshots__/announcement.test.js.snap   |  6 +++--
 src/js/components/header/announcement.js      |  4 +--
 src/js/components/header/header.js            | 26 ++++++++-----------
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/js/__snapshots__/main.test.js.snap b/src/js/__snapshots__/main.test.js.snap
index 9e0770c292..fae9b9a819 100644
--- a/src/js/__snapshots__/main.test.js.snap
+++ b/src/js/__snapshots__/main.test.js.snap
@@ -8,7 +8,6 @@ exports[`Main Component renders correctly 1`] = `
   width: 100%;
   border-bottom: 1px solid #d8ebe9;
   display: grid;
-  grid-template-rows: 56px;
 }
 
 .emotion-1 {
diff --git a/src/js/components/__snapshots__/app.test.js.snap b/src/js/components/__snapshots__/app.test.js.snap
index 1469820198..f9c9498af8 100644
--- a/src/js/components/__snapshots__/app.test.js.snap
+++ b/src/js/components/__snapshots__/app.test.js.snap
@@ -8,7 +8,6 @@ exports[`App Component renders correctly 1`] = `
   width: 100%;
   border-bottom: 1px solid #d8ebe9;
   display: grid;
-  grid-template-rows: 56px;
 }
 
 .emotion-1 {
diff --git a/src/js/components/header/__snapshots__/announcement.test.js.snap b/src/js/components/header/__snapshots__/announcement.test.js.snap
index 3760d8024d..effd69a644 100644
--- a/src/js/components/header/__snapshots__/announcement.test.js.snap
+++ b/src/js/components/header/__snapshots__/announcement.test.js.snap
@@ -44,7 +44,7 @@ exports[`Announcement Component renders correctly 1`] = `
 }
 
 <div
-  class="flexbox centered fadeInSlow margin-left-small margin-right-small "
+  class="flexbox centered fadeInSlow "
 >
   <svg
     aria-hidden="true"
@@ -58,7 +58,9 @@ exports[`Announcement Component renders correctly 1`] = `
       d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"
     />
   </svg>
-  <p />
+  <p
+    style="margin: 4px;"
+  />
   <svg
     aria-hidden="true"
     class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium emotion-1"
diff --git a/src/js/components/header/announcement.js b/src/js/components/header/announcement.js
index 6cc59e86be..12b26b446a 100644
--- a/src/js/components/header/announcement.js
+++ b/src/js/components/header/announcement.js
@@ -4,9 +4,9 @@ import Linkify from 'react-linkify';
 import { Announcement as AnnounceIcon, Close as CloseIcon } from '@mui/icons-material';
 
 const Announcement = ({ announcement, errorIconClassName, iconClassName, onHide, sectionClassName }) => (
-  <div className={`flexbox centered fadeInSlow margin-left-small margin-right-small ${sectionClassName}`}>
+  <div className={`flexbox centered fadeInSlow ${sectionClassName}`}>
     <AnnounceIcon className={errorIconClassName} fontSize="small" style={{ marginRight: 4, minWidth: 24 }} />
-    <p>
+    <p style={{ margin: 4 }}>
       <Linkify properties={{ target: '_blank' }}>{announcement}</Linkify>
     </p>
     <CloseIcon className={iconClassName} style={{ marginLeft: 4, cursor: 'pointer' }} onClick={onHide} />
diff --git a/src/js/components/header/header.js b/src/js/components/header/header.js
index 0a02b42a20..21d29e584a 100644
--- a/src/js/components/header/header.js
+++ b/src/js/components/header/header.js
@@ -53,8 +53,7 @@ const useStyles = makeStyles()(theme => ({
     paddingRight: theme.spacing(5),
     width: '100%',
     borderBottom: `1px solid ${theme.palette.grey[100]}`,
-    display: 'grid',
-    gridTemplateRows: theme.mixins.toolbar.minHeight
+    display: 'grid'
   },
   banner: { gridTemplateRows: `1fr ${theme.mixins.toolbar.minHeight}px` },
   buttonColor: { color: theme.palette.grey[600] },
@@ -62,10 +61,7 @@ const useStyles = makeStyles()(theme => ({
   exitIcon: { color: theme.palette.grey[600], fill: theme.palette.grey[600] },
   demoTrialAnnouncement: {
     fontSize: 14,
-    height: '100%',
-    maxHeight: theme.mixins.toolbar.minHeight,
-    minWidth: 164,
-    overflow: 'hidden'
+    height: 'auto'
   },
   demoAnnouncementIcon: {
     height: 16,
@@ -176,6 +172,15 @@ export const Header = ({
 
   return (
     <Toolbar id="fixedHeader" className={showOffer ? `${classes.header} ${classes.banner}` : classes.header}>
+      {!!announcement && (
+        <Announcement
+          announcement={announcement}
+          errorIconClassName={classes.redAnnouncementIcon}
+          iconClassName={classes.demoAnnouncementIcon}
+          sectionClassName={classes.demoTrialAnnouncement}
+          onHide={setHideAnnouncement}
+        />
+      )}
       {showOffer && <OfferHeader docsVersion={docsVersion} onHide={setHideOffer} />}
       <div className="flexbox space-between">
         <div className="flexbox center-aligned">
@@ -183,15 +188,6 @@ export const Header = ({
             <img id="logo" src={headerLogo} />
           </Link>
           {demo && <DemoNotification iconClassName={classes.demoAnnouncementIcon} sectionClassName={classes.demoTrialAnnouncement} docsVersion={docsVersion} />}
-          {!!announcement && (
-            <Announcement
-              announcement={announcement}
-              errorIconClassName={classes.redAnnouncementIcon}
-              iconClassName={classes.demoAnnouncementIcon}
-              sectionClassName={classes.demoTrialAnnouncement}
-              onHide={setHideAnnouncement}
-            />
-          )}
           {organization.trial && (
             <TrialNotification
               expiration={organization.trial_expiration}