TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-20 17:32:15 +03:00
Code Issues Projects Releases Wiki Activity

Updated paid account styles

Browse Source 
no refs.
- added basic styling to paid account settings styles
This commit is contained in:
Peter Zimon 2020-07-20 17:33:10 +02:00
parent e45663dcb0
commit 45c6dd3b8b
4 changed files with 144 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -173,7 +173,7 @@ export default class App extends React.Component {
} }
return null; return null;
} else if (process.env.NODE_ENV === 'development') { } else if (process.env.NODE_ENV === 'development') {
return member || Fixtures.member.free; return member || Fixtures.member.paid;
} }
return member; return member;
} }

52
ghost/portal/src/components/Frame.styles.js
View File

@ -79,11 +79,28 @@ export const GlobalStyles = `
.fixed { position: fixed; } .fixed { position: fixed; }
.sticky { position: sticky; } .sticky { position: sticky; }
.ma0 { margin: 0; }
.mt0 { margin-top: 0; }
.mr0 { margin-right: 0; }
.mb0 { margin-bottom: 0; }
.ml0 { margin-left: 0; }
.mh0 { margin-left: 0; margin-right: 0; }
.mv0 { margin-top: 0; margin-bottom: 0; }
.pa0 { padding: 0; }
.pt0 { padding-top: 0; }
.pr0 { padding-right: 0; }
.pb0 { padding-bottom: 0; }
.pl0 { padding-left: 0; }
.ph0 { padding-left: 0; padding-right: 0; }
.pv0 { padding-top: 0; padding-bottom: 0; }
/* Typography /* Typography
/* ----------------------------------------------------- */ /* ----------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p { h1, h2, h3, h4, h5, h6, p {
padding: 0; padding: 0;
margin: 0; margin: 0;
line-height: 1.15em;
} }
h1 { h1 {
@ -127,6 +144,39 @@ export const GlobalStyles = `
text-align: center; text-align: center;
} }
.gh-portal-setting-heading {
font-size: 13px;
}
/* Buttons
/* ----------------------------------------------------- */
.gh-portal-btn {
position: relative;
display: inline-block;
padding: 0 1.8rem;
height: 44px;
border: none;
font-size: 1.5rem;
line-height: 1em;
font-weight: 500;
letter-spacing: 0.2px;
text-align: center;
text-decoration: none;
white-space: nowrap;
border-radius: 5px;
cursor: pointer;
transition: .4s ease;
box-shadow: none;
user-select: none;
background: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.08), 0 2px 6px -3px rgba(0,0,0,0.19);
color: #212121;
}
.gh-portal-btn:hover {
box-shadow: 0 0 0 1px rgba(0,0,0,0.18), 0 2px 6px -3px rgba(0,0,0,0.19);
}
/* Global layout styles /* Global layout styles
/* ----------------------------------------------------- */ /* ----------------------------------------------------- */
.gh-portal-popup-container { .gh-portal-popup-container {
@ -170,8 +220,8 @@ export const GlobalStyles = `
// Append all styles as string which we want to pass to iframe // Append all styles as string which we want to pass to iframe
const FrameStyle = const FrameStyle =
AccountHomePageStyles +
GlobalStyles + GlobalStyles +
AccountHomePageStyles +
SwitchStyles + SwitchStyles +
ActionButtonStyles; ActionButtonStyles;

47
ghost/portal/src/components/common/ActionButton.js
View File

@ -2,37 +2,20 @@ import React from 'react';
import getContrastColor from '../../utils/contrast-color'; import getContrastColor from '../../utils/contrast-color';
export const ActionButtonStyles = ` export const ActionButtonStyles = `
.gh-portal-btn { .gh-portal-btn-main {
position: relative; width: 100%;
display: inline-block; box-shadow: none;
padding: 0 1.8rem; }
height: 44px; .gh-portal-btn-primary:hover::before {
border: 0; position: absolute;
font-size: 1.5rem; content: "";
line-height: 42px; top: 0;
font-weight: 500; left: 0;
letter-spacing: 0.2px; right: 0;
text-align: center; bottom: 0;
text-decoration: none; background: rgba(255, 255, 255, 0.08);
white-space: nowrap; border-radius: 5px;
border-radius: 5px; }
cursor: pointer;
transition: .4s ease;
box-shadow: none;
user-select: none;
width: 100%;
}
.gh-portal-btn:hover::before {
position: absolute;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.08);
border-radius: 5px;
}
`; `;
const Styles = ({brandColor, retry, disabled, style = {}}) => { const Styles = ({brandColor, retry, disabled, style = {}}) => {
@ -57,7 +40,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
function ActionButton({label, onClick, disabled, retry, brandColor, style}) { function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
let Style = Styles({disabled, retry, brandColor, style}); let Style = Styles({disabled, retry, brandColor, style});
return ( return (
<button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-primary" disabled={disabled}> <button onClick={e => onClick(e)} style={Style.button} className="gh-portal-btn gh-portal-btn-main gh-portal-btn-primary" disabled={disabled}>
{label} {label}
</button> </button>
); );

119
ghost/portal/src/components/pages/AccountHomePage.js
View File

@ -19,6 +19,10 @@ export const AccountHomePageStyles = `
margin-top: -16px; margin-top: -16px;
} }
.gh-portal-account-footer.paid {
margin-top: 12px;
}
.gh-portal-account-footermenu { .gh-portal-account-footermenu {
display: flex; display: flex;
list-style: none; list-style: none;
@ -34,6 +38,44 @@ export const AccountHomePageStyles = `
margin-right: 0; margin-right: 0;
} }
.gh-portal-accountdetail-section {
display: flex;
align-items: center;
margin-bottom: 32px;
}
.gh-portal-accountdetail-section:first-of-type {
margin-top: 24px;
margin-bottom: 26px;
}
.gh-portal-account-divider {
margin: 12px -32px;
border: none;
border-bottom: 1px solid #EDEDED;
}
.gh-portal-account-divider:last-of-type {
margin-bottom: 40px;
}
.gh-portal-btn-accountdetail {
height: 36px;
font-size: 1.3rem;
width: 88px;
padding: 0 12px;
}
.gh-portal-accountdetail-data {
color: #656565;
line-height: 1em;
margin-top: 4px;
}
.gh-portal-accountdetail-data.small {
font-size: 1.3rem;
}
/* Avatar styles */ /* Avatar styles */
.gh-portal-avatar-container { .gh-portal-avatar-container {
position: relative; position: relative;
@ -51,7 +93,7 @@ export const AccountHomePageStyles = `
const Divider = () => { const Divider = () => {
return ( return (
<div style={{borderBottom: '1px solid grey'}}> </div> <hr className='gh-portal-account-divider' />
); );
}; };
@ -167,7 +209,7 @@ class PaidAccountHomePage extends React.Component {
return ( return (
<div className='gh-portal-section'> <div className='gh-portal-section'>
<p className='gh-portal-text-center'> <p className='gh-portal-text-center mb0'>
Hey <strong>{firstname || name || email}! </strong> Hey <strong>{firstname || name || email}! </strong>
You have an active <strong>{siteTitle}</strong> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing. You have an active <strong>{siteTitle}</strong> account with access to all areas. Get in touch if you have any problems or need some help getting things updated, and thanks for subscribing.
</p> </p>
@ -212,10 +254,6 @@ class PaidAccountHomePage extends React.Component {
} }
renderAccountDetails() { renderAccountDetails() {
const buttonStyle = {
padding: '6px 9px', border: '1px solid black', width: '60px', display: 'flex', justifyContent: 'center',
borderRadius: '5px', cursor: 'pointer'
};
const {name, email, subscriptions, subscribed} = this.context.member; const {name, email, subscriptions, subscribed} = this.context.member;
const { const {
@ -224,46 +262,43 @@ class PaidAccountHomePage extends React.Component {
} = subscriptions[0]; } = subscriptions[0];
return ( return (
<div style={{padding: '0 24px', marginTop: '24px', marginBottom: '24px'}}> <div>
<div style={{display: 'flex', alignItems: 'center'}}> <section className='gh-portal-accountdetail-section'>
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}> <div className='flex flex-column flex-grow-1'>
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Profile </div> <h3 className='gh-portal-setting-heading'>Profile</h3>
<div style={{lineHeight: '18px'}}> <div>
<div style={{color: '#666666'}}> {name} </div> <div className='gh-portal-accountdetail-data'>{name}</div>
<div style={{color: '#666666', fontSize: '11px'}}> {email} </div> <div className='gh-portal-accountdetail-data small'>{email}</div>
</div> </div>
</div> </div>
<div style={buttonStyle} onClick={e => this.openEditProfile(e)}> <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openEditProfile(e)}>Edit</button>
Edit </section>
</div>
</div> <section className='gh-portal-accountdetail-section'>
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}> <div className='flex flex-column flex-grow-1'>
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}> <h3 className='gh-portal-setting-heading'>Plan</h3>
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Plan </div> <div>
<div style={{lineHeight: '18px'}}> <div className='gh-portal-accountdetail-data'>{this.getPlanLabel(plan)}</div>
<div style={{color: '#666666'}}> {this.getPlanLabel(plan)} </div>
</div> </div>
</div> </div>
<div style={buttonStyle} onClick={e => this.openUpdatePlan(e)}> <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openUpdatePlan(e)}>Change</button>
Change </section>
</div>
</div> <section className='gh-portal-accountdetail-section'>
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}> <div className='flex flex-column flex-grow-1'>
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}> <h3 className='gh-portal-setting-heading'>Billing Info</h3>
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Billing Info </div> <div>
<div style={{lineHeight: '18px'}}> <div className='gh-portal-accountdetail-data'>{this.getCardLabel({defaultCardLast4})}</div>
<div style={{color: '#666666'}}> {this.getCardLabel({defaultCardLast4})} </div>
</div> </div>
</div> </div>
<div style={buttonStyle} onClick={e => this.onEditBilling(e)}> <button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.onEditBilling(e)}>Update</button>
Update </section>
</div>
</div> <section className='gh-portal-accountdetail-section'>
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}> <div className='flex flex-column flex-grow-1'>
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}> <h3 className='gh-portal-setting-heading'>Newsletter</h3>
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Newsletter </div> <div>
<div style={{lineHeight: '18px'}}> <div className='gh-portal-accountdetail-data'>You are subscribed to email newsletters</div>
<div style={{color: '#666666'}}> You are subscribed to email newsletters </div>
</div> </div>
</div> </div>
<div> <div>
@ -271,7 +306,7 @@ class PaidAccountHomePage extends React.Component {
this.onToggleSubscription(e, subscribed); this.onToggleSubscription(e, subscribed);
}} checked={subscribed} /> }} checked={subscribed} />
</div> </div>
</div> </section>
</div> </div>
); );
} }
@ -279,7 +314,7 @@ class PaidAccountHomePage extends React.Component {
render() { render() {
const {member, brandColor} = this.context; const {member, brandColor} = this.context;
return ( return (
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}> <div>
<UserHeader member={member} /> <UserHeader member={member} />
{this.renderAccountWelcome()} {this.renderAccountWelcome()}
<Divider /> <Divider />