feat: add go back to site button (#2538)
This commit is contained in:
committed by
Shawn Erquhart
parent
ab5860f58e
commit
f206e7e5a1
@ -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,
|
||||
|
31
packages/netlify-cms-ui-default/src/GoBackButton.js
Normal file
31
packages/netlify-cms-ui-default/src/GoBackButton.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
@ -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,
|
||||
};
|
||||
|
Reference in New Issue
Block a user