mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-20 09:22:49 +03:00
Updated paid account styles
no refs. - added basic styling to paid account settings styles
This commit is contained in:
Peter Zimon
parent
e45663dcb0
commit
45c6dd3b8b
@ -173,7 +173,7 @@ export default class App extends React.Component {
|
||||
}
|
||||
return null;
|
||||
} else if (process.env.NODE_ENV === 'development') {
|
||||
return member || Fixtures.member.free;
|
||||
return member || Fixtures.member.paid;
|
||||
}
|
||||
return member;
|
||||
}
|
||||
|
||||
@ -79,11 +79,28 @@ export const GlobalStyles = `
|
||||
.fixed { position: fixed; }
|
||||
.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
|
||||
/* ----------------------------------------------------- */
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1.15em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -127,6 +144,39 @@ export const GlobalStyles = `
|
||||
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
|
||||
/* ----------------------------------------------------- */
|
||||
.gh-portal-popup-container {
|
||||
@ -170,8 +220,8 @@ export const GlobalStyles = `
|
||||
|
||||
// Append all styles as string which we want to pass to iframe
|
||||
const FrameStyle =
|
||||
AccountHomePageStyles +
|
||||
GlobalStyles +
|
||||
AccountHomePageStyles +
|
||||
SwitchStyles +
|
||||
ActionButtonStyles;
|
||||
|
||||
|
||||
@ -2,37 +2,20 @@ import React from 'react';
|
||||
import getContrastColor from '../../utils/contrast-color';
|
||||
|
||||
export const ActionButtonStyles = `
|
||||
.gh-portal-btn {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 1.8rem;
|
||||
height: 44px;
|
||||
border: 0;
|
||||
font-size: 1.5rem;
|
||||
line-height: 42px;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
.gh-portal-btn-main {
|
||||
width: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
.gh-portal-btn-primary: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 = {}}) => {
|
||||
@ -57,7 +40,7 @@ const Styles = ({brandColor, retry, disabled, style = {}}) => {
|
||||
function ActionButton({label, onClick, disabled, retry, brandColor, style}) {
|
||||
let Style = Styles({disabled, retry, brandColor, style});
|
||||
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}
|
||||
</button>
|
||||
);
|
||||
|
||||
@ -19,6 +19,10 @@ export const AccountHomePageStyles = `
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.gh-portal-account-footer.paid {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.gh-portal-account-footermenu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
@ -34,6 +38,44 @@ export const AccountHomePageStyles = `
|
||||
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 */
|
||||
.gh-portal-avatar-container {
|
||||
position: relative;
|
||||
@ -51,7 +93,7 @@ export const AccountHomePageStyles = `
|
||||
|
||||
const Divider = () => {
|
||||
return (
|
||||
<div style={{borderBottom: '1px solid grey'}}> </div>
|
||||
<hr className='gh-portal-account-divider' />
|
||||
);
|
||||
};
|
||||
|
||||
@ -167,7 +209,7 @@ class PaidAccountHomePage extends React.Component {
|
||||
|
||||
return (
|
||||
<div className='gh-portal-section'>
|
||||
<p className='gh-portal-text-center'>
|
||||
<p className='gh-portal-text-center mb0'>
|
||||
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.
|
||||
</p>
|
||||
@ -212,10 +254,6 @@ class PaidAccountHomePage extends React.Component {
|
||||
}
|
||||
|
||||
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 {
|
||||
@ -224,46 +262,43 @@ class PaidAccountHomePage extends React.Component {
|
||||
} = subscriptions[0];
|
||||
|
||||
return (
|
||||
<div style={{padding: '0 24px', marginTop: '24px', marginBottom: '24px'}}>
|
||||
<div style={{display: 'flex', alignItems: 'center'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
|
||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Profile </div>
|
||||
<div style={{lineHeight: '18px'}}>
|
||||
<div style={{color: '#666666'}}> {name} </div>
|
||||
<div style={{color: '#666666', fontSize: '11px'}}> {email} </div>
|
||||
<div>
|
||||
<section className='gh-portal-accountdetail-section'>
|
||||
<div className='flex flex-column flex-grow-1'>
|
||||
<h3 className='gh-portal-setting-heading'>Profile</h3>
|
||||
<div>
|
||||
<div className='gh-portal-accountdetail-data'>{name}</div>
|
||||
<div className='gh-portal-accountdetail-data small'>{email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={buttonStyle} onClick={e => this.openEditProfile(e)}>
|
||||
Edit
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1}}>
|
||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Plan </div>
|
||||
<div style={{lineHeight: '18px'}}>
|
||||
<div style={{color: '#666666'}}> {this.getPlanLabel(plan)} </div>
|
||||
<button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openEditProfile(e)}>Edit</button>
|
||||
</section>
|
||||
|
||||
<section className='gh-portal-accountdetail-section'>
|
||||
<div className='flex flex-column flex-grow-1'>
|
||||
<h3 className='gh-portal-setting-heading'>Plan</h3>
|
||||
<div>
|
||||
<div className='gh-portal-accountdetail-data'>{this.getPlanLabel(plan)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={buttonStyle} onClick={e => this.openUpdatePlan(e)}>
|
||||
Change
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
|
||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Billing Info </div>
|
||||
<div style={{lineHeight: '18px'}}>
|
||||
<div style={{color: '#666666'}}> {this.getCardLabel({defaultCardLast4})} </div>
|
||||
<button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.openUpdatePlan(e)}>Change</button>
|
||||
</section>
|
||||
|
||||
<section className='gh-portal-accountdetail-section'>
|
||||
<div className='flex flex-column flex-grow-1'>
|
||||
<h3 className='gh-portal-setting-heading'>Billing Info</h3>
|
||||
<div>
|
||||
<div className='gh-portal-accountdetail-data'>{this.getCardLabel({defaultCardLast4})}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={buttonStyle} onClick={e => this.onEditBilling(e)}>
|
||||
Update
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: 'flex', alignItems: 'center', marginTop: '24px'}}>
|
||||
<div style={{display: 'flex', flexDirection: 'column', flexGrow: 1, marginTop: '5px'}}>
|
||||
<div style={{fontWeight: 'bold', fontSize: '13px'}}> Newsletter </div>
|
||||
<div style={{lineHeight: '18px'}}>
|
||||
<div style={{color: '#666666'}}> You are subscribed to email newsletters </div>
|
||||
<button className='gh-portal-btn gh-portal-btn-accountdetail' onClick={e => this.onEditBilling(e)}>Update</button>
|
||||
</section>
|
||||
|
||||
<section className='gh-portal-accountdetail-section'>
|
||||
<div className='flex flex-column flex-grow-1'>
|
||||
<h3 className='gh-portal-setting-heading'>Newsletter</h3>
|
||||
<div>
|
||||
<div className='gh-portal-accountdetail-data'>You are subscribed to email newsletters</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -271,7 +306,7 @@ class PaidAccountHomePage extends React.Component {
|
||||
this.onToggleSubscription(e, subscribed);
|
||||
}} checked={subscribed} />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -279,7 +314,7 @@ class PaidAccountHomePage extends React.Component {
|
||||
render() {
|
||||
const {member, brandColor} = this.context;
|
||||
return (
|
||||
<div style={{display: 'flex', flexDirection: 'column', color: '#313131'}}>
|
||||
<div>
|
||||
<UserHeader member={member} />
|
||||
{this.renderAccountWelcome()}
|
||||
<Divider />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user