visual styling changes to components and static pages in order to use updated icon button styling for duplicate and delete actions

cms/static/sass/views/_assets.scss

@@ -325,6 +325,7 @@
     }
   }
 
+  // uses similar styling as assets.scss, static-pages.scss 
   .action-item {
     display: inline-block;
     margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);

cms/static/sass/views/_static-pages.scss

@@ -116,10 +116,66 @@
       }
     }
 
-    .component-actions {
+    // uses similar styling as assets.scss, unit.scss
+    .wrapper-component-action-header {
+      @include box-sizing(border-box);
       position: absolute;
-      top: 20px;
-      right: 44px;
+      width: 100%;
+      padding: $baseline/4 $baseline/2;
+      top: 0;
+      left: 0;
+    }
+
+    .component-header {
+      display: none;
+    }
+
+    .component-actions {
+      display: inline-block;
+      float: right; 
+      margin-right: $baseline*2;
+      padding: 8px 0px;
+      vertical-align: middle;
+      text-align: center;
+
+      .action-item {
+        display: inline-block;
+        margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+
+        .action-button {
+          @include transition(all $tmg-f2 ease-in-out 0s);
+          display: block;
+          padding: 0 $baseline/2;
+          width: auto;
+          height: ($baseline*1.5);
+          border-radius: 3px;
+          color: $gray-l1;
+
+          &:hover {
+            background-color: $blue;
+            color: $gray-l6;
+          }
+
+          .action-button-text {
+            padding-left: 1px;
+            vertical-align: bottom;
+            line-height: 17px;
+          }
+
+          &.delete-button:hover {
+            background-color: $gray-l1;
+          }
+        }
+
+        [class^="icon-"] {
+          display: inline-block;
+          vertical-align: bottom;
+        }
+
+        &.action-duplicate {
+          display: none;
+        }
+      }
     }
   }
 
@@ -163,10 +219,6 @@
       margin-right: 12px;
     }
   }
-
-  .duplicate-button.standard {
-    display: none;
-  }
 }
 
 .edit-static-page {

cms/static/sass/views/_unit.scss

@@ -867,20 +867,35 @@ body.course.unit,.view-unit {
 // ====================
 
 // Editing Units from Courseware
+//uses similar styling as static-pages.scss
 body.unit {
 
   .component {
     padding-top: 30px;
 
-    .component-actions {
+
+    .wrapper-component-action-header {
       @include box-sizing(border-box);
       position: absolute;
       width: 100%;
-      padding: 15px;
+      padding: $baseline/4 $baseline/2;
       top: 0;
       left: 0;
-      border-bottom: 1px solid $lightBluishGrey2;
-      background: $lightGrey;
+      border-bottom: 1px solid $gray-l4;
+      background: $gray-l5;
+    }
+
+    .component-header {
+      display: inline-block;
+      width: 50%;
+      vertical-align: middle;
+    }
+
+    .component-actions {
+      display: inline-block;
+      float: right;
+      vertical-align: middle;
+      text-align: center; 
     }
 
     &.editing {
@@ -888,6 +903,53 @@ body.unit {
     }
   }
 }
+
+// ====================
+
+// Component Header Actions
+// uses similar styling as assets.scss, static-pages.scss
+
+body.unit {
+
+  .component-actions {
+
+    .action-item {
+      display: inline-block;
+      margin: ($baseline/4) 0 ($baseline/4) ($baseline/4);
+
+      .action-button {
+        @include transition(all $tmg-f2 ease-in-out 0s);
+        display: block;
+        padding: 0 $baseline/2;
+        width: auto;
+        height: ($baseline*1.5);
+        border-radius: 3px;
+        color: $gray-l1;
+
+        &:hover {
+          background-color: $blue;
+          color: $gray-l6;
+        }
+
+        .action-button-text {
+          padding-left: 1px;
+          vertical-align: bottom;
+          line-height: 17px;
+        }
+
+        &.delete-button:hover {
+          background-color: $gray-l1;
+        }
+      }
+
+      [class^="icon-"] {
+        display: inline-block;
+        vertical-align: bottom;
+      }
+    }
+  }
+}
+
 // ====================
 
 // Unit Page Sidebar

cms/templates/component.html

@@ -26,11 +26,29 @@
 		</div> <!-- Module Actions-->
   </div>
 </div>
-
-<div class="component-actions">
-  <a href="#" class="edit-button standard"><span class="edit-icon"></span>${_("Edit")}</a>
-  <a href="#" class="duplicate-button standard"><span class="duplicate-icon icon-copy"></span>${_("Duplicate")}</a>
-  <a href="#" class="delete-button standard"><span class="delete-icon"></span>${_("Delete")}</a>
+<div class="wrapper wrapper-component-action-header">
+	<div class="component-header">
+	</div>
+	<ul class="component-actions">
+	  <li class="action-item action-edit">
+	  	<a href="#" class="edit-button action-button">
+	  		<i class="icon-edit"></i>
+	  		<span class="action-button-text">${_("Edit")}</span>
+	  	</a>
+	  </li>
+	  <li class="action-item action-duplicate">
+	  	<a href="#" data-tooltip="Duplicate" class="duplicate-button action-button">
+	  		<i class="icon-copy"></i>
+	  		<span class="sr">${_("Duplicate this component")}</span>
+	  	</a>
+	  </li>
+	  <li class="action-item action-delete">
+	  	<a href="#" data-tooltip="Delete" class="delete-button action-button">
+	  		<i class="icon-trash"></i>
+	  		<span class="sr">${_("Duplicate this component")}</span>
+	  	</a>
+	  </li>
+	</ul>
 </div>
 <span data-tooltip="${_("Drag to reorder")}" class="drag-handle"></span>
 ${preview}