From 9bfde960125d37d3ff3be0beb229fb79ac809a88 Mon Sep 17 00:00:00 2001
From: stephen grider <ste.grider@gmail.com>
Date: Sun, 5 Jul 2015 17:02:07 -0700
Subject: [PATCH] Flux - 33 - CSS Animations

---
 imgur-client/sass/topic.scss                | 13 +++++++++++++
 imgur-client/src/components/comment-box.jsx | 16 ++++++++++++----
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/imgur-client/sass/topic.scss b/imgur-client/sass/topic.scss
index f0bb9ad..dc31fcd 100644
--- a/imgur-client/sass/topic.scss
+++ b/imgur-client/sass/topic.scss
@@ -1,3 +1,16 @@
 .topic {
   text-align: center;
+
+  .image-preview {
+    animation: fadein .65s ease-out;
+
+    @keyframes fadein {
+      0% {
+        opacity: 0;
+      }
+      100% {
+        opacity: 1.0;
+      }
+    }
+  }
 }
diff --git a/imgur-client/src/components/comment-box.jsx b/imgur-client/src/components/comment-box.jsx
index 4c4b824..a212176 100644
--- a/imgur-client/src/components/comment-box.jsx
+++ b/imgur-client/src/components/comment-box.jsx
@@ -2,9 +2,17 @@ var React = require('react');
 
 module.exports = React.createClass({
   render: function(){
-    return <div>
-      I am a comment box.
-      {this.props.comments}
-    </div>
+    return <ul className="list-group">
+      {this.renderComments()}
+    </ul>
+  },
+  renderComments: function() {
+    return this.props.comments.slice(0, 20).map(function(comment){
+      return <li className="list-group-item comment-box" key={comment.id}>
+        <span className="badge">{comment.ups}</span>
+        <h5>{comment.author}</h5>
+        {comment.comment}
+      </li>
+    })
   }
 });