Thread styling

2 files changed, 11 insertions, 12 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index e8e4c99a..71802985 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -88,7 +88,7 @@ export default class MessageInput extends React.Component {
                         <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
                             ref={this.textarea} style={textInputStyle} value={this.state.value}
                             rows="1" placeholder="Write a comment..." />
-                        <button className="badge" onClick={this.onSubmit}>Send</button>
+                        <button className="badge" onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</button>
                     </div>
                 </div>
             </form>
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index ebbb1eec..d53617b2 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -7,6 +7,7 @@ import Message from './Message';
 import MessageInput from './MessageInput';
 import Spinner from './Spinner';
 import Avatar from './Avatar';
+import Icon from './Icon';
 
 import { format } from '../utils/embed';
 
@@ -122,7 +123,8 @@ export default class Thread extends React.Component {
                               <React.Fragment>
                                 <span>[удалено]:</span><Avatar user={{ uid: 0 }} />
                               </React.Fragment>
-                            )}
+                            )
+                          }
                           <div className="msg-ts">
                             <a href={`/${msg.user.uname}/${msg.mid}`}>
                               <time itemProp="datePublished dateModified" itemType="http://schema.org/Date" dateTime={msg.timestamp}
@@ -130,6 +132,10 @@ export default class Thread extends React.Component {
                                 {moment.utc(msg.timestamp).fromNow()}
                               </time>
                             </a>
+                            {msg.replyto > 0 &&
+                            (
+                              <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
+                            )}
                           </div>
                         </div>
                         <div className="msg-txt"><p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }}></p></div>
@@ -139,23 +145,16 @@ export default class Thread extends React.Component {
                             <img itemProp="image" src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" /></a>
                           </p>
                         }
-                        <div className="msg-links">{`/${msg.rid}`}&nbsp;
-                          {
-                            msg.replyto > 0 &&
-                            (
-                              <a href={`#${msg.replyto}`}> in reply to {msg.to.uname}&nbsp;</a>
-                            )
-                          }
+                        <div className="msg-links">
                           {
                             this.props.visitor.uid > 0 ? (
                               <React.Fragment>
-                                <span>&middot;&nbsp;</span>
-                                <button onClick={this.setActive.bind(this, msg)} className="badge">Reply</button>
+                                {this.state.active === msg.rid || <button onClick={this.setActive.bind(this, msg)} className="badge"><Icon name="ei-envelope" size="s"/>Reply</button>}
                                 {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />}
                               </React.Fragment>
                             ) : (
                                 <React.Fragment>
-                                  <span>&nbsp;&middot;&nbsp;</span><a href="#" className="a-login">Reply</a>
+                                  <span>&nbsp;&middot;&nbsp;</span>{this.state.active === msg.rid || <button className="a-login">Reply</button> }
                                 </React.Fragment>
                               )
                           }