migrate test backend styling

This commit is contained in:
Shawn Erquhart 2018-07-23 10:25:29 -04:00
parent 2f95d8c4fc
commit 33f490055d
3 changed files with 42 additions and 16 deletions

View File

@ -12,7 +12,7 @@ const StyledAuthenticationPage = styled.section`
height: 100vh;
`
const AuthenticationPageLogo = styled(Icon)`
const PageLogoIcon = styled(Icon)`
color: #c4c6d2;
margin-top: -300px;
`
@ -23,8 +23,8 @@ const LoginButton = styled.button`
${buttons.default};
${buttons.gray};
padding: 0 30px;
margin-top: -80px;
padding: 0 12px;
margin-top: -40px;
display: flex;
align-items: center;
position: relative;
@ -69,7 +69,7 @@ export default class AuthenticationPage extends React.Component {
return (
<StyledAuthenticationPage>
<AuthenticationPageLogo size="500px" type="netlify-cms"/>
<PageLogoIcon size="300px" type="netlify-cms"/>
{loginError ? <p>{loginError}</p> : null}
<LoginButton disabled={inProgress} onClick={this.handleLogin}>
<Icon type="github" /> {inProgress ? "Logging in..." : "Login with GitHub"}

View File

@ -1,7 +1,38 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { Icon } from 'netlify-cms-ui-default';
import styled from 'react-emotion';
import { Icon, buttons, shadows } from 'netlify-cms-ui-default';
const StyledAuthenticationPage = styled.section`
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
height: 100vh;
`
const PageLogoIcon = styled(Icon)`
color: #c4c6d2;
margin-top: -300px;
`
const LoginButton = styled.button`
${buttons.button};
${shadows.dropDeep};
${buttons.default};
${buttons.gray};
padding: 0 30px;
margin-top: -40px;
display: flex;
align-items: center;
position: relative;
${Icon} {
margin-right: 18px;
}
`
export default class AuthenticationPage extends React.Component {
static propTypes = {
@ -29,16 +60,12 @@ export default class AuthenticationPage extends React.Component {
const { inProgress } = this.props;
return (
<section className="nc-githubAuthenticationPage-root">
<Icon className="nc-githubAuthenticationPage-logo" size="500px" type="netlify-cms"/>
<button
className="nc-githubAuthenticationPage-button"
disabled={inProgress}
onClick={this.handleLogin}
>
<StyledAuthenticationPage>
<PageLogoIcon size="300px" type="netlify-cms"/>
<LoginButton disabled={inProgress} onClick={this.handleLogin}>
{inProgress ? "Logging in..." : "Login"}
</button>
</section>
</LoginButton>
</StyledAuthenticationPage>
);
}
}

View File

@ -1,6 +1,5 @@
backend:
name: github
repo: erquhart/blank
name: test-repo
display_url: https://example.com
media_folder: "assets/uploads"