Progress

app/javascript/gabsocial/components/modal/all_timeline_settings_modal.js

@@ -0,0 +1,59 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Button from '../button'
+import Text from '../text'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  text: { 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.' },
+  benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
+})
+
+export default
+@injectIntl
+class HomeTimelineSettingsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <div>
+        <Text>
+          {intl.formatMessage(messages.text)}
+        </Text>
+        <Text>
+          {intl.formatMessage(messages.benefits)}
+        </Text>
+
+        <div className={[_s.default, _s.my10].join(' ')}>
+          <Text>• Schedule Posts</Text>
+          <Text>• Get Verified</Text>
+          <Text>• Create Groups</Text>
+          <Text>• Larger Video and Image Uploads</Text>
+          <Text>• Receive the PRO Badge</Text>
+          <Text>• Remove in-feed promotions</Text>
+        </div>
+
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          icon='pro'
+          href='https://pro.gab.com'
+          className={_s.justifyContentCenter}
+          iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.title)}
+          </Text>
+        </Button>
+
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/block_account_modal.js

@@ -0,0 +1,73 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { makeGetAccount } from '../../selectors'
+import { closeModal } from '../../actions/modal'
+import { blockAccount } from '../../actions/accounts'
+import ConfirmationModal from './confirmation_modal'
+
+const messages = defineMessages({
+  title: { id: 'block_title', defaultMessage: 'Block {name}' },
+  muteMessage: { id: 'confirmations.block.message', defaultMessage: 'Are you sure you want to block {name}?' },
+  block: { id: 'confirmations.block.confirm', defaultMessage: 'Block' },
+})
+
+const mapStateToProps = (state, { accountId }) => {
+  const getAccount = makeGetAccount()
+
+  return {
+    account: getAccount(state, accountId),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account) {
+      dispatch(blockAccount(account.get('id')))
+    },
+    onClose() {
+      dispatch(closeModal())
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class BlockAccountModal extends PureComponent {
+
+  static propTypes = {
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  handleClick = () => {
+    this.props.onConfirm(this.props.account)
+  }
+
+  handleClose = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    const title = intl.formatMessage(messages.title, {
+      name: !!account ? account.get('acct') : '',
+    })
+    const message = intl.formatMessage(messages.muteMessage, {
+      name: !!account ? account.get('acct') : '',
+    })
+
+    return (
+      <ConfirmationModal
+        title={title}
+        message={message}
+        confirm={intl.formatMessage(messages.block)}
+        onClose={this.handleClose}
+        onConfirm={this.handleClick}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/block_domain_modal.js

@@ -0,0 +1,72 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class BlockDomainModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    // dispatch(openModal('CONFIRM', {
+    //   message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
+    //   confirm: intl.formatMessage(messages.blockDomainConfirm),
+    //   onConfirm: () => dispatch(blockDomain(domain)),
+    // }));
+
+    return (
+      <ConfirmationModal
+        title={`Mute @${account.get('acct')}`}
+        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
+        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onConfirm={() => {
+          // dispatch(blockDomain(domain))
+          // dispatch(blockDomain(domain))
+        }}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/group_adder_modal.js

@@ -0,0 +1,72 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class UnfollowModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    // , {
+    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+    //   confirm: intl.formatMessage(messages.unfollowConfirm),
+    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
+    // }));
+
+    return (
+      <ConfirmationModal
+        title={`Mute @${account.get('acct')}`}
+        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
+        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onConfirm={() => {
+          // dispatch(blockDomain(domain))
+          // dispatch(blockDomain(domain))
+        }}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/group_editor_modal.js

@@ -0,0 +1,72 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class UnfollowModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    // , {
+    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+    //   confirm: intl.formatMessage(messages.unfollowConfirm),
+    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
+    // }));
+
+    return (
+      <ConfirmationModal
+        title={`Mute @${account.get('acct')}`}
+        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
+        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onConfirm={() => {
+          // dispatch(blockDomain(domain))
+          // dispatch(blockDomain(domain))
+        }}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/group_timeline_settings_modal.js

@@ -0,0 +1,59 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Button from '../button'
+import Text from '../text'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  text: { 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.' },
+  benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
+})
+
+export default
+@injectIntl
+class HomeTimelineSettingsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <div>
+        <Text>
+          {intl.formatMessage(messages.text)}
+        </Text>
+        <Text>
+          {intl.formatMessage(messages.benefits)}
+        </Text>
+
+        <div className={[_s.default, _s.my10].join(' ')}>
+          <Text>• Schedule Posts</Text>
+          <Text>• Get Verified</Text>
+          <Text>• Create Groups</Text>
+          <Text>• Larger Video and Image Uploads</Text>
+          <Text>• Receive the PRO Badge</Text>
+          <Text>• Remove in-feed promotions</Text>
+        </div>
+
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          icon='pro'
+          href='https://pro.gab.com'
+          className={_s.justifyContentCenter}
+          iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.title)}
+          </Text>
+        </Button>
+
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/home_timeline_settings_modal.js

@@ -1,73 +1,119 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage } from 'react-intl';
-import Video from '../../features/video';
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import { closeModal } from '../../actions/modal'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import SettingSwitch from '../setting_switch'
+import Text from '../text'
 
-export const previewState = 'previewVideoModal';
+const messages = defineMessages({
+  title: { id: 'home_timeline_settings', defaultMessage: 'Home Timeline Settings' },
+  saveAndClose: { id: 'saveClose', defaultMessage: 'Save & Close' },
+  showVideos: { id: 'home.column_settings.show_videos', defaultMessage: 'Show videos' },
+  showPhotos: { id: 'home.column_settings.show_photos', defaultMessage: 'Show photos' },
+  showPolls: { id: 'home.column_settings.show_polls', defaultMessage: 'Show polls' },
+  showReposts: { id: 'home.column_settings.show_reposts', defaultMessage: 'Show comments' },
+  showReplies: { id: 'home.column_settings.show_replies', defaultMessage: 'Show replies' },
+})
 
-export default class VideoModal extends ImmutablePureComponent {
+const mapStateToProps = state => ({
+  settings: state.getIn(['settings', 'home']),
+})
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onChange(key, checked) {
+      dispatch(changeSetting(['home', ...key], checked))
+    },
+    onSave() {
+      dispatch(saveSettings())
+      dispatch(closeModal())
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class HomeTimelineSettingsModal extends ImmutablePureComponent {
 
   static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    status: ImmutablePropTypes.map,
-    time: PropTypes.number,
-    onClose: PropTypes.func.isRequired,
-  };
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  componentDidMount () {
-    if (this.context.router) {
-      const history = this.context.router.history;
-
-      history.push(history.location.pathname, previewState);
-
-      this.unlistenHistory = history.listen(() => {
-        this.props.onClose();
-      });
-    }
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
   }
 
-  componentWillUnmount () {
-    if (this.context.router) {
-      this.unlistenHistory();
-
-      if (this.context.router.history.location.state === previewState) {
-        this.context.router.history.goBack();
-      }
-    }
+  handleSaveAndClose = () => {
+    this.props.onSave()
   }
 
-  handleStatusClick = e => {
-    if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      this.context.router.history.push(`/${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
-    }
-  }
-
-  render () {
-    const { media, status, time, onClose } = this.props;
-
-    const link = status && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>;
+  render() {
+    const { intl, settings, onChange } = this.props
 
     return (
-      <div className='modal-root__modal video-modal'>
-        <div>
-          <Video
-            preview={media.get('preview_url')}
-            blurhash={media.get('blurhash')}
-            src={media.get('url')}
-            startTime={time}
-            onCloseVideo={onClose}
-            link={link}
-            detailed
-            alt={media.get('description')}
+      <ModalLayout
+        width='320'
+        title={intl.formatMessage(messages.title)}
+      >
+      
+        <div className={[_s.default, _s.my10, _s.pb10].join(' ')}>
+          <SettingSwitch
+            prefix='home_timeline'
+            settings={settings}
+            settingPath={['shows', 'polls']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showPolls)}
+          />
+
+          <SettingSwitch
+            prefix='home_timeline'
+            settings={settings}
+            settingPath={['shows', 'photos']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showPhotos)}
+          />
+
+          <SettingSwitch
+            prefix='home_timeline'
+            settings={settings}
+            settingPath={['shows', 'videos']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showVideos)}
+          />
+
+          <SettingSwitch
+            prefix='home_timeline'
+            settings={settings}
+            settingPath={['shows', 'repost']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showReposts)}
+          />
+
+          <SettingSwitch
+            prefix='home_timeline'
+            settings={settings}
+            settingPath={['shows', 'reply']}
+            onChange={onChange}
+            label={intl.formatMessage(messages.showReplies)}
           />
         </div>
-      </div>
-    );
-  }
 
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          className={_s.justifyContentCenter}
+          onClick={this.handleSaveAndClose}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.saveAndClose)}
+          </Text>
+        </Button>
+
+      </ModalLayout>
+    )
+  }
 }

app/javascript/gabsocial/components/modal/list_adder_modal.js

@@ -0,0 +1,72 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class UnfollowModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    // , {
+    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+    //   confirm: intl.formatMessage(messages.unfollowConfirm),
+    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
+    // }));
+
+    return (
+      <ConfirmationModal
+        title={`Mute @${account.get('acct')}`}
+        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
+        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onConfirm={() => {
+          // dispatch(blockDomain(domain))
+          // dispatch(blockDomain(domain))
+        }}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/list_editor_modal.js

@@ -0,0 +1,72 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class UnfollowModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    // , {
+    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+    //   confirm: intl.formatMessage(messages.unfollowConfirm),
+    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
+    // }));
+
+    return (
+      <ConfirmationModal
+        title={`Mute @${account.get('acct')}`}
+        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
+        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onConfirm={() => {
+          // dispatch(blockDomain(domain))
+          // dispatch(blockDomain(domain))
+        }}
+      />
+    )
+  }
+
+}

app/javascript/gabsocial/components/modal/modal_layout.js

@@ -1,8 +1,11 @@
 import { defineMessages, injectIntl } from 'react-intl'
+import classNames from 'classnames/bind'
 import Button from '../button'
 import Block from '../block'
 import Heading from '../heading'
 
+const cx = classNames.bind(_s)
+
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
 })
@@ -14,6 +17,13 @@ class ModalLayout extends PureComponent {
     title: PropTypes.string,
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
+    width: PropTypes.number,
+    hideClose: PropTypes.bool,
+    noPadding: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    width: 600,
   }
 
   render() {
@@ -22,26 +32,38 @@ class ModalLayout extends PureComponent {
       children,
       intl,
       onClose,
+      width,
+      hideClose,
+      noPadding
     } = this.props
 
+    const childrenContainerClasses = cx({
+      default: 1,
+      px15: !noPadding,
+      py10: !noPadding,
+    })
+
     return (
-      <div className={[_s.width645PX].join(' ')}>
+      <div style={{width: `${width}px`}}>
         <Block>
           <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
             <Heading size='h3'>
               {title}
             </Heading>
-            <Button
-              backgroundColor='none'
-              title={intl.formatMessage(messages.close)}
-              className={_s.marginLeftAuto}
-              onClick={onClose}
-              icon='close'
-              iconWidth='10px'
-              iconWidth='10px'
-            />
+            {
+              !hideClose &&
+              <Button
+                backgroundColor='none'
+                title={intl.formatMessage(messages.close)}
+                className={_s.marginLeftAuto}
+                onClick={onClose}
+                icon='close'
+                iconWidth='10px'
+                iconWidth='10px'
+              />
+            }
           </div>
-          <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
+          <div className={childrenContainerClasses}>
             {children}
           </div>
         </Block>

app/javascript/gabsocial/components/modal/modal_root.js

@@ -9,37 +9,51 @@ import {
   // ListAdder,
   StatusRevisionModal,
 } from '../../features/ui/util/async-components'
+
 import ModalBase from './modal_base'
 import BundleModalError from '../bundle_modal_error'
+
 import ActionsModal from './actions_modal'
-import MediaModal from './media_modal'
-import VideoModal from './video_modal'
+import BlockAccountModal from './block_account_modal'
+import BlockDomainModal from './block_domain_modal'
 import BoostModal from './boost_modal'
-import ConfirmationModal from './confirmation_modal'
-import HotkeysModal from './hotkeys_modal'
 import ComposeModal from './compose_modal'
-import UnauthorizedModal from './unauthorized_modal'
-import ProUpgradeModal from './pro_upgrade_modal'
+import ConfirmationModal from './confirmation_modal'
+import GroupAdderModal from './group_adder_modal'
+import GroupEditorModal from './group_editor_modal'
+import HomeTimelineSettingsModal from './home_timeline_settings_modal'
+import HotkeysModal from './hotkeys_modal'
+import ListAdderModal from './list_adder_modal'
+import ListEditorModal from './list_editor_modal'
+import MediaModal from './media_modal'
 import ModalLoading from './modal_loading'
+import ProUpgradeModal from './pro_upgrade_modal'
+import VideoModal from './video_modal'
+import UnauthorizedModal from './unauthorized_modal'
+import UnfollowModal from './unfollow_modal'
 
 const MODAL_COMPONENTS = {
-  'ACTIONS': () => Promise.resolve({ default: ActionsModal }),
-  'BOOST': () => Promise.resolve({ default: BoostModal }),
-  'COMPOSE': () => Promise.resolve({ default: ComposeModal }),
-  'CONFIRM': () => Promise.resolve({ default: ConfirmationModal }),
-  'EMBED': EmbedModal,
-  'HOTKEYS': () => Promise.resolve({ default: HotkeysModal }),
-  'MEDIA': () => Promise.resolve({ default: MediaModal }),
+  ACTIONS: () => Promise.resolve({ default: ActionsModal }),
+  BLOCK_ACCOUNT: () => Promise.resolve({ default: BlockAccountModal }),
+  BLOCK_DOMAIN: () => Promise.resolve({ default: BlockDomainModal }),
+  BOOST: () => Promise.resolve({ default: BoostModal }),
+  COMPOSE: () => Promise.resolve({ default: ComposeModal }),
+  CONFIRM: () => Promise.resolve({ default: ConfirmationModal }),
+  EMBED: () => Promise.resolve({ default: EmbedModal }),
+  GROUP_EDITOR: () => Promise.resolve({ default: GroupEditorModal }),
+  GROUP_ADDER: () => Promise.resolve({ default: GroupAdderModal }),
+  HOME_TIMELINE_SETTINGS: () => Promise.resolve({ default: HomeTimelineSettingsModal }),
+  HOTKEYS: () => Promise.resolve({ default: HotkeysModal }),
+  LIST_EDITOR: () => Promise.resolve({ default: ListEditorModal }),
+  LIST_ADDER: () => Promise.resolve({ default: ListAdderModal }),
+  MEDIA: () => Promise.resolve({ default: MediaModal }),
   'MUTE': MuteModal,
-  'PRO_UPGRADE': () => Promise.resolve({ default: ProUpgradeModal }),
-  'REPORT': ReportModal,
-  'STATUS_REVISION': StatusRevisionModal,
-  'UNAUTHORIZED': () => Promise.resolve({ default: UnauthorizedModal }),
-  'VIDEO': () => Promise.resolve({ default: VideoModal }),
-  // 'LIST_EDITOR': ListEditor,
-  // 'LIST_ADDER': ListAdder,
-  // group create
-  // group members
+  PRO_UPGRADE: () => Promise.resolve({ default: ProUpgradeModal }),
+  REPORT: ReportModal,
+  STATUS_REVISION: () => Promise.resolve({ default: StatusRevisionModal }),
+  UNAUTHORIZED: () => Promise.resolve({ default: UnauthorizedModal }),
+  UNFOLLOW: () => Promise.resolve({ default: UnfollowModal }),
+  VIDEO: () => Promise.resolve({ default: VideoModal }),
 }
 
 const mapStateToProps = state => ({
@@ -48,9 +62,9 @@ const mapStateToProps = state => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  onClose (optionalType) {
+  onClose(optionalType) {
     if (optionalType === 'COMPOSE') {
-        dispatch(cancelReplyCompose())
+      dispatch(cancelReplyCompose())
     }
 
     dispatch(closeModal())
@@ -67,11 +81,11 @@ class ModalRoot extends PureComponent {
     onClose: PropTypes.func.isRequired,
   }
 
-  getSnapshotBeforeUpdate () {
+  getSnapshotBeforeUpdate() {
     return { visible: !!this.props.type }
   }
 
-  componentDidUpdate (prevProps, prevState, { visible }) {
+  componentDidUpdate(prevProps, prevState, { visible }) {
     if (visible) {
       document.body.classList.add('with-modals--active')
     } else {
@@ -92,7 +106,7 @@ class ModalRoot extends PureComponent {
     onClose(type)
   }
 
-  render () {
+  render() {
     const { type, props } = this.props
     const visible = !!type
 

app/javascript/gabsocial/components/modal/mute_modal.js

@@ -1,40 +1,34 @@
-import { injectIntl, defineMessages } from 'react-intl';
-import { closeModal } from '../../actions/modal';
-import { muteAccount } from '../../actions/accounts';
-import { toggleHideNotifications } from '../../actions/mutes';
-import ToggleSwitch from '../toggle_switch';
-import Button from '../button';
+import { injectIntl, defineMessages } from 'react-intl'
+import { makeGetAccount } from '../../selectors'
+import { closeModal } from '../../actions/modal'
+import { muteAccount } from '../../actions/accounts'
+import ConfirmationModal from './confirmation_modal'
 
 const messages = defineMessages({
+  title: { id: 'mute_title', defaultMessage: 'Mute {name}' },
   muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
-  hideNotifications: { id: 'mute_modal.hide_notifications', defaultMessage: 'Hide notifications from this user?' },
-  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
-  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
-});
+  mute: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = (state, { accountId }) => {
+  const getAccount = makeGetAccount()
 
-const mapStateToProps = state => {
   return {
-    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
-    account: state.getIn(['mutes', 'new', 'account']),
-    notifications: state.getIn(['mutes', 'new', 'notifications']),
-  };
-};
+    account: getAccount(state, accountId),
+  }
+}
 
 const mapDispatchToProps = dispatch => {
   return {
     onConfirm(account, notifications) {
-      dispatch(muteAccount(account.get('id'), notifications));
+      dispatch(closeModal())
+      dispatch(muteAccount(account.get('id'), notifications))
     },
-
     onClose() {
-      dispatch(closeModal());
+      dispatch(closeModal())
     },
-
-    onToggleNotifications() {
-      dispatch(toggleHideNotifications());
-    },
-  };
-};
+  }
+}
 
 export default
 @connect(mapStateToProps, mapDispatchToProps)
@@ -42,64 +36,39 @@ export default
 class MuteModal extends PureComponent {
 
   static propTypes = {
-    isSubmitting: PropTypes.bool.isRequired,
     account: PropTypes.object.isRequired,
-    notifications: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
-    onToggleNotifications: PropTypes.func.isRequired,
+    onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    this.button.focus();
   }
 
   handleClick = () => {
-    this.props.onClose();
-    this.props.onConfirm(this.props.account, this.props.notifications);
+    this.props.onConfirm(this.props.account)
   }
 
-  handleCancel = () => {
-    this.props.onClose();
+  handleClose = () => {
+    this.props.onClose()
   }
 
-  setRef = (c) => {
-    this.button = c;
-  }
+  render() {
+    const { account, intl } = this.props
 
-  toggleNotifications = () => {
-    this.props.onToggleNotifications();
-  }
-
-  render () {
-    const { account, notifications, intl } = this.props;
+    const title = intl.formatMessage(messages.title, {
+      name: !!account ? account.get('acct') : '',
+    })
+    const message = intl.formatMessage(messages.muteMessage, {
+      name: !!account ? account.get('acct') : '',
+    })
 
     return (
-      <div className='modal-root__modal mute-modal'>
-        <div className='mute-modal__container'>
-          <p>
-            {intl.formatMessage(messages.muteMessage, { name: <strong>@{account.get('acct')}</strong> })}
-          </p>
-          <div>
-            <label htmlFor='mute-modal__hide-notifications-checkbox'>
-              {intl.formatMessage(messages.hideNotifications)}
-              {' '}
-              <ToggleSwitch id='mute-modal__hide-notifications-checkbox' checked={notifications} onChange={this.toggleNotifications} />
-            </label>
-          </div>
-        </div>
-
-        <div className='mute-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='mute-modal__cancel-button'>
-            {intl.formatMessage(messages.cancel)}
-          </Button>
-          <Button onClick={this.handleClick} ref={this.setRef}>
-            {intl.formatMessage(messages.confirm)}
-          </Button>
-        </div>
-      </div>
-    );
+      <ConfirmationModal
+        title={title}
+        message={message}
+        confirm={intl.formatMessage(messages.mute)}
+        onClose={this.handleClose}
+        onConfirm={this.handleClick}
+      />
+    )
   }
 
 }

app/javascript/gabsocial/components/modal/notifications_timeline_settings_modal.js

@@ -0,0 +1,59 @@
+import { defineMessages, injectIntl } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import Button from '../button'
+import Text from '../text'
+import ModalLayout from './modal_layout'
+
+const messages = defineMessages({
+  title: { id: 'promo.gab_pro', defaultMessage: 'Upgrade to GabPRO' },
+  text: { 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.' },
+  benefits: { id: 'pro_upgrade_modal.benefits', defaultMessage: 'Here are just some of the benefits that thousands of GabPRO members receive:' },
+})
+
+export default
+@injectIntl
+class HomeTimelineSettingsModal extends ImmutablePureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
+  render() {
+    const { intl } = this.props
+
+    return (
+      <div>
+        <Text>
+          {intl.formatMessage(messages.text)}
+        </Text>
+        <Text>
+          {intl.formatMessage(messages.benefits)}
+        </Text>
+
+        <div className={[_s.default, _s.my10].join(' ')}>
+          <Text>• Schedule Posts</Text>
+          <Text>• Get Verified</Text>
+          <Text>• Create Groups</Text>
+          <Text>• Larger Video and Image Uploads</Text>
+          <Text>• Receive the PRO Badge</Text>
+          <Text>• Remove in-feed promotions</Text>
+        </div>
+
+        <Button
+          centered
+          backgroundColor='brand'
+          color='white'
+          icon='pro'
+          href='https://pro.gab.com'
+          className={_s.justifyContentCenter}
+          iconClassName={[_s.mr5, _s.fillColorWhite].join(' ')}
+        >
+          <Text color='inherit' weight='bold' align='center'>
+            {intl.formatMessage(messages.title)}
+          </Text>
+        </Button>
+
+      </div>
+    )
+  }
+}

app/javascript/gabsocial/components/modal/report_modal.js

@@ -1,14 +1,16 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
-import { OrderedSet } from 'immutable';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { changeReportComment, changeReportForward, submitReport } from '../../actions/reports';
-import { expandAccountTimeline } from '../../actions/timelines';
-import { makeGetAccount } from '../../selectors';
-import StatusCheckBox from '../status_check_box';
-import ToggleSwitch from '../toggle_switch';
-import Button from '../button';
-import IconButton from '../icon_button';
+import { defineMessages, injectIntl } from 'react-intl'
+import { OrderedSet } from 'immutable'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { changeReportComment, changeReportForward, submitReport } from '../../actions/reports'
+import { expandAccountTimeline } from '../../actions/timelines'
+import { makeGetAccount } from '../../selectors'
+import ModalLayout from './modal_layout'
+import Button from '../button'
+import StatusCheckBox from '../status_check_box'
+import Switch from '../switch'
+import Text from '../Text'
+import Textarea from '../Textarea'
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -82,62 +84,90 @@ class ReportModal extends ImmutablePureComponent {
   }
 
   render () {
-    const { account, comment, intl, statusIds, isSubmitting, forward, onClose } = this.props;
+    const {
+      account, 
+      comment,
+      intl,
+      statusIds,
+      isSubmitting,
+      forward,
+      onClose
+    } = this.props
 
-    if (!account) {
-      return null;
-    }
+    if (!account) return null
 
     const domain = account.get('acct').split('@')[1];
 
     return (
-      <div className='modal-root__modal report-modal'>
-        <div className='report-modal__target'>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
-          {intl.formatMessage(messages.target, {
-            target: <strong>{account.get('acct')}</strong>
-          })}
-        </div>
+      <ModalLayout
+        noPadding
+        title={intl.formatMessage(messages.target, {
+          target: account.get('acct')
+        })}
+      >
 
-        <div className='report-modal__container'>
-          <div className='report-modal__comment'>
-            <p>{intl.formatMessage(messages.hint)}</p>
+        <div className={[_s.default, _s.flexRow].join(' ')}>
+          <div className={[_s.default, _s.width50PC, _s.py10, _s.px15, _s.borderRight1PX, _s.borderColorSecondary].join(' ')}>
+            <Text color='secondary' size='small'>
+              {intl.formatMessage(messages.hint)}
+            </Text>
 
-            <textarea
-              className='setting-text light'
-              placeholder={intl.formatMessage(messages.placeholder)}
-              value={comment}
-              onChange={this.handleCommentChange}
-              onKeyDown={this.handleKeyDown}
-              disabled={isSubmitting}
-              autoFocus
-            />
+            <div className={_s.my10}>
+              <Textarea
+                placeholder={intl.formatMessage(messages.placeholder)}
+                value={comment}
+                onChange={this.handleCommentChange}
+                onKeyDown={this.handleKeyDown}
+                disabled={isSubmitting}
+                autoFocus
+              />
+            </div>
 
-            {domain && (
+            {
+              domain &&
               <div>
-                <p>{intl.formatMessage(messages.forwardHint)}</p>
+                <Text color='secondary' size='small'>
+                  {intl.formatMessage(messages.forwardHint)}
+                </Text>
 
                 <div className='setting-toggle'>
-                  <ToggleSwitch id='report-forward' checked={forward} disabled={isSubmitting} onChange={this.handleForwardChange} />
-                  <label htmlFor='report-forward' className='setting-toggle__label'>
-                    {intl.formatMessage(messages.forward, {
-                      target: domain
+                  <Switch 
+                    id='report-forward'
+                    checked={forward}
+                    disabled={isSubmitting}
+                    onChange={this.handleForwardChange}
+                    label={intl.formatMessage(messages.forward, {
+                      target: domain,
                     })}
-                  </label>
+                    labelProps={{
+                      size: 'small',
+                      color: 'secondary',
+                    }}
+                  />
                 </div>
               </div>
-            )}
-
-            <Button disabled={isSubmitting} text={intl.formatMessage(messages.submit)} onClick={this.handleSubmit} />
+            }
+            
+            <Button
+              disabled={isSubmitting}
+              onClick={this.handleSubmit}
+              className={_s.marginTopAuto}
+            >
+              {intl.formatMessage(messages.submit)}
+            </Button>
           </div>
 
-          <div className='report-modal__statuses'>
-            <div>
-              {statusIds.map(statusId => <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />)}
+          <div className={[_s.default, _s.width50PC].join(' ')}>
+            <div className={[_s.default, _s.heightMax80VH, _s.overflowYScroll, _s.pr15, _s.py10].join(' ')}>
+              {
+                statusIds.map(statusId => (
+                  <StatusCheckBox id={statusId} key={statusId} disabled={isSubmitting} />
+                ))
+              }
             </div>
           </div>
         </div>
-      </div>
+      </ModalLayout>
     );
   }
 

app/javascript/gabsocial/components/modal/unfollow_modal.js

@@ -0,0 +1,72 @@
+import { injectIntl, defineMessages } from 'react-intl'
+import { muteAccount } from '../../actions/accounts'
+
+const messages = defineMessages({
+  muteMessage: { id: 'confirmations.mute.message', defaultMessage: 'Are you sure you want to mute {name}?' },
+  cancel: { id: 'confirmation_modal.cancel', defaultMessage: 'Cancel' },
+  confirm: { id: 'confirmations.mute.confirm', defaultMessage: 'Mute' },
+})
+
+const mapStateToProps = state => {
+  return {
+    isSubmitting: state.getIn(['reports', 'new', 'isSubmitting']),
+    account: state.getIn(['mutes', 'new', 'account']),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    onConfirm(account, notifications) {
+      dispatch(muteAccount(account.get('id'), notifications))
+    },
+  }
+}
+
+export default
+@connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class UnfollowModal extends PureComponent {
+
+  static propTypes = {
+    isSubmitting: PropTypes.bool.isRequired,
+    account: PropTypes.object.isRequired,
+    onConfirm: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  }
+
+  componentDidMount() {
+    this.button.focus()
+  }
+
+  handleClick = () => {
+    this.props.onClose()
+    this.props.onConfirm(this.props.account, this.props.notifications)
+  }
+
+  handleCancel = () => {
+    this.props.onClose()
+  }
+
+  render() {
+    const { account, intl } = this.props
+
+    // , {
+    //   message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+    //   confirm: intl.formatMessage(messages.unfollowConfirm),
+    //   onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
+    // }));
+
+    return (
+      <ConfirmationModal
+        title={`Mute @${account.get('acct')}`}
+        message={<FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute @{name}?' values={{ name: account.get('acct') }} />}
+        confirm={<FormattedMessage id='mute' defaultMessage='Mute' />}
+        onConfirm={() => {
+          // dispatch(blockDomain(domain))
+          // dispatch(blockDomain(domain))
+        }}
+      />
+    )
+  }
+
+}