Refactor comment styles and layout

app/assets/stylesheets/application.scss

@@ -78,6 +78,7 @@
 "components/answerbox",
 "components/avatars",
 "components/buttons",
+"components/comments",
 "components/container",
 "components/entry",
 "components/jumbotron",
@@ -96,6 +97,3 @@
 
 @import
 "utilities";
-
-
-@import "base";

app/assets/stylesheets/base.css.scss

@@ -1,3 +0,0 @@
-/* all custom SCSS should go into here */
-
-@import "scss/comments";

app/assets/stylesheets/components/_answerbox.scss

@@ -44,7 +44,8 @@
       text-decoration: none;
     }
 
-    &[name="ab-smile"] {
+    &[name="ab-smile"],
+    &[name="ab-smile-comment"] {
       color: var(--primary);
 
       &:hover {

app/assets/stylesheets/components/_comments.scss

@@ -0,0 +1,34 @@
+.comment {
+  list-style-type: none;
+
+  &__container {
+    padding-left: 0;
+  }
+
+  &__user,
+  &__content {
+    margin-bottom: 0px;
+  }
+
+  &__user-avatar {
+    margin-right: map-get($spacers, 2);
+    border-radius: $avatar-border-radius;
+  }
+
+  &__input-group {
+    position: relative;
+  }
+
+  &__input {
+    z-index: 99;
+    padding-right: 2.5rem;
+  }
+
+  &__character-count {
+    position: absolute;
+    z-index: 100;
+    right: .5rem;
+    top: .5rem;
+  }
+}
+

app/assets/stylesheets/inbox.css.scss

@@ -1,3 +0,0 @@
-// Place all the styles related to the inbox controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/

app/assets/stylesheets/scss/comments.scss

@@ -1,37 +0,0 @@
-.comments {
-  padding-left: 0;
-}
-
-.comments li {
-  list-style-type: none;
-}
-
-.comments .pull-right {
-  margin-top: -13px;
-}
-
-.comments--box {
-  z-index: 99;
-}
-
-.comments--count {
-  z-index: 0;
-  margin-top: -2em;
-}
-
-.comments--body {
-  overflow: visible !important;
-}
-
-.comments--content {
-  overflow: hidden;
-  word-break: normal;
-}
-
-.comments--content p {
-  margin-bottom: 0px;
-}
-
-.comments--media {
-  overflow: visible !important;
-}

app/assets/stylesheets/user.css.scss

@@ -1,3 +0,0 @@
-// Place all the styles related to the user controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/

app/views/answerbox/_comments.haml

@@ -1,33 +1,35 @@
 - if a.comments.all.count == 0
   = t 'views.answerbox.no_comment'
 - else
-  %ul.comments
+  %ul.comment__container
     - a.comments.order(:created_at).each do |comment|
-      %li{data: { comment_id: comment.id }}
+      %li.comment{data: { comment_id: comment.id }}
         %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
-        .media.comments--media
+        .media
           .pull-left
-            %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
+            %img.comment__user-avatar.avatar-md{src: comment.user.profile_picture.url(:medium)}
-          .media-body.comments--body
+          .media-body
-            %h6.media-heading.answerbox--question-user
+            %h6.media-heading.comment__user
               = user_screen_name comment.user
               %span.text-muted{title: comment.created_at, data: { toggle: :tooltip, placement: :right }}
                 = "#{time_ago_in_words(comment.created_at)} ago"
+            .comment__content
+              = markdown comment.content
           .pull-right
-              %span.hidden-xs.text-muted
+            %span.d-none.d-sm-inline.text-muted
               - unless user_signed_in?
                 - if comment.smile_count > 0
-                    %button.btn.btn-info.btn-sm{name: 'ab-smile-comment', disabled: true}
+                  %button.btn.btn-link.answerbox__action{name: 'ab-smile-comment', disabled: true}
                     %i.fa.fa-smile-o
                     %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
             - if user_signed_in?
               - if current_user.smiled_comment? comment
-                  %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :unsmile }}
+                %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :unsmile }}
-                    %i.fa.fa-frown-o
+                  %i.fa.fa-fw.fa-frown-o
                   %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
               - else
-                  %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :smile }}
+                %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile-comment', data: { c_id: comment.id, action: :smile }}
-                    %i.fa.fa-smile-o
+                  %i.fa.fa-fw.fa-smile-o
                   %span{id: "ab-comment-smile-count-#{comment.id}"}= comment.smile_count
               .btn-group
                 %button.btn.btn-link.btn-sm.dropdown-toggle{data: { toggle: :dropdown }, aria: { expanded: :false }}
@@ -44,9 +46,7 @@
                     %a.dropdown-item{href: '#', data: { action: 'ab-comment-report', c_id: comment.id }}
                       %i.fa.fa-exclamation-triangle
                       = t 'views.acions.report'
-            .comments--content
-              = markdown comment.content
 - if user_signed_in?
-  .form-group.has-feedback{name: 'ab-comment-new-group', data: { a_id: a.id }}
+  .form-group.has-feedback.comment__input-group{name: 'ab-comment-new-group', data: { a_id: a.id }}
-    %input.form-control.comments--box{type: :text, placeholder: t('views.placeholder.comment'), name: 'ab-comment-new', data: {a_id: a.id }}
+    %input.form-control.comment__input{type: :text, placeholder: t('views.placeholder.comment'), name: 'ab-comment-new', data: {a_id: a.id }}
-    %span.text-muted.form-control-feedback.comments--count{id: "ab-comment-charcount-#{a.id}"} 160
+    %span.text-muted.form-control-feedback.comment__character-count{id: "ab-comment-charcount-#{a.id}"} 160