feat: add go back to site button (#2538)

This commit is contained in:
Patryk Niedźwiedziński
2019-10-28 20:20:41 +01:00
committed by Shawn Erquhart
parent ab5860f58e
commit f206e7e5a1
8 changed files with 44 additions and 2 deletions

View File

@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import Icon from './Icon';
import { buttons, shadows } from './styles';
import { GoBackButton } from './GoBackButton';
const StyledAuthenticationPage = styled.section`
display: flex;
@ -67,6 +68,7 @@ const AuthenticationPage = ({
renderButtonContent,
renderPageContent,
logoUrl,
siteUrl,
}) => {
return (
<StyledAuthenticationPage>
@ -78,6 +80,7 @@ const AuthenticationPage = ({
{renderButtonContent()}
</LoginButton>
)}
{siteUrl && <GoBackButton href={siteUrl} />}
{logoUrl ? <NetlifyCreditIcon size="100px" type="netlify-cms" /> : null}
</StyledAuthenticationPage>
);
@ -86,6 +89,7 @@ const AuthenticationPage = ({
AuthenticationPage.propTypes = {
onLogin: PropTypes.func,
logoUrl: PropTypes.string,
siteUrl: PropTypes.string,
loginDisabled: PropTypes.bool,
loginErrorMessage: PropTypes.node,
renderButtonContent: PropTypes.func,

View File

@ -0,0 +1,31 @@
import styled from '@emotion/styled';
import React from 'react';
import { colorsRaw } from './styles.js';
import Icon from './Icon';
const GoBackButtonStyle = styled.a`
display: flex;
align-items: center;
margin-top: 50px;
padding: 10px;
font-size: 14px;
`;
const ButtonText = styled.p`
color: ${colorsRaw.gray};
margin: 0 10px;
`;
export default class GoBackButton extends React.Component {
render() {
return (
<GoBackButtonStyle href={this.props.href}>
<Icon type="arrow" size="small" />
<ButtonText>Go back to site</ButtonText>
</GoBackButtonStyle>
);
}
}

View File

@ -6,6 +6,7 @@ import Toggle, { ToggleContainer, ToggleBackground, ToggleHandle } from './Toggl
import AuthenticationPage from './AuthenticationPage';
import WidgetPreviewContainer from './WidgetPreviewContainer';
import ObjectWidgetTopBar from './ObjectWidgetTopBar';
import GoBackButton from './GoBackButton';
import {
fonts,
colorsRaw,
@ -76,4 +77,5 @@ export {
effects,
reactSelectStyles,
GlobalStyles,
GoBackButton,
};