Added pro upgrade modal component and styles

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

@@ -13,6 +13,7 @@ import FocalPointModal from './focal_point_modal';
 import HotkeysModal from './hotkeys_modal';
 import ComposeModal from './compose_modal';
 import UnauthorizedModal from './unauthorized_modal';
+import ProUpgradeModal from './pro_upgrade_modal';
 
 import {
   MuteModal,
@@ -34,11 +35,12 @@ const MODAL_COMPONENTS = {
   'EMBED': EmbedModal,
   'LIST_EDITOR': ListEditor,
   'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }),
-  'LIST_ADDER':ListAdder,
+  'LIST_ADDER': ListAdder,
   'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
   'STATUS_REVISION': StatusRevisionModal,
   'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
   'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
+  'PRO_UPGRADE': () => Promise.resolve({ default: ProUpgradeModal }),
 };
 
 export default class ModalRoot extends React.PureComponent {

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { me } from '../../../initial_state';
+import IconButton from '../../../components/icon_button';
+import Icon from '../../../components/icon';
+
+const messages = defineMessages({
+  close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+const mapStateToProps = state => {
+  return {
+    account: state.getIn(['accounts', me]),
+  };
+};
+
+class ProUpgradeModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+  };
+
+  onClickClose = () => {
+    this.props.onClose('PRO_UPGRADE');
+  };
+
+  render () {
+    const { intl } = this.props;
+
+    return (
+      <div className='modal-root__modal compose-modal pro-upgrade-modal'>
+        <div className='compose-modal__header'>
+          <h3 className='compose-modal__header__title'><FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' /></h3>
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+        </div>
+        <div className='compose-modal__content pro-upgrade-modal__content'>
+          <div>
+            <span className="pro-upgrade-modal__text">
+              <FormattedMessage id='pro_upgrade_modal.text' defaultMessage='Gab is fully funded by people like you. Please consider supporting us on our mission to defend free expression online for all people.' />
+              <FormattedMessage id='pro_upgrade_modal.benefits' defaultMessage='Here are just some of the benefits that thousands of GabPRO members receive:' />
+            </span>
+            <ul className="pro-upgrade-modal__list">
+              <li>Schedule Posts</li>
+              <li>Get Verified</li>
+              <li>Create Groups</li>
+              <li>Larger Video and Image Uploads</li>
+              <li>Receive the PRO Badge</li>
+              <li>Remove in-feed promotions</li>
+              <li>More value being added daily!</li>
+            </ul>
+            <a href='https://pro.gab.com' className='pro-upgrade-modal__button button'>
+              <Icon id='arrow-up' fixedWidth/>
+              <FormattedMessage id='promo.gab_pro' defaultMessage='Upgrade to GabPRO' />
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default injectIntl(connect(mapStateToProps)(ProUpgradeModal));

app/javascript/styles/gabsocial/components.scss

@@ -5254,3 +5254,33 @@ noscript {
     color: #000;
 	}
 }
+.pro-upgrade-modal {
+	&__content {
+    overflow-y: scroll !important;
+	}
+
+	&__text {
+		display: flex;
+		text-align: center;
+		padding: 10px 0 15px;
+		flex-direction: column;
+		margin-bottom: 10px;
+	}
+
+	&__list {
+    display: block;
+    margin-bottom: 25px;
+		width: 100%;
+		background-color: lighten($ui-base-color, 10%);
+    text-align: center;
+    padding: 20px 0;
+	}
+
+	&__button {
+		width: 100%;
+
+		.fa {
+			margin-right: 10px;
+		}
+	}
+}