More fixes for IE

assets/scripts/app/templates/repos/show/actions.hbs

@@ -1,47 +1,47 @@
 <div id="actions">
   <ul>
     {{#if view.displayCancelBuild}}
-      <li class="icon" title="Cancel Build">
+      <li class="icon cancel-build" title="Cancel Build">
         <a href="#" {{action "cancelBuild" target="view"}}
-          {{bind-attr class="view.canCancelBuild::disabled"}}><img class="icon" src="/images/icons/off.svg" width="20"></a>
+          {{bind-attr class="view.canCancelBuild::disabled"}}>Cancel build</a>
       </li>
     {{/if}}
     {{#if view.displayCancelJob}}
-      <li class="icon" title="Cancel Job">
+      <li class="icon cancel-job" title="Cancel Job">
         <a href="#" {{action "cancelJob" target="view"}}
-          {{bind-attr class="view.canCancelJob::disabled"}}><img class="icon" width="20" src="/images/icons/off.svg"/></a>
+          {{bind-attr class="view.canCancelJob::disabled"}}>Cancel job</a>
       </li>
     {{/if}}
     {{#if view.displayRequeueBuild}}
-      <li class="icon" title="Restart Build">
+      <li class="icon restart-build" title="Restart Build">
         {{#if view.requeueing}}
           <span class="icon loading"></span>
         {{else}}
           <a href="#" {{action "requeueBuild" target="view"}}
-            {{bind-attr class="view.canRequeueBuild::disabled"}}><img class="icon" src="/images/icons/repeat.svg" width="20"></a>
+            {{bind-attr class="view.canRequeueBuild::disabled"}}></a>
         {{/if}}
       </li>
     {{/if}}
     {{#if view.displayRequeueJob}}
-      <li class="icon" title="Restart Job">
+      <li class="icon restart-job" title="Restart Job">
         {{#if view.requeueing}}
           <span class="icon loading"></span>
         {{else}}
           <a href="#" {{action "requeueJob" target="view"}}
-            {{bind-attr class="view.canRequeueJob::disabled"}}><img src="/images/icons/repeat.svg" width="20"></a>
+            {{bind-attr class="view.canRequeueJob::disabled"}}></a>
         {{/if}}
       </li>
     {{/if}}
     {{!TODO: for some reason showDownloadLog, which just delegates to jobIdForLog
              does not refresh 'if' properly, need further investigation}}
     {{#if view.jobIdForLog}}
-      <li class="icon" title="Download Log">
+      <li class="icon download-log" title="Download Log">
-        <a class="download-log" {{bind-attr href="view.plainTextLogUrl"}}><img class="icon" src="/images/icons/download-log.svg" width="20"/></a>
+        <a class="download-log" {{bind-attr href="view.plainTextLogUrl"}}></a>
       </li>
       {{#if view.displayRemoveLog}}
-        <li class="icon" title="Remove Log">
+        <li class="icon remove-log" title="Remove Log">
           <a href="#" {{action "removeLog" target="view"}}
-            {{bind-attr class="view.canRemoveLog::disabled"}}><img class="icon" src="/images/icons/delete-log.svg" width="20"></a>
+            {{bind-attr class="view.canRemoveLog::disabled"}}></a>
         </li>
       {{/if}}
     {{/if}}

assets/scripts/app/templates/repos/show/tools.hbs

@@ -1,5 +1,5 @@
 <div id="tools">
-  <a href="#" {{action "menu" target="view"}} class="menu-popup-button">Settings <img src="/images/icons/dropdown-arrow-white.svg"/></a>
+  <a href="#" {{action "menu" target="view"}} class="menu-popup-button">Settings</a>
 
   <ul class="menu">
    {{#if view.displayRegenerateKey}}

assets/styles/main/repository.sass

@@ -20,6 +20,9 @@
       display: inline-block
       opacity: 1.0
 
+      img
+        border: none
+
   .github-icon
     width: 21px
     height: 21px

assets/styles/main/tools.sass

@@ -12,10 +12,12 @@
     margin-top: -27px
     color: #fff
     font-size: 13px
-    padding: 3px 8px 2px 25px
+    padding: 3px 24px 2px 25px
-    background: #a6adad inline-image('icons/settings.svg') no-repeat
+    background-image: inline-image('icons/settings.svg'), inline-image('icons/dropdown-arrow-white.svg')
-    background-size: 14px 14px
+    background-size: 14px 14px, 8px 8px
-    background-position: 6px 6px
+    background-position: 6px 6px, right 9px center
+    background-color: #a6adad
+    background-repeat: no-repeat
     @include border-radius(4px)
 
     cursor: pointer
@@ -61,6 +63,18 @@
   float: right
   text-align: right
 
+  li.restart-build a, li.restart-job a
+    background-image: inline-image('icons/repeat.svg')
+
+  li.cancel-build a, li.cancel-job a
+    background-image: inline-image('icons/off.svg')
+
+  li.download-log a
+    background-image: inline-image('icons/download-log.svg')
+
+  li.remove-log a
+    background-image: inline-image('icons/delete-log.svg')
+
   li.icon
     span.loading
       background: inline-image('ui/round-spinner.svg') no-repeat
@@ -78,15 +92,19 @@
       background-position: center center
 
     a
+      text-indent: -9999px
       display: inline-block
-      width: 27px
+      width: 28px
-      height: 27px
+      height: 28px
       position: relative
       top: -7px
       cursor: pointer
       color: #fef4e9
       border-radius: 100px
-      background: #5e869a
+      background-color: #5e869a
+      background-size: 16px 16px
+      background-position: center center
+      background-repeat: no-repeat
       text-align: center
       margin-left: 5px