prepare log header

app/styles/app/_mixins/mixins.sass

@@ -24,4 +24,16 @@
 
 @mixin border-bottom-radius($radius)
   border-bottom-left-radius: $radius
-  border-bottom-right-radius: $radius
+  border-bottom-right-radius: $radius
+
+@mixin border-top-radius($radius)
+  border-top-left-radius: $radius
+  border-top-right-radius: $radius
+
+%border-top-4px
+  border-top-left-radius: 4px
+  border-top-right-radius: 4px
+
+%border-bottom-4px
+  border-bottom-left-radius: 4px
+  border-bottom-right-radius: 4px

app/styles/app/_mixins/vars.sass

@@ -51,4 +51,7 @@ $error-sand: #dcc682
 // tabs
 $tab-nav-inactive-bg: #f8f8f8
 $tab-nav-inactive-bg-hover: $white
-$tab-active-bg: $blue-grey-light
+$tab-active-bg: $blue-grey-light
+
+// log
+$log-header-bg: #444444

app/styles/app/main/log.sass

@@ -13,7 +13,6 @@ pre#log
   white-space: pre-wrap
   word-wrap: break-word
   background-color: #2a2a2a
-  border-radius: 4px
   counter-reset: line-numbering
 
   .cut
@@ -166,3 +165,15 @@ pre#log
     text-align: right
     color: #999
     background: inline-image('ui/workers-close.svg') no-repeat right 6px
+
+
+.log
+
+.log-header
+  background-color: $log-header-bg
+  height: 40px
+  @extend %border-top-4px
+
+.log-body
+  @extend %border-bottom-4px
+  margin: 0

app/templates/jobs/pre.hbs

@@ -1,4 +1,8 @@
-<div id="log-container">
+<section id="log-container" class="log">
+  <menu class="log-header">
+    <button class="button button--grey button--removeLog">Remove Log</button>
+    <button class="button button--grey button--downloadLog">Download Log</button>
+  </menu>
   <a href="#" id="tail" {{action "toggleTailing" target=view}}>
     <span class="status"></span>
 
@@ -10,7 +14,7 @@
       {{/if}}
     </label>
   </a>
-  <pre id="log" class="ansi"></pre>
+  <pre id="log" class="ansi log-body"></pre>
 
   {{#if view.log.hasContent}}
     <a href='#' class="to-top" {{action "toTop" target=view}}>Top</a>
@@ -22,4 +26,4 @@
       build or download the <a {{bind-attr href="view.plainTextLogUrl"}}>raw log</a>.
     </p>
   {{/if}}
-</div>
+</section>