Refactor and adjust answerbox styles

app/assets/javascripts/answerbox/smile.coffee

@@ -3,7 +3,7 @@ $(document).on "click", "button[name=ab-smile]", ->
   aid = btn[0].dataset.aId
   action = btn[0].dataset.action
   count = Number $("span#ab-smile-count-#{aid}").html()
-  btn[0].dataset.loadingText = "<i class=\"fa fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
+  btn[0].dataset.loadingText = "<i class=\"fa fa-fw fa-meh-o fa-spin\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
   btn.button "loading"
 
   target_url = switch action
@@ -36,8 +36,8 @@ $(document).on "click", "button[name=ab-smile]", ->
           switch action
             when 'smile'
               btn[0].dataset.action = 'unsmile'
-              btn.html "<i class=\"fa fa-frown-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
+              btn.html "<i class=\"fa fa-fw fa-frown-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
             when 'unsmile'
               btn[0].dataset.action = 'smile'
-              btn.html "<i class=\"fa fa-smile-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
+              btn.html "<i class=\"fa fa-fw fa-smile-o\"></i> <span id=\"ab-smile-count-#{aid}\">#{count}</span>"
       , 20

app/assets/javascripts/memes.coffee

@@ -1,3 +1,3 @@
 cheet 'up up down down left right left right b a', ->
   ($ "body").addClass 'fa-spin'
-  ($ "p.answerbox--question-text").each (i) -> ($ this).html ":^)"
+  ($ "p.answerbox__question-text").each (i) -> ($ this).html ":^)"

app/assets/stylesheets/application.scss

@@ -75,6 +75,7 @@
  */
 
 @import
+"components/answerbox",
 "components/avatars",
 "components/buttons",
 "components/container",

app/assets/stylesheets/base.css.scss

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

app/assets/stylesheets/components/_answerbox.scss

@@ -0,0 +1,63 @@
+.answerbox {
+  &__question-text, 
+  &__question-user, 
+  &__answer-user, 
+  &__answer-date {
+    margin-bottom: 0px;
+    overflow: hidden;
+  }
+  
+  &__answer-date {
+    font-size: .8rem;
+    line-height: .8;
+    overflow: visible;
+  }
+
+  &__answer-text {
+    margin-bottom: map-get($spacers, 3);
+  }
+
+  &__question-user-avatar,
+  &__answer-user-avatar {
+    margin-right: map-get($spacers, 2);
+    border-radius: $avatar-border-radius;
+  }
+
+  & .text-muted a, 
+  & .text-muted a:hover {
+    color: var(--muted-text);
+    text-decoration: none;
+  }
+
+  &__action {
+    padding-left: map-get($spacers, 1);
+    padding-right: map-get($spacers, 1);
+
+    & i {
+      font-size: 1.4rem;
+      vertical-align: top;
+    }
+
+    &:hover,
+    &:focus,
+    &:active {
+      text-decoration: none;
+    }
+
+    &[name="ab-smile"] {
+      color: var(--primary);
+
+      &:hover {
+        color: var(--success);
+      }
+
+      &[data-action="unsmile"] {
+        color: var(--success);
+        
+        &:hover {
+          color: var(--danger);
+        }
+      }
+    }
+  }
+}

app/assets/stylesheets/scss/answerbox.scss

@@ -1,59 +0,0 @@
-.answerbox .text-muted a, .answerbox .text-muted a:hover {
-  color: $gray;
-  text-decoration: none;
-}
-
-.answerbox--img {
-  min-height: 32px;
-  min-width: 32px;
-  height: 32px;
-  width: 32px;
-}
-
-.answerbox--img-small {
-  min-height: 20px;
-  min-width: 20px;
-  height: 20px;
-  width: 20px;
-}
-
-.answerbox--question-text, .answerbox--question-user, .answerbox--answer-user, .answerbox--answer-date {
-  margin-bottom: 0px;
-  overflow: hidden;
-}
-
-.answerbox--question-text {
-  color: $gray;
-}
-
-.answerbox--answer-text {
-  font-size: 16px;
-  color: #000;
-  line-height: 1.3em;
-}
-
-.answerbox--question-text {
-  line-height: 1.3em;
-  overflow: hidden;
-}
-
-.answerbox--answer-date {
-  font-size: 12px;
-  line-height: 1.3em;
-}
-
-.answerbox [name="ab-smile"], .answerbox [name="ab-smile-comment"] {
-  padding: 6px 11px;
-  padding-left: 21px;
-  position: relative;
-  overflow: hidden;
-  border: none;
-
-  i.fa.fa-smile-o, i.fa.fa-frown-o, i.fa.fa-meh-o {
-    position: absolute;
-    font-size: 3em;
-    left: -13px;
-    top: -10px;
-    display: block;
-  }
-}

app/views/answerbox/_actions.haml

@@ -1,4 +1,4 @@
-%span.hidden-xs.text-muted
+%span.d-none.d-sm-inline.text-muted
   - unless user_signed_in?
     - if a.smile_count > 0
       %button.btn.btn-info.btn-sm{name: 'ab-smile', disabled: true}
