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 · 72596e3 · 72596e3
1 parent fcb9cdd
commit 72596e3
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 19 deletions.
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="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+          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}