Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Basic styling for signin page

Browse source 
no refs.
This commit is contained in:
Peter Zimon 2020-07-21 15:58:47 +02:00
parent 263f00bdd2
commit 2094a0950a
4 changed files with 28 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/portal/src/App.js
View file

@ -143,7 +143,7 @@ export default class App extends React.Component {
showPopup: true,
site: Fixtures.site,
member: Fixtures.member.free,
page: 'signup'
page: 'magiclink'
};
}
return {};

2
ghost/portal/src/components/Frame.styles.js
View file

@ -139,7 +139,7 @@ export const GlobalStyles = `
}
.gh-portal-main-title {
color: #333;
color: #212121;
}
.gh-portal-text-disabled {

48
ghost/portal/src/components/pages/SigninPage.js
View file

@ -78,25 +78,21 @@ export default class SigninPage extends React.Component {
renderSignupMessage() {
const brandColor = this.context.brandColor;
return (
<div style={{display: 'flex', justifyContent: 'center', marginTop: '12px'}}>
<div style={{marginRight: '6px', color: '#929292'}}> Don't have an account ? </div>
<div
style={{color: brandColor, fontWeight: 'bold', cursor: 'pointer'}}
role="button"
onClick={() => this.context.onAction('switchPage', {page: 'signup'})}
>
Subscribe
</div>
<div className='flex justify-center gh-portal-signup-footer'>
<div>Don't have an account?</div>
<button className='gh-portal-btn gh-portal-btn-link' style={{color: brandColor}} onClick={() => this.context.onAction('switchPage', {page: 'signup'})}>Subscribe</button>
</div>
);
}
renderForm() {
return (
<div style={{display: 'flex', flexDirection: 'column', marginBottom: '12px', padding: '0 18px'}}>
{this.renderInputField('email')}
{this.renderSubmitButton()}
{this.renderSignupMessage()}
<div>
<div className='gh-portal-section form'>{this.renderInputField('email')}</div>
<div>
{this.renderSubmitButton()}
{this.renderSignupMessage()}
</div>
</div>
);
}
@ -104,22 +100,12 @@ export default class SigninPage extends React.Component {
renderSiteLogo() {
const siteLogo = this.context.site.logo;
const logoStyle = {
position: 'relative',
display: 'block',
width: '48px',
height: '48px',
marginBottom: '12px',
backgroundPosition: '50%',
backgroundSize: 'cover',
borderRadius: '100%',
boxShadow: '0 0 0 3px #fff'
};
const logoStyle = {};
if (siteLogo) {
logoStyle.backgroundImage = `url(${siteLogo})`;
return (
<span style={logoStyle}> </span>
<span className='gh-portal-signup-logo' style={logoStyle}></span>
);
}
return null;
@ -129,20 +115,18 @@ export default class SigninPage extends React.Component {
const siteTitle = this.context.site.title || 'Site Title';
return (
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: '18px'}}>
<div className='flex flex-column items-center gh-portal-section gh-portal-signup-header'>
{this.renderSiteLogo()}
<div style={{fontSize: '21px', fontWeight: '400'}}> Sign in to {siteTitle}</div>
<h2 className="gh-portal-main-title">Sign in to {siteTitle}</h2>
</div>
);
}
render() {
return (
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
<div style={{paddingLeft: '16px', paddingRight: '16px'}}>
{this.renderFormHeader()}
{this.renderForm()}
</div>
<div className='flex flex-column'>
{this.renderFormHeader()}
{this.renderForm()}
</div>
);
}

16
ghost/portal/src/components/pages/SignupPage.js
View file

@ -229,12 +229,16 @@ class SignupPage extends React.Component {
renderForm() {
return (
<div className='flex flex-column'>
{this.renderNameField()}
{this.renderInputField('email')}
{this.renderPlans()}
{this.renderSubmitButton()}
{this.renderLoginMessage()}
<div>
<div className='gh-portal-section form'>
{this.renderNameField()}
{this.renderInputField('email')}
{this.renderPlans()}
</div>
<div>
{this.renderSubmitButton()}
{this.renderLoginMessage()}
</div>
</div>
);
}