Make annotation action icons larger

Since changing the size of button icons in de75319 we can now style
these actions with button markup and the btn-clean class. The last
remnants of .magicontrol go away.

h/static/styles/annotations.scss

@@ -53,9 +53,11 @@
   float: right;
   margin-top: 0;
 
-  .magicontrol {
-    margin-left: 0.8em;
-    margin-right: 0;
+  button {
+    color: $gray-light;
+    .annotation:hover & {
+      color: $link-color;
+    }
   }
 }
 
@@ -104,24 +106,6 @@ privacy {
   top: 2px;
 }
 
-
-//MAGICONTROL////////////////////////////////
-.magicontrol {
-  margin-right: .8em;
-
-  &, a {
-    color: $gray-light;
-  }
-
-  &.dropdown {
-    top: 4px;
-  }
-
-  .annotation:hover &, .annotation:hover & a {
-    color: $link-color;
-  }
-}
-
 .share-dialog-wrapper {
   position: relative;
 

h/static/styles/forms.scss

@@ -258,7 +258,6 @@
 // Positions the icon nicely within the button.
 .btn-icon {
   font-size: 1.4em;
-  margin-right: .25em;
   vertical-align: top;
 }
 

h/templates/client/annotation.html

@@ -136,12 +136,13 @@
   </div>
 
   <div class="annotation-actions">
-    <a class="small magicontrol" href="" title="Reply"
-      ng-click="vm.reply()"
-      ><i class="h-icon-reply"></i> Reply</a>
+    <button class="small btn-clean"
+            ng-click="vm.reply()"
+            ><i class="h-icon-reply btn-icon"></i> Reply</button>
     <span class="magicontrol share-dialog-wrapper">
-      <a class="small" href="" title="Share" ng-click="share($event)"
-        ><i class="h-icon-share"></i> Share</a>
+      <button class="small btn-clean"
+              ng-click="share($event)"
+              ><i class="h-icon-share btn-icon"></i> Share</button>
       <span class="share-dialog" ng-click="$event.stopPropagation()">
       <a class="h-icon-share"
           target="_blank"
@@ -149,13 +150,13 @@
         <input type="text" value="{{vm.annotationURI}}" readonly>
       </span>
     </span>
-    <a class="small magicontrol" href="" title="Edit"
-      ng-show="vm.authorize('update')"
-      ng-click="vm.edit()"
-      ><i class="h-icon-edit"></i> Edit</a>
-    <a class="small magicontrol" href="" title="Delete"
-      ng-show="vm.authorize('delete')"
-      ng-click="vm.delete()"
-      ><i class="h-icon-delete"></i> Delete…</a>
+    <button class="small btn-clean"
+            ng-show="vm.authorize('update')"
+            ng-click="vm.edit()"
+            ><i class="h-icon-edit btn-icon"></i> Edit</button>
+    <button class="small btn-clean"
+            ng-show="vm.authorize('delete')"
+            ng-click="vm.delete()"
+            ><i class="h-icon-delete btn-icon"></i> Delete…</button>
   </div>
 </footer>