additional styling to auth page and new icon for finished label

assets/scripts/app/templates/auth/signin.hbs

@@ -1,6 +1,9 @@
 {{#if redirected}}
   <p>You need to sign in to see this page.</p>
 {{/if}}
+
+<h3>Hey, we're so glad you're here!</h3>
+<h2>In order to view your repositories, please sign in.</h2>
 <p>
   <a href="#" {{action "signIn" target="Travis"}}>
     {{#if Travis.signingIn}}

assets/scripts/app/templates/repos/list.hbs

@@ -21,9 +21,11 @@
         {{/with}}
 
         <p class="summary">
-          <span class="duration_label">{{t repositories.duration}}:</span>
+          <span class="duration-icon"></span><span class="duration_label">{{t repositories.duration}}:</span>
-          <abbr class="duration" {{bindAttr title="lastBuildStartedAt"}}>{{formatDuration lastBuildDuration}}</abbr>,
+          <abbr class="duration" {{bindAttr title="lastBuildStartedAt"}}>{{formatDuration lastBuildDuration}}</abbr>
-          <span class="finished_at_label">{{t repositories.finished_at}}:</span>
+        </p>
+        <p class="summary">
+          <span class="finished-icon"></span><span class="finished_at_label">{{t repositories.finished_at}}:</span>
           <abbr class="finished_at timeago" {{bindAttr title="lastBuildFinishedAt"}}>{{formatTime lastBuildFinishedAt}}</abbr>
         </p>
 

assets/styles/auth.sass

@@ -2,7 +2,7 @@
 
 #auth
   #main
-    top: 100px
+    margin-top: 100px
     margin: 0 auto
     padding: 25px 50px
     height: 100px
@@ -11,7 +11,6 @@
     flex: none
     width: 300px
     min-width: auto
-    //border: 10px solid #bbb
     max-height: 400px
     @include border-radius(8px)
 
@@ -19,6 +18,18 @@
       margin-bottom: 1em
       color: #333
 
+    h2
+      color: #000000
+      font-weight: 400
+      text-align: center
+      margin-bottom: 40px
+
+    h3
+      font-size: 35px
+      color: #337389
+      text-align: center
+      margin: 0
+
     p
       color: #334
       text-align: center
@@ -27,15 +38,10 @@
       > a
         display: inline-block
         padding: 10px
-        border: 1px solid #d4d4d4
+        border: 0
-        -webkit-border-radius: 4px
+        background-color: black
-        -moz-border-radius: 4px
-        -ms-border-radius: 4px
-        -o-border-radius: 4px
-        border-radius: 4px
-        background-color: #c7000f
         font-size: 20px
-        color: #f6f6f6
+        color: #ffffff
         width: 200px
         text-align: center
 

assets/styles/left/list.sass

@@ -35,13 +35,29 @@
       // @include border-radius(10px)
 
     .summary
-      margin: 5px 0 0 16px
+      margin: 5px 0 0 0
       white-space: nowrap
       overflow: hidden
       text-overflow: ellipsis
       color: $color-text-light
       font-size: $font-size-small
       
+    .duration-icon
+      display: inline-block
+      width: 10px
+      height: 10px
+      margin-right: 5px
+      background-image: inline-image('ui/clock.png')
+      background-size: cover
+
+    .finished-icon
+      display: inline-block
+      width: 10px
+      height: 10px
+      margin-right: 5px
+      background-image: inline-image('ui/cal.png')
+      background-size: cover
+
     .info
       overflow: hidden
       margin: 12px -20px -15px -45px
@@ -66,7 +82,7 @@
       span
         position: relative
         display: block
-        top: 25px
+        top: 45px
         left: -15px
         width: 20px
         height: 20px