Improve UI for emoji awards

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

3 files changed, 36 insertions, 21 deletions

diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7dd4f239c78..affa34a5f83 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -103,19 +103,23 @@
 }
 
 .awards {
+  @include clearfix;
+  line-height: 32px;
+  margin: 5px 0;
+
   .award {
+    @include border-radius(5px);
+
     border: 1px solid;
-    padding: 1px 3px;
-    width: 50px;
-    border-radius: 5px;
-    float:left;
-    margin: 0 3px;
-    border-color: #ccc;
+    padding: 0px 10px;
+    float: left;
+    margin: 0 5px;
+    border-color: $border-color;
     cursor: pointer;
 
     &.active {
-      border-color: rgba(79,176,252,0.4);
-      background-color: rgba(79,176,252,0.1);
+      border-color: $border-gray-light;
+      background-color: $gray-light;
 
       .counter {
         font-weight: bold;
@@ -126,28 +130,39 @@
       float: left;
       margin-right: 10px;
     }
+
+    .counter {
+      float: left;
+    }
   }
 
   .awards-controls {
-    height: 25px;
-    width: 28px;
+    line-height: 32px;
+    margin-left: 10px;
     float: left;
-    padding: 0 0 5px 5px;
-    line-height: 1;
 
     .add-award {
-      font-size: 27px;
-      color: #ccc;
+      font-size: 24px;
+      color: $gl-gray;
+      position: relative;
+      top: 2px;
 
-      &:hover {
-        text-decoration: none;
-      }
+      &:hover,
       &:link {
         text-decoration: none;
       }
     }
+
+    .awards-menu {
+      padding: $gl-padding;
+      min-width: 214px;
+
+      > li {
+        margin: 5px;
+      }
+    }
   }
-  
+
   .awards-menu{
     li {
       float: left;
diff --git a/app/views/projects/issues/_discussion.html.haml b/app/views/projects/issues/_discussion.html.haml
index c5fd863ae99..020952dd001 100644
--- a/app/views/projects/issues/_discussion.html.haml
+++ b/app/views/projects/issues/_discussion.html.haml
@@ -7,7 +7,7 @@
 
 = render 'shared/show_aside'
 
-.gray-content-block.second-block
+.gray-content-block.second-block.oneline-block
   .row
     .col-md-9
       .votes-holder.pull-right
diff --git a/app/views/votes/_votes_block.html.haml b/app/views/votes/_votes_block.html.haml
index 3eadf209a59..f32e5193d1a 100644
--- a/app/views/votes/_votes_block.html.haml
+++ b/app/views/votes/_votes_block.html.haml
@@ -8,7 +8,7 @@
 
   .dropdown.awards-controls
     %a.add-award{"data-toggle" => "dropdown", "data-target" => "#", "href" => "#"}
-      = icon('plus-circle')
+      = icon('plus-square-o')
     %ul.dropdown-menu.awards-menu
       - emoji_list.each do |emoji|
         %li{"data-emoji" => "#{emoji}"}= image_tag url_to_emoji(emoji), height: "20px", width: "20px"
@@ -27,4 +27,4 @@
     emoji = $(this).find(".icon").data("emoji")
     awards_handler.addAward(emoji)
 
-  $(".award").tooltip()
\ No newline at end of file
+  $(".award").tooltip()