Thread styling

1 files changed, 35 insertions, 27 deletions

diff --git a/vnext/src/ui/Thread.js b/vnext/src/ui/Thread.js
index e7ccb032..b625ecad 100644
--- a/vnext/src/ui/Thread.js
+++ b/vnext/src/ui/Thread.js
@@ -14,6 +14,8 @@ import { format, embedUrls } from '../utils/embed';
 
 import { getMessages, comment, markReadTracker } from '../api';
 
+import './Thread.css';
+
 function Comment({ msg, visitor, active, setActive, postComment }) {
   const embedRef = useRef();
   const msgRef = useRef();
@@ -26,8 +28,8 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
     }
   }, []);
   return (
-    <div className="msg-cont">
-      <div className="msg-header">
+    <div>
+      <div className="msg-header" style={{ padding: '6px', display: 'flex', alignItems: 'flex-start' }}>
         <Avatar user={msg.user}>
           <div className="msg-ts">
             {msg.replyto > 0 &&
@@ -36,35 +38,41 @@ function Comment({ msg, visitor, active, setActive, postComment }) {
               )}
           </div>
         </Avatar>
+        <div className="msg-links">
+          {
+            visitor.uid > 0 ? (
+              <>
+                {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
+              </>
+            ) : (
+                <>
+                  <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
+                </>
+              )
+          }
+        </div>
       </div>
-      {
-        msg.html ? <div className="msg-txt" dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
-          :
-          <div className="msg-txt" ref={msgRef}>
-            <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+      <div className="msg-bubble">
+        {
+          msg.html ? <div dangerouslySetInnerHTML={{ __html: msg.body }} ref={msgRef} />
+            :
+            <div ref={msgRef}>
+              <p dangerouslySetInnerHTML={{ __html: format(msg.body, msg.mid, (msg.tags || []).indexOf('code') >= 0) }} />
+            </div>
+        }
+      </div>
+        {
+          msg.photo &&
+          <div className="msg-media">
+            <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
+              <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
+            </a>
           </div>
-      }
-      {
-        msg.photo &&
-        <div className="msg-media">
-          <a href={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} data-fname={`${msg.mid}-${msg.rid}.${msg.attach}`}>
-            <img src={`//i.juick.com/p/${msg.mid}-${msg.rid}.${msg.attach}`} alt="" />
-          </a>
-        </div>
-      }
+        }
       <div className="embedContainer" ref={embedRef} />
       <div className="msg-links">
         {
-          visitor.uid > 0 ? (
-            <>
-              {active === msg.rid || <span style={linkStyle} onClick={() => setActive(msg.rid)}>Reply</span>}
-              {active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>}
-            </>
-          ) : (
-              <>
-                <span>&nbsp;&middot;&nbsp;</span>{active === msg.rid || <Button>Reply</Button>}
-              </>
-            )
+          active === msg.rid && <MessageInput data={msg} onSend={postComment}>Write a comment...</MessageInput>
         }
       </div>
     </div>
@@ -154,7 +162,7 @@ export default function Thread(props) {
       <ul id="replies">
         {
           !loading ? replies.map((msg) => (
-            <li id={msg.rid} key={msg.rid} className="msg">
+            <li id={msg.rid} key={msg.rid}>
               <Comment msg={msg} visitor={props.visitor} active={active} setActive={setActive} postComment={postComment} />
             </li>
           )) : (