Commit f7db2ec2 authored by mgabdev's avatar mgabdev

Updated promo panel to include button for upgrading to pro

parent 9195193d
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import Icon from 'gabsocial/components/icon';
import { connect } from 'react-redux';
import { me } from '../../../initial_state';
const mapStateToProps = state => {
return {
isPro: state.getIn(['accounts', me, 'is_pro']),
};
};
export default
@connect(mapStateToProps)
class PromoPanel extends React.PureComponent {
static propTypes = {
isPro: PropTypes.bool,
};
export default class PromoPanel extends React.PureComponent {
render() {
const { isPro } = this.props;
return (
<div className='wtf-panel promo-panel'>
<div className='promo-panel__container'>
<div className='promo-panel-item'>
{
!isPro &&
<div className='promo-panel-item promo-panel-item--highlighted'>
<a className='promo-panel-item__btn' href='https://pro.gab.com'>
<Icon id='arrow-up' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' />
</a>
</div>
}
<div className={`promo-panel-item ${!isPro ? 'promo-panel-item--top-rounded' : ''}`}>
<a className='promo-panel-item__btn' href='https://news.gab.com'>
<Icon id='align-left' className='promo-panel-item__icon' fixedWidth />
<FormattedMessage id='promo.gab_news' defaultMessage='Gab News' />
......
......@@ -1649,7 +1649,9 @@ a.account__display-name {
}
.promo-panel {
margin-top: 10px;
margin-top: 10px;
background-color: transparent !important;
overflow: hidden;
}
.promo-panel-item {
......@@ -1657,6 +1659,23 @@ a.account__display-name {
height: 42px;
line-height: 42px;
border-bottom: 1px solid lighten($ui-base-color, 8%);
background: $gab-background-container;
body.theme-gabsocial-light & {
@include light-theme-shadow();
background: $gab-background-container-light;
}
&--highlighted {
background-color: #30CE7D;
border-radius: 10px;
font-weight: 600;
margin-bottom: 10px;
}
&--top-rounded {
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
&:last-of-type {
border-bottom: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment