MessageSummary

3 files changed, 37 insertions, 13 deletions

diff --git a/vnext/src/components/Message.css b/vnext/src/components/Message.css
index 4b2e6d74..9bc05dc6 100644
--- a/vnext/src/components/Message.css
+++ b/vnext/src/components/Message.css
@@ -13,6 +13,7 @@
     border-top: 1px solid #eee;
     display: flex;
     justify-content: space-around;
+    background: #fdfdfe;
 }
 .msg-cont > nav.l a {
     color: #88958d;
@@ -59,7 +60,7 @@
 }
 .msg-ts,
 .msg-ts > a {
-    color: #999;
+    color: #88958d;
 }
 .msg-txt {
     margin: 0 0 12px;
@@ -84,13 +85,13 @@ blockquote {
     text-align: center;
 }
 .msg-links {
-    color: #999;
+    color: #88958d;
     font-size: small;
     margin: 5px 0 0 0;
     padding: 12px;
 }
 .msg-comments {
-    color: #AAA;
+    color: #88958d;
     font-size: small;
     margin-top: 10px;
     overflow: hidden;
@@ -134,7 +135,8 @@ blockquote {
     width: 50px;
 }
 .msg-recomms {
-    color: #AAA;
+    color: #88958d;
+    background: #fdfdfe;
     font-size: small;
     margin-bottom: 10px;
     padding: 6px;
@@ -142,6 +144,12 @@ blockquote {
     overflow: hidden;
     text-indent: 10px;
 }
+.msg-summary {
+    color: #88958d;
+    font-size: small;
+    padding: 12px;
+    text-align: right;
+}
 #replies .msg-txt,
 #private-messages .msg-txt {
     margin: 0;
diff --git a/vnext/src/components/Message.js b/vnext/src/components/Message.js
index 241aca07..0de366e4 100644
--- a/vnext/src/components/Message.js
+++ b/vnext/src/components/Message.js
@@ -38,6 +38,7 @@ function Message({ data, visitor, children, ...rest }) {
                     <img src={`//i.juick.com/photos-512/${data.mid}.${data.attach}`} alt="" /></a>
                 </p>
             }
+            <MessageSummary message={data} />
             <nav className="l">
                 {visitor.uid === data.user.uid ? (
                     <a href={`/${data.user.uname}/${data.mid}`} className="a-like msg-button">
@@ -51,7 +52,6 @@ function Message({ data, visitor, children, ...rest }) {
                     <Link to={{ pathname: '/post', search: `?body=!+%23${data.mid}` }} className="a-like msg-button">
                         <span className="msg-button-icon">
                             <Icon name="ei-heart" size="s" />
-                            {data.likes > 0 && (` ${data.likes}`)}
                         </span>
                         <span>&nbsp;Recommend</span>
                     </Link>
@@ -59,7 +59,6 @@ function Message({ data, visitor, children, ...rest }) {
                             <a href="/login" className="a-login msg-button">
                                 <span className="msg-button-icon">
                                     <Icon name="ei-heart" size="s" />
-                                    {data.likes > 0 && (` ${data.likes}`)}
                                 </span>
                                 <span>&nbsp;Recommend</span>
                             </a>
@@ -69,13 +68,6 @@ function Message({ data, visitor, children, ...rest }) {
                         <Link to={{ pathname: `/${data.user.uname}/${data.mid}`, state: { msg: data } }} className="a-comment msg-button">
                             <span className="msg-button-icon">
                                 <Icon name="ei-comment" size="s" />
-                                {data.replies > 0 &&
-                                    (visitor.unread && visitor.unread.includes(data.mid) ? (
-                                        <span className="badge">{data.replies}</span>
-                                    ) : (
-                                            `${data.replies}`
-                                        ))
-                                }
                             </span>
                             <span>&nbsp;Comment</span>
                         </Link>
@@ -125,6 +117,22 @@ function Recommends({ forMessage, ...rest }) {
 
 const Recommendations = React.memo(Recommends);
 
+function Summary({ message }) {
+    let likes = message.likes && `Recommended: ${message.likes}`;
+    let comments = message.replies && `Comments: ${message.replies}`;
+    return (
+        <div className="msg-summary">
+            {[likes, comments].filter(Boolean).join(' ')}
+        </div>
+    );
+}
+
+Summary.propTypes = {
+    message: MessageType.isRequired
+};
+
+const MessageSummary = React.memo(Summary);
+
 Message.propTypes = {
     data: MessageType,
     visitor: UserType.isRequired,
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index b0726ef2..9ba06123 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -218,6 +218,13 @@ hr {
     padding: 2px 20px;
 }
 
+#global a,
+#ctitle a,
+.l a,
+.msg-button {
+    border-bottom: 2px solid #fdfdfe;
+}
+
 #global a:hover,
 #ctitle a:hover,
 .l a:hover,
@@ -229,6 +236,7 @@ hr {
 
 .icon {
     vertical-align: middle;
+    margin-right: 12px;
 }
 
 #search input {