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

UI refinements

Browse Source 
- removed cadence indicator from prices
- refined spacings for prices
This commit is contained in:
Peter Zimon 2021-05-18 16:43:30 +02:00
parent ef10fce723
commit afb3e9ad64
3 changed files with 68 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -304,7 +304,7 @@ const FrameStyles = `
} }
.gh-portal-container-wide { .gh-portal-container-wide {
width: 468px; width: 440px;
} }
.gh-portal-container-narrow { .gh-portal-container-narrow {

4
ghost/portal/src/components/common/PlansSection.js
View File

@ -65,7 +65,7 @@ export const PlanSectionStyles = `
display: flex; display: flex;
flex-direction: row; flex-direction: row;
min-height: 28px; min-height: 28px;
margin-top: 8px; margin-top: 2px;
} }
.gh-portal-plan-pricecontainer { .gh-portal-plan-pricecontainer {
@ -120,7 +120,6 @@ export const PlanSectionStyles = `
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
border-top: 1px solid var(--grey12); border-top: 1px solid var(--grey12);
margin-top: 12px;
padding-top: 12px; padding-top: 12px;
width: 100%; width: 100%;
} }
@ -364,7 +363,6 @@ function PriceLabel({currencySymbol, price, interval}) {
<span className={currencyClass}>{currencySymbol}</span> <span className={currencyClass}>{currencySymbol}</span>
<span className='gh-portal-plan-price'>{formatNumber(price)}</span> <span className='gh-portal-plan-price'>{formatNumber(price)}</span>
</div> </div>
{interval ? <div className='gh-portal-plan-priceinterval'>/{interval}</div> : null}
</div> </div>
); );
} }

132
ghost/portal/src/utils/fixtures.js
View File

@ -20,73 +20,73 @@ const prices = [
amount: 1500, amount: 1500,
type: 'recurring', type: 'recurring',
interval: 'month' interval: 'month'
},
{
id: '6086eb2a823dd7240afc8081',
stripe_price_id: 'price_1IkXMUFToJelIqAstq0R3Ero',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price USD',
currency: 'usd',
amount: 1100,
type: 'recurring',
interval: 'month'
},
{
id: '6086eb3e823dd7240afc8082',
stripe_price_id: 'price_1IkXMoFToJelIqAsTHKl5ELV',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price Comp',
currency: 'usd',
amount: 0,
type: 'recurring',
interval: 'month'
},
{
id: '6086eff0823dd7240afc8083',
stripe_price_id: 'price_1IkXgCFToJelIqAsTP3V1paQ',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Yearly',
currency: 'aud',
amount: 12200,
type: 'recurring',
interval: 'year'
},
{
id: '6086f4c9823dd7240afc8084',
stripe_price_id: 'price_1IkY0CFToJelIqAs5h7qlgP5',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price B',
currency: 'gbp',
amount: 12000,
type: 'recurring',
interval: 'year'
},
{
id: '6087c314d3e64b3266bf715e',
stripe_price_id: 'price_1IkljzFToJelIqAsPNGA2Lov',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price A',
currency: 'cad',
amount: 12200,
type: 'recurring',
interval: 'month'
},
{
id: '6087c36ed3e64b3266bf715f',
stripe_price_id: 'price_1IkllSFToJelIqAsvElnxOwF',
stripe_product_id: 'prod_JNGGBrrogUXcoM',
active: 1,
nickname: 'Test Price X',
currency: 'gbp',
amount: 12300,
type: 'recurring',
interval: 'month'
} }
// {
// id: '6086eb2a823dd7240afc8081',
// stripe_price_id: 'price_1IkXMUFToJelIqAstq0R3Ero',
// stripe_product_id: 'prod_JNGGBrrogUXcoM',
// active: 1,
// nickname: 'Test Price USD',
// currency: 'usd',
// amount: 1100,
// type: 'recurring',
// interval: 'month'
// },
// {
// id: '6086eb3e823dd7240afc8082',
// stripe_price_id: 'price_1IkXMoFToJelIqAsTHKl5ELV',
// stripe_product_id: 'prod_JNGGBrrogUXcoM',
// active: 1,
// nickname: 'Test Price Comp',
// currency: 'usd',
// amount: 0,
// type: 'recurring',
// interval: 'month'
// },
// {
// id: '6086eff0823dd7240afc8083',
// stripe_price_id: 'price_1IkXgCFToJelIqAsTP3V1paQ',
// stripe_product_id: 'prod_JNGGBrrogUXcoM',
// active: 1,
// nickname: 'Yearly',
// currency: 'aud',
// amount: 12200,
// type: 'recurring',
// interval: 'year'
// },
// {
// id: '6086f4c9823dd7240afc8084',
// stripe_price_id: 'price_1IkY0CFToJelIqAs5h7qlgP5',
// stripe_product_id: 'prod_JNGGBrrogUXcoM',
// active: 1,
// nickname: 'Test Price B',
// currency: 'gbp',
// amount: 12000,
// type: 'recurring',
// interval: 'year'
// },
// {
// id: '6087c314d3e64b3266bf715e',
// stripe_price_id: 'price_1IkljzFToJelIqAsPNGA2Lov',
// stripe_product_id: 'prod_JNGGBrrogUXcoM',
// active: 1,
// nickname: 'Test Price A',
// currency: 'cad',
// amount: 12200,
// type: 'recurring',
// interval: 'month'
// },
// {
// id: '6087c36ed3e64b3266bf715f',
// stripe_price_id: 'price_1IkllSFToJelIqAsvElnxOwF',
// stripe_product_id: 'prod_JNGGBrrogUXcoM',
// active: 1,
// nickname: 'Test Price X',
// currency: 'gbp',
// amount: 12300,
// type: 'recurring',
// interval: 'month'
// }
]; ];
const priceIds = prices.map(d => d.id); const priceIds = prices.map(d => d.id);