feat: branding for shared notebooks (#2929)

Author: Gene Hynson

assets/images/logo.svg

@@ -0,0 +1,16 @@
+.flows-header-logo {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-image: url('../../../assets/images/logo.svg');
+  text-align: end;
+  height: 50px;
+  cursor: pointer;
+}
+
+.flows-header-column-signup {
+  text-align: end;
+}
+
+.flows-header-row {
+  margin-top: 64px;
+}

src/flows/components/ReadOnlyHeader.scss

@@ -1,6 +1,15 @@
 // Libraries
 import React, {FC, useContext} from 'react'
-import {Page} from '@influxdata/clockface'
+import {
+  Page,
+  Grid,
+  Button,
+  IconFont,
+  ComponentColor,
+  ButtonShape,
+  ComponentSize,
+  Columns,
+} from '@influxdata/clockface'
 
 // Contexts
 import {FlowContext} from 'src/flows/context/flow.current'
@@ -11,13 +20,44 @@ import TimeRangeLabel from 'src/flows/components/header/TimeRangeLabel'
 
 import {DEFAULT_PROJECT_NAME} from 'src/flows'
 
+import './ReadOnlyHeader.scss'
+
 const ReadOnlyHeader: FC = () => {
   const {flow} = useContext(FlowContext)
 
+  const handleSignUpClick = () => {
+    window.open('https://cloud2.influxdata.com/signup', '_blank').focus()
+  }
+
+  const handleLogoClick = () => {
+    window.open('https://influxdata.com', '_blank').focus()
+  }
+
   return (
     <>
       <Page.Header fullWidth>
-        <Page.Title title={flow.name || DEFAULT_PROJECT_NAME} />
+        <Grid>
+          <Grid.Row className="flows-header-row">
+            <Grid.Column widthMD={Columns.Two}>
+              <div className="flows-header-logo" onClick={handleLogoClick} />
+            </Grid.Column>
+            <Grid.Column
+              widthMD={Columns.Ten}
+              className="flows-header-column-signup"
+            >
+              <Button
+                icon={IconFont.Star}
+                color={ComponentColor.Success}
+                size={ComponentSize.Medium}
+                shape={ButtonShape.Default}
+                onClick={handleSignUpClick}
+                text="Sign up!"
+                testID="sign-up--button"
+              />
+            </Grid.Column>
+          </Grid.Row>
+          <Page.Title title={flow.name || DEFAULT_PROJECT_NAME} />
+        </Grid>
       </Page.Header>
       <Page.ControlBar fullWidth>
         <Page.ControlBarRight>