Progress

2020-03-11 19:56:18 -04:00
parent af1627815c
commit 7712ebdbbd
79 changed files with 815 additions and 389 deletions
--- a/app/javascript/gabsocial/components/modal/compose_modal.js
+++ b/app/javascript/gabsocial/components/modal/compose_modal.js
@@ -1,20 +1,20 @@
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { openModal } from '../../actions/modal';
-import { cancelReplyCompose } from '../../actions/compose';
-import ModalLayout from './modal_layout';
-import TimelineComposeBlock from '../timeline_compose_block';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { openModal } from '../../actions/modal'
+import { cancelReplyCompose } from '../../actions/compose'
+import ModalLayout from './modal_layout'
+import TimelineComposeBlock from '../timeline_compose_block'

 const messages = defineMessages({
  confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
  title: { id: 'navigation_bar.compose', defaultMessage: 'Compose new gab' },
-});
+})

 const mapStateToProps = state => {
  return {
    composeText: state.getIn(['compose', 'text']),
  };
-};
+}

 export default
@connect(mapStateToProps)
@@ -33,7 +33,8 @@ class ComposeModal extends ImmutablePureComponent {

    if (composeText) {
      dispatch(openModal('CONFIRM', {
-        message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this status?' />,
+        title: <FormattedMessage id='discard-gab-title' defaultMessage='Discard gab?' />,
+        message: <FormattedMessage id='discard-gab-message' defaultMessage="This can't be undone and you'll lose your draft." />,
        confirm: intl.formatMessage(messages.confirm),
        onConfirm: () => dispatch(cancelReplyCompose()),
        onCancel: () => dispatch(openModal('COMPOSE')),
@@ -45,7 +46,7 @@ class ComposeModal extends ImmutablePureComponent {
  };

  render() {
-    const { intl } = this.props;
+    const { intl } = this.props

    return (
      <ModalLayout
--- a/app/javascript/gabsocial/components/modal/confirmation_modal.js
+++ b/app/javascript/gabsocial/components/modal/confirmation_modal.js
@@ -1,12 +1,15 @@
 import { injectIntl, FormattedMessage } from 'react-intl'
-import ModalLayout from './modal_layout'
+import Block from '../block'
 import Button from '../button'
+import Heading from '../heading'
+import Text from '../text'

 export default
@injectIntl
 class ConfirmationModal extends PureComponent {

  static propTypes = {
+    title: PropTypes.node.isRequired,
    message: PropTypes.node.isRequired,
    confirm: PropTypes.string.isRequired,
    onClose: PropTypes.func.isRequired,
@@ -32,7 +35,7 @@ class ConfirmationModal extends PureComponent {
  }

  handleCancel = () => {
-    const {onClose, onCancel} = this.props
+    const { onClose, onCancel } = this.props
    onClose()
    if (onCancel) onCancel()
  }
@@ -41,24 +44,67 @@ class ConfirmationModal extends PureComponent {
    this.button = c
  }

-  render () {
-    const { message, confirm, secondary } = this.props
+  render() {
+    const {
+      title,
+      message,
+      confirm,
+      secondary
+    } = this.props

    return (
-      <div className='modal-root__modal confirmation-modal'>
-        <div className='confirmation-modal__container'>
-          {message}
-        </div>
+      <div className={_s.width330PX}>
+        <Block>
+          <div className={[_s.default, _s.px15, _s.py15].join(' ')}>
+            <div className={[_s.default, _s.px15, _s.py15].join(' ')}>

-        <div className='confirmation-modal__action-bar'>
-          <Button onClick={this.handleCancel} className='confirmation-modal__cancel-button'>
-            <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
-          </Button>
-          {secondary !== undefined && (
-            <Button text={secondary} onClick={this.handleSecondary} className='confirmation-modal__secondary-button' />
-          )}
-          <Button text={confirm} onClick={this.handleClick} ref={this.setRef} />
-        </div>
+              <Heading size='h1' center>
+                {title}
+              </Heading>
+
+              <div className={[_s.default, _s.mt10].join(' ')}>
+                <Text align='center' color='secondary'>
+                  {message}
+                </Text>
+
+                <div className={[_s.default, _s.flexRow, _s.mt10, _s.pt10].join(' ')}>
+                  <Button
+                    backgroundColor='tertiary'
+                    color='primary'
+                    onClick={this.handleCancel}
+                    className={[_s.mr10, _s.flexGrow1].join(' ')}
+                  >
+                    <Text size='medium' weight='bold' color='inherit'>
+                      <FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
+                    </Text>
+                  </Button>
+                  
+                  { /**
+                    : todo :
+                     */
+                    secondary !== undefined && (
+                      <Button text={secondary} onClick={this.handleSecondary} />
+                    )
+                  }
+
+                  <Button 
+                    backgroundColor='brand'
+                    color='white'
+                    onClick={this.handleClick}
+                    ref={this.setRef}
+                    className={_s.flexGrow1}
+                  >
+                    <Text size='medium' weight='bold' color='inherit'>
+                      {confirm}
+                    </Text>
+                  </Button>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </Block>
      </div>
    )
  }
--- a/app/javascript/gabsocial/components/modal/modal_layout.js
+++ b/app/javascript/gabsocial/components/modal/modal_layout.js
@@ -27,7 +27,7 @@ class ModalLayout extends PureComponent {
    return (
      <div className={[_s.width645PX].join(' ')}>
        <Block>
-          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.paddingHorizontal15PX].join(' ')}>
+          <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter, _s.borderBottom1PX, _s.borderColorSecondary, _s.height53PX, _s.px15].join(' ')}>
            <Heading size='h3'>
              {title}
            </Heading>
@@ -41,7 +41,7 @@ class ModalLayout extends PureComponent {
              iconWidth='10px'
            />
          </div>
-          <div className={[_s.default, _s.paddingHorizontal15PX, _s.paddingVertical10PX].join(' ')}>
+          <div className={[_s.default, _s.px15, _s.py10].join(' ')}>
            {children}
          </div>
        </Block>
--- a/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
+++ b/app/javascript/gabsocial/components/modal/pro_upgrade_modal.js
@@ -23,38 +23,34 @@ class ProUpgradeModal extends ImmutablePureComponent {

    return (
      <ModalLayout title={intl.formatMessage(messages.title)}>
-        <div>
-          <Text>
-            {intl.formatMessage(messages.text)}
-          </Text>
-          <Text>
-            {intl.formatMessage(messages.benefits)}
-          </Text>
+        <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>

-        <ul>
-          <li>
-            <Text>Schedule Posts</Text>
-          </li>
-          <li>
-            <Text>Get Verified</Text>
-          </li>
-          <li>
-            <Text>Create Groups</Text>
-          </li>
-          <li>
-            <Text>Larger Video and Image Uploads</Text>
-          </li>
-          <li>
-            <Text>Receive the PRO Badge</Text>
-          </li>
-          <li>
-            <Text>Remove in-feed promotions</Text>
-          </li>
-        </ul>
-
-        <Button icon='pro' href='https://pro.gab.com'>
-          {intl.formatMessage(messages.title)}
+        <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>

      </ModalLayout>
--- a/app/javascript/gabsocial/components/modal/unauthorized_modal.js
+++ b/app/javascript/gabsocial/components/modal/unauthorized_modal.js
@@ -26,15 +26,15 @@ class UnauthorizedModal extends ImmutablePureComponent {

    return (
      <ModalLayout title={intl.formatMessage(messages.signup)}>
-        <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
-          <Text className={_s.marginBottom15PX}>
+        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
+          <Text className={_s.mb15}>
            {intl.formatMessage(messages.text)}
          </Text>
          <Button href='/auth/sign_up' className={[_s.width240PX, _s.marginLeftAuto, _s.marginLeftAuto].join(' ')}>
            {intl.formatMessage(messages.register)}
          </Button>
        </div>
-        <div className={[_s.default, _s.paddingHorizontal10PX, _s.paddingVertical10PX].join(' ')}>
+        <div className={[_s.default, _s.px10, _s.py10].join(' ')}>
          <Text color='secondary'>
            {
              intl.formatMessage(messages.login, {