Thread styling

4 files changed, 52 insertions, 34 deletions

diff --git a/vnext/src/ui/Avatar.css b/vnext/src/ui/Avatar.css
index 7bdb3115..f48f2b9e 100644
--- a/vnext/src/ui/Avatar.css
+++ b/vnext/src/ui/Avatar.css
@@ -1,6 +1,5 @@
 .Avatar {
     display: flex;
-    width: 100%;
 }
 .msg-avatar {
     max-height: 48px;
@@ -19,9 +18,3 @@
     padding: 6px;
     vertical-align: middle;
 }
-
-@media screen and (min-width: 450px) {
-    .Avatar {
-        width: 300px;
-    }
-}
diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css
index d724703f..126fcd6a 100644
--- a/vnext/src/ui/Message.css
+++ b/vnext/src/ui/Message.css
@@ -74,6 +74,10 @@ blockquote {
 .msg-media {
     text-align: center;
 }
+.msg-media img {
+    max-width: 100%;
+    height: auto;
+}
 .msg-links {
     color: #88958d;
     font-size: small;
diff --git a/vnext/src/ui/Thread.css b/vnext/src/ui/Thread.css
new file mode 100644
index 00000000..52b52f14
--- /dev/null
+++ b/vnext/src/ui/Thread.css
@@ -0,0 +1,13 @@
+#replies {
+    background: #fff;
+    border: 1px solid #eee;
+    padding: 12px;
+}
+
+.msg-bubble {
+    background: rgb(238, 238, 238);
+    color: rgb(34, 34, 34);
+    padding: 6px 12px;
+    margin-left: 48px;
+    margin-bottom: 12px;
+}
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>
           )) : (