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

Account page refinements

Browse source 
no refs.
- removed back button from detail screens
- refined layout
- made switch smaller
This commit is contained in:
Peter Zimon 2020-07-22 17:42:42 +02:00
parent d649605f22
commit c3cb46da02
6 changed files with 38 additions and 34 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.paid, member: Fixtures.member.paid,
page: 'signup' page: 'accountHome'
}; };
} }
return {}; return {};

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

@ -158,7 +158,7 @@ export const GlobalStyles = `
margin-bottom: 2px; margin-bottom: 2px;
font-weight: 500; font-weight: 500;
color: #333; color: #333;
letter-spacing: 0.5px; letter-spacing: 0.35px;
} }
/* Buttons /* Buttons
@ -169,16 +169,16 @@ export const GlobalStyles = `
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 1.8rem; padding: 0 1.8rem;
height: 44px; height: 42px;
border: none; border: none;
font-size: 1.5rem; font-size: 1.4rem;
line-height: 1em; line-height: 1em;
font-weight: 500; font-weight: 500;
letter-spacing: 0.2px; letter-spacing: 0.2px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
border-radius: 5px; border-radius: 4px;
cursor: pointer; cursor: pointer;
transition: .4s ease; transition: .4s ease;
box-shadow: none; box-shadow: none;
@ -265,7 +265,7 @@ export const GlobalStyles = `
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
margin: 0 0 20px; margin: 0 0 20px;
} }
@ -279,6 +279,10 @@ export const GlobalStyles = `
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.gh-portal-detail-footer .gh-portal-btn {
min-width: 90px;
}
`; `;
// Append all styles as string which we want to pass to iframe // Append all styles as string which we want to pass to iframe

12
ghost/portal/src/components/common/Switch.js
View file

