diff --git a/app/javascript/gabsocial/features/ui/components/modal_root.js b/app/javascript/gabsocial/features/ui/components/modal_root.js index d1de67e3..a9c3945a 100644 --- a/app/javascript/gabsocial/features/ui/components/modal_root.js +++ b/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 { diff --git a/app/javascript/gabsocial/features/ui/components/pro_upgrade_modal.js b/app/javascript/gabsocial/features/ui/components/pro_upgrade_modal.js new file mode 100644 index 00000000..468f23ac --- /dev/null +++ b/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 ( +
+
+

+ +
+
+
+ + + + +
    +
  • Schedule Posts
  • +
  • Get Verified
  • +
  • Create Groups
  • +
  • Larger Video and Image Uploads
  • +
  • Receive the PRO Badge
  • +
  • Remove in-feed promotions
  • +
  • More value being added daily!
  • +
+ + + + +
+
+
+ ); + } +} + +export default injectIntl(connect(mapStateToProps)(ProUpgradeModal)); diff --git a/app/javascript/styles/gabsocial/components.scss b/app/javascript/styles/gabsocial/components.scss index 07b082ad..b61959aa 100644 --- a/app/javascript/styles/gabsocial/components.scss +++ b/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; + } + } +} \ No newline at end of file