random-mirrors/gab-social
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated promo panel to include button for upgrading to pro

Browse Source
This commit is contained in:
mgabdev 2019-09-18 19:45:59 -04:00
parent 9195193d80
commit f7db2ec2f2
2 changed files with 49 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/javascript/gabsocial/features/ui/components/promo_panel.js
View File

@ -1,13 +1,40 @@
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' />

21
app/javascript/styles/gabsocial/components.scss
View File

@ -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;