@@ -6,16 +6,16 @@
         %span{id: "ab-smile-count-#{a.id}"}= a.smile_count
 - if user_signed_in?
   - if current_user.smiled? a
-    %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :unsmile }}
+    %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :unsmile }}
-      %i.fa.fa-frown-o
+      %i.fa.fa-fw.fa-frown-o
       %span{id: "ab-smile-count-#{a.id}"}= a.smile_count
   - else
-    %button.btn.btn-info.btn-sm{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :smile }}
+    %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-smile', data: { a_id: a.id, action: :smile }}
-      %i.fa.fa-smile-o
+      %i.fa.fa-fw.fa-smile-o
       %span{id: "ab-smile-count-#{a.id}"}= a.smile_count
 - unless @display_all
-  %button.btn.btn-primary.btn-sm{type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden }}
+  %button.btn.btn-link.answerbox__action{type: :button, name: 'ab-comments', data: { a_id: a.id, state: :hidden }}
-    %i.fa.fa-comments
+    %i.fa.fa-fw.fa-comments
     %span{id: "ab-comment-count-#{a.id}"}= a.comment_count
 - if user_signed_in?
   .btn-group

app/views/answerbox/_comments.haml

@@ -7,7 +7,7 @@
         %div{class: "ab-comment-smile-list", style: "height: 0; width: 0"}= render "modal/comment_smiles", comment: comment
         .media.comments--media
           .pull-left
-            %img.img-rounded.answerbox--img{src: comment.user.profile_picture.url(:medium)}
+            %img.avatar-sm{src: comment.user.profile_picture.url(:medium)}
           .media-body.comments--body
             %h6.media-heading.answerbox--question-user
               = user_screen_name comment.user

app/views/answerbox/_header.haml

@@ -1,9 +1,9 @@
 .card-header
-  .media.question-media
+  .media
     - unless a.question.author_is_anonymous
       %a.pull-left{href: show_user_profile_path(a.question.user.screen_name)}
-        %img.img-rounded.answerbox--img{src: a.question.user.profile_picture.url(:medium)}
+        %img.answerbox__question-user-avatar.avatar-md{src: a.question.user.profile_picture.url(:medium)}
-    .media-body.question-body
+    .media-body
       - if user_signed_in?
         .pull-right
           .btn-group
@@ -18,12 +18,12 @@
                 %a.dropdown-item{href: '#', tabindex: -1, data: { action: 'ab-question-report', q_id: a.question.id }}
                   %i.fa.fa-exclamation-triangle
                   = t 'views.actions.report'
-      %h6.text-muted.media-heading.answerbox--question-user
+      %h6.text-muted.media-heading.answerbox__question-user
         = raw t('views.answerbox.asked', user: user_screen_name(a.question.user, anonymous: a.question.author_is_anonymous), time: time_tooltip(a.question))
         - unless a.question.author_is_anonymous
           - if a.question.answer_count > 1
             ·
             %a{href: show_user_question_path(a.question.user.screen_name, a.question.id)}
               = pluralize(a.question.answer_count, t('views.general.answer'))
-      .answerbox--question-text
+      .answerbox__question-text
         = a.question.content

app/views/answerbox/_smiles.haml

@@ -7,4 +7,4 @@
     - else
       - a.smiles.all.each do |smile|
         %a{href: show_user_profile_path(smile.user.screen_name), title: smile.user.screen_name, data: { toggle: :tooltip, placement: :top, smile_id: smile.id }}
-          %img.img-rounded.answerbox--img-small{src: smile.user.profile_picture.url(:medium)}
+          %img.avatar-xs{src: smile.user.profile_picture.url(:medium)}

app/views/application/_answerbox.haml

@@ -3,7 +3,7 @@
     = render "answerbox/header", a: a
   .card-body
     - if @display_all.nil?
-      .answerbox--answer-text
+      .answerbox__answer-text
         = markdown a.content[0..255]
         - if a.content.length > 255
           [...]
@@ -11,7 +11,7 @@
             %a.btn.btn-primary{href: show_user_answer_path(a.user.screen_name, a.id)}
               = t 'views.answerbox.read'
     - else
-      .answerbox--answer-text
+      .answerbox__answer-text
         = markdown a.content
     - if @user.nil?
       .row
@@ -19,11 +19,11 @@
           .media
             .pull-left
               %a{href: show_user_profile_path(a.user.screen_name)}
-                %img.img-rounded.answerbox--img{src: a.user.profile_picture.url(:medium)}
+                %img.answerbox__answer-user-avatar.avatar-sm{src: a.user.profile_picture.url(:medium)}
             .media-body
-              %h6.media-heading.answerbox--answer-user
+              %h6.media-heading.answerbox__answer-user
                 = raw t('views.answerbox.answered', hide: hidespan(t('views.answerbox.hide'), "xs"), user: user_screen_name(a.user))
-              .answerbox--answer-date
+              .answerbox__answer-date
                 = link_to(raw(t('views.answerbox.time', time: time_tooltip(a))), show_user_answer_path(a.user.screen_name, a.id))
         .col-md-6.col-sm-8.col-xs-6.text-right
           = render 'answerbox/actions', a: a