Add comment icon

app/javascript/components/Board/PostListItem.tsx

@@ -19,7 +19,10 @@ const PostListItem = ({ title, description, postStatus}: Props) => (
         }
       </div>
       <div className="postDetails">
-        <div className="postDetailsComments">💬 0 comments</div>
+        <div className="postDetailsComments">
+          <span className="comment icon"></span>
+          <span>0 comments</span>
+        </div>
         <div className="postDetailsStatus" style={{color: postStatus.color}}>
           <div className="dot" style={{backgroundColor: postStatus.color}}></div>
           <span className="postStatusName">{postStatus.name}</span>

app/javascript/stylesheets/application.scss

@@ -1,6 +1,7 @@
 @import './bootstrap_custom.scss';
 @import './navbar.scss';
 @import './forms.scss';
+@import './icons.scss';
 
 .container {
   max-width: 920px;

app/javascript/stylesheets/icons.scss

@@ -0,0 +1,47 @@
+/* General setup */
+span.icon {
+	margin: 4px;
+  background-color: white;
+  border: 2px solid black;
+  display: inline-block;
+  position: relative;
+  vertical-align: top;
+}
+span.icon:after,
+span.icon:before {
+  background: white;
+  border: 2px solid black;
+  content: '';
+  position: absolute;
+}
+
+/* Comment icon */
+span.comment {
+  border-radius: 4px;
+  width: 22px;
+  height: 14px;
+}
+span.comment:after,
+span.comment:before {
+  background: none;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid black;
+  bottom: -14px;
+  height: 0;
+  left: 4px;
+  width: 0;
+}
+span.comment:before {
+  border-top-color: white;
+  bottom: -11px;
+  z-index: 1;
+}
+span.comment:hover:after {
+  background: none;
+}
+span.comment:hover:before {
+  background: none;
+  border-top-color: #ffe;
+}