feat(HelpBar): add content to free account support overlay (#4391)

* feat: add logos for overlay

* feat: fill in content for free support overlay

* chore: clean up

* feat: use shareable class for logos

Author: blegesse-w

assets/images/Forum.svg

@@ -0,0 +1,32 @@
+.help-logo {
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  height: 25px;
+  width: 25px;
+  margin-right: 5px;
+}
+.help-logo.forum {
+  background-image: url('../../../assets/images/Forum.svg');
+}
+.help-logo.slack {
+  background-image: url('../../../assets/images/slack-fill.svg');
+  filter: invert(59%) sepia(51%) saturate(7472%) hue-rotate(180deg)
+    brightness(107%) contrast(110%);
+}
+
+.help-logo.feedback {
+  background-image: url('../../../assets/images/feedback-fill.svg');
+  filter: invert(59%) sepia(51%) saturate(7472%) hue-rotate(180deg)
+    brightness(107%) contrast(110%);
+}
+
+.cf-list--contents {
+  padding: 0px;
+}
+
+.status-page-text {
+  font-weight: lighter;
+  margin-left: 25px;
+  margin-top: 0px;
+  margin-bottom: 25px;
+}

assets/images/feedback-fill.svg

@@ -1,13 +1,14 @@
 import React, {FC, useContext} from 'react'
 
 // Components
-import {Overlay} from '@influxdata/clockface'
+import {Icon, IconFont, List, Overlay} from '@influxdata/clockface'
+import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
+import {SafeBlankLink} from 'src/utils/SafeBlankLink'
 
 // Contexts
 import {OverlayContext} from 'src/overlays/components/OverlayController'
 
-// Components
-import CloudUpgradeButton from 'src/shared/components/CloudUpgradeButton'
+import './ContactSupport.scss'
 
 interface OwnProps {
   onClose: () => void
@@ -24,7 +25,42 @@ const FreeAccountSupportOverlay: FC<OwnProps> = () => {
         onDismiss={onClose}
       />
 
-      <Overlay.Body></Overlay.Body>
+      <p className="status-page-text">
+        <span>
+          {' '}
+          <Icon glyph={IconFont.Info_New} />{' '}
+        </span>
+        Check our{' '}
+        <SafeBlankLink href="https://status.influxdata.com">
+          status page
+        </SafeBlankLink>{' '}
+        to see if there is an outage impacting your region.
+      </p>
+      <Overlay.Body>
+        <p>
+          Contact support is currently only available for Usage-Based Plan and
+          Annual customers. Please try our community resources below to recieve
+          help or file a feedback & questions form.
+        </p>
+        <List className="support-links">
+          <List.Item>
+            <div className="help-logo forum" />
+            <SafeBlankLink href="https://community.influxdata.com">
+              InfluxDB Community Forums
+            </SafeBlankLink>
+          </List.Item>
+          <List.Item>
+            <div className="help-logo slack" />
+            <SafeBlankLink href="https://influxcommunity.slack.com/join/shared_invite/zt-156zm7ult-LcIW2T4TwLYeS8rZbCP1mw#/shared-invite/email">
+              InfluxDB Slack
+            </SafeBlankLink>
+          </List.Item>
+          <List.Item>
+            <div className="help-logo feedback" />
+            <SafeBlankLink href="">Feedback & Questions Form</SafeBlankLink>
+          </List.Item>
+        </List>
+      </Overlay.Body>
       <Overlay.Footer>
         <CloudUpgradeButton />
       </Overlay.Footer>