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, showPopup: true,
site: Fixtures.site, site: Fixtures.site,
member: Fixtures.member.free, member: Fixtures.member.free,
page: 'signup' page: 'magiclink'
}; };
} }
return {}; return {};

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

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

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

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

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

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