Fix look of the modals

1 files changed, 36 insertions, 23 deletions

diff --git a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx
index 8b9154183..023abc6ac 100644
--- a/app/assets/javascripts/components/features/ui/components/boost_modal.jsx
+++ b/app/assets/javascripts/components/features/ui/components/boost_modal.jsx
@@ -1,27 +1,21 @@
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import IconButton from '../../../components/icon_button';
 import Button from '../../../components/button';
-import DetailedStatus from '../../status/components/detailed_status';
+import StatusContent from '../../../components/status_content';
+import Avatar from '../../../components/avatar';
+import RelativeTimestamp from '../../../components/relative_timestamp';
+import DisplayName from '../../../components/display_name';
 
 const messages = defineMessages({
-  close: { id: 'lightbox.close', defaultMessage: 'Close' },
   reblog: { id: 'status.reblog', defaultMessage: 'Boost' }
 });
 
-const closeStyle = {
-  position: 'absolute',
-  top: '4px',
-  right: '4px'
-};
-
-const buttonContainerStyle = {
-  textAlign: 'right',
-  padding: '10px'
-};
-
 const BoostModal = React.createClass({
+  contextTypes: {
+    router: React.PropTypes.object
+  },
 
   propTypes: {
     status: ImmutablePropTypes.map.isRequired,
@@ -37,23 +31,42 @@ const BoostModal = React.createClass({
     this.props.onClose();
   },
 
-  handleOpenMedia() {
-    // do nothing"
+  handleAccountClick (e) {
+    if (e.button === 0) {
+      e.preventDefault();
+      this.props.onClose();
+      this.context.router.push(`/accounts/${this.props.status.getIn(['account', 'id'])}`);
+    }
   },
 
   render () {
     const { status, intl, onClose } = this.props;
 
-    const reblogButton = <span><i className='fa fa-retweet' /> {intl.formatMessage(messages.reblog)}</span>;
-
     return (
       <div className='modal-root__modal boost-modal'>
-        <IconButton title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} style={closeStyle} />
-        <div>
-          <DetailedStatus status={status} onOpenMedia={this.handleOpenMedia} />
+        <div className='boost-modal__container'>
+          <div className='status light'>
+            <div style={{ fontSize: '15px' }}>
+              <div style={{ float: 'right', fontSize: '14px' }}>
+                <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
+              </div>
+
+              <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name' style={{ display: 'block', maxWidth: '100%', paddingRight: '25px' }}>
+                <div className='status__avatar' style={{ position: 'absolute', left: '10px', top: '10px', width: '48px', height: '48px' }}>
+                  <Avatar src={status.getIn(['account', 'avatar'])} staticSrc={status.getIn(['account', 'avatar_static'])} size={48} />
+                </div>
+
+                <DisplayName account={status.get('account')} />
+              </a>
+            </div>
+
+            <StatusContent status={status} />
+          </div>
         </div>
-        <div style={buttonContainerStyle}>
-          <Button text={reblogButton} onClick={this.handleReblog} />
+
+        <div className='boost-modal__action-bar'>
+          <div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Alt + <i className='fa fa-retweet' /></span> }} /></div>
+          <Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} />
         </div>
       </div>
     );