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

Style updates for change plan

Browse source 
no refs.
This commit is contained in:
Peter Zimon 2020-09-15 17:16:45 +02:00
parent 59787099e2
commit 2dd9190bf2
4 changed files with 77 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -357,7 +357,7 @@ const GlobalStyles = `
*/
.gh-portal-content {
overflow-y: scroll;
padding: 32px;
padding: 28px 32px 32px;
max-height: calc(100vh - 12vw);
}
@ -387,7 +387,7 @@ const GlobalStyles = `
.gh-portal-closeicon-container {
position: absolute;
top: 20px;
top: 18px;
right: 20px;
z-index: 999;
}

16
ghost/portal/src/components/common/ActionButton.js
View file

@ -24,6 +24,10 @@ export const ActionButtonStyles = `
border-radius: 5px;
}
.gh-portal-btn-destructive:hover {
color: var(--red);
}
.gh-portal-loadingicon {
position: absolute;
left: 50%;
@ -69,9 +73,17 @@ const Styles = ({brandColor, retry, disabled, style = {}, isPrimary}) => {
};
};
function ActionButton({label, onClick, disabled, retry, brandColor, isRunning, isPrimary = true, style}) {
function ActionButton({label, onClick, disabled, retry, brandColor, isRunning, isPrimary = true, isDestructive = false, style}) {
let Style = Styles({disabled, retry, brandColor, style, isPrimary});
const className = isPrimary ? 'gh-portal-btn gh-portal-btn-main gh-portal-btn-primary' : 'gh-portal-btn';
let className = 'gh-portal-btn';
if (isPrimary) {
className += ' gh-portal-btn-main gh-portal-btn-primary';
}
if (isDestructive) {
className += ' gh-portal-btn-destructive';
}
const loaderClassName = isPrimary ? 'gh-portal-loadingicon' : 'gh-portal-loadingicon dark';
return (
<button className={className} style={Style.button} onClick={e => onClick(e)} disabled={disabled}>

58
ghost/portal/src/components/common/PlansSection.js
View file

@ -34,12 +34,12 @@ export const PlanSectionStyles = `
pointer-events: none;
}
.gh-portal-plan-section:first-of-type.checked::before {
.gh-portal-plan-section:first-of-type::before {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.gh-portal-plan-section:last-of-type.checked::before {
.gh-portal-plan-section:last-of-type::before {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
@ -158,6 +158,57 @@ export const PlanSectionStyles = `
.gh-portal-content.signup .gh-portal-section.singleplan .gh-portal-plan-name {
margin-top: 0;
}
.gh-portal-plan-section:not(.checked)::before {
position: absolute;
display: block;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
content: "";
z-index: 999;
border: 1px solid var(--brandcolor);
pointer-events: none;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.gh-portal-plan-section:not(.checked):hover::before {
opacity: 0.5;
}
.gh-portal-plan-section:not(.checked).show-check-onhover .checkmark:before {
position: absolute;
display: block;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: var(--brandcolor);
border-radius: 999px;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.gh-portal-plan-section:not(.checked).show-check-onhover:hover .checkmark:before {
opacity: 0.2;
}
.gh-portal-plan-section:not(.checked).show-check-onhover .checkmark:after {
display: block;
opacity: 0;
transition: all 0.2s ease-in-out;
}
.gh-portal-plan-section:not(.checked).show-check-onhover:hover .checkmark:after {
opacity: 1.0;
}
.gh-portal-plans-container.hide-checkboxes .gh-portal-plan-checkbox {
display: none;
}
`;
function Checkbox({name, onPlanSelect, isChecked}) {
@ -234,10 +285,11 @@ function PlansSection({plans, showLabel = true, selectedPlan, onPlanSelect, styl
if (!plans || plans.length === 0 || (plans.length === 1 && plans[0].type === 'free')) {
return null;
}
const plansContainerClass = selectedPlan ? '' : 'hide-checkboxes';
return (
<section>
<PlanLabel showLabel={showLabel} />
<div className='gh-portal-plans-container'>
<div className={'gh-portal-plans-container ' + plansContainerClass}>
<PlanOptions plans={plans} onPlanSelect={onPlanSelect} selectedPlan={selectedPlan} />
</div>
</section>

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

@ -7,11 +7,12 @@ import {getMemberSubscription, getPlanFromSubscription, getSitePlans, getSubscri
export const AccountPlanPageStyles = `
.gh-portal-accountplans-main {
margin-top: 32px;
margin-top: 24px;
margin-bottom: 0;
}
.gh-portal-expire-container {
margin: -8px 0 0;
margin: 24px 0 0;
}
`;
@ -57,6 +58,7 @@ export const CancelContinueSubscription = ({member, onCancelContinueSubscription
const isRunning = ['cancelSubscription:running'].includes(action);
const disabled = (isRunning) ? true : false;
const isPrimary = !!subscription.cancel_at_period_end;
const isDestructive = !subscription.cancelAtPeriodEnd;
const CancelNotice = () => {
if (!subscription.cancel_at_period_end) {
@ -87,6 +89,7 @@ export const CancelContinueSubscription = ({member, onCancelContinueSubscription
isRunning={isRunning}
disabled={disabled}
isPrimary={isPrimary}
isDestructive={isDestructive}
brandColor={brandColor}
label={label}
style={{
@ -98,7 +101,7 @@ export const CancelContinueSubscription = ({member, onCancelContinueSubscription
};
const Header = ({member, brandColor, onBack, showConfirmation, confirmationType}) => {
let title = member.paid ? 'Choose Plan' : 'Choose your subscription';
let title = member.paid ? 'Choose plan' : 'Choose your plan';
if (showConfirmation) {
title = getConfirmationPageTitle({confirmationType});
}