UI refinements

- 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

View File

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

View File

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

View File

@ -20,73 +20,73 @@ const prices = [
amount: 1500,
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'
}
// {
// 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);