add new styles to log-scroll-btn

app/styles/app/_mixins/mixins.sass

@@ -40,3 +40,11 @@
 %border-bottom-4px
   border-bottom-left-radius: 4px
   border-bottom-right-radius: 4px
+
+%absolute-center
+  position: absolute
+  top: 0
+  right: 0
+  left: 0
+  bottom: 0
+  margin: auto

app/styles/app/main/log.sass

@@ -8,30 +8,18 @@
     position: absolute
     display: block
     top: 0
-    right: 2px
+    right: 0
     margin: 13px 10px 0 0
-    padding: 0 2px 0 3px
-    color: #666
-    text-shadow: 0px 1px 0px #fff
-    font-family: "Source Sans Pro", Helvetica, sans-serif
-    font-size: $font-size-tiny
-    line-height: 14px
-    text-decoration: none
-    white-space: nowrap
-    border: 1px solid #bbb
-    border-top-color: #ddd
-    border-bottom-color: #bbb
-    border-radius: 8px
-    background: linear-gradient(#fff, #e0e0e0)
 
-    label
+    .tail-label
       display: none
       cursor: pointer
 
     &:hover
-      padding: 1px 4px 1px 6px
+      .tail-label
-      label
+        display: inline-block
-        display: inline
+      .tail-status
+        display: none
 
     &.scrolling
       position: fixed
@@ -41,16 +29,24 @@
       bottom: 45px
       top: inherit
 
-    .status
+    .tail-status
+      position: relative
       display: inline-block
-      margin-right: 1px
+      height: 20px;
-      width: 8px
+      width: 20px;
-      height: 8px
+      vertical-align: middle
-      background-color: #aaa
+      background-color: #696867;
-      border-radius: 4px
+      border-radius: 50%;
-      box-shadow: $white 1px 1px 2px
+      &:after
+        content: ""
+        display: block
+        height: 10px;
+        width: 10px;
+        background: #F2F2F2;
+        border-radius: 50%;
+        @extend %absolute-center
 
-    &.active .status
+    &.active .tail-status
       background-color: #6b0
 
   .to-top
@@ -73,22 +69,28 @@
   text-align: right
   background-color: $log-header-bg
   @extend %border-top-4px
-  .icon
-    display: inline-block
-    background:
-      size: 100%
-      repeat: no-repeat
-    width: 1.3em
-    height: 1.1em
-    margin-right: 6px
-    vertical-align: middle
-  .icon--downloadLog
-    background-image: inline-image('icons/download-log-icon.svg')
-  .icon--removeLog
-    background-image: inline-image('icons/remove-log-icon.svg')
   a
     margin-left: .4em
 
+.icon
+  display: inline-block
+  background:
+    size: 100%
+    repeat: no-repeat
+  width: 1.3em
+  height: 1.1em
+  margin-right: 6px
+  vertical-align: middle
+.icon--downloadLog
+  background-image: inline-image('icons/download-log-icon.svg')
+.icon--removeLog
+  background-image: inline-image('icons/remove-log-icon.svg')
+.icon--down
+  width: 0.7em
+  height: 0.9em
+  margin-right: 4px
+  background-image: inline-image('icons/end-of-log-icon.svg')
+
 .log-body
   position: relative
   pre

app/templates/jobs/pre.hbs

@@ -7,15 +7,14 @@
   </menu>
   <div class="log-body">
     <a href="#" id="tail" class="log-tail" {{action "toggleTailing" target=view}}>
-      <span class="status"></span>
+      <span class="tail-status"></span>
-
+      <span class="tail-label button button--grey"><span class="icon icon--down"></span>
-      <label>
         {{#if view.job.isFinished}}
           Scroll to End of Log
         {{else}}
           Follow Log
         {{/if}}
-      </label>
+      </span>
     </a>
     <pre id="log" class="ansi"></pre>
 

public/images/icons/end-of-log-icon.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="6.752px" height="7.997px" viewBox="0 0 6.752 7.997" enable-background="new 0 0 6.752 7.997" xml:space="preserve">
+<polyline fill="#F2F2F2" points="2.263,4.63 2.263,0 4.515,0 4.515,4.63 6.751,4.63 3.378,7.997 0,4.63 2.263,4.63 "/>
+</svg>