feat: branding for shared notebooks (#2929)

Gene Hynson · web-flow · commit 2f6c08802ca1 · 2021-10-18T15:25:00.000-07:00
diff --git a/assets/images/logo.svg b/assets/images/logo.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?> <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="InfluxData_Complete_Logo" x="0px" y="0px" viewBox="-18 251 585 123.2" style="enable-background:new -18 251 585 123.2;" xml:space="preserve"> <style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#8E91A1;} </style> <g> <path id="Cuboctahedron" class="st0" d="M92,324.1l-10.7-46.4c-0.6-2.5-2.9-5.1-5.5-5.8l-48.7-15c-0.6-0.2-1.3-0.2-2.1-0.2 c-2.1,0-4.2,0.8-5.7,2.1l-34.9,32.5c-1.9,1.7-2.9,5.1-2.3,7.5l11.4,49.7c0.6,2.5,2.9,5.1,5.5,5.8l45.6,14.2 c0.6,0.2,1.3,0.2,2.1,0.2c2.1,0,4.2-0.8,5.7-2.1l37.3-34.7C91.6,329.9,92.6,326.7,92,324.1z M32.2,267.9l33.5,10.3 c1.3,0.4,1.3,1,0,1.3l-17.6,4c-1.3,0.4-3.2-0.2-4.1-1.2l-12.2-13.2C30.7,268,30.9,267.5,32.2,267.9z M53.1,327.9 c0.4,1.3-0.5,2.1-1.8,1.7l-36.1-11.2c-1.3-0.4-1.6-1.5-0.6-2.4l27.6-25.7c1-1,2.1-0.6,2.4,0.7L53.1,327.9z M-6.4,295.2l29.3-27.3 c1-1,2.5-0.8,3.5,0.1l14.7,15.9c1,1,0.8,2.5-0.1,3.5l-29.3,27.3c-1,1-2.5,0.8-3.5-0.1l-14.7-15.9C-7.5,297.6-7.4,296-6.4,295.2z M0.7,338.4L-7,304.4c-0.4-1.3,0.2-1.6,1.1-0.6L6.3,317c1,1,1.3,2.9,1,4.2l-5.3,17.2C1.6,339.8,1,339.8,0.7,338.4z M43.6,358.4 L5.3,346.5c-1.3-0.4-2.1-1.8-1.7-3.2l6.4-20.6c0.4-1.3,1.8-2.1,3.2-1.7l38.3,11.8c1.3,0.4,2.1,1.8,1.7,3.2l-6.4,20.6 C46.3,357.9,45,358.7,43.6,358.4z M77.6,330.5L52,354.3c-1,1-1.5,0.6-1.1-0.7l5.3-17.2c0.4-1.3,1.8-2.7,3.2-2.9l17.6-4 C78.3,329,78.5,329.6,77.6,330.5z M80.4,325.3l-21.1,4.8c-1.3,0.4-2.7-0.5-3-1.8l-9-39c-0.4-1.3,0.5-2.7,1.8-3l21.1-4.8 c1.3-0.4,2.7,0.5,3,1.8l9,39C82.5,323.8,81.7,325.1,80.4,325.3z"></path> <g id="Type"> <path class="st0" d="M407.1,340.5c-0.1,1.2,0.4,1.5,0.8,1.5h2.9c1.1,0,1.3-1,1.3-1.5l11.9-67.5c0.2-1.2-0.6-1.5-1.2-1.3l0,0 l-3.2,0.5c-0.8,0.1-1.3,0.8-1.3,1.3l0,0l-3.4,19.6c-3-1-8.7-1.6-12-1.6c-12.6,0-18.7,4.8-21,18.3l-3.8,21.2 c-0.2,1.3-0.4,2.5-0.4,3.6c0,6.1,3.4,8.4,9.7,8.4c7.2,0,14.5-3.4,20.2-8.2L407.1,340.5z M388.2,337.9c-3,0-4.6-0.8-4.6-4 c0-0.8,0.1-1.7,0.4-2.9l3.5-20.2c1.9-11,5.7-14.2,14.8-14.2c4,0,7.9,0.6,11.9,1.6l-5.3,29.9C402.4,333.8,394.5,337.9,388.2,337.9z "></path> <path class="st0" d="M457.3,340.5c-0.1,1.2,0.4,1.5,1,1.5h2.9c1.1,0,1.3-1,1.3-1.5l0,0l8.1-45.7c-5.8-2.2-12.5-3.3-17.1-3.3 c-13.3,0-18.7,5.3-21,18.3l-3.8,21.2c-0.2,1.3-0.4,2.5-0.4,3.6c0,6.1,3.4,8.4,9.7,8.4c7.2,0,14.2-3.4,19.9-8.2L457.3,340.5z M438.7,337.9c-3,0-4.6-0.8-4.6-4c0-0.8,0.1-1.7,0.4-2.9l3.5-20.2c1.9-10.9,5.5-14.2,14.8-14.2c4.1,0,8.8,0.8,11.6,1.6l-5.3,29.9 C452.6,333.8,444.8,337.9,438.7,337.9z"></path> <path class="st0" d="M538.4,340.5c-0.1,1.2,0.4,1.5,0.8,1.5h2.9c1.1,0,1.3-1,1.3-1.5l0,0l8.1-45.7c-5.8-2.2-12.5-3.3-17.1-3.3 c-13.3,0-18.7,5.3-21,18.3l-3.8,21.2c-0.2,1.3-0.4,2.5-0.4,3.6c0,6.1,3.4,8.4,9.7,8.4c7.2,0,14.2-3.4,19.9-8.2L538.4,340.5z M519.9,337.9c-3,0-4.6-0.8-4.6-4c0-0.8,0.1-1.7,0.4-2.9l3.5-20.2c1.9-10.9,5.5-14.2,14.8-14.2c4.1,0,8.8,0.8,11.6,1.6l-5.3,29.9 C533.8,333.8,526.1,337.9,519.9,337.9z"></path> <g> <path class="st0" d="M507.6,296.6L507.6,296.6l0.7-3.3c0.2-0.8-0.2-0.8-0.7-0.8h-13.9l1.9-11.4l0,0c0.2-1.2-0.6-1.5-1.2-1.3l0,0 l-3.2,0.5l0,0c-0.8,0.1-1.3,0.8-1.3,1.3l0,0l-1.9,10.9h-8.6c-0.2,0-1,0.1-1.1,0.8l-0.5,3.2l0,0c0,0.2,0,0.8,0.8,0.8h8.5 l-6.5,37.1c-0.1,0.7-0.2,1.3-0.2,1.9c0,4.5,3.2,6.5,8.1,6.5c3.9,0,10.8-1.1,14.3-2.8c1.1-0.6,1-1.3,0.7-1.8l0,0l-0.7-1.9 c-0.1-0.5-0.7-0.4-1.1-0.2l0,0c-3.4,1.3-5.3,2.1-12.2,2.1c-2.3,0-3.4-0.5-3.4-2.4c0-0.5,0.1-1.1,0.2-1.8l6.4-36.5h13.8 C507.3,297.3,507.5,297.1,507.6,296.6z"></path> </g> <path class="st0" d="M374.1,292.5h-14.2c-0.6,0-1.3,0.5-1.7,1l-10.1,14.7l-5.9-15.3c-0.4-0.8-1.1-1.1-1.8-1l-12.4,1.8l10.7,23.5 L319,342.1h13.3c0.8,0,2.2-0.5,2.8-1.2l9.2-11.2l5.2,11.2c0.2,0.6,1.1,1.2,1.9,1.2h13l-10.4-22.9L374.1,292.5z"></path> <path class="st0" d="M313,341.1l8.5-48.4c0.1-1-0.6-1-1.2-0.8l-11.9,1.6c-1.3,0.2-1.7,1.1-1.7,1.6l0,0l-5.1,29.3 c-3.6,1.8-10.2,4.7-12.8,4.7c-1.5,0-1.9-0.5-1.9-1.6c0-0.4,0.1-1,0.2-1.6l5.8-33.3l0,0c0.1-1-0.6-1-1.1-0.8l-11.9,1.7l0,0 c-1.3,0.2-1.7,1.1-1.7,1.6l0,0l-5.7,32.2c-0.4,2.1-0.5,3.6-0.5,5.7c0,6.2,2.5,10.1,9.1,10.1c5.7,0,11.8-1.9,19.5-5.6l0.1,3.6 c0,0.2,0.1,0.8,0.6,0.8h10.9C312.7,341.9,313,341.5,313,341.1z"></path> <path class="st0" d="M195.3,291.5c-5.7,0-11.8,1.9-19.5,5.6l0.1-4.4c0-1.1-0.8-1-1.3-0.8l-9.3,1.6l0,0c-1.6,0.2-2.1,1.2-2.2,1.7 l-7.8,44.6l0,0c-0.4,2.1-0.2,2.2,1.5,2.2h10.7c1.2,0,1.8,0,2.2-2.2l5.2-29.7c3.9-2.1,10.2-4.7,12.8-4.7c1.5,0,1.9,0.4,1.9,1.5 c0,0.4-0.1,1-0.2,1.6l-5.5,31.4l0,0c-0.4,2.1-0.2,2.2,1.5,2.2H196c1.2,0,1.8,0,2.2-2.2l5.7-32.5c0.4-2.5,0.5-4,0.5-5.7 C204.4,295.4,201.9,291.5,195.3,291.5z"></path> <g> <path class="st0" d="M154.2,269.9l-11.9,1.7c-1.3,0.1-1.6,1.1-1.7,1.6l-2.2,12.4c-0.2,1.5-0.1,1.5,1.2,1.3l11.8-1.6l0,0 c1.2-0.1,1.5-0.2,1.7-1.8l0,0l2.3-12.8C155.5,269.9,155.3,269.9,154.2,269.9z"></path> <path class="st0" d="M143.1,339.8L143.1,339.8l8.4-47c0.1-1-0.6-1-1.2-0.8l-11.9,1.6l0,0c-1.3,0.2-1.7,1.1-1.7,1.6l0,0l-8,45.1 c-0.2,1.7,0,1.9,1.6,1.9H141C142.1,341.9,142.7,341.9,143.1,339.8z"></path> </g> <path class="st0" d="M260.6,339.8l12-68.4c0.1-1-0.4-1-1-0.8l-13.7,2.3c-6.2-1.7-13.2-2.4-17.2-2.4c-12.7,0-17,4.4-19,15.8 l-1.1,6.5H215c-1.5,0-1.6,0.7-1.7,1.3l0,0l-1.7,9.5c-0.1,0.4,0.1,0.8,0.7,0.8h6.2l-6.7,37.8c-0.7,4.5-1.5,7.2-5.7,11.6l0,0 c-0.8,0.8-0.6,1.1,0,1.6l0,0l7.5,7l0,0c0.7,0.7,1.1,0.6,1.9-0.2c6.9-7,9.1-11.8,10.3-18.3l6.9-39.4h11c0.6,0,0.7,0,1-0.7l0,0 l2.5-9.9l0,0c0.2-0.7-0.5-1-1-1h-11.5l1.3-7.2c0.5-2.5,1.6-3.4,4.7-3.4c4.2,0,11.2,0.8,15,1.8l-9.8,56l0,0 c-0.4,2.1-0.2,2.2,1.5,2.2h10.7C259.6,341.9,260.2,341.9,260.6,339.8z"></path> </g> <path id="Registered_Trademark" class="st0" d="M560.9,277.6h-1.3l-0.4,2.4h-1.3l1.2-7.2h2.7c1.5,0,2.2,0.6,2.2,1.6 c0,0.1,0,0.2,0,0.5l-0.1,1c-0.1,1-0.5,1.3-1.3,1.7l1.3,2.5h-1.5L560.9,277.6z M562.5,274.9c0-0.1,0-0.2,0-0.2 c0-0.5-0.2-0.6-0.8-0.6h-1.5l-0.4,2.4h1.5c0.8,0,1-0.2,1.1-0.8L562.5,274.9z M560.9,282.4c-3.4,0-6.1-2.7-6.1-6.1s2.7-6.1,6.1-6.1 s6.1,2.7,6.1,6.1S564.2,282.4,560.9,282.4z M560.9,271.4c-2.8,0-5,2.2-5,5s2.2,5,5,5s5-2.2,5-5S563.6,271.4,560.9,271.4z"></path> </g> </svg> 
diff --git a/src/flows/components/ReadOnlyHeader.scss b/src/flows/components/ReadOnlyHeader.scss
@@ -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;
+}
diff --git a/src/flows/components/ReadOnlyHeader.tsx b/src/flows/components/ReadOnlyHeader.tsx
@@ -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>
