Added expenses to sidebar in app

This commit is contained in:
mgabdev
2020-01-21 16:07:58 -05:00
parent 5a8d386683
commit 05d4c921a8
12 changed files with 146 additions and 8 deletions

View File

@@ -0,0 +1,28 @@
import React from 'react';
import { monthlyExpensesComplete } from '../../../initial_state';
export default class ProgressPanel extends React.PureComponent {
render() {
if (!monthlyExpensesComplete) return null;
const style = {
width: `${monthlyExpensesComplete}%`,
};
return (
<div className='wtf-panel progress-panel'>
<div className='wtf-panel-header progress-panel-header'>
<div className='wtf-panel-header__label'>Gab's Operational Expenses</div>
</div>
<div className='wtf-panel__content progress-panel__content'>
<span className='progress-panel__text'>We are 100% funded by you.</span>
<div className='progress-panel__bar-container'>
<a className='progress-panel__bar' style={style} href='https://shop.dissenter.com/category/donations'>
<span className='progress-panel__bar__text'>{monthlyExpensesComplete}% covered this month</span>
</a>
</div>
</div>
</div>
)
}
}

View File

@@ -35,6 +35,13 @@ class PromoPanel extends React.PureComponent {
}
<div className={`promo-panel-item ${!isPro ? 'promo-panel-item--top-rounded' : ''}`}>
<a className='promo-panel-item__btn promo-panel-item__btn--special' href='https://shop.dissenter.com/category/donations'>
<Icon id='heart' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.donation' defaultMessage='Make a Donation' />
</a>
</div>
<div className='promo-panel-item'>
<a className='promo-panel-item__btn' href='https://shop.dissenter.com'>
<Icon id='shopping-cart' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.store' defaultMessage='Store - Buy Merch' />