feat(ui): update oss login page (#17291)

* feat(ui): update design of oss login page

* chore(ui): remove splash page components

* chore(ui): update changelog

* chore(ui): sort css attributes alphabetically

CHANGELOG.md

@@ -8,6 +8,10 @@
 
 1. [17240](https://github.com/influxdata/influxdb/pull/17240): NodeJS logo displays properly in Firefox
 
+### UI Improvements
+
+1. [17291](https://github.com/influxdata/influxdb/pull/17291): Redesign OSS Login page
+
 ## v2.0.0-beta.6 [2020-03-12]
 
 ### Features

ui/src/onboarding/components/SigninForm.scss

@@ -1,8 +1,38 @@
-.cf-panel.signin-panel {
+.signin-page {
+  .cf-funnel-page--content {
+    display: flex;
+    height: 100%;
+    justify-content: center;
+  }
+
+  .cf-dapper-scrollbars--content {
+    align-items: center;
+    display: flex !important;
+  }
+}
+
+.cf-panel.signin-page--panel {
   width: 300px;
 
   .cf-panel--body {
     padding: $ix-marg-d;
     text-align: center;
   }
-}
+}
+
+.signin-page--logo {
+  height: auto;
+  margin-bottom: 3em;
+  margin-top: 1em;
+  width: 70%;
+}
+
+.signin-page--cubo {
+  background-image: url('../../assets/images/auth-logo.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  display: inline-block;
+  height: 100px;
+  width: 100px;
+}

ui/src/onboarding/containers/SigninPage.tsx

@@ -12,13 +12,14 @@ import {dismissAllNotifications} from 'src/shared/actions/notifications'
 
 // Components
 import {ErrorHandling} from 'src/shared/decorators/errors'
-import SplashPage from 'src/shared/components/splash_page/SplashPage'
 import SigninForm from 'src/onboarding/components/SigninForm'
 import {
   SpinnerContainer,
   TechnoSpinner,
   Panel,
   AlignItems,
+  FunnelPage,
+  InfluxDBCloudLogo,
 } from '@influxdata/clockface'
 import {RemoteDataState} from 'src/types'
 import VersionInfo from 'src/shared/components/VersionInfo'
@@ -67,18 +68,18 @@ class SigninPage extends PureComponent<Props, State> {
         loading={this.state.status}
         spinnerComponent={<TechnoSpinner />}
       >
-        <SplashPage>
-          <Panel className="signin-panel">
+        <FunnelPage className="signin-page">
+          <Panel className="signin-page--panel">
             <Panel.Body alignItems={AlignItems.Center}>
-              <SplashPage.Logo />
-              <SplashPage.Header title="InfluxData" />
+              <div className="signin-page--cubo" />
+              <InfluxDBCloudLogo cloud={false} className="signin-page--logo" />
               <SigninForm />
             </Panel.Body>
             <Panel.Footer>
               <VersionInfo />
             </Panel.Footer>
           </Panel>
-        </SplashPage>
+        </FunnelPage>
       </SpinnerContainer>
     )
   }

ui/src/style/chronograf.scss

@@ -17,7 +17,6 @@
 @import 'src/shared/components/threesizer/Threesizer.scss';
 @import 'src/shared/components/graph_tips/GraphTips.scss';
 @import 'src/shared/components/cells/Dashboards.scss';
-@import 'src/shared/components/splash_page/SplashPage.scss';
 @import 'src/shared/components/code_mirror/CodeMirror.scss';
 @import 'src/shared/components/code_mirror/CodeMirrorTheme.scss';
 @import 'src/dashboards/components/dashboard_empty/DashboardEmpty.scss';