Refactor smile user list styles

app/assets/stylesheets/base.css.scss

@@ -1,6 +1,5 @@
 /* all custom SCSS should go into here */
 
 @import "scss/flags";
-@import "scss/generic";
 @import "scss/answerbox";
 @import "scss/comments";

app/assets/stylesheets/components/_smiles.scss

@@ -1,3 +1,27 @@
 .smiles {
   margin-bottom: map-get($spacers, 2);
+
+  &__user-list {
+    margin: 0;
+    padding: 0;
+  }
+    
+  &__user-list-entry {
+    margin-bottom: map-get($spacers, 3);
+    
+    * {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  
+    img {
+      height: map-get($avatar-sizes, "lg");
+      width: map-get($avatar-sizes, "lg");
+      border-radius: $avatar-border-radius;
+    }
+  
+    span {
+      margin-left: 5px;
+    }
+  }
 }

app/assets/stylesheets/scss/generic.scss

@@ -1,26 +0,0 @@
-.user-list {
-  margin: 0;
-  padding: 0;
-}
-
-.user-list-entry-smiles {
-  * {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  img {
-    height: 64px
-  }
-
-  span {
-    margin-left: 5px;
-  }
-
-  a:hover {
-    text-decoration: none;
-    span {
-      text-decoration: underline;
-    }
-  }
-}

app/views/modal/_comment_smiles.haml

@@ -10,9 +10,9 @@
         - if comment.smiles.all.count == 0
           = t 'views.answerbox.no_smile'
         - else
-          %ul.user-list.user-list-smiles
+          %ul.smiles__user-list
             - comment.smiles.all.each do |smile|
-              %li.user-list-entry.user-list-entry-smiles
+              %li.smiles__user-list-entry
                 %a{href: show_user_profile_path(smile.user.screen_name)}
-                  %img.img-rounded{src: smile.user.profile_picture.url(:medium), alt: user_screen_name(smile.user, url: false)}
+                  %img{src: smile.user.profile_picture.url(:medium), alt: user_screen_name(smile.user, url: false)}
                   %span= user_screen_name(smile.user, url: false)