Ui facelift and usability improvements

app/assets/javascripts/alchemy/alchemy.dialog.js.coffee

@@ -171,7 +171,7 @@ class window.Alchemy.Dialog
     @dialog_body = $('<div class="alchemy-dialog-body" />')
     @dialog_header = $('<div class="alchemy-dialog-header" />')
     @dialog_title = $('<div class="alchemy-dialog-title" />')
-    @close_button = $('<a class="alchemy-dialog-close"><span class="icon close small"></span></a>')
+    @close_button = $('<a class="alchemy-dialog-close"><span class="icon-close small"></span></a>')
     @dialog_title.text(@options.title)
     @dialog_header.append(@dialog_title)
     @dialog_header.append(@close_button)

app/assets/javascripts/alchemy/alchemy.dirty.js.coffee

@@ -13,8 +13,8 @@ $.extend Alchemy,
     $element = $(element)
     $element.addClass('dirty')
     $element
-      .find('> .element-header .icon[class*="element_"]')
-      .addClass('element_dirty')
+      .find('> .element-header .element-handle [class*="icon-"]')
+      .addClass('icon-edit')
     window.onbeforeunload = @pageUnload
 
   pageUnload: ->
@@ -24,7 +24,7 @@ $.extend Alchemy,
   setElementClean: (element) ->
     $element = $(element)
     $element.removeClass('dirty')
-    $element.find('> .element-header .icon').removeClass('element_dirty')
+    $element.find('> .element-header .icon').removeClass('icon-edit')
     $element.find('> .element-content .dirty').removeClass('dirty')
     window.onbeforeunload = undefined
 

app/assets/javascripts/alchemy/alchemy.elements_window.js.coffee

@@ -12,7 +12,7 @@ Alchemy.ToolbarButton = (options) ->
     e.preventDefault()
     options.onClick(e)
     false
-  $lnk.append "<span class='icon #{options.iconClass}' />"
+  $lnk.append "<span class='#{options.iconClass}' />"
   $btn.append $lnk
   $btn.append "<br><label>#{options.label}</label>"
   $btn

app/assets/javascripts/alchemy/alchemy.growler.js.coffee

@@ -5,7 +5,7 @@ Alchemy.Growler =
   build: (message, flash_type) ->
     $flash_container = $("<div class=\"flash #{flash_type}\" />")
     icon_class = (if flash_type is "notice" then "tick" else flash_type)
-    $flash_container.append "<span class=\"icon #{icon_class}\" />"
+    $flash_container.append "<span class=\"icon-#{icon_class}\" />"
     $flash_container.append message
     $("#flash_notices").append $flash_container
     $("#flash_notices").show()

app/assets/javascripts/alchemy/alchemy.image_overlay.coffee

@@ -44,7 +44,7 @@ class window.Alchemy.ImageOverlay extends Alchemy.Dialog
     @dialog = $('<div class="alchemy-image-overlay-dialog" />')
     @dialog_body = $('<div class="alchemy-image-overlay-body" />')
     @close_button = $('<a class="alchemy-image-overlay-close">
-      <span class="icon close small"></span>
+      <span class="icon-close text-white"></span>
     </a>')
     @dialog.append(@close_button)
     @dialog.append(@dialog_body)

app/assets/javascripts/alchemy/alchemy.preview_window.js.coffee

@@ -43,7 +43,7 @@ Alchemy.PreviewWindow =
 
   _hideSpinner: ->
     @spinner.stop()
-    @reload.html('<span class="icon reload"></span>')
+    @reload.html('<span class="icon-refresh"></span>')
 
   _bindReloadButton: ->
     $reload = $('#reload_preview_button')

app/assets/javascripts/alchemy/alchemy.trash_window.js.coffee

@@ -21,7 +21,7 @@ $.extend Alchemy,
     # Update the trash window icon
     updateIcon: ->
       return unless @current?
-      $icon = $("#element_trash_button .icon")
+      $icon = $("#element_trash_button .icon-trash")
       # Is the trash window open?
       if $("#trash_items div.element-editor").not(".dragged").length is 0
         $icon.removeClass("full")

app/assets/stylesheets/alchemy/_extends.scss

@@ -14,7 +14,7 @@
 %thumbnail-background {
   position: relative;
   display: table-cell;
-  background-color: $dark-gray;
+  background-color: scale-color($xdark-gray, $lightness: 40%, $saturation: -40%);
   text-align: center;
   vertical-align: middle;
   padding: 0;
@@ -35,15 +35,12 @@
 %default-input-style {
   box-sizing: border-box;
   @extend %rounded-border;
-  box-shadow: inset 0px 1px 1px $medium-gray;
+  box-shadow: $input-box-shadow;
   font: $default-font-style;
   padding: 1px 2*$default-padding;
   margin: $default-form-field-margin;
-  background: rgba(#fff, 0.9);
-  border-top: 1px solid $default-border-color;
-  border-left: 1px solid $default-border-color;
-  border-bottom: 1px solid $border-inset-color;
-  border-right: 1px solid $border-inset-color;
+  background: white;
+  border: 1px solid $input-border-color;
   width: 100%;
   font-size: 12px;
   line-height: 12px;
@@ -66,7 +63,7 @@
 }
 
 %gradiated-toolbar {
-  background: $toolbar-bg-color;
+  background-color: $toolbar-bg-color;
   padding: 8px 4px;
   height: $default-form-field-height;
 }