feat(ui): webinar announcement image

influxdata · Nov 6, 2023 · adbe532 · adbe532
1 parent bed3fd4
commit adbe532
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/assets/images/iiot-webinar-banner.png b/assets/images/iiot-webinar-banner.png
diff --git a/src/me/components/AnnouncementBlock.scss b/src/me/components/AnnouncementBlock.scss
@@ -50,6 +50,23 @@
           color: $c-laser;
         }
       }
+
+      img {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+        display: block;
+        border-radius: $cf-radius;
+      }
+    }
+
+    .announcement-block--panel-header__image {
+      flex-direction: column;
+      align-items: flex-start;
+
+      h4 {
+        margin-top: $cf-space-m;
+      }
     }
 
     .announcement-block--panel-body {

diff --git a/src/me/components/AnnouncementBlock.tsx b/src/me/components/AnnouncementBlock.tsx
@@ -46,6 +46,8 @@ export const AnnouncementBlock: FC<OwnProps> = ({
     event(`announcementBlock.${title}.clicked`)
   }
 
+  const headerClasses = `announcement-block--panel-header${image && ' announcement-block--panel-header__image'}`
+
   return (
     <FlexBox direction={FlexDirection.Row} className="announcement-block">
       <FlexBox.Child basis={0} grow={0} className="announcement-block--type">
@@ -63,7 +65,7 @@ export const AnnouncementBlock: FC<OwnProps> = ({
         >
           <Panel.Header
             size={ComponentSize.ExtraSmall}
-            className="announcement-block--panel-header"
+            className={headerClasses}
           >
             {image}
             <Heading element={HeadingElement.H4}>

diff --git a/src/me/components/CurrentAnnouncement.tsx b/src/me/components/CurrentAnnouncement.tsx
@@ -5,9 +5,12 @@ import React, {FC} from 'react'
 import {InfluxColors} from '@influxdata/clockface'
 import {AnnouncementBlock} from 'src/me/components/AnnouncementBlock'
 
+// Assets
+import iiotWebinarBanner from 'assets/images/iiot-webinar-banner.png'
+
 export const CurrentAnnouncement: FC = () => {
   const currentDate = new Date()
-  const targetDate = new Date('2023-11-03T05:00:00-07:00')
+  const targetDate = new Date('2023-11-06T05:00:00-07:00')
 
   const outgoingAnnouncement = (
     <AnnouncementBlock
@@ -29,6 +32,9 @@ export const CurrentAnnouncement: FC = () => {
 
   const incomingAnnouncement = (
     <AnnouncementBlock
+      image={
+        <img src={iiotWebinarBanner} />
+      }
       body={
         <p>
           Discover through real-life use cases how companies use InfluxDB for
@@ -37,7 +43,7 @@ export const CurrentAnnouncement: FC = () => {
       }
       ctaLink="https://www.influxdata.com/resources/industrial-iot-or-live-demo/"
       ctaText="Save Your Spot"
-      iconColor={InfluxColors.Chartreuse}
+      icon={null}
       title="Live Demo"
     />
   )