Styles for preview, edit and save a user story description

app/coffee/modules/common/wisiwyg.coffee

@@ -32,7 +32,7 @@ tgMarkitupDirective = ($rootscope, $rs, $tr) ->
     previewTemplate = _.template("""
     <div class="preview">
         <div class="actions">
-            <a href="#" title="Edit">Edit</a>
+            <a href="#" title="Edit" class="icon icon-edit edit"></a>
         </div>
         <div class="content wysiwyg">
             <%= data %>

app/styles/components/markitup.scss

@@ -19,3 +19,16 @@
         }
     }
 }
+
+.markItUpContainer {
+    padding: 0;
+}
+
+.preview {
+    .actions {
+        background: $whitish;
+        margin-top: .5rem;
+        min-height: 2rem;
+        padding: .3rem;
+    }
+}

app/styles/layout/us-detail.scss

@@ -64,14 +64,6 @@
                 }
             }
         }
-        //.save-container {
-        //    &.loading {
-        //        span {
-        //            @include animation (loading .5s linear);
-        //            @include animation (spin 1s linear infinite);
-        //        }
-        //    }
-        //}
         .us-number {
             @extend %xlarge;
             @extend %title;
@@ -172,15 +164,17 @@
     position: relative;
     &:hover {
         cursor: pointer;
-        p {
+        .view-description {
-            @include transition(background .2s linear);
-            background: $whitish;
-        }
             .edit {
                 @include transition(all .2s linear);
                 opacity: 1;
                 top: -1.5rem;
             }
+            p {
+                @include transition(background .2s linear);
+                background: $whitish;
+            }
+        }
     }
     &.wysiwyg {
         overflow: visible;
@@ -190,19 +184,9 @@
         height: 10rem;
         margin-bottom: 2rem;
     }
-    .edit {
-        @include transition(all .2s linear);
-        background: $whitish;
-        color: $grayer;
-        left: 0;
-        opacity: 0;
-        padding: .2rem .5rem;
-        position: absolute;
-        top: 0;
-    }
     a.save {
         color: $blackish;
-        opacity: .8;
+        opacity: .6;
         position: absolute;
         right: 1rem;
         top: .6rem;
@@ -217,6 +201,32 @@
             @include animation (spin 1s linear infinite);
         }
     }
+    .edit {
+        color: $grayer;
+
+    }
+    .view-description {
+        .edit {
+            @include transition(all .2s linear);
+            background: $whitish;
+            left: 0;
+            opacity: 0;
+            padding: .2rem .5rem;
+            position: absolute;
+            top: 0;
+        }
+    }
+    .edit-description {
+        .save {
+            top: .4rem;
+        }
+        .edit {
+            @include transition(all .2s linear);
+            position: absolute;
+            right: 2.5rem;
+            top: .4rem;
+        }
+    }
 }
 
 .comment-list {