Moved SCSS values into variables

app/assets/javascripts/awards_handler.coffee

 class @AwardsHandler
   constructor: (@post_emoji_url, @noteable_type, @noteable_id, @aliases) ->
-    $(".js-add-award").click (event) =>
+    $(".js-add-award").on "click", (event) =>
       event.stopPropagation()
       event.preventDefault()
 
@@ -18,7 +18,9 @@ class @AwardsHandler
 
   handleClick: (e) ->
     e.preventDefault()
-    emoji = $(this).find(".icon").data "emoji"
+    emoji = $(this)
+      .find(".icon")
+      .data "emoji"
     awards_handler.addAward emoji
 
   showEmojiMenu: ->
@@ -80,9 +82,13 @@ class @AwardsHandler
 
   removeMeFromAuthorList: (emoji) ->
     award_block = @findEmojiIcon(emoji).parent()
-    authors = award_block.attr("data-original-title").split(", ")
+    authors = award_block
+      .attr("data-original-title")
+      .split(", ")
     authors.splice(authors.indexOf("me"),1)
-    award_block.closest(".js-emoji-btn").attr("data-original-title", authors.join(", "))
+    award_block
+      .closest(".js-emoji-btn")
+      .attr("data-original-title", authors.join(", "))
     @resetTooltip(award_block)
 
   addMeToAuthorList: (emoji) ->

app/assets/stylesheets/framework/variables.scss

@@ -150,3 +150,14 @@ $dropdown-toggle-border-color: #EAEAEA;
 $dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
 $dropdown-toggle-icon-color: #C4C4C4;
 $dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
+
+/*
+ *  Award emoji
+ */
+$award-emoji-menu-bg: #FFF;
+$award-emoji-menu-border: #F1F2F4;
+$award-emoji-menu-radius: 3px;
+$award-emoji-menu-btn-radius: 4px;
+$award-emoji-menu-btn-hover-bg: #EDEDED;
+$award-emoji-control-active-bg: $award-emoji-menu-btn-hover-bg;
+$award-emoji-new-btn-color: #DCDCDC;

app/assets/stylesheets/pages/awards.scss

@@ -15,9 +15,9 @@
   display: none;
   min-width: 160px;
   font-size: 14px;
-  background-color: #fff;
-  border: 1px solid #F1F2F4;
-  border-radius: 2px;
+  background-color: $award-emoji-menu-bg;
+  border: 1px solid $award-emoji-menu-border;
+  border-radius: $award-emoji-menu-radius;
   box-shadow: 0 6px 12px rgba(0,0,0,.175);
 
   .emoji-menu-content {
@@ -55,10 +55,10 @@
   padding: 0;
   background: none;
   border: 0;
-  border-radius: 4px;
+  border-radius: $award-emoji-menu-btn-radius;
 
   &:hover {
-    background-color: #ededed;
+    background-color: $award-emoji-menu-btn-hover-bg;
   }
 
   .emoji-icon {
@@ -80,7 +80,7 @@
 
   &.active,
   &:active {
-    background-color: #ededed;
+    background-color: $award-emoji-control-active-bg;
     box-shadow: none;
     outline: 0;
   }
@@ -107,6 +107,6 @@
   }
 
   .award-control-icon {
-    color: #DCDCDC;
+    color: $award-emoji-new-btn-color;
   }
 }