fix: moved announcement section of header to its own row

Ticket: None Changelog: None Signed-off-by: Michael Clelland <[email protected]>
michaelntech · Aug 24, 2022 · ae351b8 · ae351b8
1 parent fcb9cdd
commit ae351b8
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -53,19 +53,15 @@ 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] },
   dropDown: { height: '100%', marginLeft: theme.spacing(0.5), textTransform: 'none' },
   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,22 +172,22 @@ 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">
           <Link to="/">
             <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}