@ -6,8 +6,8 @@ export const SwitchStyles = `
cursor: pointer; cursor: pointer;
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 50px !important; width: 36px !important;
height: 28px !important; height: 22px !important;
} }
.gh-portal-for-switch label p, .gh-portal-for-switch label p,
@ -33,8 +33,8 @@ export const SwitchStyles = `
background: #f4f4f4; background: #f4f4f4;
border: 1px solid #e4e4e4; border: 1px solid #e4e4e4;
transition: .3s; transition: .3s;
width: 50px !important; width: 36px !important;
height: 28px !important; height: 22px !important;
border-radius: 999px; border-radius: 999px;
transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out; transition: background 0.15s ease-in-out, border-color 0.15s ease-in-out;
} }
@ -47,8 +47,8 @@ export const SwitchStyles = `
.gh-portal-for-switch .input-toggle-component:before { .gh-portal-for-switch .input-toggle-component:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 24px !important; height: 18px !important;
width: 24px !important; width: 18px !important;
left: 2px !important; left: 2px !important;
top: 2px !important; top: 2px !important;
background-color: white; background-color: white;

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

@ -59,9 +59,9 @@ export const AccountHomePageStyles = `
} }
.gh-portal-btn-accountdetail { .gh-portal-btn-accountdetail {
height: 36px; height: 38px;
font-size: 1.3rem; font-size: 1.3rem;
width: 88px; width: 78px;
padding: 0 12px; padding: 0 12px;
} }
@ -314,7 +314,7 @@ class PaidAccountHomePage extends React.Component {
return ( return (
<div> <div>
<UserHeader member={member} brandColor={brandColor} /> <UserHeader member={member} brandColor={brandColor} />
{this.renderAccountWelcome()} {/* {this.renderAccountWelcome()} */}
<Divider /> <Divider />
{this.renderAccountDetails()} {this.renderAccountDetails()}
<Divider /> <Divider />

23
ghost/portal/src/components/pages/AccountPlanPage.js
View file

@ -1,7 +1,6 @@
import AppContext from '../../AppContext'; import AppContext from '../../AppContext';
import ActionButton from '../common/ActionButton'; import ActionButton from '../common/ActionButton';
import PlansSection from '../common/PlansSection'; import PlansSection from '../common/PlansSection';
import {ReactComponent as ArrowLeftIcon} from '../../images/icons/arrow-left.svg';
const React = require('react'); const React = require('react');
@ -38,7 +37,6 @@ export default class AccountPlanPage extends React.Component {
renderHeader() { renderHeader() {
return ( return (
<div className='gh-portal-detail-header'> <div className='gh-portal-detail-header'>
<button className='gh-portal-btn gh-portal-btn-icon gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}><ArrowLeftIcon /> Back</button>
<h3 className='gh-portal-maiin-title'>Choose plan</h3> <h3 className='gh-portal-maiin-title'>Choose plan</h3>
</div> </div>
); );
@ -93,13 +91,18 @@ export default class AccountPlanPage extends React.Component {
]; ];
return ( return (
<div> <div>
<PlansSection <div className='gh-portal-section'>
showLabel={false} <PlansSection
plans={plansData} showLabel={false}
selectedPlan={this.state.plan} plans={plansData}
onPlanSelect={(e, name) => this.onPlanSelect(e, name)} selectedPlan={this.state.plan}
/> onPlanSelect={(e, name) => this.onPlanSelect(e, name)}
{this.renderActionButton()} />
</div>
<div className='flex items-center justify-between flex-grow-1'>
<button className='gh-portal-btn' onClick={e => this.onBack(e)}>Cancel</button>
{this.renderActionButton()}
</div>
</div> </div>
); );
} }
@ -110,7 +113,7 @@ export default class AccountPlanPage extends React.Component {
const disabled = (isRunning || !this.state.plan) ? true : false; const disabled = (isRunning || !this.state.plan) ? true : false;
return ( return (
<ActionButton <ActionButton
style={{button: {marginTop: '12px'}}} style={{button: {width: 'unset'}}}
onClick={e => this.onPlanCheckout(e)} onClick={e => this.onPlanCheckout(e)}
disabled={disabled} disabled={disabled}
brandColor={this.context.brandColor} brandColor={this.context.brandColor}

15
ghost/portal/src/components/pages/AccountProfilePage.js
View file

@ -3,7 +3,6 @@ import MemberAvatar from '../common/MemberGravatar';
import ActionButton from '../common/ActionButton'; import ActionButton from '../common/ActionButton';
import InputField from '../common/InputField'; import InputField from '../common/InputField';
import Switch from '../common/Switch'; import Switch from '../common/Switch';
import {ReactComponent as ArrowLeftIcon} from '../../images/icons/arrow-left.svg';
const React = require('react'); const React = require('react');
@ -58,7 +57,7 @@ export default class AccountProfilePage extends React.Component {
const disabled = isRunning ? true : false; const disabled = isRunning ? true : false;
return ( return (
<ActionButton <ActionButton
style={{button: {width: '120px'}}} style={{button: {width: 'unset'}}}
onClick={e => this.onProfileSave(e)} onClick={e => this.onProfileSave(e)}
disabled={disabled} disabled={disabled}
brandColor={this.context.brandColor} brandColor={this.context.brandColor}
@ -75,10 +74,9 @@ export default class AccountProfilePage extends React.Component {
renderAccountFooter() { renderAccountFooter() {
return ( return (
<div> <div className='flex flex-grow-1 justify-between gh-portal-detail-footer'>
<div style={{display: 'flex', flexGrow: 1, justifyContent: 'flex-end'}}> <button className='gh-portal-btn' onClick={e => this.onBack(e)}>Cancel</button>
{this.renderSaveButton()} {this.renderSaveButton()}
</div>
</div> </div>
); );
} }
@ -86,8 +84,7 @@ export default class AccountProfilePage extends React.Component {
renderHeader() { renderHeader() {
return ( return (
<div className='gh-portal-detail-header'> <div className='gh-portal-detail-header'>
<button className='gh-portal-btn gh-portal-btn-icon gh-portal-btn-back' style={{color: this.context.brandColor}} onClick={e => this.onBack(e)}><ArrowLeftIcon /> Back</button> <h3 className='gh-portal-main-title'>Account settings</h3>
<h3 className='gh-portal-maiin-title'>Account settings</h3>
</div> </div>
); );
} }
@ -152,7 +149,7 @@ export default class AccountProfilePage extends React.Component {
renderProfileData() { renderProfileData() {
return ( return (
<div> <div className='gh-portal-section'>
{this.renderInputField('name')} {this.renderInputField('name')}
{this.renderInputField('email')} {this.renderInputField('email')}
</div> </div>