Polish Login Panel (#13624)

* Simplify version info styles

* Simplify splash page styles

Ensure classnames match component names
make more flexible

* Refactor signin page to use clockface panel

* Remove purgatory styles

* Simplify version info styles more

* Remove unused imports

ui/src/onboarding/components/SigninForm.scss

@@ -0,0 +1,8 @@
+.panel.signin-panel {
+  width: 300px;
+
+  .panel--body {
+    padding: $ix-marg-d;
+    text-align: center;
+  }
+}

ui/src/onboarding/containers/SigninPage.tsx

@@ -14,7 +14,7 @@ import {dismissAllNotifications} from 'src/shared/actions/notifications'
 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} from '@influxdata/clockface'
+import {SpinnerContainer, TechnoSpinner, Panel} from '@influxdata/clockface'
 import {RemoteDataState} from 'src/types'
 import VersionInfo from 'src/shared/components/VersionInfo'
 
@@ -62,13 +62,17 @@ class SigninPage extends PureComponent<Props, State> {
         loading={this.state.status}
         spinnerComponent={<TechnoSpinner />}
       >
-        <SplashPage panelWidthPixels={300}>
+        <SplashPage>
-          <SplashPage.Panel>
+          <Panel className="signin-panel">
-            <SplashPage.Logo />
+            <Panel.Body>
-            <SplashPage.Header title="InfluxData" />
+              <SplashPage.Logo />
-            <SigninForm />
+              <SplashPage.Header title="InfluxData" />
-          </SplashPage.Panel>
+              <SigninForm />
-          <VersionInfo widthPixels={300} />
+            </Panel.Body>
+            <Panel.Footer>
+              <VersionInfo />
+            </Panel.Footer>
+          </Panel>
         </SplashPage>
       </SpinnerContainer>
     )

ui/src/shared/components/VersionInfo.scss

@@ -3,10 +3,7 @@
   -----------------------------------------------------------------------------
 */
 
-@import 'src/style/modules';
-
 .version-info {
-  border-radius: 0 0 $ix-radius $ix-radius;
   color: $g9-mountain;
-  background-color: mix($g3-castle, $g2-kevlar, 50%);
+  text-align: center;
-}
+}

ui/src/shared/components/splash_page/SplashHeader.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 const SplashHeader: SFC<Props> = ({title}) => (
-  <h3 className="auth-heading">{title}</h3>
+  <h3 className="splash-page--heading">{title}</h3>
 )
 
 export default SplashHeader

ui/src/shared/components/splash_page/SplashLogo.tsx

@@ -1,5 +1,5 @@
 import React, {SFC} from 'react'
 
-const SplashLogo: SFC = () => <div className="auth-logo" />
+const SplashLogo: SFC = () => <div className="splash-page--logo" />
 
 export default SplashLogo

ui/src/shared/components/splash_page/SplashPage.scss

@@ -2,7 +2,7 @@
     Styles for Authorization Page
     ----------------------------------------------------------------------------
 */
