Influxdata
/
influxdb
mirror of https://github.com/influxdata/influxdb.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
pull/13613/head
alexpaxton 2019-04-24 14:56:07 -07:00 committed by GitHub
parent 5b6223382c
commit 843dbfe039
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 42 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/src/onboarding/components/SigninForm.scss Normal file
View File

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

20
ui/src/onboarding/containers/SigninPage.tsx
View File

@ -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.Panel>
<SplashPage.Logo />
<SplashPage.Header title="InfluxData" />
<SigninForm />
</SplashPage.Panel>
<VersionInfo widthPixels={300} />
<SplashPage>
<Panel className="signin-panel">
<Panel.Body>
<SplashPage.Logo />
<SplashPage.Header title="InfluxData" />
<SigninForm />
</Panel.Body>
<Panel.Footer>
<VersionInfo />
</Panel.Footer>
</Panel>
</SplashPage>
</SpinnerContainer>
)

7
ui/src/shared/components/VersionInfo.scss
View File

@ -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;
}

2
ui/src/shared/components/splash_page/SplashHeader.tsx
View File

@ -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

2
ui/src/shared/components/splash_page/SplashLogo.tsx
View File

@ -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

140
ui/src/shared/components/splash_page/SplashPage.scss
View File

@ -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 @@
}
}
/*
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 {
.splash-page--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;

13
ui/src/shared/components/splash_page/SplashPage.tsx
View File

@ -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="auth-box" style={{width: `${panelWidthPixels}px`}}>
{children}
</div>
<p className="auth-credits">
<div className="splash-page">
<div className="splash-page--child">{children}</div>
<p className="splash-page--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>
)
}

2
ui/src/shared/components/splash_page/SplashPanel.tsx
View File

@ -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

1
ui/src/style/chronograf.scss
View File

@ -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';