Use scale instead of font-size for icon scaling

This is much neater. Since the scale origin is the center of the
icon this will scale around the center of the line, avoiding any
messy vertical alignment nonsense. This works much better than
vertical-align middle and font-size because vertical-align middle
puts the center of the element at the x-height, rather than the
middle of the line. This is much cleaner.

h/static/styles/forms.scss

@@ -256,15 +256,9 @@
   }
 }
 
-.btn-text {
-  display: inline-block;
-  vertical-align: middle;
-}
-
 .btn-icon {
   display: inline-block;
-  font-size: 1.4em;
-  vertical-align: middle;
+  transform: scale(1.2);
 }
 
 // Positions a message/icon to the left of a button.

h/static/styles/topbar.scss

@@ -8,7 +8,7 @@
   border: solid 1px $gray-lighter;
   border-style: solid none;
   height: 30px;
-  font-size: 14px;
+  font-size: 15px;
   position: fixed;
   left: 0;
   right: 0;
@@ -47,6 +47,7 @@
 .topbar .btn {
   color: $gray-light;
   min-width: 28px;
+  height: 28px;
 
   border: 0;
   padding: 0;

h/templates/client/annotation.html

@@ -125,20 +125,16 @@
       <div class="form-actions-buttons form-actions-left">
         <button ng-switch-when="edit"
                 ng-click="vm.save()"
-                class="btn"><i class="h-icon-check btn-icon"></i>
-          <span class="btn-text">Save</span></button>
+                class="btn"><i class="h-icon-check btn-icon"></i> Save</button>
         <button ng-switch-when="delete"
                 ng-click="vm.save()"
-                class="btn"><i class="h-icon-check btn-icon"></i>
-          <span clas="btn-text">Delete</span></button>
+                class="btn"><i class="h-icon-check btn-icon"></i> Delete</button>
         <button ng-switch-default
                 ng-click="vm.save()"
-                class="btn"><i class="h-icon-check btn-icon"></i>
-          <span class="btn-text">Save</span></button>
+                class="btn"><i class="h-icon-check btn-icon"></i> Save</button>
         <button class="btn btn-clean"
                 ng-click="vm.revert()"
-                ><i class="h-icon-cancel btn-icon"></i>
-          <span class="btn-text">Cancel</span></button>
+                ><i class="h-icon-cancel btn-icon"></i> Cancel</button>
       </div>
     </div>
 
@@ -161,13 +157,11 @@
     <div class="annotation-actions" ng-if="!vm.editing && vm.annotation.id">
       <button class="small btn btn-clean"
               ng-click="vm.reply()"
-              ><i class="h-icon-reply btn-icon"></i>
-        <span class="btn-text">Reply</span></button>
+              ><i class="h-icon-reply btn-icon"></i> Reply</button>
       <span class="share-dialog-wrapper">
         <button class="small btn btn-clean"
                 ng-click="share($event)"
-                ><i class="h-icon-link btn-icon"></i>
-          <span class="btn-text">Link</span></button>
+                ><i class="h-icon-link btn-icon"></i> Link</button>
         <span class="share-dialog" ng-click="$event.stopPropagation()">
           <a target="_blank"
              class="h-icon-link"
@@ -179,13 +173,11 @@
       <button class="small btn btn-clean"
               ng-show="vm.authorize('update')"
               ng-click="vm.edit()"
-              ><i class="h-icon-edit btn-icon"></i>
-        <span class="btn-text">Edit</span></button>
+              ><i class="h-icon-edit btn-icon"></i> Edit</button>
       <button class="small btn btn-clean"
               ng-show="vm.authorize('delete')"
               ng-click="vm.delete()"
-              ><i class="h-icon-delete btn-icon"></i>
-        <span class="btn-text">Delete…</span></button>
+              ><i class="h-icon-delete btn-icon"></i> Delete…</button>
     </div>
   </footer>
 </div>