Fix look of the modals

2 files changed, 100 insertions, 41 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>
     );
diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 316398874..d7473eddb 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -349,6 +349,43 @@ a.status__content__spoiler-link {
   .status__display-name {
     color: lighten($color1, 26%);
   }
+
+  &.light {
+    .status__relative-time {
+      color: $color3;
+    }
+
+    .status__display-name {
+      color: $color1;
+    }
+
+    .display-name {
+      strong {
+        color: $color1;
+      }
+
+      span {
+        color: $color3;
+      }
+    }
+
+    .status__content {
+      color: $color1;
+
+      a {
+        color: $color4;
+      }
+
+      a.status__content__spoiler-link {
+        color: $color5;
+        background: $color3;
+
+        &:hover {
+          background: lighten($color3, 8%);
+        }
+      }
+    }
+  }
 }
 
 .status-check-box {
@@ -1938,30 +1975,39 @@ button.icon-button.active i.fa-retweet {
 }
 
 .boost-modal {
-  display: block;
-
-  color: white;
-  background: lighten($color1, 13%);
-
+  background: lighten($color2, 8%);
+  color: $color1;
+  border-radius: 8px;
+  overflow: hidden;
   max-width: 90vw;
   width: 480px;
-
-  padding-top: 25px;
-  border-radius: 3px;
-
   position: relative;
+  flex-direction: column;
+}
 
-  & .detailed-status {
-    pointer-events: none;
-    max-height: 60vh;
-    overflow-y: auto;
+.boost-modal__container {
+  padding: 10px;
+
+  .status {
+    user-select: text;
+    border-bottom: 0;
   }
+}
 
-  & > .icon-button {
-    color: lighten($color1, 40%);
+.boost-modal__action-bar {
+  display: flex;
+  background: $color2;
+  padding: 10px;
+  line-height: 36px;
 
-    &:hover, &:active {
-      color: lighten($color1, 60%);
-    }
+  & > div {
+    flex: 1 1 auto;
+    text-align: right;
+    color: lighten($color1, 33%);
+    padding-right: 10px;
+  }
+
+  .button {
+    flex: 0 0 auto;
   }
 }