From 0618974543f40615f8f045754646d9c8cbacc56f Mon Sep 17 00:00:00 2001
From: riggraz <riccardo.graziosi97@gmail.com>
Date: Mon, 2 Sep 2019 20:26:09 +0200
Subject: [PATCH] Add comment icon

---
 .../components/Board/PostListItem.tsx         |  5 +-
 app/javascript/stylesheets/application.scss   |  1 +
 app/javascript/stylesheets/icons.scss         | 47 +++++++++++++++++++
 3 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 app/javascript/stylesheets/icons.scss

diff --git a/app/javascript/components/Board/PostListItem.tsx b/app/javascript/components/Board/PostListItem.tsx
index 532ac2a4..dd13b78a 100644
--- a/app/javascript/components/Board/PostListItem.tsx
+++ b/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>
diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index 1b2aa131..df8a3c01 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/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;
diff --git a/app/javascript/stylesheets/icons.scss b/app/javascript/stylesheets/icons.scss
new file mode 100644
index 00000000..71f50adc
--- /dev/null
+++ b/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;
+}
\ No newline at end of file