moved component editor to top; polished editor styles

cms/static/sass/_unit.scss

@@ -75,15 +75,9 @@
       &.editing {
         border-color: #6696d7;
 
-        &:hover {
-          .drag-handle,
-          .component-actions a {
-            background-color: $blue;
-          }
-
-          .drag-handle {
-            border-color: $blue;
-          }
+        .drag-handle,
+        .component-actions {
+          display: none;
         }
       }
 
@@ -230,14 +224,24 @@
     @include edit-box;
     display: none;
     padding: 20px;
-    border-radius: 0 0 3px 3px;
+    border-radius: 2px 2px 0 0;
     @include linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, .1));
     background-color: $blue;
     color: #fff;
+    @include box-shadow(none);
 
     .metadata_edit {
       margin-bottom: 20px;
       font-size: 13px;
+
+      li {
+        margin-bottom: 10px;
+      }
+
+      label {
+        display: inline-block;
+        margin-right: 10px;  
+      }
     }
 
     .CodeMirror {
@@ -245,6 +249,7 @@
     }
 
     h3 {
+      margin-bottom: 10px;
       font-size: 18px;
       font-weight: 700;
     }

cms/templates/component.html

@@ -1,9 +1,3 @@
-${preview}
-<div class="component-actions">
-  <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
-  <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  
-</div>
-<a href="#" class="drag-handle"></a>
 <div class="component-editor">
   <div class="module-editor">
     ${editor}
@@ -11,4 +5,9 @@ ${preview}
   <a href="#" class="save-button">Save</a>
   <a href="#" class="cancel-button">Cancel</a>
 </div>
-
+<div class="component-actions">
+  <a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
+  <a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>  
+</div>
+<a href="#" class="drag-handle"></a>
+${preview}

cms/templates/widgets/metadata-edit.html

@@ -3,7 +3,7 @@
   <h3>Metadata</h3>
   <ul>
     % for keyname in editable_metadata_fields:
-    <li>${keyname}: <input type='text' data-metadata-name='${keyname}' value='${metadata[keyname]}' size='60' /></li>
+    <li><label>${keyname}:</label> <input type='text' data-metadata-name='${keyname}' value='${metadata[keyname]}' size='60' /></li>
     % endfor
   </ul>
 </section>