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) => ( }
-
💬 0 comments
+
+ + 0 comments +
{postStatus.name} 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