Updated promo panel to include button for upgrading to pro

app/javascript/gabsocial/features/ui/components/promo_panel.js

@@ -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' />

app/javascript/styles/gabsocial/components.scss

@@ -1650,6 +1650,8 @@ a.account__display-name {
 
 .promo-panel {
 	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;