fix: Update LoginPage.tsx to include kubo logo. (#4543)

Author: wdoconnell

src/onboarding/components/CloudLogoWithCubo.scss

@@ -0,0 +1,17 @@
+@import '@influxdata/clockface/dist/variables.scss';
+
+.logo-with-cubo {
+  display: flex;
+
+  > .cubo-logo {
+    font-size: $cf-text-base-4;
+    padding-right: $cf-space-2xs;
+    color: #fff;
+    line-height: 1.5;
+  }
+  > .influx-cloud-logo {
+    width: 150px;
+    height: 50px;
+    display: flex;
+  }
+}

src/onboarding/components/CloudLogoWithCubo.tsx

@@ -0,0 +1,22 @@
+import {
+  Icon,
+  IconFont,
+  InfluxColors,
+  InfluxDBCloudLogo,
+} from '@influxdata/clockface'
+import React, {FC} from 'react'
+
+import './CloudLogoWithCubo.scss'
+
+const CloudLogoWithCubo: FC = () => (
+  <div className="logo-with-cubo">
+    <Icon glyph={IconFont.CuboSolid} className="cubo-logo" />
+    <InfluxDBCloudLogo
+      fill={InfluxColors.White}
+      cloud={true}
+      className="influx-cloud-logo"
+    />
+  </div>
+)
+
+export {CloudLogoWithCubo}

src/onboarding/containers/LoginPage.tsx

@@ -6,11 +6,11 @@ import {
   FunnelPage,
   Heading,
   HeadingElement,
-  InfluxDBCloudLogo,
   Typeface,
 } from '@influxdata/clockface'
 import {useHistory} from 'react-router-dom'
 import Notifications from 'src/shared/components/notifications/Notifications'
+import {CloudLogoWithCubo} from 'src/onboarding/components/CloudLogoWithCubo'
 
 // Types
 import {getMe} from 'src/client'
@@ -58,10 +58,7 @@ export const LoginPage: FC = () => {
     <ErrorBoundary>
       <AppWrapper>
         <Notifications />
-        <FunnelPage
-          enableGraphic={true}
-          logo={<InfluxDBCloudLogo cloud={true} className="login-page--logo" />}
-        >
+        <FunnelPage enableGraphic={true} logo={<CloudLogoWithCubo />}>
           <Heading
             element={HeadingElement.H1}
             type={Typeface.Rubik}