-.auth-page {
+.splash-page {
   position: absolute;
   top: 0;
   left: 0;
@@ -12,14 +12,9 @@
   @include custom-scrollbar($g3-castle, $c-pool);
   @include gradient-v($g3-castle, $g0-obsidian);
   padding: $sidebar--width;
-
-  .version-info {
-    text-align: center;
-    padding: $ix-marg-b $ix-marg-b * 2;
-  }
 }
 
-.auth-image {
+.splash-page--image {
   background-image: url('../../assets/images/auth-bg.svg');
   background-size: cover;
   background-position: center center;
@@ -32,48 +27,15 @@
   z-index: 2;
 }
 
-.auth-box {
+.splash-page--child {
   z-index: 90;
   position: absolute;
-  top: 43%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  h1 {
-    color: $g20-white;
-    @include no-user-select();
-    font-weight: 200;
-    font-size: 52px;
-    letter-spacing: -2px;
-  }
-  p {
-    color: $g11-sidewalk;
-    @include no-user-select();
-  }
-
-  > .btn {
-    margin-top: 6px;
-    margin-bottom: 6px;
-
-    &:first-of-type {
-      margin-top: ($sidebar--width / 2);
-    }
-    &:last-child {
-      margin-bottom: $sidebar--width;
-    }
-
-    > .icon {
-      font-size: 20px;
-      margin-right: 8px;
-    }
-  }
 }
 
-.auth-logo {
+.splash-page--logo {
   background-image: url('../../assets/images/auth-logo.svg');
   background-size: 100% 100%;
   background-position: center center;
@@ -83,7 +45,7 @@
   display: inline-block;
 }
 
-.auth-credits {
+.splash-page--credits {
   @include no-user-select();
   font-weight: 600;
   z-index: 90;
@@ -99,11 +61,13 @@
     vertical-align: middle;
     position: relative;
     top: -1px;
-    margin-right: 2px;
+    margin-right: 1px;
+    margin-left: 3px;
   }
 
   a {
     color: $g10-wolf;
+    transition: color 0.25s ease;
     text-decoration: none;
   }
 
@@ -112,89 +76,7 @@
   }
 }
 
-/*
+.splash-page--panel {
-    Styles for Purgatory Page
-    ----------------------------------------------------------------------------
-*/
-.auth--purgatory {
-  margin-top: 30px;
-  min-width: 400px;
-  background-color: $g3-castle;
-  border-radius: 4px;
-  min-height: 200px;
-  padding: 30px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-
-  > h3 {
-    white-space: nowrap;
-  }
-  > p {
-    text-align: center;
-  }
-
-  hr {
-    width: 100%;
-  }
-}
-
-.auth--list {
-  margin-top: 30px;
-  width: 500px;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-.auth--list-item {
-  height: 70px;
-  padding: 0 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: $g4-onyx;
-  border-radius: 4px;
-  margin: 2px 0;
-}
-.auth--list-info {
-  @include no-user-select();
-}
-.auth--list-org {
-  font-size: 17px;
-  font-weight: 400;
-  color: $g11-sidewalk;
-}
-.auth--list-role {
-  font-weight: 700;
-  color: $g13-mist;
-}
-
-.auth--list-item.current {
-  background-color: $g5-pepper;
-  width: calc(100% + 20px);
-  margin: 2px -10px;
-  padding: 0 30px;
-
-  > .auth--list-info > .auth--list-org,
-  > .auth--list-info > .auth--list-role {
-    color: $g20-white;
-  }
-}
-.auth--list-blocked {
-  font-size: 13px;
-  text-align: center;
-  font-style: italic;
-  color: $g9-mountain;
-  @include no-user-select();
-}
-
-.btn.auth--logout {
-  margin-top: 30px;
-}
-
-
-.auth-panel {
   border-radius: $radius $radius 0 0;
   background-color: $g3-castle;
   padding: 32px;
@@ -202,7 +84,7 @@
 
 }
 
-.auth-heading {
+.splash-page--heading {
   font-size: 32px;
   font-weight: 300;
   margin-bottom: 32px;

ui/src/shared/components/splash_page/SplashPage.tsx

@@ -6,7 +6,6 @@ import SplashHeader from 'src/shared/components/splash_page/SplashHeader'
 
 interface Props {
   children: JSX.Element | JSX.Element[]
-  panelWidthPixels: number
 }
 
 class SplashPage extends Component<Props> {
@@ -15,20 +14,18 @@ class SplashPage extends Component<Props> {
   public static Header = SplashHeader
 
   public render() {
-    const {children, panelWidthPixels} = this.props
+    const {children} = this.props
 
     return (
-      <div className="auth-page">
+      <div className="splash-page">
-        <div className="auth-box" style={{width: `${panelWidthPixels}px`}}>
+        <div className="splash-page--child">{children}</div>
-          {children}
+        <p className="splash-page--credits">
-        </div>
-        <p className="auth-credits">
           Powered by <span className="icon cubo-uniform" />{' '}
           <a href="https://www.influxdata.com/" target="_blank">
             InfluxData
           </a>
         </p>
-        <div className="auth-image" />
+        <div className="splash-page--image" />
       </div>
     )
   }

ui/src/shared/components/splash_page/SplashPanel.tsx

@@ -5,7 +5,7 @@ interface Props {
 }
 
 const SplashPanel: SFC<Props> = ({children}) => (
-  <div className="auth-panel">{children}</div>
+  <div className="splash-page--panel">{children}</div>
 )
 
 export default SplashPanel

ui/src/style/chronograf.scss

@@ -107,6 +107,7 @@
 @import 'src/shared/components/EmptyGraphError.scss';
 @import 'src/shared/components/dapperScrollbars/DapperScrollbars.scss';
 @import 'src/dashboards/components/createFromTemplateOverlay/DashboardCreateFromTemplateOverlay.scss';
+@import 'src/onboarding/components/SigninForm.scss';
 
 // External
 @import '../../node_modules/@influxdata/react-custom-scrollbars/dist/styles.css';