Add activate button on 'not-active' repo page

It's mostly relevant in tests, because service is destroyed when test
end and then we don't want to run any timers.

.jshintrc

@@ -1,6 +1,5 @@
 {
   "predef": [
-    "server",
     "document",
     "window",
     "-Promise",

.travis.yml

@@ -39,6 +39,9 @@ install:
   - npm install
   - bower install
 
+before_script:
+  - ruby ci/prepare_testem.rb
+
 script:
   - ember try $EMBER_VERSION
 

Gemfile.lock

@@ -65,6 +65,3 @@ DEPENDENCIES
   sinatra
   sinatra-contrib
   travis-web!
-
-BUNDLED WITH
-   1.10.1

app/adapters/application.js

@@ -47,11 +47,5 @@ export default ActiveModelAdapter.extend({
     }
 
     return this._super(...arguments);
-  },
-
-  // this can be removed once this PR is merged and live:
-  // https://github.com/emberjs/data/pull/4204
-  findRecord(store, type, id, snapshot) {
-    return this.ajax(this.buildURL(type.modelName, id, snapshot, 'findRecord'), 'GET');
   }
 });

app/adapters/v3.js

@@ -54,11 +54,5 @@ export default RESTAdapter.extend({
   pathForType: function(modelName, id) {
     var underscored = Ember.String.underscore(modelName);
     return id ? underscored :  Ember.String.pluralize(underscored);
-  },
-
-  // this can be removed once this PR is merged and live:
-  // https://github.com/emberjs/data/pull/4204
-  findRecord(store, type, id, snapshot) {
-    return this.ajax(this.buildURL(type.modelName, id, snapshot, 'findRecord'), 'GET');
   }
 });

app/app.js

@@ -19,8 +19,12 @@ var App = Ember.Application.extend(Ember.Evented, {
   podModulePrefix: config.podModulePrefix,
   Resolver: Resolver,
 
+  lookup() {
+    return this.__container__.lookup.apply(this.__container__, arguments);
+  },
+
   flash(options) {
-    return Ember.getOwner(Travis).lookup('controller:flash').loadFlashes([options]);
+    return Travis.lookup('controller:flash').loadFlashes([options]);
   },
 
   toggleSidebar() {

app/components/dashboard-row.js

@@ -1,36 +1,23 @@
 import Ember from 'ember';
 import { githubCommit as githubCommitUrl } from 'travis/utils/urls';
 import config from 'travis/config/environment';
-import { hasAdminPermission, hasPushPermission } from 'travis/utils/permission';
 
 export default Ember.Component.extend({
   tagName: 'li',
   classNameBindings: ['repo.default_branch.last_build.state'],
-  classNames: ['rows', 'rows--dashboard'],
+  classNames: ['dashboard-row', 'row-li'],
   isLoading: false,
   isTriggering: false,
   hasTriggered: false,
-  dropupIsOpen: false,
 
   urlGithubCommit: function() {
     return githubCommitUrl(this.get('repo.slug'), this.get('repo.default_branch.last_build.commit.sha'));
   }.property('repo'),
 
-  displayMenuTofu: function() {
-    return hasPushPermission(this.get('currentUser'), this.get('repo.id'));
-  },
-
-  displayActivateLink: function() {
-    return hasAdminPermission(this.get('currentUser'), this.get('repo.id'));
-  },
-
   actions: {
     tiggerBuild(branch) {
       this.set('isTriggering', true);
       return this.triggerBuild();
-    },
-    openDropup() {
-      this.toggleProperty('dropupIsOpen');
     }
   }
 });

app/components/job-log.js

@@ -2,7 +2,6 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   logBinding: 'job.log',
-  classNames: ['job-log'],
 
   didReceiveAttrs: function(options) {
     this._super(...arguments);
@@ -26,10 +25,7 @@ export default Ember.Component.extend({
   },
 
   setupLog(job) {
-    this.set('error', false);
-    job.get('log').fetch().then(function() { }, () => {
-      this.set('error', true);
-    });
+    job.get('log').fetch();
     job.subscribe();
   }
 });

app/components/landing-row.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import { githubCommit as githubCommitUrl } from 'travis/utils/urls';
+import TravisRoute from 'travis/routes/basic';
+import config from 'travis/config/environment';
+
+export default Ember.Component.extend({
+  tagName: 'li',
+  classNameBindings: ['repo.lastBuildState'],
+  classNames: ['landing-row', 'row-li']
+});

app/components/lastbuild-tile.js

@@ -1,8 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Component.extend({
-
-  tagName: 'li',
-  classNameBindings: ['build.state']
-
-});

app/components/not-active.js

@@ -1,3 +1,46 @@
 import Ember from 'ember';
+import config from 'travis/config/environment';
 
-export default Ember.Component.extend();
+export default Ember.Component.extend({
+  flashes: Ember.inject.service(),
+
+  canActivate: function() {
+    let user = this.get('user');
+    if(user) {
+      let permissions = user.get('pushPermissions'),
+          repoId = parseInt(this.get('repo.id'));
+
+      return permissions.contains(repoId);
+    }
+  }.property('user.pushPermissions.[]', 'repo'),
+
+  actions: {
+    activate: function() {
+      let apiEndpoint = config.apiEndpoint,
+          repoId = this.get('repo.id');
+
+      this.set('isActivating', true);
+      $.ajax(apiEndpoint + '/v3/repo/' + repoId + '/enable', {
+        headers: {
+          Authorization: 'token ' + this.get('auth').token()
+        },
+        method: 'POST'
+      }).then((response) => {
+        if(response.active) {
+          let pusher = this.get('pusher'),
+              repoId = this.get('repo.id');
+
+          pusher.subscribe('repo-' + repoId);
+
+          this.get('repo').set('active', true);
+
+          this.get('flashes').add('success', 'Repository has been successfully activated.');
+        }
+        this.set('isActivating', false);
+      }, () => {
+        this.set('isActivating', false);
+        this.get('flashes').add('error', 'There was an error while trying to activate the repository.');
+      });
+    }
+  }
+});

app/components/repo-show-tools.js

@@ -1,6 +1,5 @@
 import Ember from 'ember';
 import config from 'travis/config/environment';
-import { hasPermission, hasPushPermission } from 'travis/utils/permission';
 
 export default Ember.Component.extend({
   popup: Ember.inject.service(),
@@ -23,16 +22,37 @@ export default Ember.Component.extend({
       return this.toggleProperty('isOpen');
     }
   },
+
+  hasPermission: function() {
+    var permissions;
+    if (permissions = this.get('currentUser.permissions')) {
+      return permissions.contains(parseInt(this.get('repo.id')));
+    }
+  }.property('currentUser.permissions.length', 'repo.id'),
+
+  hasPushPermission: function() {
+    var permissions;
+    if (permissions = this.get('currentUser.pushPermissions')) {
+      return permissions.contains(parseInt(this.get('repo.id')));
+    }
+  }.property('currentUser.pushPermissions.length', 'repo.id'),
+
+  hasAdminPermission: function() {
+    var permissions;
+    if (permissions = this.get('currentUser.adminPermissions')) {
+      return permissions.contains(parseInt(this.get('repo.id')));
+    }
+  }.property('currentUser.adminPermissions.length', 'repo.id'),
+
   displaySettingsLink: function() {
-    return hasPushPermission(this.get('currentUser'), this.get('repo.id'));
-  }.property('currentUser.pushPermissions.length', 'repo'),
+    return this.get('hasPushPermission');
+  }.property('hasPushPermission'),
 
   displayCachesLink: function() {
-    return hasPushPermission(this.get('currentUser'), this.get('repo.id')) && config.endpoints.caches;
-  }.property('currentUser.pushPermissions.length', 'repo'),
+    return this.get('hasPushPermission') && config.endpoints.caches;
+  }.property('hasPushPermission'),
 
   displayStatusImages: function() {
-    return hasPermission(this.get('currentUser'), this.get('repo.id'));
-  }.property('currentUser.permissions.length', 'repo.id')
-
+    return this.get('hasPermission');
+  }.property('hasPermission')
 });

app/components/request-icon.js

@@ -2,7 +2,7 @@ import Ember from 'ember';
 
 export default Ember.Component.extend({
   tagName: 'span',
-  classNames: ['request-icon', 'icon'],
+  classNames: ['status-icon', 'icon'],
   classNameBindings: ['event', 'state'],
 
   isPush: function() {

app/components/user-avatar.js

@@ -3,7 +3,7 @@ import Ember from 'ember';
 export default Ember.Component.extend({
 
   tagName: 'span',
-  classNameBindings: ['small:avatar--small:avatar'],
+  classNames: ['avatar'],
 
   userInitials: function() {
     var name = this.get('name');

app/controllers/current-user.js

@@ -11,7 +11,7 @@ export default Ember.Controller.extend({
     var user;
     if ((user = this.get('model')) && user.get('isSyncing') && !user.get('syncedAt')) {
       return Ember.run.scheduleOnce('routerTransitions', this, function() {
-        return Ember.getOwner(this).lookup('router:main').send('renderFirstSync');
+        return this.container.lookup('router:main').send('renderFirstSync');
       });
     }
   }.observes('isSyncing', 'auth.currentUser')

app/controllers/repos.js

@@ -76,7 +76,7 @@ var Controller = Ember.Controller.extend({
   possiblyRedirectToGettingStartedPage() {
     return Ember.run.scheduleOnce('routerTransitions', this, function() {
       if (this.get('tab') === 'owned' && this.get('isLoaded') && this.get('repos.length') === 0) {
-        return Ember.getOwner(this).lookup('router:main').send('redirectToGettingStarted');
+        return this.container.lookup('router:main').send('redirectToGettingStarted');
       }
     });
   },

app/helpers/pretty-date.js

@@ -2,6 +2,5 @@ import { timeAgoInWords, safe } from 'travis/utils/helpers';
 import Ember from "ember";
 
 export default Ember.Helper.helper(function(params) {
-  let date = new Date(params[0]);
-  return safe(moment(date).format('MMMM D, YYYY H:mm:ss') || '-');
+  return safe(moment(params[0]).format('MMMM D, YYYY H:mm:ss') || '-');
 });

app/instance-initializers/pusher.js

@@ -2,15 +2,17 @@ import config from 'travis/config/environment';
 import TravisPusher from 'travis/utils/pusher';
 var PusherInitializer, initialize;
 
-initialize = function(applicationInstance) {
-  const app = applicationInstance.application;
+initialize = function(data) {
+  var application;
+  application = data.application;
   if (config.pusher.key) {
-    app.pusher = new TravisPusher(config.pusher, applicationInstance.lookup('service:ajax'));
-    app.register('pusher:main', app.pusher, {
+    application.pusher = new TravisPusher(config.pusher, data.container.lookup('service:ajax'));
+    application.register('pusher:main', application.pusher, {
       instantiate: false
     });
-    app.inject('route', 'pusher', 'pusher:main');
-    return app.pusher.store = applicationInstance.lookup('service:store');
+    application.inject('route', 'pusher', 'pusher:main');
+    application.inject('component', 'pusher', 'pusher:main');
+    return application.pusher.store = data.container.lookup('service:store');
   }
 };
 

app/models/broadcast.js

@@ -30,7 +30,7 @@ var Broadcast = Model.extend({
 Broadcast.reopenClass({
   seen: function() {
     var seenBroadcasts;
-    seenBroadcasts = Ember.getOwner(Travis).lookup('service:storage').getItem('travis.seen_broadcasts');
+    seenBroadcasts = Travis.lookup('service:storage').getItem('travis.seen_broadcasts');
     if (seenBroadcasts != null) {
       seenBroadcasts = JSON.parse(seenBroadcasts);
     }

app/models/log.js

@@ -28,14 +28,12 @@ var Request = Ember.Object.extend({
       return $.ajax({
         url: this.redirectTo(xhr),
         type: 'GET',
-        success: (body) => {
-          Ember.run(this, function() { this.handlers.text(body); });
-        }
+        success: this.handlers.text
       });
     } else if (this.isJson(xhr, body)) {
-      return Ember.run(this, function() { this.handlers.json(body); });
+      return this.handlers.json(body);
     } else {
-      return Ember.run(this, function() { this.handlers.text(body); });
+      return this.handlers.text(body);
     }
   },
 
@@ -46,7 +44,6 @@ var Request = Ember.Object.extend({
   },
 
   isJson(xhr, body) {
-
     // Firefox can't see the Content-Type header on the xhr response due to the wrong
     // status code 204. Should be some redirect code but that doesn't work with CORS.
     var type = xhr.getResponseHeader('Content-Type') || '';

app/router.js

@@ -14,7 +14,7 @@ var Router = Ember.Router.extend({
       // we should probably think about a more general way to
       // do this, location should not know about auth status
       return Location.create({
-        auth: Ember.getOwner(this).lookup('service:auth')
+        auth: this.container.lookup('service:auth')
       });
     }
   }.property(),

app/routes/application.js

@@ -1,7 +1,6 @@
 import TravisRoute from 'travis/routes/basic';
 import config from 'travis/config/environment';
 import BuildFaviconMixin from 'travis/mixins/build-favicon';
-import Ember from 'ember';
 
 export default TravisRoute.extend(BuildFaviconMixin, {
   needsAuth: false,
@@ -10,13 +9,8 @@ export default TravisRoute.extend(BuildFaviconMixin, {
     this._super.apply(this, arguments);
     return this.get('auth').refreshUserData().then( () => {
       this.setupPendo();
-    }, (xhr) => {
-      // if xhr is not defined it means that scopes are not correct,
-      // so log the user out. Also log the user out if the response is 401
-      // or 403
-      if(!xhr || (xhr.status === 401 || xhr.status === 403)) {
-        return this.get('auth').signOut();
-      }
+    }, () => {
+      return this.get('auth').signOut();
     });
   },
 
@@ -100,7 +94,7 @@ export default TravisRoute.extend(BuildFaviconMixin, {
     error(error) {
       var authController;
       if (error === 'needs-auth') {
-        authController = Ember.getOwner(this).lookup('controller:auth');
+        authController = this.container.lookup('controller:auth');
         authController.set('redirected', true);
         return this.transitionTo('auth');
       } else {

app/routes/getting-started.js

@@ -1,8 +1,7 @@
 import TravisRoute from 'travis/routes/basic';
-import Ember from 'ember';
 
 export default TravisRoute.extend({
   setupController(controller) {
-    return Ember.getOwner(this).lookup('controller:repos').activate('owned');
+    return this.container.lookup('controller:repos').activate('owned');
   }
 });

app/routes/home.js

@@ -1,13 +1,61 @@
 import BasicRoute from 'travis/routes/basic';
+import config from 'travis/config/environment';
+import limit from 'travis/utils/computed-limit';
 import Ember from 'ember';
 
 export default BasicRoute.extend({
+  init: function() {
+    var repos, store;
+
+    store = this.store;
+    repos = Ember.ArrayProxy.extend({
+      isLoadedBinding: 'repos.isLoaded',
+      repos: [],
+      sorted: Ember.computed.sort('repos', 'sortedReposKeys'),
+      content: limit('sorted', 'limit'),
+      sortedReposKeys: ['sortOrderForLandingPage:desc'],
+      limit: 3
+    }).create();
+
+    this.set('repos', repos);
+    this.loadMoreRepos();
+
+    return this._super.apply(this, arguments);
+  },
+
+  loadMoreRepos() {
+    return this.store.findAll('build').then( (builds) => {
+      var repoIds, repos;
+      repoIds = builds.mapBy('data.repo').uniq();
+      repos = this.get('repos.repos');
+      return this.store.query('repo', {
+        ids: repoIds
+      }).then(function(reposFromRequest) {
+        return reposFromRequest.toArray().forEach(function(repo) {
+          if (!repos.contains(repo)) {
+            return repos.pushObject(repo);
+          }
+        });
+      });
+    });
+  },
 
   activate() {
+    var interval;
+    this._super.apply(this, arguments);
+    interval = setInterval(() => {
+      return this.loadMoreRepos();
+    }, 60000);
+    this.set('interval', interval);
     return this.controllerFor('top').set('landingPage', true);
   },
 
   deactivate() {
+    var interval;
+    this._super.apply(this, arguments);
+    if (interval = this.get('interval')) {
+      clearInterval(interval);
+    }
     return this.controllerFor('top').set('landingPage', false);
   },
 

app/routes/repo.js

@@ -17,7 +17,7 @@ export default TravisRoute.extend(ScrollResetMixin, {
   },
 
   setupController(controller, model) {
-    this.controllerFor('repos').activate('owned');
+    this.container.lookup('controller:repos').activate('owned');
     if (model && !model.get) {
       model = this.get('store').find('repo', model.id);
     }

app/routes/repo/index.js

@@ -4,7 +4,8 @@ import Config from 'travis/config/environment';
 export default TravisRoute.extend({
   setupController(controller, model) {
     this._super.apply(this, arguments);
-    return this.controllerFor('repo').activate('current');
+    this.controllerFor('repo').activate('current');
+    controller.set('repo', model);
   },
 
   deactivate() {

app/routes/simple-layout.js

@@ -3,7 +3,7 @@ import TravisRoute from 'travis/routes/basic';
 export default TravisRoute.extend({
   setupController: function() {
     $('body').attr('id', 'simple');
-    this.controllerFor('repos').activate('owned');
+    this.container.lookup('controller:repos').activate('owned');
     return this._super.apply(this, arguments);
   },
   renderTemplate: function() {

app/routes/team.js

@@ -29,7 +29,7 @@ export default TravisRoute.extend({
         image: 'fritz'
       }, {
         name: 'Konstantin Haase',
-        title: 'Haase of Engineering',
+        title: 'Haase of Pain',
         handle: 'konstantinhaase',
         nationality: 'germany',
         country: 'switzerland',
@@ -172,33 +172,6 @@ export default TravisRoute.extend({
         nationality: 'italy',
         country: 'austria',
         image: 'laura'
-      }, {
-        name: 'Maren Brechler',
-        title: 'Number Juggler',
-        nationality: 'germany',
-        country: 'germany',
-        image: 'maren'
-      }, {
-        name: 'Ana Rosas',
-        title: 'Software Baker',
-        handle: 'ana_rosas',
-        nationality: 'mexico',
-        country: 'mexico',
-        image: 'ana'
-      }, {
-        name: 'Igor Wiedler',
-        title: 'webmaster',
-        handle: 'igorwhilefalse',
-        nationality: 'ukswitzerland',
-        country: 'germany',
-        image: 'igor'
-      }, {
-        name: 'Carmen Andoh',
-        title: 'SRE- Snazzy Rsync Empress',
-        handle: 'caelestisca',
-        nationality: 'usa',
-        country: 'usa',
-        image: 'carmen'
       }
     ];
   }

app/serializers/build.js

@@ -16,14 +16,6 @@ var Serializer = V2FallbackSerializer.extend({
     return result;
   },
 
-  normalizeSingleResponse: function(store, primaryModelClass, payload, id, requestType) {
-    if (payload.commit) {
-      payload.build.commit = payload.commit;
-      delete payload.build.commit_id;
-    }
-    return this._super(...arguments);
-  },
-
   normalizeArrayResponse: function(store, primaryModelClass, payload, id, requestType) {
     var result;
     if (payload.commits) {

app/serializers/job.js

@@ -25,14 +25,6 @@ export default V2FallbackSerializer.extend({
     return this._super(modelClass, resourceHash);
   },
 
-  normalizeSingleResponse: function(store, primaryModelClass, payload, id, requestType) {
-    if (payload.commit) {
-      payload.job.commit = payload.commit;
-      delete payload.job.commit_id;
-    }
-    return this._super(...arguments);
-  },
-
   normalizeArrayResponse: function(store, primaryModelClass, payload, id, requestType) {
     var result;
     if (payload.commits) {

app/services/ajax.js

@@ -64,7 +64,7 @@ export default Ember.Service.extend({
     success = options.success || (function() {});
     options.success = (data, status, xhr) => {
       if (data != null ? data.flash : void 0) {
-        Ember.getOwner(Travis).lookup('controller:flash').loadFlashes(data.flash);
+        Travis.lookup('controller:flash').loadFlashes(data.flash);
       }
       if (data != null) {
         delete data.flash;
@@ -75,7 +75,7 @@ export default Ember.Service.extend({
     options.error = (data, status, xhr) => {
       console.log("[ERROR] API responded with an error (" + status + "): " + (JSON.stringify(data)));
       if (data != null ? data.flash : void 0) {
-        Ember.getOwner(Travis).lookup('controller:flash').pushObject(data.flash);
+        Travis.lookup('controller:flash').pushObject(data.flash);
       }
       if (data != null) {
         delete data.flash;

app/services/auth.js

@@ -140,7 +140,7 @@ export default Ember.Service.extend({
             data.user.token = user.token;
             this.storeData(data, this.get('sessionStorage'));
             this.storeData(data, this.get('storage'));
-            Travis.trigger('user:refreshed', data.user);
+            return Travis.trigger('user:refreshed', data.user);
           }
         } else {
           return Ember.RSVP.Promise.reject();
@@ -214,7 +214,7 @@ export default Ember.Service.extend({
     //         as a direct response to either manual sign in or autoSignIn (right now
     //         we treat both cases behave the same in terms of sent events which I think
     //         makes it more complicated than it should be).
-    router = Ember.getOwner(this).lookup('router:main');
+    router = this.container.lookup('router:main');
     try {
       return router.send(name);
     } catch (error1) {

app/services/flashes.js

@@ -48,5 +48,9 @@ export default Ember.Service.extend({
 
   close(msg) {
     return this.get('flashes').removeObject(msg);
+  },
+
+  add(type, message) {
+    this.loadFlashes([ { [type]: message } ]);
   }
 });

app/styles/app.scss

@@ -3,7 +3,6 @@
 @import "app/legacy/_grid";
 
 @import "app/vars";
-@import "app/data";
 @import "app/mixins";
 @import "app/base";
 @import "app/userlike";
@@ -27,11 +26,11 @@
 @import "app/modules/build-header";
 @import "app/modules/avatar";
 @import "app/modules/popup";
-@import "app/modules/lastbuild";
-@import "app/modules/sync-button";
-@import "app/modules/loading-indicator";
-@import "app/modules/build-tile";
-@import "app/modules/status-icon";
+
+@import "app/components/sync-button";
+@import "app/components/loading-indicator";
+@import "app/components/build-tile";
+@import "app/components/status-icon";
 
 @import "app/animation/tractor";
 

app/styles/app/base.sass

@@ -18,9 +18,6 @@ body
   line-height: 1.45
   font-family: $font-family-sans-serif
 
-h1, h2, h3, h4, h5, h6
-  font-weight: $font-weight-normal
-
 img
   max-width: 100%
   height: auto
@@ -66,8 +63,9 @@ a
     text-decoration: underline
 
 .small-title
-  font-size: 18px
+  font-size: 20px
   color: $oxide-blue
+  font-weight: 400
 
 .blank-list
   @include resetul

app/styles/app/components/build-tile.sass

@@ -1,12 +1,13 @@
 @mixin buildTileColors($color, $bg, $status, $extra-hover: $color)
   > .#{$status}
     background-color: $bg
+    .icon-request g > *,
     .status-icon g > *
-      stroke: $color
+      fill: $color
     &:hover
       background-color: $extra-hover
-      .status-icon g > *
-        stroke: white
+      .status-icon.#{$status} g > *
+        fill: white
       .status-icon .circle
         border-color: white
         border-width: 2px
@@ -32,8 +33,8 @@
       right: 0
       bottom: 0
       left: 0
-      width: 18px
-      height: 18px
+      width: 2.5rem !important
+      height: 2.5rem !important
       margin: auto !important
       background-color: transparent
       transition: top 200ms ease

app/styles/app/components/status-icon.sass

@@ -1,25 +1,3 @@
-.status-icon *,
-.request-icon *
-  fill: none
-  stroke: $cement-grey
-  stroke-linecap: round
-  stroke-linejoin: round
-  stroke-miterlimit: 10
-  stroke-width: 2px
-
-.status-icon
-  @extend %icon
-  width: 13px
-  height: 14px
-  line-height: 0
-  margin-right: .3rem
-
-.request-icon
-  @extend %icon
-  width: 16px
-  height: 19px
-  margin-right: .1rem
-
 .status-icon
   .is-rotating
     width: 17px
@@ -34,15 +12,10 @@
       vertical-align: middle
       width: 5px
       height: 5px
-      border: solid 1px $dozer-yellow
+      border: solid 1px #bfb502
       border-radius: 50%
       transform-origin: center center
 
-  &.started,
-  &.received,
-  &.created
-    height: 19px
-
 @keyframes rotation
   0%
     transform: rotateZ(0deg)

app/styles/app/components/sync-button.sass

@@ -16,9 +16,8 @@
       background-color: $oxide-blue
   .sync-last
     position: absolute
-    right: 9em
+    left: -15em
     top: 0
-    width: 170%
     z-index: -1
     transition: transform 150ms ease, opacity 250ms ease
     transform: translateX(80%)
@@ -34,8 +33,11 @@
 
   .icon-trigger
     @extend %icon-line-trigger-white
-    @extend .icon
-    margin-right: 0.3rem
+    @extend %icon
+    width: 1.5em
+    height: 1.5em
+    margin-right: 0.3em
+
 
   .loading-indicator--white
     vertical-align: top

app/styles/app/data.scss

@@ -1,38 +0,0 @@
-$stateMap: (
-  passed: (
-    color: $turf-green,
-    color-bg: $seed-green
-  ),
-  failed: (
-    color: $brick-red,
-    color-bg: $quartz-red
-  ),
-  errored: (
-    color: $brick-red,
-    color-bg: $quartz-red
-  ),
-  canceled: (
-    color: $cement-grey,
-    color-bg: $pebble-grey
-  ),
-  created: (
-    color: $canary-yellow,
-    color-bg: $dozer-yellow
-  ),
-  started: (
-    color: $canary-yellow,
-    color-bg: $dozer-yellow
-  ),
-  booting: (
-    color: $canary-yellow,
-    color-bg: $dozer-yellow
-  ),
-  queued: (
-    color: $canary-yellow,
-    color-bg: $dozer-yellow
-  ),
-  received: (
-    color: $canary-yellow,
-    color-bg: $dozer-yellow
-  )
-);

app/styles/app/layouts/broadcasts.sass

@@ -3,7 +3,7 @@
   height: $top-height
   width: 40px
   margin-left: 1em
-  line-height: 2.5
+  line-height: $top-height
   cursor: pointer
   vertical-align: middle
   @media #{$medium-up}
@@ -46,7 +46,7 @@
     font-size: .9em
     word-wrap: break-word
   a:not(.icon-close)
-   
+    display: block
     line-height: 1.45
     text-decoration: underline
 
@@ -57,15 +57,15 @@
     height: auto
 
   .icon-close
-    @extend %icon-line-cross
     position: absolute
     bottom: 0
     right: 0
     display: inline-block
-    width: 1em
-    height: 1em
-    background-repeat: no-repeat
-    cursor: pointer
+    width: 1.2em
+    height: 1.2em
+    background:
+      image: inline-image('line-icons/icon-failed.svg')
+      repeat: no-repeat
 
   @media #{$medium-up}
     position: absolute
@@ -73,7 +73,7 @@
     left: 145px
     width: 27em
     height: auto
-    margin-left: -0.4em
+    margin-left: -0.7em
     .centered &
       left: 133px
     &:after
@@ -94,33 +94,61 @@
   &.announcement
     background-color: $turf-green
 
+
 .icon-broadcast
   display: inline-block
-  width: 16px
-  height: 16px
+  width: 1.3em
+  height: 2em
   vertical-align: middle
   svg
     overflow: visible
-    .path
-      stroke: $cement-grey
-      fill: none
+  .tower-path
+    fill: #AEAEAE
+  .radio-wave--right,
+  .radio-wave--left
+    display: none
   &:hover,
   &.is-open
-    .path
-      stroke: $asphalt-grey
+    .tower-path
+      fill: #818181
 
   &.warning
-    .path
-      stroke: $brick-red
+    .tower-path
+      fill: #DB4141
     &:hover,
     &.is-open
-      .path
-        stroke: $brick-red
+      .tower-path
+        fill: #BA1717
 
   &.announcement
-    .path
-      stroke: $turf-green
+    .tower-path
+      fill: #3CA85B
     &:hover,
     &.is-open
-      .path
-        stroke: $turf-green
+      .tower-path
+        fill: #238C3E
+
+  &.announcement,
+  &.warning
+    .radio-wave--right,
+    .radio-wave--left
+      display: block
+
+  .radio-wave--right
+    .tower-path
+      transform-origin: left center
+      animation: pulsating-right 1.5s linear infinite
+
+  .radio-wave--left
+    .tower-path
+      transform-origin: right center
+      animation: pulsating-left 1.5s linear infinite
+
+
+// @keyframes pulsating-right
+//   40%
+//    transform: translateX(1px) scale(1.1)
+
+//@keyframes pulsating-left
+//  40%
+//    transform: translateX(-1px) scale(1.1)

app/styles/app/layouts/caches.sass

@@ -20,25 +20,33 @@
   list-style: none
 
 .cache-item
-  border: 1px solid rgba($cement-grey, 0.2)
+  border: 1px solid $cream-dark
   margin-bottom: 5px
   font-size: 15px
   padding: 0 1em
+  .status-icon
+    width: 1.5em
+    height: 1.5em
+    vertical-align: middle
+  .icon-scale
+    width: 1.2em
+    height: 1.2em
+    vertical-align: middle
+    margin-right: .3em
   &:hover,
   &:active
-    background-color: $pebble-grey
+    background-color: #F5F5F5
 
   @media #{$medium-up}
     display: flex
     justify-content: space-between
-    flex-flow: row nowrap
+    flex-flow: row wrap
     align-items: center
     padding: .3em 0
     white-space: nowrap
     .row-item:first-of-type
       flex: 1 0 30%
       padding-left: 1em
-      overflow: hidden
     .row-item:nth-of-type(2)
       flex: 1 0 30%
     .row-item:nth-of-type(3)

app/styles/app/layouts/dashboard.sass

@@ -2,9 +2,6 @@
   list-style: none
   padding: 0
 
-.dashboard .centered
-  @media #{$small-only}
-    padding: 0 1em
 
 .dashboard-header
   width: 100%
@@ -29,83 +26,3 @@
   padding: 2rem 0
   font-size: 20px
   color: $cement-grey
-
-.dash-star
-  &:hover,
-  &:active
-    svg path
-      stroke-width: 2px
-
-  &.is-starred
-    svg path
-      stroke: $dozer-yellow
-      fill: $canary-yellow
-
-.dash-header
-  order: 2
-  flex: 0 0 20%
-
-.dash-head
-  flex: 0 0 2%
-  display: flex
-  padding: 0 1em
-  margin-bottom: 1em
-  justify-content: space-between
-  align-items: flex-end
-  @media #{$medium-up}
-    flex: 0 0 3em
-    display: block
-    margin-bottom: 0
-    height: 55px
-    border-right: 1px solid rgba($asphalt-grey, .2)
-
-.dash-body
-  flex-grow: 1
-  position: relative
-
-  @media #{$medium-up}
-    padding: 0 1.5em 0
-
-.dash-aside
-  @media #{$medium-up}
-    position: absolute
-    width: 100%
-    bottom: 0
-    overflow: hidden
-
-.dash-main
-  @media #{$small-only}
-    padding: 0 1em
-  @media #{$medium-up}
-    display: flex
-    flex-flow: row wrap
-    align-items: center
-    justify-content: space-between
-    height: 80px
-
-.dash-default
-  order: 3
-  flex: 0 0 20%
-
-  @media #{$small-only}
-    margin-top: 2em
-
-.dash-menu
-  order: 5
-  flex: 0 0 3%
-
-.dash-last-build
-  display: flex
-  order: 4
-  flex: 0 0 55%
-  flex-flow: row wrap
-  justify-content: space-between
-
-  @media #{$small-only}
-    margin-top: 2em
-  @media #{$medium-up}
-    align-items: center
-    padding-right: 3em
-
-    > div
-      flex: 0 0 33%

app/styles/app/layouts/jobs.sass

@@ -23,15 +23,15 @@
 .jobs-item
   border: 1px solid $cream-dark
   margin-bottom: 5px
-  @include colorJobs($turf-green, 'passed', 3px, $seed-green)
-  @include colorJobs($brick-red, 'failed', 3px, $quartz-red)
-  @include colorJobs($brick-red, 'errored', 3px, $quartz-red)
-  @include colorJobs($cement-grey, 'canceled', 3px, $pebble-grey)
-  @include colorJobs($canary-yellow, 'started', 3px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'queued', 3px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'booting', 3px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'received', 3px, $haze-yellow, true)
-  @include colorJobs($canary-yellow, 'created', 3px, $haze-yellow, true)
+  @include colorJobs($turf-green, 'passed', 6px, $seed-green)
+  @include colorJobs($brick-red, 'failed', 6px, $quartz-red)
+  @include colorJobs($brick-red, 'errored', 6px, $quartz-red)
+  @include colorJobs($cement-grey, 'canceled', 6px, $pebble-grey)
+  @include colorJobs($canary-yellow, 'started', 6px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'queued', 6px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'booting', 6px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'received', 6px, $haze-yellow, true)
+  @include colorJobs($canary-yellow, 'created', 6px, $haze-yellow, true)
 
   @include colorFadeOut('passed', $seed-green)
   @include colorFadeOut('failed', $quartz-red)
@@ -52,6 +52,7 @@
       justify-content: space-between
       align-items: center
       height: 34px
+      padding-left: 0.5em
 
 .section-title
   font-size: 16px
@@ -64,21 +65,40 @@
   @media #{$medium-up}
     flex: 0 0 2em
 
+  &.started,
+  &.booting,
+  &.received,
+  &.created
+    line-height: 3
+  .icon
+    width: 24px
+    height: 24px
+    vertical-align: middle
+
 .job-number
   display: inline-block
   @media #{$medium-up}
     flex: 0 0 7em
     padding-right: 1em
     border-right: 1px solid $cream-dark
+.icon-hash
+  width: 20px
+  height: 20px
+  vertical-align: middle
+  @extend %icon
+  @extend %icon-line-hash
 
 .job-os
   position: relative
   pointer-events: none
   .icon
-    width: 18px
+    width: 16px
     height: 20px
     vertical-align: middle
     padding-left: 1.5em
+    background:
+      size: auto 18px
+      repeat: no-repeat
   @media #{$medium-up}
     flex: 0 0 4em
     text-align: center
@@ -107,8 +127,11 @@
       @include fadeOut(right, -90deg, white)
 
 .icon-lang
+  width: 16px
+  height: 13px
   margin-right: .3em
-  @extend .icon
+  vertical-align: middle
+  @extend %icon
   @extend %icon-line-language
 
 .job-env
@@ -126,6 +149,7 @@
   width: 14px
   height: 14px
   margin-right: .3em
+  vertical-align: middle
   @extend %icon
   @extend %icon-line-environment
 

app/styles/app/layouts/log.sass

@@ -15,10 +15,10 @@
       padding: 0.1em 0.5em 0.1em 1.5em
       cursor: pointer
       background:
-        color: $cement-grey
+        color: #777777
         repeat: no-repeat
         size: auto 12px
-        position: 6px 5px
+        position: 6px 4px
       border-radius: 2px
       color: $pebble-grey
       @extend %icon-arrow-down

app/styles/app/layouts/owner.sass

@@ -15,6 +15,10 @@
   .owner-handle
     margin: 0
     font-size: $font-size-ml
+    .icon
+      width: 1.1em
+      height: 1.2em
+      vertical-align: middle
     a:hover
       text-decoration: underline
   img

app/styles/app/layouts/profile.sass

@@ -133,6 +133,9 @@ p.profile-user-last
     display: inline-block
     padding: .2em .2em .2em .5em
     height: 28px
+    .icon
+      width: 14px
+      height: 14px
 
 .profile-hooklist .sync-spinner
   display: inline !important
@@ -216,23 +219,23 @@ p.profile-user-last
   .icon-eye
     vertical-align: middle
     path
-      fill: $cement-grey
+      fill: #B6B7B9
     circle
-      stroke: $cement-grey
+      stroke: #B6B7B9
       fill: #fff
     &:hover
       path
-        fill: $asphalt-grey
+        fill: #666666
       circle
-        stroke: $asphalt-grey
+        stroke: #666666
         fill: #fff
   &.is-visible
     .icon-eye
       circle
-        fill: $cement-grey
+        fill: #B6B7B9
       &:hover
         circle
-          fill: $asphalt-grey
+          fill: #666666
 
 #unadministerable-hooks
   p

app/styles/app/layouts/pull-requests.sass

@@ -24,7 +24,6 @@
       display: flex
       flex-flow: row wrap
       align-items: baseline
-      padding-left: 0.4em
 
     .row-branch
       flex: 1 0 18%

app/styles/app/layouts/requests.sass

@@ -29,6 +29,13 @@
     font-weight: $font-weight-bold
     margin-right: .5em
 
+  .status-icon
+    width: 1.3em
+    height: 1.3em
+    vertical-align: middle
+    &.api
+      width: 1.2em !important
+
   a:hover,
   a:active
     text-decoration: underline

app/styles/app/layouts/settings.sass

@@ -1,10 +1,11 @@
+
 .settings
   padding-top: .8em
 
 .settings-section
   padding: 0 0 1em
   margin-bottom: 3em
-  border-bottom: 2px solid $pebble-grey
+  border-bottom: 2px solid #f2f3ef
   &:last-of-type
     border-bottom: none
   .small-title
@@ -52,8 +53,10 @@
     box-shadow: none
 
 %settings-row
-  border-radius: 2px
-  background-color: $pebble-grey
+  border-radius: 4px
+  background-color: #F6F5F5
+  @media #{$medium-up}
+    height: 36px
 
 .settings-envvar
   @extend %settings-row
@@ -76,10 +79,10 @@
   vertical-align: middle
   overflow: hidden
   white-space: nowrap
-  color: $asphalt-grey
+  color: #8e8f8e
   &:after
     content: ""
-    @include fadeOut(right, -90deg, $pebble-grey)
+    @include fadeOut(right, -90deg, #F6F5F5)
 
 .ssh-key-name
   @extend %settings-name-section
@@ -101,7 +104,7 @@
   display: inline-block
   vertical-align: middle
   overflow: hidden
-  color: $asphalt-grey
+  color: #8e8f8e
 
 .ssh-key-value
   @extend %settings-value-section
@@ -120,16 +123,16 @@
   input
     display: inline-block
     width: 100%
-    padding: 0.6em 0.5em 0.7em 2.5em
-    border-radius: 2px
+    padding: 0.6em 0.5em 0.7em 1.1em
+    border-radius: 4px
     border: none
-    background-color: lighten($cement-grey, 20)
-    color: $asphalt-grey
-    @extend %icon-line-lock
+    background-color: #eeedec
+    color: #8e8f8e
+    @extend .icon-lock
     background:
-      size: 16px
+      size: 14px
       repeat: no-repeat
-      position: 0.5em 0.5em
+      position: 0.8em 0.7em
   .is-public &
     input
       background-image: none;
@@ -143,6 +146,12 @@
   width: 24%
   vertical-align: middle
   text-align: center
+  .icon-delete
+    @extend %icon
+    @extend .icon-delete
+    width: 1.1em
+    height: 1.6em
+    background-position: 0 2px
   &:hover
     .icon-delete
       @extend .icon-delete-hover
@@ -164,7 +173,11 @@
   .icon-delete
     margin: .2em auto 0
   .icon-delete-disabled
-    @extend .icon
+    @extend %icon
     @extend .icon-delete-disabled
     display: block
+    width: 1.1em
+    height: 1.4em
     margin: .2em auto 0
+
+

app/styles/app/layouts/sidebar.sass

@@ -46,15 +46,10 @@
       width: 22%
   a:hover
     text-decoration: underline
-
-  .icon-clock,
-  .icon-calendar,
-  .icon-hash
-    width: 14px
-    height: 14px
-  .status-icon
-    width: 12px
-    height: 16px
+  .icon
+    width: 1.3em
+    height: 1.4em
+    vertical-align: middle
 
 .tabnav--sidebar
   font-size: 14px
@@ -80,8 +75,7 @@
     margin-right: 0.8em
   @media (min-width: #{lower-bound($large-range)})
     ul
-      height: 2em
-      margin-bottom: -5px
+        height: 2em
   @media (max-width: #{lower-bound($large-range)})
     li
       display: block !important

app/styles/app/mixins.sass

@@ -36,6 +36,15 @@
   bottom: 0
   margin: auto
 
+%inline-block
+  display: inline-block
+
+%section-title
+  font-size: $font-size-sm
+  color: $cement-grey
+  font-weight: 400
+
+
 =linkStyle
   a
     text-decoration: none
@@ -58,34 +67,9 @@
 
 // @todo simplyfiy coloring mixins
 =colorStatusIcons($color, $status)
-  .status-icon.#{$status},
-  .request-icon.#{$status}
+  .status-icon.#{$status}
     svg *
-      stroke: $color
-
-=rowBorder
-  border: 1px solid lighten($cement-grey, 20)
-  border-radius: 2px
-
-=rowColor($status, $color, $color-bg: $color)
-  &.#{$status}
-    .color
-      color: $color
-      a
-        color: $color
-        text-decoration: none
-        &:hover,
-        &:active
-          border-bottom: 1px solid $color
-    .status-icon g > *,
-    .request-icon g > *
-      stroke: $color-bg
-    .background
-      background-color: $color-bg
-
-=rowBg($width, $status, $color)
-  &.#{$status}
-    background: linear-gradient(to right, $color 0%, $color $width, white $width, white 100%) no-repeat
+      fill: $color
 
 =statusColors($color, $status, $width, $color2: $color, $building:false)
   &.#{$status}
@@ -96,9 +80,9 @@
       color: $color
       &:hover
         border-color: $color
-    .status-icon g > *,
-    .request-icon g > *
-      stroke: $color
+    .row-name .status-icon g > *,
+    .row-request .icon-request g > *
+      fill: $color
 
     .build a,
     .repo-title a
@@ -135,7 +119,4 @@
     @include colorStatusIcons($color, $status)
     &:hover,
     &:active
-      background-color: $hover
-      border-left: $width solid $color
-      a
-        margin-left: - $width + 1px
+      @include colorBg($bg-start, $status, $width, $hover)

app/styles/app/modules/avatar.sass

@@ -42,11 +42,18 @@
     margin-left: 1em
     top: -3px
 
-.avatar--small
-  @extend .avatar
-  width: 18px
-  height: 18px
-  margin-right: .3rem
+.commit-author
+  .avatar
+    width: 20px
+    height: 20px
   .pseudo-avatar:after
-    font-size: 9px
-    line-height: 16px
+    font-size: .7em
+    line-height: 1.7
+
+.row-committer
+  .avatar
+    width: 18px
+    height: 18px
+  .pseudo-avatar:after
+    font-size: .7em
+    line-height: 1.6

app/styles/app/modules/build-header.sass

@@ -3,15 +3,15 @@
   border: 1px solid $cream-dark
   clear: both
 
-  @include colorRows($turf-green, 'passed', 10px)
-  @include colorRows($brick-red, 'failed', 10px)
-  @include colorRows($brick-red, 'errored', 10px)
-  @include colorRows($cement-grey, 'canceled', 10px)
-  @include colorRows($canary-yellow, 'started', 10px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'queued', 10px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'booting', 10px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'received', 10px, true, $dozer-yellow)
-  @include colorRows($canary-yellow, 'created', 10px, true, $dozer-yellow)
+  @include colorRows($turf-green, 'passed', 12px)
+  @include colorRows($brick-red, 'failed', 12px)
+  @include colorRows($brick-red, 'errored', 12px)
+  @include colorRows($cement-grey, 'canceled', 12px)
+  @include colorRows($canary-yellow, 'started', 12px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'queued', 12px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'booting', 12px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'received', 12px, true, $dozer-yellow)
+  @include colorRows($canary-yellow, 'created', 12px, true, $dozer-yellow)
 
   @media #{$medium-up}
     display: flex
@@ -30,7 +30,7 @@
   font-size: 16px
   @media #{$medium-up}
     flex: 1 1 65%
-    padding-left: 2.2rem
+    padding-left: 2.5rem
 
 .build-tools
   padding: 1rem 0 1rem 3rem
@@ -52,10 +52,14 @@
   font-weight: $font-weight-normal
   font-size: 16px
 
+  .status-icon
+    width: 1.7rem
+    height: 1.8rem
+    vertical-align: middle
+
 .build-title
   .status-icon
-    margin-left: -1.9rem
-    margin-right: 0.7rem
+    margin-left: -2rem
 
 .commit-info
   font-size: 15px

app/styles/app/modules/buttons.sass

@@ -124,9 +124,8 @@ $button-border-color: #d4d4d4
   overflow: hidden
   width: 28px
   height: 28px
-  border: solid 1px rgba($cement-grey, 0.2)
+  border: solid 1px #E4E6E6
   border-radius: 50%
-  cursor: pointer
   &:hover
     border-color: $oxide-blue
 
@@ -141,9 +140,8 @@ $button-border-color: #d4d4d4
   @extend %circle-button
   @extend %icon-line-cross
   background:
-    position: 6px 6px
     repeat: no-repeat
-    size: 14px 14px
+    size: auto 100%
   &:hover
     @extend %icon-line-cross-teal
 
@@ -151,9 +149,9 @@ $button-border-color: #d4d4d4
   @extend %circle-button
   @extend %icon-line-trigger
   background:
-    position: 6px 5px
+    position: 2px 1px
     repeat: no-repeat
-    size: 16px 16px
+    size: 24px 24px
   &:hover
     @extend %icon-line-trigger-teal
 
@@ -215,4 +213,4 @@ $button-border-color: #d4d4d4
     position: 4px 1px
   cursor: pointer
   @extend .button--grey
-  @extend %icon-line-eye-white
+  @extend %icon-line-eye

app/styles/app/modules/dropdown.sass

@@ -1,25 +1,20 @@
 .option-button
   position: relative
   width: 17em
-  &:hover
-    .option-dropdown
-      display: block
-    .option-display
-      color: $oxide-blue
-      border-color: $oxide-blue
-    .option-tofu
-      @extend %icon-line-tofu-teal
-      border-color: $oxide-blue
-    .option-arrow
-      @extend %icon-line-arrowtabs-teal
-      border-color: $oxide-blue
-      transform: rotate(-90deg)
-      border-bottom: none
-      border-top: 1px solid $oxide-blue
   @media #{$small-only}
     &.display
       .option-dropdown
         display: block
+  @media #{$medium-up}
+    &:hover
+      .option-dropdown
+        display: block
+      .option-display
+        color: $oxide-blue
+        border-color: $oxide-blue
+      .option-tofu
+        border-color: $oxide-blue
+        background-image: inline-image('/line-icons/icon-tofuburger-teal.svg')
 
 $dropdown-button-height: 30px
 $dropdown-button-margin: -9px
@@ -50,29 +45,19 @@ $dropdown-button-margin: -9px
     border-radius: 50%
     overflow: hidden
 
-.option-tofu,
-.option-arrow
+.option-tofu
   width: 2em
   height: 2em
   display: inline-block
   vertical-align: top
   background:
+    image: inline-image('/line-icons/icon-tofuburger.svg')
     repeat: no-repeat
+    size: 20px
     position: 50%
-
-.option-tofu
-  @extend %icon-line-tofu
-  background-size: 20px
   @media #{$medium-up}
     border-left: 1px solid $pebble-grey
 
-.option-arrow
-  @extend %icon-line-arrowtabs
-  transform: rotate(90deg)
-  background-size: 14px
-  @media #{$medium-up}
-    border-bottom: 1px solid $pebble-grey
-
 .option-dropdown
   display: none
   position: absolute
@@ -93,6 +78,7 @@ $dropdown-button-margin: -9px
       color: white
       background-color: $oxide-blue
 
+
 .option-search
   input[type="text"]
     display: block
@@ -101,6 +87,7 @@ $dropdown-button-margin: -9px
     border-bottom: 1px solid $oxide-blue
     border-radius: 0
 
+
 .option-list
   list-style: none
   padding: 0
@@ -114,90 +101,3 @@ $dropdown-button-margin: -9px
     vertical-align: top
     margin-right: .3em
     border-radius: 50%
-
-
-
-.dropup
-  &.is-open
-    .dropup-list
-      display: block
-    .dropup-tofu
-      @extend %icon-line-tofu-teal
-      outline: none
-
-.dropup-tofu
-  @extend %icon-line-tofu
-  background:
-    color: transparent
-    size: 100%
-    repeat: no-repeat
-    position: 0 5px
-  width: 2.5em
-  height: 2.5em
-  border: none
-  text-indent: 999%
-  overflow: hidden
-  white-space: nowrap
-  cursor: pointer
-  display: none
-  @media #{$medium-up}
-    display: inline-block
-  &:hover,
-  &:active
-    @extend %icon-line-tofu-teal
-    outline: none
-
-.dropup-list
-  list-style: none
-  padding: 0
-  margin: 2em 0 0
-  background-color: white
-  text-align: center
-
-  li
-    display: inline-block
-  a
-    display: inline-block
-    width: 100%
-    padding: 0.5em 1em
-    background-color: white
-    [class^="icon-"]
-      margin-right: .3rem
-    &:hover,
-    &:active
-      background: $oxide-blue
-      color: white
-      .icon-trigger
-        @extend %icon-line-trigger-white
-      .icon-deactivate
-        @extend %icon-line-cross-white
-        border-color: white
-      .icon-settings
-        @extend %icon-line-cog-white
-
-  @media #{$medium-up}
-    position: absolute
-    right: 0
-    top: -7em
-    margin: 0
-    background-color: white
-    border: 1px solid $oxide-blue
-    border-radius: 2px
-    display: none
-    z-index: 2
-    text-align: left
-    li
-      display: block
-      &:last-of-type
-        &:after
-          content: ""
-          display: block
-          width: 1.6em
-          height: 1.6em
-          border: 1px solid $oxide-blue
-          background: white
-          transform: rotate(45deg)
-          position: absolute
-          bottom: -0.7em
-          right: 1.7em
-          z-index: -1

app/styles/app/modules/flash.sass

@@ -32,14 +32,20 @@
 
   .success,
   .notice
-    color: $turf-green
-    background-color: $seed-green
+    color: #3ba85b
+    background-color: #deebdd
     .close
       @extend .icon--dismiss-green
 
+  .broadcast
+    color: #D8C500
+    background-color: #FFFBD7
+    .close
+      @extend .icon--dismiss-yellow
+
   .error
-    color: $brick-red
-    background-color: $quartz-red
+    color: #de4248
+    background-color: #f1b6ad
     .close
       @extend .icon--dismiss-red
 

app/styles/app/modules/icons.sass

@@ -6,28 +6,34 @@
     repeat: no-repeat
 
 .icon
-  width: 15px
-  height: 15px
+  width: 1em
+  height: 1em
   @extend %icon
 
 %icon-download-log
-  background-image: inline-image('stroke-icons/icon-downloadlogs.svg')
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 12.4"><style>.st0{fill:%23f1f1f1;}</style><g id="downloadlog"><path class="st0" d="M5.1 11.3c-.4 0-.7-.3-.7-.7V.6c0-.3.3-.6.7-.6.4 0 .7.3.7.7v10c-.1.4-.4.6-.7.6z"/><path class="st0" d="M5.1 12.4c-.2 0-.3-.1-.5-.2L.2 7.8c-.3-.3-.3-.7 0-.9s.7-.3.9 0L5 10.8l4-3.9c.3-.3.7-.3.9 0s.3.7 0 .9l-4.4 4.4c-.1.1-.3.2-.4.2zM14.1 2.1H7.9c-.4 0-.7-.3-.7-.7s.3-.7.7-.7h6.2c.4 0 .7.3.7.7s-.3.7-.7.7zM14.3 5.3H7.9c-.4 0-.6-.3-.6-.7 0-.4.2-.6.6-.6h6.4c.4 0 .7.2.7.6 0 .4-.3.7-.7.7zM14.3 8.5h-2.4c-.4 0-.7-.3-.7-.7 0-.4.3-.7.7-.7h2.4c.4 0 .7.3.7.7 0 .4-.3.7-.7.7zM13 11.6H9.2c-.4 0-.7-.3-.7-.7s.3-.7.7-.7H13c.4 0 .7.3.7.7s-.4.7-.7.7z"/></g></svg>')
 .icon-download-log
-  @extend .icon
+  @extend %icon
   @extend %icon-download-log
-  background-position: 0 -1px
+  width: 1.5em
+  height: 1.1em
+  vertical-align: middle
+  background-size: auto 14px
 %icon-remove-log
-  background-image: inline-image('stroke-icons/icon-deletelogs.svg')
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 10.9"><style>.st0{fill:%23f1f1f1;}</style><g id="removelog"><path class="st0" d="M12.3 1.8h1.9c.3 0 .6-.3.6-.6s-.3-.6-.6-.6h-1.9c-.3 0-.6.3-.6.6 0 .4.3.6.6.6zM9.7 3.5c-.3 0-.6.3-.6.6s.3.6.6.6h4.8c.3 0 .6-.3.6-.6s-.3-.6-.6-.6H9.7zM14.4 6.3H9.7c-.3 0-.6.3-.6.6s.3.6.6.6h4.7c.3 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6zM13.2 9.1h-.7c-.3 0-.6.3-.6.6s.3.6.6.6h.7c.3 0 .6-.3.6-.6 0-.4-.3-.6-.6-.6z"/><path class="st0" d="M6.3 5.4L10.7 1c.2-.2.2-.6 0-.9-.2-.2-.6-.2-.9 0L5.4 4.5 1.1.2C.9 0 .5 0 .2.2s-.2.6 0 .9l4.4 4.4L.2 9.8c-.2.2-.2.6 0 .9.1.1.3.2.4.2s.3-.1.4-.2l4.4-4.4 4.4 4.4c.1.1.3.2.4.2.2 0 .3-.1.4-.2.2-.2.2-.6 0-.9L6.3 5.4z"/></g></svg>')
 .icon-remove-log
-  @extend .icon
+  @extend %icon
   @extend %icon-remove-log
-  background-position: 0 -1px
+  width: 1.5em
+  height: 1.1em
+  vertical-align: middle
+  background-size: auto 14px
 
 %icon-arrow-down
-  background-image: inline-image('stroke-icons/icon-arrowdown.svg')
+  background-image: inline-image('line-icons/icon-arrow-down.svg')
 
 .icon--search
-  background-image: inline-image('stroke-icons/icon-search.svg')
+  background-image: inline-image('ui/search.svg')
 
 .icon--dismiss-yellow
   background-image: inline-image('ui/icon-warning-dismiss.svg')
@@ -39,92 +45,105 @@
 .icon--dismiss-grey
   background-image: inline-image('ui/dismiss.svg')
 
+%icon-hook-on
+  background-image: inline-image('ui/hooks-on.svg')
+%icon-hook-off
+  background-image: inline-image('ui/hooks-off.svg')
+
 %icon-line-trashcan
-  background-image: inline-image('stroke-icons/icon-trash.svg')
+  background-image: inline-image('line-icons/icon-trash.svg')
 %icon-line-trashcan-red
-  background-image: inline-image('stroke-icons/icon-trash-red.svg')
+  background-image: inline-image('line-icons/icon-trash-red.svg')
 %icon-line-trashcan-disabled
-  background-image: inline-image('stroke-icons/icon-trash-disabled.svg')
+  background-image: inline-image('line-icons/icon-trash-disabled.svg')
 
 .icon-delete
-  @extend .icon
   @extend %icon-line-trashcan
 .icon-delete-hover
   @extend %icon-line-trashcan-red
 .icon-delete-disabled
   @extend %icon-line-trashcan-disabled
 
-%icon-line-arrowtabs
-  background-image: inline-image('stroke-icons/icon-arrowtabs.svg')
-%icon-line-arrowtabs-teal
-  background-image: inline-image('stroke-icons/icon-arrowtabs-teal.svg')
-
 %icon-line-key
-  background-image: inline-image('stroke-icons/icon-key.svg')
+  background-image: inline-image('line-icons/icon-key.svg')
 .icon-key
-  @extend .icon
+  @extend %icon
   @extend %icon-line-key
-  margin-right: .3rem
+  width: 20px
+  height: 20px
+  background-position: 0 6px
+  margin-right: .1em
 
 %icon-line-fingerprint
-  background-image: inline-image('stroke-icons/icon-fingerprint.svg')
+  background-image: inline-image('line-icons/icon-fingerprint.svg')
 .icon-fingerprint
-  @extend .icon
+  @extend %icon
   @extend %icon-line-fingerprint
-  margin-right: .3rem
+  width: 20px
+  height: 20px
+  margin-right: .1em
 
 %icon-line-calendar
-  background-image: inline-image('stroke-icons/icon-calendar.svg')
+  background-image: inline-image('line-icons/icon-cal.svg')
 .icon-line-calendar,
 .icon-cal,
 .icon-calendar
-  @extend .icon
+  @extend %icon
   @extend %icon-line-calendar
-  margin-right: .3rem
+  width: 20px
+  height: 18px
+  margin-right: .1em
+  background:
+    size: auto 20px
+    position: -1px 0
 
 %icon-line-clock
-  background-image: inline-image('stroke-icons/icon-clock.svg')
+  background-image: inline-image('line-icons/icon-clock.svg')
 .icon-clock
-  @extend .icon
+  @extend %icon
   @extend %icon-line-clock
-  margin-right: .2rem
+  width: 20px
+  height: 20px
+  margin-right: .1em
+  background:
+    size: auto 21px
+    position: -2px 0
 
 %icon-line-stopwatch
-  background-image: inline-image('stroke-icons/icon-stopwatch.svg')
+  background-image: inline-image('line-icons/icon-stopwatch.svg')
 .icon-stopwatch
   @extend %icon
   @extend %icon-line-stopwatch
-  width: 17px
-  height: 19px
-  margin-right: .2rem
+  width: 20px
+  height: 18px
+  margin-right: .1em
+  background-size: auto 18px
+  background-position: 1px 0
 
 .icon-line-build
   @extend %icon
-  background-image: inline-image('stroke-icons/icon-builds.svg')
+  background-image: inline-image('line-icons/icon-build.svg')
 
-%icon-line-commit,
-%icon-github
-  background-image: inline-image('stroke-icons/icon-github.svg')
+%icon-line-commit
+  background-image: inline-image('line-icons/icon-commit.svg')
 .icon-line-commit
   @extend %icon
   @extend %icon-line-commit
 
 %icon-line-eye
-  background-image:inline-image('stroke-icons/icon-seemore.svg')
-%icon-line-eye-white
-  background-image:inline-image('stroke-icons/icon-seemore-white.svg')
+  background-image:inline-image('line-icons/icon-view.svg')
 
 %icon-line-question
-  background-image: inline-image('stroke-icons/icon-help.svg')
+  background-image: inline-image('line-icons/icon-help.svg')
 %icon-line-question-teal
-  background-image: inline-image('stroke-icons/icon-help-teal.svg')
+  background-image: inline-image('line-icons/icon-help-teal.svg')
 
 .icon-question
-  width: 18px
-  height: 18px
+  width: 1em
+  height: 1em
   background:
     repeat: no-repeat
-    position: 3px 3px
+    position: 4px 2px
     size: auto 10px
   display: inline-block
   border: solid 1px #E4E6E6
@@ -135,102 +154,68 @@
     @extend %icon-line-question-teal
 
 %icon-line-hash
-  background-image: inline-image('stroke-icons/icon-hash.svg')
-.icon-hash
-  @extend .icon
-  @extend %icon-line-hash
-
+  background-image: inline-image('line-icons/icon-hash.svg')
 %icon-line-linux
-  background-image: inline-image('stroke-icons/icon-linux.svg')
+  background-image: inline-image('line-icons/icon-linux.svg')
 %icon-line-mac
-  background-image: inline-image('stroke-icons/icon-mac.svg')
+  background-image: inline-image('line-icons/icon-mac.svg')
 %icon-line-language
-  background-image: inline-image('stroke-icons/icon-language.svg')
+  background-image: inline-image('line-icons/icon-lang.svg')
 %icon-line-environment
-  background-image: inline-image('stroke-icons/icon-environment.svg')
+  background-image: inline-image('line-icons/icon-environment.svg')
 
 %icon-line-cog
-  background-image: inline-image('stroke-icons/icon-settings.svg')
+  background-image: inline-image('line-icons/icon-settings.svg')
 %icon-line-cog-teal
-  background-image: inline-image('stroke-icons/icon-settings-teal.svg')
-%icon-line-cog-white
-  background-image: inline-image('stroke-icons/icon-settings-white.svg')
-
-%icon-line-tofu
-  background-image: inline-image('stroke-icons/icon-tofuburger.svg')
-%icon-line-tofu-teal
-  background-image: inline-image('stroke-icons/icon-tofuburger-teal.svg')
+  background-image: inline-image('line-icons/icon-settings-teal.svg')
 
 .icon-settings
   @extend %icon-line-cog
-  @extend .icon
+  width: 1em
+  height: 1em
+  vertical-align: middle
+  display: inline-block
+  background:
+    repeat: no-repeat
+    position: 0 0
   &:hover
     @extend %icon-line-cog-teal
 
 %icon-line-dropdown
-  background-image: inline-image('stroke-icons/icon-arrow-dropdown.svg')
+  background-image: inline-image('line-icons/icon-arrow-dropdown.svg')
 %icon-line-dropdown-teal
-  background-image: inline-image('stroke-icons/icon-arrow-dropdown-teal.svg')
+  background-image: inline-image('line-icons/icon-arrow-dropdown-teal.svg')
 
 %icon-line-cross
-  background-image: inline-image('stroke-icons/icon-failed.svg')
+  background-image: inline-image('line-icons/icon-failed.svg')
 %icon-line-cross-white
-  background-image: inline-image('stroke-icons/icon-failed-white.svg')
+  background-image: inline-image('line-icons/icon-failed-white.svg')
 %icon-line-cross-teal
-  background-image: inline-image('stroke-icons/icon-failed-teal.svg')
-
-.icon-deactivate
-  @extend .icon
-  @extend %icon-line-cross
-  border: 1px solid $cement-grey
-  border-radius: 50%
-  &:hover,
-  &:active
-    @extend %icon-line-cross-white
-    border-color: white
+  background-image: inline-image('line-icons/icon-failed-teal.svg')
 
 %icon-line-trigger
-  background-image: inline-image('stroke-icons/icon-restart.svg')
+  background-image: inline-image('line-icons/icon-trigger.svg')
 %icon-line-trigger-white
-  background-image: inline-image('stroke-icons/icon-restart-white.svg')
+  background-image: inline-image('line-icons/icon-trigger-white.svg')
 %icon-line-trigger-teal
-  background-image: inline-image('stroke-icons/icon-restart-teal.svg')
-
-.icon-trigger
-  @extend .icon
-  @extend %icon-line-trigger
-  &:hover,
-  &:active
-    @extend %icon-line-trigger-white
-
-%icon-line-lock
-  background-image: inline-image('stroke-icons/icon-private.svg')
-.icon-lock
-  @extend %icon
-  @extend %icon-line-lock
-  width: 18px
-  height: 18px
-  margin-top: 1em
-  white-space: nowrap
-  text-indent: 999px
-  overflow: hidden
-
-.icon-star
-  @extend %icon
-  width: 18px
-  height: 18px
-
-%icon-line-passed
-  background-image: inline-image('stroke-icons/icon-passed.svg')
+  background-image: inline-image('line-icons/icon-trigger-teal.svg')
 
+%icon-github
+  background-image: inline-image('line-icons/icon-commit.svg')
 .icon-github
+  display: inline-block
+  width: 1.1em
+  height: 1.1em
   margin-right: 0.3em
   vertical-align: middle
-  @extend .icon
+  background:
+    repeat: no-repeat
+    size: 36px 21px
+    position: -9px -3px
   @extend %icon-github
 
 %icon-github-circle
-  background-image: inline-image('stroke-icons/icon-repooctocat.svg')
+  background-image: inline-image('line-icons/icon-github-outline.svg')
 .icon-github-circle
   display: inline-block
   width: 1.2em
@@ -241,17 +226,16 @@
   @extend %icon-github-circle
 
 %icon-line-flag-teal
-  background-image: inline-image('stroke-icons/icon-flag.svg')
+  background-image: inline-image('line-icons/icon-flag.svg')
 %icon-line-flag-yellow
-  background-image: inline-image('stroke-icons/icon-flag-yellow.svg')
+  background-image: inline-image('line-icons/icon-flag-yellow.svg')
 
 %icon-line-scale
-  background-image: inline-image('stroke-icons/icon-scales.svg')
+  background-image: inline-image('line-icons/icon-scales.svg')
 
 .icon-scale
-  @extend .icon
+  @extend %icon
   @extend %icon-line-scale
-  margin-right: .3rem
 
 .icon--plus
   width: 1.1rem

app/styles/app/modules/lastbuild.sass

@@ -1,38 +0,0 @@
-.lastbuilds
-  list-style: none
-  margin: 0
-  padding: 0
-  width: 100%
-  display: flex
-  justify-content: flex-start
-  @media #{$small-only}
-    flex-flow: row wrap
-    margin-top: 1em
-
-  li
-    flex: 0 0 20%
-    height: 30px
-    @each $key, $value in $stateMap
-      &.#{$key}
-        background-color: map-get($value, color)
-
-    @media #{$medium-up}
-      flex: 0 0 10%
-      margin-right: 2px
-      transform: translateY(25px)
-      transition: transform 150ms ease
-      &:hover
-        transform: translateY(0)
-  a
-    display: block
-    width: 100%
-    height: 30%
-    padding-top: 4px
-    color: white
-    text-align: center
-
-  .status-icon
-    svg *
-      stroke: white !important
-    .circle
-      border-color: white !important

app/styles/app/modules/notice.sass

@@ -23,12 +23,12 @@
 .notice--blue
   padding: 0.3em 0.5em 0.3em
   margin-bottom: .5em
-  background-color: $agate-blue
-  color: $oxide-blue
+  background-color: #d2f5f9
+  color: #40a3ad
   border-radius: 2px
   font-size: 15px
   a
-    color: $oxide-blue
+    color: #40a3ad
     text-decoration: underline
 
   .icon-flag
@@ -36,7 +36,7 @@
     @extend %icon-line-flag-teal
     display: inline-block
     background:
-      color: $oxide-blue
+      color: #40a3ad
       size: auto 13px
       position: 6px 4px
       repeat: no-repeat

app/styles/app/modules/popup.sass

@@ -1,12 +1,15 @@
 .help
-  @extend %icon-line-question
-  @extend %icon
+  display: inline-block
   height: 19px
   width: 16px
   margin: -4px 0 0 3px
+  vertical-align: middle
   background:
+    image: inline-image('ui/help.svg')
+    repeat: no-repeat
     position: 0 1px
     color: transparent
+    size: 100%
   cursor: pointer
 
 .popup
@@ -16,23 +19,25 @@
   transform: translate(-50%, -50%)
   height: auto
   padding: 2em
-  color: $asphalt-grey
+  color: #565656
   z-index: 99
   background-color: white
   border-radius: 2px
+
   display: none
   background-color: #fff
-  border: solid 10px $pebble-grey
+  border: solid 10px #f1f1f1
 
   &:before
     content: ""
+
   .close
     position: absolute
     display: block
     right: 5px
     top: 8px
-    width: 20px
-    height: 20px
+    width: 30px
+    height: 30px
     text-indent: 999%
     overflow: hidden
     white-space: nowrap

app/styles/app/modules/row.sass

@@ -11,46 +11,6 @@
   vertical-align: middle
   line-height: 1.5
 
-.rows
-  +rowBorder
-  display: flex
-  flex-flow: column wrap
-  margin-bottom: 1rem
-  @each $key, $value in $stateMap
-    +rowColor(#{$key}, map-get($value, color))
-
-  @media #{$medium-up}
-    position: relative
-    flex-flow: row nowrap
-    justify-content: space-between
-    align-items: center
-
-  .label
-    margin: 0
-    font-size: 10px
-    color: $cement-grey
-    text-transform: uppercase
-    font-weight: 600
-
-  .row-label,
-  .row-label a
-    font-size: $font-size-m
-    color: $cement-grey
-
-  .row-label
-    margin: 0
-    a:hover,
-    a:active
-      border-bottom: 1px solid $cement-grey
-
-  .row-content
-    margin: 0
-    font-size: 16px
-    a:hover,
-    a:active
-      border-bottom: 1px solid $asphalt-grey
-
-// old! remove this
 .row-li
   position: relative
   border: 1px solid $cream-dark
@@ -60,6 +20,7 @@
 
   h2, h3, small
     margin: 0
+    font-weight: $font-weight-normal
     font-size: 16px
   small
     font-weight: $font-weight-bold
@@ -110,6 +71,22 @@
       @media #{$medium-up}
         display: block
 
+  .icon
+    width: 1.3em
+    height: 1.3em
+    margin-right: .2em
+    display: inline-block
+    vertical-align: middle
+
+  .avatar
+    display: inline-block
+    width: 16px
+    height: 16px
+    margin: 0 .4em 0 .1em
+    border-radius: 50%
+    vertical-align: middle
+    background-color: #E9EBEB
+
   @include statusColors($turf-green, 'passed', 10px)
   @include statusColors($brick-red, 'failed', 10px)
   @include statusColors($brick-red, 'errored', 10px)

app/styles/app/modules/switch.sass

@@ -35,6 +35,7 @@
   .label
     vertical-align: middle
     font-size: $font-size-m
+    color: $cement-grey
     display: inline-block
   &.label--small .label
     width: 7em
@@ -78,6 +79,6 @@
     background-position: 50%
     background-repeat: no-repeat
   .off
-    @extend %icon-line-cross-white
+    @extend %icon-hook-off
   .on
-    @extend %icon-line-passed
+    @extend %icon-hook-on

app/styles/app/modules/tabs.sass

@@ -10,7 +10,6 @@
     width: 100%
     @media #{$medium-up}
       margin-top: 0
-      margin-bottom: 4px
       display: block
   li
     flex: 0 0 8em
@@ -77,13 +76,13 @@
     left: .5em
 
   .tab-arrow
-    @extend %icon-line-arrowtabs
     display: inline-block
     position: absolute
-    top: 1px
-    left: -22px
-    width: 1em
+    top: 5px
+    left: -19px
+    width: .7em
     height:  1.3em
     background:
       size: auto 100%
       repeat: no-repeat
+      image: inline-image('line-icons/icon-arrow-tabs.svg')

app/styles/app/modules/tofuburger.sass

@@ -1,5 +1,5 @@
+
 .tofuburger
-  @extend %icon-line-tofu
   height: $top-height
   width: 30px
   border: none
@@ -7,6 +7,7 @@
   outline: none
   text-indent: -9999px
   background:
+    image: inline-image('line-icons/icon-tofuburger.svg')
     size: 100%
     position: center center
     repeat: no-repeat

app/styles/app/pages/getting-started.sass

@@ -3,17 +3,18 @@
   max-width: 900px
   margin: auto
   h1
-    color: $cement-grey
+    color: #808080
     font-size: 36px
     margin-bottom: 1em
     font-weight: 300
     line-height: 1.1
   h2
-    color: $turf-green
+    color: #35a764
     font-size: 22px
     margin-bottom: 1em
     font-weight: 300
   p, li
+    color: #666
     font-size: $font-size-m
     line-height: 25px
 
@@ -75,3 +76,10 @@
   strong
     text-transform: uppercase
     font-style: normal
+
+.note--info
+  background-color: #e7eeee
+  color: #3e8987
+  code
+    color: #267c8d
+    background-color: white

app/styles/app/pages/home-pro.sass

@@ -1,3 +1,8 @@
+$teal: #40A3AD
+$green: #39A85B
+$red: #DB4242
+$yellow: #E5C025
+$grey: #858585
 
 .landing-pro
 
@@ -39,10 +44,10 @@
     border-radius: 2px
     font-size: 27px
     text-decoration: none
-    background-color: $turf-green
+    background-color: $green
     &:hover
       color: white
-      background-color: lighten($turf-green, .2)
+      background-color: #73c78d
 
   .hero-button
     @extend .landing-button
@@ -194,22 +199,22 @@
 .h1--grey
   @extend %h1
   @include linkStyle
-  color: $asphalt-grey !important
+  color: $grey !important
   a
-    color: $asphalt-grey
+    color: $grey
 
 .h1--teal
   @extend %h1
   font-size: 64px
-  color: $oxide-blue !important
+  color: #408692 !important
 
 .h1--green
   @extend %h1
-  color: $turf-green !important
+  color: $green !important
 
 .h1--red
   @extend %h1
-  color: $brick-red !important
+  color: $red !important
 
 %h2
   margin: 0 0 .5em
@@ -219,19 +224,19 @@
 
 .h2--grey
   @extend %h2
-  color: $asphalt-grey
+  color: $grey
 
 .h2--green
   @extend %h2
-  color: $turf-green
+  color: $green
 
 .h2--red
   @extend %h2
-  color: $brick-red
+  color: $red
 
 .h2--teal
   @extend %h2
-  color: $oxide-blue
+  color: $teal
 
 %h3
   margin: .5em 0
@@ -249,19 +254,19 @@
 
 .h3--teal
   @extend %h3
-  color: $oxide-blue
+  color: $teal
 
 .h3--red
   @extend %h3
-  color: $brick-red
+  color: $red
 
 .h3--green
   @extend %h3
-  color: $turf-green
+  color: $green
 
 .h3--yellow
   @extend %h3
-  color: $dozer-yellow
+  color: $yellow
 
 .text-big
   @include linkStyle

app/styles/app/pages/landing.sass

@@ -11,14 +11,14 @@
     background-color: #ffffff
     background-image: inline-image('landing-page/signingithub.svg')
     background-size: 16px 16px
-    border: 2px solid rgba($cement-grey, .4)
-    color: $cement-grey
+    border: 2px solid #e4e7e7
+    color: #a0a8a8
   .button--signingin
-    border: 2px solid $turf-green
+    border: 2px solid #3FA75F
   .button--signin:hover
-    background-color: $turf-green
+    background-color: #73c78d
     background-image: inline-image('landing-page/signingithub-hover.svg')
-    border: 2px solid $turf-green
+    border: 2px solid #73c78d
     color: #fff
 
 .landing-centered-wrapper
@@ -37,7 +37,7 @@
     font-size: 5em
     line-height: 1em
     font-weight: 300
-    color: $cement-grey
+    color: #8f9294
     margin-bottom: 0
 
   .hero, .oss-testing, .customers, .recent-builds, .free-for-oss, .private-repos, .features-list, .build-flows, .user-testimonials
@@ -52,10 +52,11 @@
       font-size: 3.3em
       line-height: 1.15em
       font-weight: 300
-      color: $turf-green
+      color: #39a85b
 
     p
       line-height: 1.5em
+      font-color: #606162
       font-size: 1.7em
 
   .hero.z-1
@@ -77,13 +78,13 @@
     margin-bottom: -192px
 
   #laptop img
-    border: 2px solid lighten($cement-grey, 20)
+    border: 2px solid #d8dadc
     border-radius: 2px
 
   .hero
-    background-color: $pebble-grey
+    background-color: #f6f6f6
     h1
-      color: $oxide-blue
+      color: #339999
       line-height: 1.2em
       margin-bottom: 0
 
@@ -95,7 +96,7 @@
       display: none
 
     .button
-      background-color: $turf-green
+      background-color: #39a85b
       color: #fff
       font-size: 2em
       font-weight: 300
@@ -105,7 +106,7 @@
       border: 0
 
       &:hover
-        background-color: lighten($turf-green, 20)
+        background-color: #73c78d
 
     .sign-in-mascot
       padding-right: 10px
@@ -129,10 +130,6 @@
 
     br.mobile-break
       display: none
-  .os-numbers
-    width: 80%
-    @media #{$medium-up}
-      width: 60%
 
   .customers
     text-align: center
@@ -141,6 +138,44 @@
       text-align: left
       padding: 0 0 0 12%
 
+  .recent-builds
+    background-color: #f6f6f6
+    min-height: 44rem
+
+  .recent-builds-text
+    text-align: center
+    h2
+      color: #db4141
+      text-align: right
+      margin: 0
+
+    a
+      color: #828282
+
+    p
+      text-align: right
+      margin-top: 0.5em
+      margin-bottom: 2em
+
+    img
+      margin-bottom: 20px
+
+    ul
+      padding-left: 0
+
+    li
+      background-color: #fff
+      border-radius: 4px
+      color: #828282
+      font-weight: 400
+      margin-bottom: 20px
+      list-style-type: none
+      position: relative
+      height: 120px
+      width: 100%
+      padding: 10px 0 0 60px
+      text-align: left
+
   .free-for-oss
     text-align: center
 
@@ -157,16 +192,11 @@
     br.mobile-no-break
       display: inline-block
 
-  .os-numbers
-    width: 80%
-    @media #{$medium-up}
-      width: 60%
-
   .private-repos
     text-align: center
 
     h2
-      color: $oxide-blue
+      color: #339999
       margin: 0
       text-align: right
 
@@ -185,12 +215,15 @@
       display: inline-block
 
   .features-list
+    background-color: #f6f6f6
+
     h2
       margin: 0
 
     h3
       font-size: 1.4em
       font-weight: 300
+      color: #413c3c
       text-align: center
       margin-bottom: 35px
       padding-top: 40px
@@ -198,6 +231,7 @@
     p
       font-size: 1.15em
       font-weight: 300
+      color: #606162
       text-align: center
 
     br.mobile-break
@@ -244,6 +278,7 @@
       margin-top: 1.6rem;
 
     li
+      font-color: #606162
       font-size: 1.7em
       line-height: 1.7em
       &:before
@@ -258,7 +293,7 @@
     text-align: center
 
     h2
-      color: $cement-grey
+      color: #909295
 
     h2#pr-bf-margin
       margin-top: 90px
@@ -269,14 +304,14 @@
         width: 120px
 
         p
-          font-size: 13px
+          font-size: 1em
           line-height: 1.5em
-          color: $asphalt-grey
+          color: #5f6062
 
     .divider-line-horizontal
       width: 50px
       height: 3px
-      background: lighten($cement-grey, 30)
+      background: #eaeaec
       display: inline-block
       margin-bottom: 75px
 
@@ -287,11 +322,13 @@
     margin-bottom: 50px
 
     h2
-      color: $oxide-blue
+      color: #418793
       text-align: right
 
     p
       font-size: 1.2em
+      font-weight: 300
+      color: #606162
       margin: 0
       display: inline-block
 
@@ -370,7 +407,7 @@
     .build-flows .branch-bf .divider-line-vertical
       width: 3px
       height: 40px
-      background: lighten($cement-grey, 30)
+      background: #eaeaec
       display: inline-block
       margin-bottom: 10px
 
@@ -422,6 +459,20 @@
   .navigation-nested
     background-color: white
 
+.landing-rows
+  list-style: none
+  margin: 0
+  @media #{$small-only}
+    padding: 0
+
+.landing-row
+  .two-line
+    padding-left: 2rem
+  h2
+    padding-left: .5rem
+    font-size: 18px
+
+
 .landing,
 .landing-pro
   background-color: white

app/styles/app/pages/logo.sass

@@ -19,13 +19,13 @@
       margin: .5em 0 0
     .font-light
       font-weight: 300
-      color: $oxide-blue
+      color: $teal
     .font-regular
       font-weight: 400
-      color: $dozer-yellow
+      color: #D3B01E
     .font-semibold
       font-weight: 600
-      color: $asphalt-grey
+      color: $grey
 
   .list--colors
     @extend %list
@@ -39,15 +39,15 @@
       height: 3em
       margin-bottom: .5em
     .colors-sample--teal
-      background-color: $oxide-blue
+      background-color: $teal
     .colors-sample--green
-      background-color: $turf-green
+      background-color: $green
     .colors-sample--yellow
-      background-color: $canary-yellow
+      background-color: $yellow
     .colors-sample--red
-      background-color: $brick-red
+      background-color: $red
     .colors-sample--grey
-      background-color: $asphalt-grey
+      background-color: #666
 
   .list--mascot
     @extend %list
@@ -91,6 +91,3 @@
       margin-bottom: 3em
       @media #{$medium-up}
         margin-bottom: 0
-
-  .text-logo
-    margin: 0 auto 3em

app/styles/app/pages/plans.sass

@@ -12,7 +12,7 @@
     margin-bottom: 2em
     border:
       width: 2px
-      color: rgba($cement-grey, .2)
+      color: #E8E8E8
       style: solid
 
     @media #{$medium-up}
@@ -52,19 +52,19 @@
       color: $color
 
   .plan--red
-    +colorPlans($brick-red, lighten($brick-red, 40), false)
+    +colorPlans($red, #FCF0F0, false)
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjREI0MjQyIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
   .plan--green
-    +colorPlans($turf-green, lighten($turf-green, 10))
+    +colorPlans($green, #73c78d)
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjMzlBODVCIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
   .plan--teal
-    +colorPlans($oxide-blue, lighten($oxide-blue, 10))
+    +colorPlans($teal, #8CC8CE)
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjNDBBM0FEIiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
   .plan--yellow
-    +colorPlans($dozer-yellow, lighten($dozer-yellow, 10))
+    +colorPlans($yellow, #EFD97C)
     .list--check li:before
       background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGcgaWQ9IlBhc3NlZCI+Cgk8Zz4KCQk8cGF0aCBmaWxsPSIjRTVDMDI1IiBkPSJNOS42LDE0LjRjLTAuMSwwLTAuMy0wLjEtMC40LTAuMWwtNC0zLjNjLTAuMy0wLjItMC4zLTAuNi0wLjEtMC45UzUuOCw5LjgsNi4xLDEwbDMuNCwyLjhsNC45LTcuNQoJCQlDMTQuNiw1LDE1LDQuOSwxNS4zLDUuMWMwLjMsMC4yLDAuNCwwLjYsMC4yLDAuOWwtNS4zLDguMUMxMC4xLDE0LjMsOS45LDE0LjQsOS42LDE0LjRDOS43LDE0LjQsOS43LDE0LjQsOS42LDE0LjR6Ii8+Cgk8L2c+CjwvZz4KPC9zdmc+")
 
@@ -129,7 +129,7 @@
       flex: 0 0 100%
       padding: 1em 1.5em 1.7em
       margin-bottom: 2em
-      border: solid 1px rgba($cement-grey, .2)
+      border: solid 1px #E8E8E8
       @media #{$medium-up}
         flex: 0 0 48%
 

app/styles/app/vars.sass

@@ -43,11 +43,11 @@ $color-bg-log-fold-highlight: #777
 $ansi-black: #4E4E4E
 $ansi-black-bold: #7C7C7C
 $ansi-red: #FF6C60
-$ansi-red-bold: #FF9B93
+$ansi-red-bold: #FFB6B0
 $ansi-green: #00AA00
-$ansi-green-bold: #B1FD79
+$ansi-green-bold: #CEFFAB
 $ansi-yellow: #FFFFB6
-$ansi-yellow-bold: #FFFF91
+$ansi-yellow-bold: #FFFFCB
 $ansi-blue: #96CBFE
 $ansi-blue-bold: #B5DCFE
 $ansi-magenta: #FF73FD

app/templates/account.hbs

@@ -1,7 +1,6 @@
 {{#if allHooks.isLoaded}}
 
-<header>
-  {{#unless config.enterprise}}
+  <header>
     {{#if config.billingEndpoint}}
       <div class="cta-btn">
         {{#if subscribeButtonInfo.subscribed}}
@@ -15,7 +14,6 @@
         {{/if}}
       </div>
     {{/if}}
-  {{/unless}}
 
     <div class="profile-header">
       <h1>{{accountName}}</h1>

app/templates/caches.hbs

@@ -1,7 +1,7 @@
 {{#if cachesExist}}
   <div class="caches-header">
     <h1 class="small-title">All caches <small>(<a href="http://docs.travis-ci.com/user/caching/" title="Read about caching">Read the docs</a>)</small></h1>
-    <a {{action "deleteRepoCache"}} href="#" class="{{if isDeleting 'deleting'}} delete-cache-button" title="Delete all repository caches">
+    <a {{action "deleteRepoCache"}} class="{{if isDeleting 'deleting'}} delete-cache-button" title="Delete all repository caches">
       Delete all repository caches
     </a>
   </div>

app/templates/components/branch-row.hbs

@@ -5,7 +5,21 @@
   </div>
   <div class="row-builds">
     <div class="row-item">
-    <span class="icon icon-line-build"></span>
+    <span class="icon icon-line-build">
+      <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve" enable-background="new 0 0 20 20">
+      <g id="Build">
+        <path fill="#A7AEAE" d="M15.2,15.3c-0.4,0-0.7-0.1-1-0.4c-0.4-0.3-0.6-0.8-0.6-1.2c0-0.3,0.2-0.5,0.5-0.5c0.3,0,0.5,0.2,0.5,0.5
+          c0,0.2,0.1,0.4,0.2,0.5c0.1,0.1,0.3,0.2,0.5,0.1c0.2,0,0.4-0.2,0.5-0.5c0.1-0.3-0.1-0.6-0.4-0.7c-0.4-0.2-0.7-0.6-0.7-1.1V8.7
+          c0-0.3,0.2-0.5,0.5-0.5s0.5,0.2,0.5,0.5V12c0,0,0,0.2,0.1,0.2c0.7,0.3,1.1,1,1,1.8c-0.1,0.6-0.6,1.2-1.3,1.3
+          C15.3,15.3,15.3,15.3,15.2,15.3z"/>
+        <path fill="#A7AEAE" d="M9.1,17.5C9.1,17.5,9.1,17.5,9.1,17.5H3.7c-0.3,0-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5h1.7V8.9H3.4
+          C2.5,8.9,2.5,7.1,2.5,7V6.6c0-0.5,0.3-0.9,0.7-1l2.2-0.8V3.3c0-0.2,0.1-0.5,0.3-0.6c0.2-0.2,0.4-0.2,0.7-0.2l1.5,0.3
+          C9,3,9.6,3.1,9.6,3.7v1.2l7.1,0.9c0.5,0.1,0.8,0.5,0.8,0.9V7c0,0,0,1.8-0.9,1.8h-7v7.6h1.7c0.3,0,0.5,0.2,0.5,0.5
+          c0,0.3-0.2,0.5-0.5,0.5H9.1C9.1,17.5,9.1,17.5,9.1,17.5z M6.4,16.5l2.2,0V8.9H6.4V16.5z M9.6,7.9h6.7c0.1-0.3,0.2-0.7,0.2-0.9
+          V6.7L9.6,5.9V7.9z M6.4,7.9h2.2V5.7L8.1,5.7l-1.7,0V7.9z M3.6,7.9h1.8v-2l-2,0.7l0,0.4C3.5,7.2,3.5,7.6,3.6,7.9z M6.4,4.7h1.7
+          l0.5,0.1V4c-0.1,0-0.4-0.1-0.9-0.2c0,0-0.1,0-0.1,0L6.4,3.5V4.7z"/>
+      </g>
+    </svg></span>
     <span class="label-align">
     {{#if build.last_build}}
       {{#if getLast5Builds.isLoading}}
@@ -23,8 +37,8 @@
   <div class="row-request">
     <div class="row-item">
       {{#if build.last_build}}
-        {{request-icon event=build.last_build.event_type state=build.last_build.state}}
         {{#link-to "build" build.last_build.id}}
+          {{request-icon event=build.last_build.event_type state=build.last_build.state}}
           <span class="label-align">#{{build.last_build.number}} {{build.last_build.state}}</span>
         {{/link-to}}
       {{else}}
@@ -47,8 +61,8 @@
 <div class="two-line">
   <div class="row-commit">
     <div class="row-item">
-      <span class="icon-github"></span>
       <a href="{{urlGithubCommit}}" title="commit on GitHub">
+      <span class="icon-github"></span>
       <span class="label-align">
       {{#if build.last_build}}
         {{format-sha build.last_build.commit.sha}}
@@ -60,9 +74,9 @@
   <div class="row-commiter">
     <div class="row-item">
       {{#if build.last_build}}
-        <img src="{{build.last_build.commit.committer.avatar_url}}" alt="avatar" class="avatar--small"><span class="label-align">{{build.last_build.commit.committer.name}}</span>
+        <img src="{{build.last_build.commit.committer.avatar_url}}" alt="avatar" class="avatar"><span class="label-align">{{build.last_build.commit.committer.name}}</span>
       {{else}}
-        <div class="avatar--small"></div><span class="label-align">no commits yet</span>
+        <div class="avatar"></div><span class="label-align">no commits yet</span>
       {{/if}}
     </div>
   </div>

app/templates/components/broadcast-tower.hbs

@@ -1,18 +1,26 @@
 <span class="icon-broadcast {{status}} {{if isOpen 'is-open'}}" title="broadcasts" {{action 'toggleBroadcasts'}}>
-  <svg version="1.1" id="icon-broadcast" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 21.625" xml:space="preserve" alt="Broadcast tower">
-  <g class="tower-path">
-    <circle class="path" cx="7.503" cy="6.733" r="1.775"/>
-    <polyline class="path" points="8.303,8.508 13.627,21.206 4.728,14.441 	"/>
-    <polyline class="path" points="6.828,8.508 1.528,21.206 10.427,14.441 	"/>
-    <line class="path" x1="7.5" y1="8.508" x2="7.5" y2="20.673"/>
-  </g>
-  <g class="radio-wave--outer">
-    <path class="path" d="M2.454,11.81C1.247,10.557,0.5,8.859,0.5,6.981c0-2.936,1.812-5.441,4.375-6.481"/>
-    <path class="path" d="M12.668,11.668C13.8,10.43,14.5,8.792,14.5,6.981c0-2.936-1.812-5.441-4.375-6.481"/>
-  </g>
-  <g class="radio-wave--inner">
-    <path class="path" d="M3.751,9.161C3.356,8.506,3.123,7.743,3.123,6.922c0-1.836,1.133-3.402,2.735-4.052"/>
-    <path class="path" d="M11.339,8.986c0.336-0.615,0.537-1.313,0.537-2.064c0-1.836-1.133-3.402-2.735-4.052"/>
+
+  <svg version="1.1" id="Layer_1" x="0px" y="0px"
+     viewBox="-1 0 16 25" xml:space="preserve">
+  <g>
+    <path class="tower-path" d="M0.989,18.732l0.92-2.247l3.926,0.663V20h0.868l-0.001-2.852l3.926-0.663l0.92,2.247h0.989L8.167,8.078
+      H7.183l0.004,0.011H5.351l0.004-0.011H4.37L0,18.732H0.989z M6.702,16.288l-0.003-3.877l2.461,0.492l1.131,2.759L6.702,16.288z
+       M2.246,15.662l1.131-2.759l2.459-0.492l-0.001,3.877L2.246,15.662z M8.794,12.015l-2.095-0.483L6.698,8.92h0.827L8.794,12.015z
+       M5.836,8.92v2.612l-2.093,0.482L5.012,8.92H5.836z"/>
+    <g class="radio-wave--right">
+      <path class="tower-path" d="M10.035,8.32l0.606,0.606c2.267-2.355,2.263-6.58-0.016-8.927l-0.591,0.593
+      C11.992,2.781,11.99,6.115,10.035,8.32z"/>
+      <path class="tower-path" d="M8.631,1.995C9.823,3.41,9.824,5.496,8.635,6.922l0.606,0.606c1.522-1.766,1.524-4.394,0-6.144L8.631,1.995
+      z"/>
+    </g>
+    <g class="radio-wave--left">
+      <path class="tower-path" d="M1.855,8.927L2.462,8.32C0.507,6.115,0.506,2.781,2.463,0.593L1.872,0C-0.407,2.347-0.41,6.571,1.855,8.927
+        z"/>
+      <path class="tower-path" d="M3.257,1.385c-1.524,1.75-1.523,4.378-0.001,6.144l0.606-0.606C2.674,5.496,2.674,3.41,3.866,1.995
+        L3.257,1.385z"/>
+    </g>
+    <path class="tower-path" d="M6.246,6.437c1.082,0,1.962-0.88,1.962-1.964c0-1.085-0.88-1.964-1.962-1.964
+      c-1.087,0-1.966,0.879-1.966,1.964C4.28,5.557,5.159,6.437,6.246,6.437z"/>
   </g>
   </svg>
 

app/templates/components/build-header.hbs

@@ -41,12 +41,12 @@
     </ul>
     <p class="commit-author">
       {{#if commit.authorName}}
-        {{user-avatar url=commit.authorAvatarUrlOrGravatar name=commit.authorName small=true}}
+        {{user-avatar url=commit.authorAvatarUrlOrGravatar name=commit.authorName}}
         <span class="label-align">{{commit.authorName}} authored{{#if commit.authorIsCommitter}} and committed{{/if}}</span>
       {{/if}}
       {{#unless commit.authorIsCommitter}}
         {{#if commit.committerName}}
-          {{user-avatar url=commit.committerAvatarUrlOrGravatar name=commit.committerName small=true}}
+          {{user-avatar url=commit.committerAvatarUrlOrGravatar name=commit.committerName}}
           <span class="label-align">{{commit.committerName}} committed</span>
         {{/if}}
       {{/unless}}

app/templates/components/builds-item.hbs

@@ -20,7 +20,7 @@
     {{/unless}}
   </div>
   <div class="row-item row-committer">
-    {{user-avatar url=build.commit.authorAvatarUrlOrGravatar name=build.commit.authorName small=true}}
+    {{user-avatar url=build.commit.authorAvatarUrlOrGravatar name=build.commit.authorName}}
     <span class="label-align">{{build.commit.authorName}}</span>
   </div>
 </div>

app/templates/components/dashboard-row.hbs

@@ -1,92 +1,111 @@
-  <div class="dash-head">
-    <a href="#" class="dash-star is-starred" title="(un-) star this repo"><span class="icon-star">
-      <svg version="1.1" id="icon-star" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" xml:space="preserve" alt="star repository">
-      <path id="star" d="M7.159,1.035c0.188-0.38,0.495-0.38,0.683,0l1.596,3.234c0.188,0.38,0.685,0.741,1.105,0.802
-	l3.569,0.519c0.42,0.061,0.515,0.353,0.211,0.649l-2.583,2.517c-0.304,0.296-0.494,0.88-0.422,1.298l0.61,3.555
-	c0.072,0.418-0.177,0.599-0.552,0.401l-3.192-1.678c-0.375-0.197-0.99-0.197-1.365,0l-3.192,1.678
-	c-0.375,0.197-0.624,0.017-0.552-0.401l0.61-3.555c0.072-0.418-0.118-1.002-0.422-1.298L0.678,6.24
-	C0.374,5.944,0.469,5.652,0.889,5.591l3.569-0.519c0.42-0.061,0.917-0.422,1.105-0.802L7.159,1.035z"/>
-        </svg>
-    </span></a>
-    <span class="icon-lock">private repo</span>
+
+<div class="two-line fade-out">
+  <div class="row-name row-item row-color"> 
+    <h3>{{#link-to "owner" repo.owner.login}}{{status-icon status=repo.default_branch.last_build.state}} {{repo.owner.login}}{{/link-to}}</h3>
+    <h2>{{#link-to "repo" repo.owner.login repo.name}}<span class="label-align">{{repo.name}}</span>{{/link-to}}</h2>
   </div>
-  <div class="dash-body">
-    <div class="dash-main">
-      <header class="fade-out dash-header">
-        <h2 class="row-label">{{#link-to "owner" repo.owner.login}}{{repo.owner.login}}{{/link-to}}</h2>
-        <h1 class="row-content">{{#link-to "repo" repo.owner.login repo.name}}{{repo.name}}{{/link-to}}</h1>
-      </header>
+</div>
 
-      <section class="dash-default">
-        <h3 class="label">Default branch</h3>
-        <p class="row-content color">
-          {{request-icon event=repo.default_branch.last_build.event_type state=repo.default_branch.last_build.state}}
-          {{repo.default_branch.name}} is {{repo.default_branch.last_build.state}}
-        </p>
-      </section>
-
-      <section class="dash-last-build">
-        <div>
-          <h3 class="label">Last build</h3>
-          <p class="row-content color">
-            {{status-icon status=repo.default_branch.last_build.state}}
-            {{#link-to "build" repo.owner.login repo.name repo.default_branch.last_build.id}}
-            <span class="label-align">#{{repo.default_branch.last_build.number}} {{repo.default_branch.last_build.state}}</span>
-            {{/link-to}}
-          </p>
-        </div>
-        <div>
-          <h3 class="label">Last commit</h3>
-          <p class="row-content">
-            <span class="icon-github"></span>
-            <a href="{{urlGithubCommit}}" title="See the commit on Github">
-              <span class="label-align">
-                {{format-sha repo.default_branch.last_build.commit.sha}}
-              </span>
-            </a>
-          </p>
-        </div>
-        <div>
-          <h3 class="label">Last commit completed</h3>
-          <p class="row-content" title="{{repo.default_branch.last_build.finished_at}}">
-            <span class="icon-calendar"></span>
-            <span class="label-align">
-              {{#if repo.default_branch.last_build}}
-                {{format-time repo.default_branch.last_build.finished_at}}
-              {{else}}
-                running
-              {{/if}}</span>
-          </p>
-        </div>
-      </section>
-
-      {{#if displayMenuTofu}}
-        <div class="dash-menu">
-          <div class="dropup {{if dropupIsOpen "is-open"}}">
-            <button type="button" class="dropup-tofu" {{action "openDropup"}}>open action menu</button>
-            <ul class="dropup-list">
-              <li><a href="#" title="Trigger a new build">
-                <span class="icon-trigger"></span>
-                <span class="label-align">Trigger a build</span></a></li>
-              {{#if displayActiavteLink}}
-                <li><a href="#" title="Deactivate builds for this repository">
-                  <span class="icon-deactivate"></span>
-                  <span class="label-align">Deactivate repository</span></a></li>
-              {{/if}}
-              <li>
-                {{#link-to 'settings' repo title="Settings for this repository"}}
-                <span class="icon-settings"></span>
-                <span class="label-align">Settings</span>
-                {{/link-to}}</li>
-            </ul>
-          </div>
-        </div>
-      {{/if}}
+<div class="one-line fade-out">
+  <div class="row-request">
+    <div class="row-item">
+    {{#link-to "build" repo.owner.login repo.name repo.default_branch.last_build.id}}
+      {{request-icon event=repo.default_branch.last_build.event_type state=repo.default_branch.last_build.state}}
+      <span class="label-align">#{{repo.default_branch.last_build.number}} {{repo.default_branch.last_build.state}} on {{repo.default_branch.name}}</span>
+    {{/link-to}}
     </div>
-
-    <aside class="dash-aside">
-      <ul class="lastbuilds">
-        {{lastbuild-tile repo=repo build=repo.default_branch.last_build}}
-      </ul>
-    </aside>
   </div>
+</div>
+
+<div class="one-line">
+  <div class="row-commit">
+    <div class="row-item">
+      <a href="{{urlGithubCommit}}" title="commit on GitHub">
+        <span class="icon-github"></span>
+        <span class="label-align">
+          {{format-sha repo.default_branch.last_build.commit.sha}}
+        </span>
+      </a>
+    </div>
+  </div>
+</div>
+
+<div class="one-line">
+  <div class="row-calendar">
+    <div class="row-item" title="{{repo.default_branch.last_build.finished_at}}">
+      <span class="icon-calendar"></span>
+      <span class="label-align">
+      {{#if repo.default_branch.last_build}}
+        {{format-time repo.default_branch.last_build.finished_at}}
+      {{else}}
+        -
+      {{/if}}</span>
+      </div>
+  </div>
+</div>
+{{!-- 
+<div class="one-line is-relative">
+  <div class="row-nav dropup-trigger">
+    <div class="row-item">
+      <a href="#"><span class="icon icon-tofu">
+        <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+          <g id="Tofuburger">
+            <path fill="#A7AEAE" d="M17.9,6.2H2.1C1.8,6.2,1.5,6,1.5,5.6C1.5,5.3,1.8,5,2.1,5h15.7c0.4,0,0.6,0.3,0.6,0.6
+              C18.5,6,18.2,6.2,17.9,6.2z"/>
+            <path fill="#A7AEAE" d="M17.9,10.6H2.1c-0.4,0-0.6-0.3-0.6-0.6s0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6S18.2,10.6,17.9,10.6z
+              "/>
+            <path fill="#A7AEAE" d="M17.9,15H2.1c-0.4,0-0.6-0.3-0.6-0.6c0-0.3,0.3-0.6,0.6-0.6h15.7c0.4,0,0.6,0.3,0.6,0.6
+              C18.5,14.7,18.2,15,17.9,15z"/>
+          </g>
+        </svg>
+      </span></a></div>
+    </div>
+    <div class="dropup--blue">
+      <ul>
+        <li><a {{action 'deactivateRepo'}}>
+          <span class="icon icon-eye">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+              <g id="Failed">
+                <path fill="#A7AEAE" d="M10.9,10l3.9-3.9c0.2-0.2,0.2-0.6,0-0.9c-0.2-0.2-0.6-0.2-0.9,0L10,9.1L6.1,5.2c-0.2-0.2-0.6-0.2-0.9,0
+                  c-0.2,0.2-0.2,0.6,0,0.9L9.1,10l-3.9,3.9c-0.2,0.2-0.2,0.6,0,0.9C5.3,14.9,5.5,15,5.6,15s0.3-0.1,0.4-0.2l3.9-3.9l3.9,3.9
+                  c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.9L10.9,10z"/>
+              </g>
+            </svg>
+          </span>
+          <span class="dropup-item">Deactivate</span></a>
+        </li>
+        <li>
+          {{#if hasTriggered}}
+            <span class="icon">
+              <svg version="1.1" id="Layer_1"  x="0px" y="0px"
+                 viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+                <g id="Passed">
+                  <path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
+                    C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
+                </g>
+              </svg>
+            </span>
+            <span class="dropup-item no-link">Build triggered</span>
+          {{else}}
+            {{#if isTriggering}}
+              {{loading-indicator}}
+            {{else}}
+              <a {{action 'tiggerBuild'}}>
+                <span class="icon icon-trigger">
+                  <svg x="0px" y="0px" viewBox="0 0 20 20" xml:space="preserve">
+                    <g id="Trigger">
+                      <path fill="#A7AEAE" d="M17.2,7.9C17,7.6,16.6,7.7,16.3,8l-1,1.2C14.9,6,12.2,3.6,9,3.6c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4
+                        c1.8,0,3.6-0.8,4.8-2.2c0.2-0.3,0.2-0.7-0.1-0.9c-0.3-0.2-0.7-0.2-0.9,0.1c-1,1.1-2.4,1.7-3.9,1.7c-2.8,0-5.1-2.3-5.1-5.1
+                        S6.1,4.9,9,4.9c2.7,0,4.9,2.1,5.1,4.7l-1.7-1.1c-0.3-0.2-0.7-0.1-0.9,0.2s-0.1,0.7,0.2,0.9l2.8,1.8c0,0,0,0,0,0
+                        c0.1,0.1,0.2,0.1,0.3,0.1c0.1,0,0.2,0,0.3-0.1c0,0,0.1,0,0.1-0.1c0,0,0.1-0.1,0.1-0.1l2-2.4C17.6,8.5,17.5,8.1,17.2,7.9z"/>
+                    </g>
+                  </svg>
+                </span>
+                <span class="dropup-item">Trigger a build</span>
+              </a>
+            {{/if}}
+          {{/if}}
+        </li>
+      </ul>
+    </div>
+</div> --}}

app/templates/components/job-log.hbs

@@ -1,9 +1,5 @@
-{{#if error}}
-  <p class="notice">There was an error while trying to fetch the log.</p>
+{{#if log.isLoaded}}
+  {{log-content job=job log=log}}
 {{else}}
-  {{#if log.isLoaded}}
-    {{log-content job=job log=log}}
-  {{else}}
-    {{loading-indicator}}
-  {{/if}}
+  {{loading-indicator}}
 {{/if}}

app/templates/components/landing-row.hbs

@@ -0,0 +1,108 @@
+
+<div class="two-line row-header fade-out">
+  <div class="row-name row-color">
+    <h3>{{#link-to "owner" repo.owner}}
+      {{status-icon status=repo.lastBuildState}}
+      <span class="label-align">{{repo.owner}}</span>{{/link-to}}
+    </h3>
+    <h2>{{#link-to "repo" repo.owner repo.name}}
+      <span class="label-align">{{repo.name}}</span>
+      {{/link-to}}
+    </h2>
+  </div>
+</div>
+
+<div class="two-line">
+  <div class="row-number">
+    <div class="row-item row-color">
+      {{#link-to "build" repo repo.lastBuildId}}
+      <span class="icon">
+        <svg version="1.1" id="Layer_1" x="0px" y="0px"
+           viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+        <path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
+          c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
+          c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
+          c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
+          c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
+          l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
+          L-277.2,202.4z"/>
+        </svg>
+      </span>
+      <span class="label-align">
+        {{repo.lastBuildNumber}} {{repo.lastBuildState}}</span>
+      {{/link-to}}
+    </div>
+  </div>
+
+  <div class="row-calendar">
+    <div class="row-item" title="{{repo.lastBuildFinishedAt}}">
+      <span class="icon">
+        <svg viewBox="0 0 20 20">
+          <g id="Cal">
+            <path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
+              C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
+            <path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
+              c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
+              C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
+              c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
+              H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
+            <path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
+              c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
+              V10.7z"/>
+          </g>
+        </svg>
+      </span>
+      <time class="label-align" datetime="{{repo.lastBuildFinishedAt}}">
+        {{landing-page-last-build-time repo.lastBuildFinishedAt}}</time>
+    </div>
+  </div>
+</div>
+
+<div class="two-line">
+  <div class="row-commit">
+    <div class="row-item">
+      <span class="icon">
+        <svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
+          <g id="Commit">
+            <path fill="#A7AEAE" d="M7.8,17.5c-0.3,0-0.5-0.2-0.5-0.5l0-1c-0.4,0-1,0.1-1.4-0.1c-0.4-0.1-1.3-0.5-1.8-1.7
+              c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.3-0.3-0.4C3,12.8,3,12,3.3,11.5c0.3-0.4,0.7-0.5,1.2-0.3c0.7,0.2,1.1,0.9,1.4,1.3
+              c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.4,1,0.3,1.4,0.1c0.1-0.1,0.2-0.2,0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.7-0.1-1.3-0.4-1.9-0.7
+              c-0.2-0.2-0.6-0.4-0.8-0.7c-0.3-0.3-0.5-0.7-0.7-1.2C4.1,9.4,4,9,3.9,8.5c0-0.4-0.1-0.9,0-1.4C4,6.5,4.2,6,4.5,5.5
+              c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0-0.1,0-0.1c-0.1-0.3-0.1-0.6-0.1-1c0-0.4,0.1-0.8,0.3-1.2C5,2.6,5.2,2.5,5.5,2.5
+              c0.3,0,0.8,0.1,1.2,0.3c0.4,0.2,0.8,0.4,1.2,0.7c0.5-0.1,1-0.2,1.6-0.2c0.4,0,1.6,0,2,0c0.5,0,1,0.1,1.4,0.2l0.2-0.1
+              c0.2-0.1,0.5-0.3,0.7-0.4c0.4-0.2,0.7-0.3,1.1-0.3c0.1,0,0.2,0,0.3,0c0.3,0,0.5,0.1,0.6,0.4c0.2,0.6,0.4,1.2,0.2,2l0,0.1
+              c0,0.1,0,0.2-0.1,0.3c0.5,0.6,0.7,1.3,0.8,2.1c0,0.3,0,0.6,0,0.9c0,0.5-0.1,1-0.2,1.4c-0.2,0.5-0.4,1-0.7,1.4
+              c-0.3,0.4-0.7,0.6-1,0.8c-0.6,0.3-1.2,0.6-1.8,0.7c0.2,0.4,0.3,0.8,0.3,1.3c0,0,0,0,0,0c0,0.8,0,3.2,0,3.2c0,0.3-0.2,0.5-0.5,0.5
+              L7.8,17.5L7.8,17.5z M7.8,15.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.2,0.2,0.3l0,1l4.2,0c0-0.7,0-2.1,0-2.7c0-0.4-0.1-0.7-0.2-1
+              c-0.1-0.2-0.1-0.3-0.2-0.3l0.3-0.4l0,0L12,12.5c-0.1-0.1-0.1-0.3-0.1-0.5c0.1-0.2,0.2-0.3,0.4-0.3l0.3,0c0.7-0.1,1.3-0.3,1.9-0.7
+              c0.3-0.2,0.6-0.4,0.7-0.6c0.2-0.3,0.4-0.6,0.5-1C15.9,9,15.9,8.6,16,8.1c0-0.2,0-0.5,0-0.7c-0.1-0.7-0.3-1.2-0.7-1.7
+              c-0.2-0.2-0.2-0.4-0.1-0.6c0-0.1,0.1-0.2,0.1-0.3l0-0.1c0.1-0.4,0-0.8-0.1-1.2c0,0,0,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.2
+              c-0.2,0.1-0.4,0.2-0.7,0.4l-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.5-0.1-0.9-0.2-1.4-0.2c-0.4,0-1.5,0-1.9,0C9,4.1,8.5,4.2,8,4.4
+              c-0.1,0-0.3,0-0.5-0.1C7.1,4,6.7,3.8,6.3,3.6C6.1,3.5,5.9,3.5,5.7,3.5C5.6,3.7,5.6,4,5.6,4.2c0,0.3,0,0.5,0.1,0.7
+              c0,0.1,0,0.1,0.1,0.2c0.1,0.2,0,0.4-0.1,0.5L5.5,5.8C5.5,5.9,5.4,6,5.3,6.1C5.1,6.4,4.9,6.8,4.8,7.3c-0.1,0.4,0,0.8,0,1.1
+              c0,0.4,0.1,0.8,0.2,1.2c0.1,0.4,0.3,0.7,0.5,0.9C5.8,10.7,6,10.9,6.2,11c0.5,0.3,1,0.5,1.6,0.6c0.2,0,0.7,0.1,0.7,0.1
+              c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1-0.3,1-0.9,1.4c-0.7,0.4-1.8,0.5-2.5-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
+              c-0.2-0.3-0.6-0.8-1-1c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1,0.1c0,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.3,0.4,0.5,0.5,0.8
+              c0.4,0.8,1,1.1,1.2,1.2C6.6,15.2,7.4,15.1,7.8,15.1C7.7,15.1,7.7,15.1,7.8,15.1z"/>
+          </g>
+        </svg>
+      </span>
+      <span class="label-align">
+        {{format-sha repo.lastBuild.commit.sha}}</span>
+    </div>
+  </div>
+  <div class="row-commiter">
+    <div class="row-item">
+      <span class="icon">
+        <svg version="1.1" id="Layer_1" x="0px" y="0px"
+           viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+          <g id="Push">
+            <path fill="#A7AEAE" d="M16.9,9.4h-3.5c-0.3-1.6-1.7-2.8-3.4-2.8S6.9,7.8,6.6,9.4H3.1c-0.3,0-0.6,0.3-0.6,0.6s0.3,0.6,0.6,0.6h3.5
+              c0.3,1.6,1.7,2.8,3.4,2.8s3.1-1.2,3.4-2.8h3.5c0.3,0,0.6-0.3,0.6-0.6S17.2,9.4,16.9,9.4z M10,12.2c-1.2,0-2.2-1-2.2-2.2
+              c0-1.2,1-2.2,2.2-2.2c1.2,0,2.2,1,2.2,2.2c0,0,0,0,0,0c0,0,0,0,0,0C12.2,11.2,11.2,12.2,10,12.2z"/>
+          </g>
+        </svg>
+      </span><span class="label-align">{{repo.lastBuild.commit.branch}}</span>
+    </div>
+  </div>
+</div>

app/templates/components/lastbuild-tile.hbs

@@ -1,4 +0,0 @@
-{{#link-to "build" repo.owner.login repo.name build.id}}
-  {{status-icon status=build.state}}
-  <span class="label-align">#{{build.number}}</span>
-{{/link-to}}

app/templates/components/log-content.hbs

@@ -13,6 +13,16 @@
           <span class="label-align">This job is running on our legacy infrastructure. Please read <a href="http://docs.travis-ci.com/user/migrating-from-legacy/?utm_source=legacy-notice&utm_medium=banner&utm_campaign=legacy-upgrade" title="Migrating from legacy">our docs on how to upgrade</a>.</span></p>
         {{/if}}
       {{/if}}
+
+      {{#if job.displayGceNotice}}
+        {{#if job.isFinished}}
+          <p class="notice--blue"><span class="icon-flag"></span>
+          <span class="label-align">This job ran on our new platform for Precise builds. Please read <a href="https://blog.travis-ci.com/2015-11-27-moving-to-a-more-elastic-future" title="Blog post on infrastructure migration">our blog post for more information</a>.</span></p>
+        {{else}}
+          <p class="notice--blue"><span class="icon-flag"></span>
+          <span class="label-align">This job is running on our new platform for Legacy Precise builds. Please read <a href="https://blog.travis-ci.com/2015-11-27-moving-to-a-more-elastic-future" title="Blog post on infrastructure migration">our blog post for more information</a>.</span></p>
+        {{/if}}
+      {{/if}}
     {{/if}}
   {{/unless}}
 

app/templates/components/not-active.hbs

@@ -63,7 +63,14 @@
   <h2 class="page-title">This is not an active repository</h2>
   <p class="page-notice">Want to start testing this project on Travis CI?</p>
   <a href="http://docs.travis-ci.com/user/getting-started/" class="button button--green">Read the Docs on Getting Started</a>
-  {{#if user.pushPermissions.length}}
-    <p>If this repository is already in active use, <br> make sure it’s activated on {{#link-to "account" repo.owner}}your profile{{/link-to}}.</p>
+
+  {{#if canActivate}}
+    <p>You can activate the repository on {{#link-to "account" repo.owner}}your profile{{/link-to}},<br/>
+    or by clicking the button below:</p>
+
+    <button {{action 'activate'}} class="button button--green">Activate</button>
+    {{#if isActivating}}
+      {{loading-indicator}}
+    {{/if}}
   {{/if}}
 </div>

app/templates/components/orgs-filter.hbs

@@ -14,7 +14,7 @@
         {{else}}
           All organizations
         {{/if}}
-      </span><span class="option-arrow"></span>
+      </span><span class="option-tofu"></span>
     </a>
   {{/if}}
   <div class="option-dropdown {{if showFilter 'is-open'}}">

app/templates/components/owner-repo-tile.hbs

@@ -15,7 +15,17 @@
   <div class="row-item row-color">
     <div class="one-line">
       {{#link-to "build" ownerName repoName repo.default_branch.last_build.id}}
-        <span class="icon-hash">
+        <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 193 18 18" {{!-- style="enable-background:new -289 191 20 20;" --}} xml:space="preserve">
+            <path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
+              c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
+              c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
+              c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
+              c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
+              l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
+              L-277.2,202.4z"/>x
+            </svg>
           </span>
         <span class="label-align">{{repo.default_branch.last_build.number}}</span>
       {{/link-to}}
@@ -32,7 +42,31 @@
   <div class="row-item">
     <div class="one-line">
       <a href="{{repo.default_branch.last_build.commit.compare_url}}">
-        <span class="icon-github">
+        <span class="icon">
+          <svg x="0px" y="0px" viewBox="2 0 20 20" xml:space="preserve">
+            <g id="Commit">
+              <path fill="#A7AEAE" d="M7.8,17.5c-0.3,0-0.5-0.2-0.5-0.5l0-1c-0.4,0-1,0.1-1.4-0.1c-0.4-0.1-1.3-0.5-1.8-1.7
+                c-0.1-0.2-0.3-0.4-0.4-0.6c-0.1-0.1-0.2-0.3-0.3-0.4C3,12.8,3,12,3.3,11.5c0.3-0.4,0.7-0.5,1.2-0.3c0.7,0.2,1.1,0.9,1.4,1.3
+                c0.1,0.1,0.1,0.2,0.2,0.2c0.4,0.4,1,0.3,1.4,0.1c0.1-0.1,0.2-0.2,0.3-0.3c-0.1,0-0.1,0-0.2,0c-0.7-0.1-1.3-0.4-1.9-0.7
+                c-0.2-0.2-0.6-0.4-0.8-0.7c-0.3-0.3-0.5-0.7-0.7-1.2C4.1,9.4,4,9,3.9,8.5c0-0.4-0.1-0.9,0-1.4C4,6.5,4.2,6,4.5,5.5
+                c0.1-0.1,0.1-0.2,0.2-0.3c0,0,0-0.1,0-0.1c-0.1-0.3-0.1-0.6-0.1-1c0-0.4,0.1-0.8,0.3-1.2C5,2.6,5.2,2.5,5.5,2.5
+                c0.3,0,0.8,0.1,1.2,0.3c0.4,0.2,0.8,0.4,1.2,0.7c0.5-0.1,1-0.2,1.6-0.2c0.4,0,1.6,0,2,0c0.5,0,1,0.1,1.4,0.2l0.2-0.1
+                c0.2-0.1,0.5-0.3,0.7-0.4c0.4-0.2,0.7-0.3,1.1-0.3c0.1,0,0.2,0,0.3,0c0.3,0,0.5,0.1,0.6,0.4c0.2,0.6,0.4,1.2,0.2,2l0,0.1
+                c0,0.1,0,0.2-0.1,0.3c0.5,0.6,0.7,1.3,0.8,2.1c0,0.3,0,0.6,0,0.9c0,0.5-0.1,1-0.2,1.4c-0.2,0.5-0.4,1-0.7,1.4
+                c-0.3,0.4-0.7,0.6-1,0.8c-0.6,0.3-1.2,0.6-1.8,0.7c0.2,0.4,0.3,0.8,0.3,1.3c0,0,0,0,0,0c0,0.8,0,3.2,0,3.2c0,0.3-0.2,0.5-0.5,0.5
+                L7.8,17.5L7.8,17.5z M7.8,15.1c0.1,0,0.2,0,0.3,0.1c0.1,0.1,0.2,0.2,0.2,0.3l0,1l4.2,0c0-0.7,0-2.1,0-2.7c0-0.4-0.1-0.7-0.2-1
+                c-0.1-0.2-0.1-0.3-0.2-0.3l0.3-0.4l0,0L12,12.5c-0.1-0.1-0.1-0.3-0.1-0.5c0.1-0.2,0.2-0.3,0.4-0.3l0.3,0c0.7-0.1,1.3-0.3,1.9-0.7
+                c0.3-0.2,0.6-0.4,0.7-0.6c0.2-0.3,0.4-0.6,0.5-1C15.9,9,15.9,8.6,16,8.1c0-0.2,0-0.5,0-0.7c-0.1-0.7-0.3-1.2-0.7-1.7
+                c-0.2-0.2-0.2-0.4-0.1-0.6c0-0.1,0.1-0.2,0.1-0.3l0-0.1c0.1-0.4,0-0.8-0.1-1.2c0,0,0,0-0.1,0c-0.2,0-0.5,0.1-0.7,0.2
+                c-0.2,0.1-0.4,0.2-0.7,0.4l-0.4,0.2c-0.1,0.1-0.3,0.1-0.4,0.1c-0.5-0.1-0.9-0.2-1.4-0.2c-0.4,0-1.5,0-1.9,0C9,4.1,8.5,4.2,8,4.4
+                c-0.1,0-0.3,0-0.5-0.1C7.1,4,6.7,3.8,6.3,3.6C6.1,3.5,5.9,3.5,5.7,3.5C5.6,3.7,5.6,4,5.6,4.2c0,0.3,0,0.5,0.1,0.7
+                c0,0.1,0,0.1,0.1,0.2c0.1,0.2,0,0.4-0.1,0.5L5.5,5.8C5.5,5.9,5.4,6,5.3,6.1C5.1,6.4,4.9,6.8,4.8,7.3c-0.1,0.4,0,0.8,0,1.1
+                c0,0.4,0.1,0.8,0.2,1.2c0.1,0.4,0.3,0.7,0.5,0.9C5.8,10.7,6,10.9,6.2,11c0.5,0.3,1,0.5,1.6,0.6c0.2,0,0.7,0.1,0.7,0.1
+                c0.1,0,0.3,0.1,0.3,0.2c0.1,0.1,0.1,0.2,0.1,0.4c0,0.1-0.3,1-0.9,1.4c-0.7,0.4-1.8,0.5-2.5-0.3c-0.1-0.1-0.2-0.2-0.3-0.3
+                c-0.2-0.3-0.6-0.8-1-1c-0.1,0-0.1,0-0.1,0c0,0,0,0-0.1,0.1c0,0.2,0,0.4,0.1,0.6c0.1,0.1,0.2,0.2,0.3,0.4c0.2,0.3,0.4,0.5,0.5,0.8
+                c0.4,0.8,1,1.1,1.2,1.2C6.6,15.2,7.4,15.1,7.8,15.1C7.7,15.1,7.7,15.1,7.8,15.1z"/>
+            </g>
+          </svg>
         </span>
         <span class="label-align">{{format-sha repo.default_branch.last_build.commit.sha}}</span>
       </a>
@@ -41,7 +75,21 @@
 
   <div class="row-item fade-out">
     <div class="one-line">
-      <span class="icon-calendar">
+      <span class="icon">
+        <svg viewBox="0 0 20 20">
+          <g id="Cal">
+            <path fill="#A7AEAE" d="M16.7,2.5H3.3C3,2.5,2.8,2.7,2.8,3V17c0,0.3,0.2,0.5,0.5,0.5h13.4c0.3,0,0.5-0.2,0.5-0.5V3
+              C17.2,2.7,17,2.5,16.7,2.5z M16.2,3.4v3.1H3.8V3.4H16.2z M3.8,16.6v-9h12.5v9H3.8z"/>
+            <path fill="#A7AEAE" d="M8.7,13.4c-0.1,0-0.3,0-0.4,0c0.2-0.2,0.4-0.4,0.5-0.6c0.2-0.2,0.3-0.4,0.5-0.6c0.1-0.2,0.2-0.4,0.3-0.6
+              c0.1-0.2,0.1-0.4,0.1-0.6c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.3-0.3-0.4C9.2,10,9.1,9.9,8.9,9.8C8.7,9.7,8.5,9.7,8.3,9.7
+              C8,9.7,7.7,9.8,7.5,9.9C7.2,10,7,10.2,6.8,10.4L7.3,11c0.1-0.1,0.2-0.2,0.4-0.3c0.1-0.1,0.3-0.1,0.4-0.1c0.2,0,0.4,0.1,0.5,0.2
+              c0.1,0.1,0.2,0.3,0.2,0.5c0,0.2,0,0.3-0.1,0.5c-0.1,0.2-0.2,0.4-0.4,0.6c-0.2,0.2-0.4,0.4-0.6,0.7c-0.2,0.2-0.5,0.5-0.8,0.8v0.6
+              H10v-0.9H9.1C9,13.4,8.8,13.4,8.7,13.4z"/>
+            <path fill="#A7AEAE" d="M10.6,10.7h2c-0.2,0.3-0.4,0.6-0.5,0.8c-0.1,0.3-0.3,0.6-0.4,0.8c-0.1,0.3-0.2,0.6-0.2,0.9
+              c0,0.3-0.1,0.7-0.1,1h1c0-0.4,0-0.8,0.1-1.2c0-0.3,0.1-0.7,0.2-0.9c0.1-0.3,0.2-0.6,0.4-0.9c0.2-0.3,0.4-0.6,0.6-0.9V9.8h-3.1
+              V10.7z"/>
+          </g>
+        </svg>
       </span>
       <span class="build-status label-align">{{repo.default_branch.last_build.state}}</span>
       <span class="finished-at label-align">{{format-time repo.default_branch.last_build.finished_at}}</span>

app/templates/components/queued-jobs.hbs

@@ -8,14 +8,35 @@
         {{/if}}
 
         <p class="tile-title float-right">
-          <span class="icon-hash"></span>
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+            <path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
+              c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
+              c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
+              c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
+              c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
+              l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
+              L-277.2,202.4z"/>
+            </svg>
+          </span>
           {{#if job.repo.slug}}
             {{#link-to "job" job.repo job}}<span class="label-align">{{job.number}}</span>{{/link-to}}
           {{/if}}
         </p>
 
         <p>
-          <span class="icon-clock"></span>
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+              <g>
+                <path fill="#A5ACAD" class="st0" d="M-278.9,207.7c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7S-275.2,207.7-278.9,207.7z M-278.9,195.4
+                  c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S-275.8,195.4-278.9,195.4z"/>
+                <path fill="#A5ACAD" class="st0" d="M-276.7,203.1c-0.1,0-0.2,0-0.3-0.1l-2.4-1.5c-0.2-0.1-0.2-0.3-0.2-0.4v-3.8c0-0.3,0.2-0.5,0.5-0.5
+                  s0.5,0.2,0.5,0.5v3.5l2.1,1.4c0.2,0.2,0.3,0.5,0.2,0.7C-276.4,203-276.5,203.1-276.7,203.1z"/>
+              </g>
+            </svg>
+          </span>
           <span class="label-align">Queued</span>
         </p>
 

app/templates/components/repos-list-item.hbs

@@ -1,8 +1,8 @@
 <div class="tile {{repo.lastBuildState}}">
   <h2 class="tile-title {{repo.lastBuildState}}">
     {{#if repo.slug}}
-      {{status-icon status=repo.lastBuildState}}
       {{#link-to "repo" repo}}
+      {{status-icon status=repo.lastBuildState}}
       <span class="label-align">{{repo.slug}}</span>
       {{/link-to}}
     {{/if}}
@@ -11,8 +11,8 @@
   {{#if repo.slug}}
     {{#if repo.lastBuildId}}
       <p class="tile-title float-right {{repo.lastBuildState}}">
-        <span class="icon-hash"></span>
         {{#link-to "build" repo repo.lastBuildId}}
+          <span class="icon-hash"></span>
           <span class="label-align">{{repo.lastBuildNumber}}</span>
         {{/link-to}}
       </p>

app/templates/components/request-icon.hbs

@@ -1,35 +1,15 @@
 {{#if isEmpty}}
-  <svg version="1.1" id="icon-nobuilds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" xml:space="preserve">
-  <g id="nobuilds">
-  <circle cx="7.5" cy="7.5" r="7"/>
-  </g>
-  </svg>
+  <svg viewBox="0 0 20 20"><path fill="#A7AEAE" d="M16.9 9.4h-3.5c-.3-1.6-1.7-2.8-3.4-2.8S6.9 7.8 6.6 9.4H3.1c-.3 0-.6.3-.6.6s.3.6.6.6h3.5c.3 1.6 1.7 2.8 3.4 2.8s3.1-1.2 3.4-2.8h3.5c.3 0 .6-.3.6-.6s-.3-.6-.6-.6zM10 12.2c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.2-1 2.2-2.2 2.2z"/></svg>
 {{else}}
   {{#if isPush}}
-    <svg version="1.1" id="icon-push" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" xml:space="preserve">
-    <g id="push">
-    <circle cx="7.505" cy="7.354" r="2.854"/>
-    <line x1="14.5" y1="7.354" x2="10.349" y2="7.354"/>
-    <line x1="4.651" y1="7.354" x2="0.5" y2="7.354"/>
-    </g>
-    </svg>
+    <svg viewBox="0 0 20 20"><path fill="#A7AEAE" d="M16.9 9.4h-3.5c-.3-1.6-1.7-2.8-3.4-2.8S6.9 7.8 6.6 9.4H3.1c-.3 0-.6.3-.6.6s.3.6.6.6h3.5c.3 1.6 1.7 2.8 3.4 2.8s3.1-1.2 3.4-2.8h3.5c.3 0 .6-.3.6-.6s-.3-.6-.6-.6zM10 12.2c-1.2 0-2.2-1-2.2-2.2 0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.2-1 2.2-2.2 2.2z"/></svg>
   {{/if}}
 
   {{#if isPR}}
-    <svg version="1.1" id="icon-pullrequest" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -1 16 17" xml:space="preserve">
-    <g id="pullrequest">
-    <circle cx="3.299" cy="2.344" r="1.699"/>
-    <circle cx="3.299" cy="12.801" r="1.699"/>
-    <circle cx="11.697" cy="12.801" r="1.699"/>
-    <line x1="3.299" y1="4.044" x2="3.299" y2="11.102"/>
-    <path d="M8.752,0.5c0,0-1.946,1.946-1.946,1.975h2.396c0,0,2.483-0.152,2.483,2.462s0,6.143,0,6.143"/>
-    <path d="M8.752,4.436c0,0-1.946-1.946-1.946-1.975"/>
-    </g>
-    </svg>
+    <svg viewBox="0 0 20 20"><g fill="#A7AEAE"><path d="M8 4.5C8 3.1 6.9 2 5.5 2S3 3.1 3 4.5c0 1.1.8 2.1 1.8 2.4v6.5c-1 .3-1.8 1.2-1.8 2.4 0 1.4 1.1 2.5 2.5 2.5S8 17 8 15.7c0-1.1-.8-2.1-1.8-2.4V6.8C7.2 6.6 8 5.6 8 4.5zm-3.7 0c0-.6.5-1.2 1.2-1.2s1.2.5 1.2 1.2-.6 1.1-1.2 1.1-1.2-.5-1.2-1.1zm2.4 11.2c0 .6-.5 1.2-1.2 1.2s-1.2-.5-1.2-1.2.5-1.2 1.2-1.2 1.2.5 1.2 1.2zM15.1 13.3v-6c0-1-.3-1.9-.9-2.4-1-.9-2.4-.8-2.4-.8h-1l1-1c.3-.3.3-.7 0-.9s-.7-.3-.9 0l-2 2c-.1 0-.2.1-.3.2v.4c0 .1.1.2.2.3.3.3.8.9 2 2 .1.1.3.2.5.2s.3-.1.5-.2c.3-.3.3-.7 0-.9l-1-1h1s.9 0 1.5.5c.3.3.5.8.5 1.5v6.1c-1 .3-1.8 1.2-1.8 2.4 0 1.4 1.1 2.5 2.5 2.5S17 17 17 15.7c0-1.2-.8-2.1-1.9-2.4zm-.6 3.5c-.6 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2 1.2.5 1.2 1.2-.6 1.2-1.2 1.2z"/></g></svg>
   {{/if}}
 
   {{#if isAPI}}
-    <svg version="1.1" id="icon-api" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" xml:space="preserve">
-    <g><path id="api" d="M13.676,5.327h-1.153V3.156c0-0.494-0.329-0.906-0.824-0.906H9.147c-0.412,0-0.824,0.412-0.824,0.906 v2.171H6.429V3.156c0-0.494-0.329-0.906-0.824-0.906h-2.47c-0.412,0-0.824,0.412-0.824,0.906v2.171H1.324C0.912,5.327,0.5,5.739,0.5,6.233v5.076c0,0.494,0.329,0.906,0.824,0.906h12.353c0.412,0,0.824-0.412,0.824-0.906V6.233C14.5,5.739,14.171,5.327,13.676,5.327z"/></g> </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.08 170.08"><path fill="#A7AEAE" d="M137.765 132.663H32.315c-6.803 0-12.756-5.953-12.756-13.607V72.284c0-6.803 5.952-13.606 12.755-13.606h2.55v-8.504c0-6.803 5.954-13.606 12.757-13.606h21.26c6.803 0 12.756 5.953 12.756 13.606v8.504h5.103v-8.504c0-6.803 5.954-13.606 12.757-13.606h22.11c6.804 0 12.756 5.953 12.756 13.606v8.504h4.252c6.804 0 12.756 5.953 12.756 13.606v47.622c-1.7 6.804-6.803 12.757-13.605 12.757zm-105.45-62.93s-1.7.85-1.7 2.55v47.623s0 2.552 1.7 2.552h105.45s1.7-.85 1.7-2.552V72.284s0-2.55-1.7-2.55H127.56c-3.4 0-5.102-2.552-5.102-5.104V50.174s0-2.55-1.7-2.55h-22.11s-1.7.85-1.7 2.55V63.78c0 3.4-2.553 5.102-5.105 5.102H75.686c-3.4 0-5.103-2.55-5.103-5.102V50.174s0-2.55-1.7-2.55h-21.26s-1.702.85-1.702 2.55V63.78c0 3.4-2.55 5.102-5.1 5.102h-8.505v.85z"/></svg>
   {{/if}}
 {{/if}}

app/templates/components/running-jobs.hbs

@@ -10,7 +10,17 @@
         {{/if}}
 
         <p class="tile-title float-right">
-          <span class="icon-hash">
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+            <path fill="#A5ACAD" class="st0" d="M-272.4,198.4C-272.4,198.4-272.4,198.4-272.4,198.4l-3.4,0l0.3-3.3c0-0.3-0.2-0.6-0.5-0.6
+              c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.4l-3.2,0l0.3-3.6c0-0.3-0.2-0.6-0.5-0.6c-0.3,0-0.6,0.2-0.6,0.5l-0.3,3.7l-3.2,0
+              c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5c0,0,0,0,0,0l3.1,0l-0.2,2.9l-3.5,0c-0.3,0-0.5,0.2-0.5,0.6c0,0.3,0.2,0.5,0.5,0.5
+              c0,0,0,0,0,0l3.4,0l-0.3,3.3c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.4l3.2,0l-0.3,3.6
+              c0,0.3,0.2,0.6,0.5,0.6c0,0,0,0,0,0c0.3,0,0.5-0.2,0.5-0.5l0.3-3.7l3.2,0c0.3,0,0.5-0.2,0.5-0.6c0-0.3-0.2-0.5-0.5-0.5c0,0,0,0,0,0
+              l-3.1,0l0.2-2.9l3.5,0c0.3,0,0.5-0.2,0.5-0.6C-271.8,198.7-272.1,198.4-272.4,198.4z M-277.2,202.4l-3.2,0l0.2-2.9l3.2,0
+              L-277.2,202.4z"/>
+            </svg>
           </span>
           {{#if job.repo.slug}}
             {{#link-to "job" job.repo job}}<span class="label-align">{{job.number}}</span>{{/link-to}}
@@ -18,7 +28,16 @@
         </p>
 
         <p>
-          <span class="icon-clock">
+          <span class="icon">
+            <svg version="1.1" id="Layer_1" x="0px" y="0px"
+               viewBox="-289 191 20 20" style="enable-background:new -289 191 20 20;" xml:space="preserve">
+              <g>
+                <path fill="#A5ACAD" class="st0" d="M-278.9,207.7c-3.7,0-6.7-3-6.7-6.7s3-6.7,6.7-6.7s6.7,3,6.7,6.7S-275.2,207.7-278.9,207.7z M-278.9,195.4
+                  c-3.1,0-5.6,2.5-5.6,5.6s2.5,5.6,5.6,5.6c3.1,0,5.6-2.5,5.6-5.6S-275.8,195.4-278.9,195.4z"/>
+                <path fill="#A5ACAD" class="st0" d="M-276.7,203.1c-0.1,0-0.2,0-0.3-0.1l-2.4-1.5c-0.2-0.1-0.2-0.3-0.2-0.4v-3.8c0-0.3,0.2-0.5,0.5-0.5
+                  s0.5,0.2,0.5,0.5v3.5l2.1,1.4c0.2,0.2,0.3,0.5,0.2,0.7C-276.4,203-276.5,203.1-276.7,203.1z"/>
+              </g>
+            </svg>
           </span>
           <span class="label-align">
             Duration:

app/templates/components/status-icon.hbs

@@ -1,40 +1,54 @@
+
 {{#if isEmpty}}
-  <svg version="1.1" id="icon-nobuilds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 17 17" xml:space="preserve">
-  <g id="nobuilds">
-  <circle cx="7.5" cy="7.5" r="7"/>
-  </g>
+  <svg version="1.1" id="Layer_1" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+    <g id="NoBuild">
+      <g>
+        <path fill="#A7AEAE" d="M10,16.2c-3.4,0-6.1-2.8-6.1-6.2S6.6,3.8,10,3.8s6.1,2.8,6.1,6.2S13.4,16.2,10,16.2z M10,5.2
+          c-2.7,0-4.9,2.2-4.9,4.8s2.2,4.8,4.9,4.8s4.9-2.2,4.9-4.8S12.7,5.2,10,5.2z"/>
+      </g>
+    </g>
   </svg>
 {{else}}
   {{#if hasPassed}}
-    <svg version="1.1" id="icon-passed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 17 16" xml:space="preserve">
-    <g><polyline style="stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"id="passed" points="14.5,1.5 6.499,13.716 0.5,8.78 "/></g>
+    <svg version="1.1" id="Layer_1"  x="0px" y="0px"
+       viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+      <g id="Passed">
+        <path fill="#A7AEAE" d="M9.6,14.4c-0.1,0-0.3-0.1-0.4-0.1l-4-3.3c-0.3-0.2-0.3-0.6-0.1-0.9S5.8,9.8,6.1,10l3.4,2.8l4.9-7.5
+          C14.6,5,15,4.9,15.3,5.1c0.3,0.2,0.4,0.6,0.2,0.9l-5.3,8.1C10.1,14.3,9.9,14.4,9.6,14.4C9.7,14.4,9.7,14.4,9.6,14.4z"/>
+      </g>
     </svg>
   {{/if}}
 
   {{#if hasFailed}}
-    <svg version="1.1" id="icon-failed" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 17 17" xml:space="preserve">
-    <g id="failed">
-    <line x1="0.5" y1="0.5" x2="14.5" y2="14.5"/>
-    <line x1="14.5" y1="0.5" x2="0.5" y2="14.5"/>
-    </g>
+    <svg version="1.1" id="Layer_1" x="0px" y="0px"
+       viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+      <g id="Failed">
+        <path fill="#A7AEAE" d="M10.9,10l3.9-3.9c0.2-0.2,0.2-0.6,0-0.9c-0.2-0.2-0.6-0.2-0.9,0L10,9.1L6.1,5.2c-0.2-0.2-0.6-0.2-0.9,0
+          c-0.2,0.2-0.2,0.6,0,0.9L9.1,10l-3.9,3.9c-0.2,0.2-0.2,0.6,0,0.9C5.3,14.9,5.5,15,5.6,15s0.3-0.1,0.4-0.2l3.9-3.9l3.9,3.9
+          c0.1,0.1,0.3,0.2,0.4,0.2c0.2,0,0.3-0.1,0.4-0.2c0.2-0.2,0.2-0.6,0-0.9L10.9,10z"/>
+      </g>
     </svg>
   {{/if}}
 
   {{#if wasCanceled}}
-    <svg version="1.1" id="icon-canceled" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 17 17" xml:space="preserve">
-    <g id="canceled">
-    <line x1="2.542" y1="2.938" x2="12.306" y2="12.551"/>
-    <circle cx="7.5" cy="7.5" r="7"/>
-    </g>
+    <svg version="1.1" id="Layer_1" x="0px" y="0px"
+       viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+      <g id="Cancelled">
+        <path fill="#A7AEAE" d="M10,3.3c-3.7,0-6.6,3-6.6,6.7s3,6.7,6.6,6.7s6.6-3,6.6-6.7S13.7,3.3,10,3.3z M15.4,10
+          c0,1.3-0.5,2.5-1.3,3.4L6.5,6C7.5,5.2,8.7,4.7,10,4.7C13,4.7,15.4,7,15.4,10z M4.6,10c0-1.2,0.4-2.2,1-3.1l7.5,7.4
+          c-0.9,0.7-2,1-3.2,1C7,15.3,4.6,13,4.6,10z"/>
+      </g>
     </svg>
   {{/if}}
 
   {{#if hasErrored}}
-    <svg version="1.1" id="icon-errored" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-1 -1 16 17" xml:space="preserve">
-    <g id="errored">
-    <circle cx="7.5" cy="13.986" r="0.97"/>
-    <line x1="7.5" y1="0.5" x2="7.5" y2="10.646"/>
-    </g>
+    <svg version="1.1" id="Layer_1" x="0px" y="0px"
+       viewBox="-519 391 20 20" style="enable-background:new -518 391 20 20;" xml:space="preserve">
+      <g>
+          <path fill="#A5ACAD" d="M-508.9,403.2c-0.3,0-0.6-0.3-0.6-0.6V395c0-0.3,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v7.6
+            C-508.2,402.9-508.5,403.2-508.9,403.2z"/>
+          <circle fill="#A5ACAD" cx="-508.9" cy="406.5" r="1.2"/>
+      </g>
     </svg>
   {{/if}}
 

app/templates/components/team-member.hbs

@@ -1,6 +1,6 @@
 <figure class="team-image">
-  <img class="front" src="../images/team/team-{{member.image}}.png" alt="{{member.name}}">
-  <img class="back" src="../images/team/{{member.image}}-animated.gif" alt="{{member.name}} gif">
+  <img class="front" src="../images/team/team-{{member.image}}.png" alt="">
+  <img class="back" src="../images/team/{{member.image}}-animated.gif" alt="">
 </figure>
 <h3 class="team-name">{{member.name}}</h3>
 <p class="team-title">{{member.title}}</p>
@@ -8,7 +8,7 @@
   <p class="team-handle"><a href="https://twitter.com/{{member.handle}}" title="{{member.name}} on Twitter">@{{member.handle}}</a></p>
 {{/if}}
 <div class="team-flags">
-  <img src="../images/pro-landing/flag-{{member.nationality}}.svg" alt="flag {{member.nationality}}" title="is from {{member.nationality}}">
+  <img src="../images/pro-landing/flag-{{member.nationality}}.svg" alt="flag {{member.nationality}}">
   <span class="flag-divider">/</span>
-  <img src="../images/pro-landing/flag-{{member.country}}.svg" alt="flag {{member.country}}" title="lives in {{member.country}}">
+  <img src="../images/pro-landing/flag-{{member.country}}.svg" alt="flag {{member.country}}">
 </div>

app/templates/getting-started.hbs

@@ -22,6 +22,9 @@
         <h2>Add .travis.yml file to your repository</h2>
         <p>In order for Travis CI to build your project, you need to tell the systems a little bit about it. You'll need to add a file named .travis.yml to the root of your repository.</p>
         <p>If .travis.yml is not in the repository, is misspelled or is not valid YAML, Travis CI will ignore it.</p>
+        <p class="note note--info">
+          <strong>Note:</strong> The <code>language</code> value is case-sensitive. If you set <code>language: C</code>, for example, your project will be considered a Ruby project.
+        </p>
         <p>Here you can find some of our basic <a href="http://docs.travis-ci.com/user/language-specific/" title="">language examples</a>.</p>
       </div>
     </li>

app/templates/home.hbs

@@ -1,232 +1,252 @@
 {{#travis-layout layoutName="layouts/landing-page"}}
 <div id="landing" class="landing">
-  <div class="row hero z-1">
-    <section class="landing-centered-wrapper">
-      <div class="large-12 columns" id="hero-copy">
-	<h1>Test and Deploy with Confidence</h1>
-	<p>Easily sync your GitHub projects with Travis CI<br class="mobile-break"> and you’ll be testing your code in minutes!</p>
+	<div class="row hero z-1">
+		<div class="landing-centered-wrapper">
+			<div class="large-12 columns" id="hero-copy">
+				<h1>Test and Deploy with Confidence</h1>
+				<p>Easily sync your GitHub projects with Travis CI<br class="mobile-break"> and you’ll be testing your code in minutes!</p>
 
-	{{#if auth.signedOut}}
-	<button {{action "signIn" target="auth"}} class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</button>
-	{{/if}}
-	{{#if auth.signingIn}}
-	<button class="button"><span class="loading-indicator--white"><i></i><i></i><i></i></span>Signing In</button>
-	{{/if}}
+				{{#if auth.signedOut}}
+				  <button {{action "signIn" target="auth"}} class="button"><img src="../images/landing-page/sign-in-mascot.svg" class="sign-in-mascot">Sign Up</button>
+				{{/if}}
+				{{#if auth.signingIn}}
+					<button class="button"><span class="loading-indicator--white"><i></i><i></i><i></i></span>Signing In</button>
+				{{/if}}
 
-      </div>
-      <div class="large-12 columns laptop-wrapper">
-	<div id="laptop">
-	  <img src="../images/landing-page/laptop.png" alt="Travis CI screenshot">
-	</div>
-      </div>
-    </section>
-  </div>
-
-  <div class="row oss-testing">
-    <section class="landing-centered-wrapper">
-      <div class="large-12 columns">
-	<h2>The home of<br class="mobile-break"> open source testing</h2>
-        <p>Over 300k open source projects<br class="mobile-break"> and 235k users are testing on Travis CI.</p>
-        <img src="../images/landing-page/customer-numbers.svg" alt="Open source project numbers" class="os-numbers">
-      </div>
-    </section>
-  </div>
-
-  <div class="row customers">
-    <div class="landing-centered-wrapper">
-      <div class="medium-6 columns">
-	<img src="../images/landing-page/customers-temp-together.svg" alt="customer logos">
-      </div>
-      <div class="medium-6 columns">
-	<p class="left">Some pretty awesome companies<br> and projects are using us.</p>
-      </div>
-    </div>
-  </div>
-
-  <div class="row free-for-oss">
-    <section class="landing-centered-wrapper">
-      <div class="large-12 columns">
-	<h1>Testing your open source<br class="mobile-no-break"> project is 10000% free</h1>
-	<p><span class="bold-italic">Seriously. Always.</span> We like to think of it as our way of giving<br>back to a community that gives us so much as well.</p>
-      </div>
-    </section>
-  </div>
-
-  <div class="row private-repos">
-    <section class="landing-centered-wrapper">
-      <div class="medium-6 columns mobile-envelope">
-	<img src="../images/landing-page/envelope.svg">
-      </div>
-
-      <div class="medium-6 columns">
-	<div class="landing-vert-center-s">
-	  <h2>Have a private project<br>you’d like to test?</h2>
-	  <p>Travis CI for private repositories has<br><a href="http://travis-ci.com/plans" target="_blank">plans</a> for every size project.</p>
-	</div>
-      </div>
-      <div class="medium-6 columns desktop-envelope">
-	<img src="../images/landing-page/envelope.svg" alt="envelope">
-      </div>
-    </section>
-  </div>
-
-  <div class="row features-list">
-    <section class="landing-centered-wrapper">
-      <div class="large-6 columns features-callouts">
-	<div class="landing-vert-center-s">
-	  <div class="medium-6 columns">
-	    <h3 id="f-co-1">Get set up in seconds</h3>
-	    <p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
-	  </div>
-	  <div class="medium-6 columns">
-	    <h3 id="f-co-2">Multi-language support</h3>
-	    <p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
-	  </div>
-	  <div class="medium-6 columns">
-	    <h3 id="f-co-3">Test your pull requests</h3>
-	    <p>Make sure every pull request to your project is tested before merging.</p>
-	  </div>
-	  <div class="medium-6 columns">
-	    <h3 id="f-co-4">Deploy to S3 and Heroku</h3>
-	    <p>Updating staging or production as soon as your tests pass has never been easier!</p>
-	  </div>
-	</div>
-      </div>
-      <div class="large-6 columns features-checked">
-	<h2>Features created to<br class="mobile-break"> help your projects and teams</h2>
-	<ul>
-	  <li>Watch your tests as they run</li>
-	  <li>Keep your config with your code</li>
-	  <li>Slack, HipChat, Emails and more</li>
-	  <li>A clean VM for every build</li>
-	  <li>Run your tests in parallel</li>
-	  <li>Linux and Mac (and iOS) supported</li>
-	  <li>Great API and command line tool</li>
-	  <li>Did we say free for Open Source already?</li>
-	</ul>
-      </div>
-    </section>
-  </div>
-
-  <div class="row build-flows">
-    <section class="landing-centered-wrapper">
-      <div class="large-12 columns">
-	<h2>Branch build flow</h2>
-	<div class="branch-bf">
-	  <div class="bf">
-	    <img src="../images/landing-page/push-icon-1.svg" alt="GitHub logo">
-	    <p>You push your<br>code to GitHub</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/push-icon-2.svg" alt="Trigger build">
-	    <p>GitHub triggers<br>Travis CI to build</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/push-icon-3.svg" alt="Travis logo">
-	    <p>Hooray!<br>Your build passes!</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/push-icon-4.svg" alt="Heroku logo">
-	    <p>Travis CI deploys<br>to Heroku</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/push-icon-5.svg" alt="Slack logo">
-	    <p>Travis CI tells the<br>team all is well</p>
-	  </div>
-	</div>
-	<h2 id="pr-bf-margin">Pull request build flow</h2>
-	<div class="branch-bf">
-	  <div class="bf">
-	    <img src="../images/landing-page/pull-icon-1.svg" alt="PR icon">
-	    <p>A pull request<br>is created</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/pull-icon-2.svg" alt="Check test">
-	    <p>GitHub tells Travis CI the build is mergeable</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/push-icon-3.svg" alt="Tavis logo">
-	    <p>Hooray!<br>Your build passes!</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/pull-icon-4.svg" alt="Build status">
-	    <p>Travis CI updates the PR that it passed</p>
-	  </div>
-	  <div class="divider-line-horizontal">
-	  </div>
-	  <div class="divider-line-vertical">
-	  </div>
-	  <div class="bf">
-	    <img src="../images/landing-page/pull-icon-5.svg" alt="Merge icon">
-	    <p>You merge in<br>the PR goodness</p>
-	  </div>
-	</div>
-      </div>
-    </section>
-  </div>
-
-  <div class="row user-testimonials">
-    <section class="landing-centered-wrapper">
-      <div class="medium-6 columns">
-	<h2>Some people have said some pretty nice things about us</h2>
-      </div>
-      <div class="medium-6 columns">
-	<div class="small-3 columns">
-	  <img src="../images/landing-page/dhh.png" class="home-avatar" alt="image DHH">
-	</div>
-	<div class="small-9 columns">
-	  <p>Travis CI makes it so much easier for us to coordinate the thousands of commits and contributors that flow through the Rails code base. The test suite for such a large project is vast, and we wouldn’t be catching issues as quickly or smoothly without the help of Travis.</p>
-	  <p class="author">David Heinemeier Hansson</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/dhh" alt="DHH Twitter" target="_blank">dhh</a>
-	  <p class="title">Creator of Ruby on Rails</p>
+			</div>
+			<div class="large-12 columns laptop-wrapper">
+				<div id="laptop">
+					<img src="../images/landing-page/laptop.png">
+				</div>
+			</div>
+		</div>
 	</div>
 
-	<div class="small-3 columns">
-	  <img src="../images/landing-page/chris.png" class="home-avatar" alt="image Chris Aniszczyk">
-	</div>
-	<div class="small-9 columns">
-	  <p>We love Travis CI at @TwitterOSS and use it for the majority of our open source projects on GitHub. Travis CI is simple to use, we love their API to build  tooling and adore the new container infrastructure for speedier builds.</p>
-	  <p class="author">Chris Aniszczyk</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/cra" alt="Chris Twitter" target="_blank">cra</a>
-	  <p class="title">Head of Open Source at Twitter</p>
+	<div class="row oss-testing">
+		<div class="landing-centered-wrapper">
+			<div class="large-12 columns">
+				<h2>The home of<br class="mobile-break"> open source testing</h2>
+				<p>Over 200k open source projects<br class="mobile-break"> and 126k users are testing on Travis CI.</p>
+				<img src="../images/landing-page/customer-numbers.svg">
+			</div>
+		</div>
 	</div>
 
-	<div class="small-3 columns">
-	  <img src="../images/landing-page/alex.png" class="home-avatar" alt="Alex Gaynor">
+	<div class="row customers">
+		<div class="landing-centered-wrapper">
+			<div class="medium-6 columns">
+				<img src="../images/landing-page/customers-temp-together.svg">
+			</div>
+			<div class="medium-6 columns">
+				<p class="left">Some pretty awesome companies<br> and projects are using us.</p>
+			</div>
+		</div>
 	</div>
-	<div class="small-9 columns">
-	  <p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins &amp;&amp; touch .travis.yml</p>
-	  <p class="author">Alex Gaynor</p> <img src="../images/landing-page/github.svg" class="social"><a href="https://github.com/alex" alt="Alex github" target="_blank">alex</a>
-	  <p class="title">PyPy and Python Core Team Member</p>
+
+	<div class="row recent-builds">
+		<div class="landing-centered-wrapper">
+			<div class="medium-6 columns recent-builds-text">
+				<div class="landing-vert-center-m">
+					<h2>Every minute there’s<br>a new build being run</h2>
+					<p>Here are just a few projects<br>currently running on Travis CI</p>
+				</div>
+			</div>
+			<div class="medium-6 columns">
+				<ul class="landing-rows">
+				{{#each repos as |repo|}}
+					{{landing-row repo=repo}}
+				{{else}}
+					{{loading-indicator}}
+				{{/each}}
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<div class="row free-for-oss">
+		<div class="landing-centered-wrapper">
+			<div class="large-12 columns">
+				<h1>Testing your open source<br class="mobile-no-break"> project is 10000% free</h1>
+				<p><span class="bold-italic">Seriously. Always.</span> We like to think of it as our way of giving<br>back to a community that gives us so much as well.</p>
+			</div>
+		</div>
+	</div>
+
+	<div class="row private-repos">
+		<div class="landing-centered-wrapper">
+			<div class="medium-6 columns mobile-envelope">
+				<img src="../images/landing-page/envelope.svg">
+			</div>
+
+			<div class="medium-6 columns">
+				<div class="landing-vert-center-s">
+					<h2>Have a private project<br>you’d like to test?</h2>
+					<p>Travis CI for private repositories has<br><a href="http://travis-ci.com/plans" target="_blank">plans</a> for every size project.</p>
+				</div>
+			</div>
+			<div class="medium-6 columns desktop-envelope">
+				<img src="../images/landing-page/envelope.svg">
+			</div>
+		</div>
+	</div>
+
+	<div class="row features-list">
+		<div class="landing-centered-wrapper">
+			<div class="large-6 columns features-callouts">
+				<div class="landing-vert-center-s">
+					<div class="medium-6 columns">
+						<h3 id="f-co-1">Get set up in seconds</h3>
+						<p>Login with GitHub, tell Travis CI to test a project, and then push to GitHub. Could it be any simpler!</p>
+					</div>
+					<div class="medium-6 columns">
+						<h3 id="f-co-2">Multi-language support</h3>
+						<p>Make sure your code runs against all versions of your favorite language without breaking a sweat.</p>
+					</div>
+					<div class="medium-6 columns">
+						<h3 id="f-co-3">Test your pull requests</h3>
+						<p>Make sure every pull request to your project is tested before merging.</p>
+					</div>
+					<div class="medium-6 columns">
+						<h3 id="f-co-4">Deploy to S3 and Heroku</h3>
+						<p>Updating staging or production as soon as your tests pass has never been easier!</p>
+					</div>
+				</div>
+			</div>
+			<div class="large-6 columns features-checked">
+				<h2>Features created to<br class="mobile-break"> help your projects and teams</h2>
+				<ul>
+					<li>Watch your tests as they run</li>
+					<li>Keep your config with your code</li>
+					<li>Slack, HipChat, Emails and more</li>
+					<li>A clean VM for every build</li>
+					<li>Run your tests in parallel</li>
+					<li>Linux and Mac (and iOS) supported</li>
+					<li>Great API and command line tool</li>
+					<li>Did we say free for Open Source already?</li>
+				</ul>
+			</div>
+		</div>
+	</div>
+
+	<div class="row build-flows">
+		<div class="landing-centered-wrapper">
+			<div class="large-12 columns">
+				<h2>Branch build flow</h2>
+				<div class="branch-bf">
+					<div class="bf">
+						<img src="../images/landing-page/push-icon-1.svg">
+						<p>You push your<br>code to GitHub</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/push-icon-2.svg">
+						<p>GitHub triggers<br>Travis CI to build</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/push-icon-3.svg">
+						<p>Hooray!<br>Your build passes!</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/push-icon-4.svg">
+						<p>Travis CI deploys<br>to Heroku</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/push-icon-5.svg">
+						<p>Travis CI tells the<br>team all is well</p>
+					</div>
+				</div>
+				<h2 id="pr-bf-margin">Pull request build flow</h2>
+				<div class="branch-bf">
+					<div class="bf">
+						<img src="../images/landing-page/pull-icon-1.svg">
+						<p>A pull request<br>is created</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/pull-icon-2.svg">
+						<p>GitHub tells Travis CI the build is mergeable</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/push-icon-3.svg">
+						<p>Hooray!<br>Your build passes!</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/pull-icon-4.svg">
+						<p>Travis CI updates the PR that it passed</p>
+					</div>
+					<div class="divider-line-horizontal">
+					</div>
+					<div class="divider-line-vertical">
+					</div>
+					<div class="bf">
+						<img src="../images/landing-page/pull-icon-5.svg">
+						<p>You merge in<br>the PR goodness</p>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="row user-testimonials">
+		<div class="landing-centered-wrapper">
+			<div class="medium-6 columns">
+				<h2>Some people have said some pretty nice things about us</h2>
+			</div>
+			<div class="medium-6 columns">
+				<div class="small-3 columns">
+					<img src="../images/landing-page/dhh.png" class="home-avatar">
+				</div>
+				<div class="small-9 columns">
+					<p>Travis CI makes it so much easier for us to coordinate the thousands of commits and contributors that flow through the Rails code base. The test suite for such a large project is vast, and we wouldn’t be catching issues as quickly or smoothly without the help of Travis.</p>
+					<p class="author">David Heinemeier Hansson</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/dhh" alt="DHH Twitter" target="_blank">dhh</a>
+					<p class="title">Creator of Ruby on Rails</p>
+				</div>
+
+				<div class="small-3 columns">
+					<img src="../images/landing-page/chris.png" class="home-avatar">
+				</div>
+				<div class="small-9 columns">
+					<p>We love Travis CI at @TwitterOSS and use it for the majority of our open source projects on GitHub. Travis CI is simple to use, we love their API to build  tooling and adore the new container infrastructure for speedier builds.</p>
+					<p class="author">Chris Aniszczyk</p> <img src="../images/landing-page/twitter.svg" class="social"><a href="https://twitter.com/cra" alt="Chris Twitter" target="_blank">cra</a>
+					<p class="title">Head of Open Source at Twitter</p>
+				</div>
+
+				<div class="small-3 columns">
+					<img src="../images/landing-page/alex.png" class="home-avatar">
+				</div>
+				<div class="small-9 columns">
+					<p>Not only is Travis CI the best way to test your software, it is the right way. rm -rf jenkins &amp;&amp; touch .travis.yml</p>
+					<p class="author">Alex Gaynor</p> <img src="../images/landing-page/github.svg" class="social"><a href="https://github.com/alex" alt="Alex github" target="_blank">alex</a>
+					<p class="title">PyPy and Python Core Team Member</p>
+				</div>
+			</div>
+		</div>
 	</div>
-      </div>
-    </section>
-  </div>
 </div>
 {{/travis-layout}}

app/templates/logo.hbs

@@ -14,13 +14,13 @@
           <div class="logos--light">
             <img src="../images/pro-landing/TravisCI-logolockup-spacingexample.svg" alt="Travis CI logo on light background">
           </div>
-          <figcaption class="text-small">Dark logo on light background <a href="images/logos/TravisCI-Full-Color.eps" title="" download="TravisCI-Full-Color.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color.png" title="" download="TravisCI-Full-Color.png">.png</a></figcaption>
+          <figcaption class="text-small">Dark logo on light background <a href="images/logos/TravisCI-Full-Color.eps" title="" download="travis-ci-logo-light-bg.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color.png" title="" download="travis-ci-logo-light-bg.png">.png</a></figcaption>
         </figure>
         <figure>
           <div class="logos--dark">
             <img src="../images/pro-landing/TravisCI-logolockup-spacingexample-darkbg.svg" alt="Travis CI logo on dark background">
           </div>
-          <figcaption class="text-small">Light logo on dark background <a href="images/logos/TravisCI-Full-Color-light.eps" title="" download="TravisCI-Full-Color-light.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color-light.png" title="" download="TravisCI-Full-Color-light.png">.png</a></figcaption>
+          <figcaption class="text-small">Light logo on dark background <a href="images/logos/TravisCI-Full-Color.eps" title="" download="travis-ci-logo-dark-bg.eps">.eps</a> or <a href="images/logos/TravisCI-Full-Color.png" title="" download="travis-ci-logo-dark-bg.png">.png</a></figcaption>
         </figure>
       </div>
     </div>
@@ -46,19 +46,19 @@
       <ul class="list--colors">
         <li>
           <div class="colors-sample--teal" aria-hidden="true"></div>
-          <p class="text-small"><strong>Oxide blue</strong> #3EAAAF</p>
+          <p class="text-small"><strong>Turbo Teal</strong> #40A3AD</p>
         </li>
         <li>
           <div class="colors-sample--green" aria-hidden="true"></div>
-          <p class="text-small"><strong>Turf green</strong> #39AA56</p>
+          <p class="text-small"><strong>Passing green</strong> #44A662</p>
         </li>
         <li>
           <div class="colors-sample--yellow" aria-hidden="true"></div>
-          <p class="text-small"><strong>Canary yellow</strong> #EDDE3F</p>
+          <p class="text-small"><strong>Building yellow</strong> #E5DA3F</p>
         </li>
         <li>
           <div class="colors-sample--red" aria-hidden="true"></div>
-          <p class="text-small"><strong>Brick red</strong> #DB4545</p>
+          <p class="text-small"><strong>Failing red</strong> #D94341</p>
         </li>
         <li>
           <div class="colors-sample--grey" aria-hidden="true"></div>

app/templates/owner.hbs

@@ -11,10 +11,30 @@
 </header>
 
 <div class="tabs--owner">
+{{!--   <nav class="tabnav tabnav--owner row" role="tablist">
+    <ul class="tab">
+      <li role="presentational">{{#link-to 'owner.repositories' owner.login}}All Repositories{{/link-to}}</li>
+      <li role="presentational">{{#link-to 'owner.running' owner.login}}Running Builds{{/link-to}}</li>
+      <li role="presentational"><a href="#" title="" role="tab">Members</a></li>
+    </ul>
+  </nav> --}}
+
   <div class="tabbody">
     <section role="tabpanel">
       {{outlet}}
     </section>
+
+    {{!-- <section role="tabpanel">
+      <ul class="memberlist">
+        <li class="columns small-6 large-4">
+          <img src="//placehold.it/50x50" alt="">
+          <div class="memberlist-names">
+            <h2>Firstname Lastname</h2>
+            <p>githubhandle</p>
+          </div>
+        </li>
+      </ul>
+    </section> --}}
   </div>
 </div>
 {{/travis-layout}}

app/templates/plans.hbs

@@ -107,7 +107,7 @@
           <p class="faq-text">A build has 120 minutes to run. Should your build take longer, you can split it up using a build matrix.</p>
         </li>
         <li>
-          <h4 class="h3--red">Can I pay annually?</h4>
+          <h4 class="h3--red">Can I pay anually?</h4>
           <p class="faq-text">You most certainly can! When signing up for a subscription, simply select the annual option. You get 1 month for free &mdash; 12 months for the price of 11!</p>
         </li>
         <li>

app/templates/repo/not-active.hbs

@@ -1 +1 @@
-{{not-active user=currentUser repo=repo}}
+{{not-active user=auth.currentUser repo=repo}}

app/templates/top.hbs

@@ -14,7 +14,7 @@
     {{#each broadcasts.content as |broadcast|}}
       <li><p><span class="broadcast-status {{broadcast.category}}" title="Transmitted on {{broadcast.updated_at}}"></span> {{{broadcast.message}}} <a {{action 'markBroadcastAsSeen' broadcast}} class="icon-close"></a></p></li>
     {{else}}
-      <li><p>There are no broadcasts</p></li>
+      <li><p>There are no broadcasts transmitted</p></li>
     {{/each}}
     </ul>
   {{/if}}

app/utils/permission.js

@@ -1,32 +0,0 @@
-
-var hasPermission = function(user, repoId) {
-  var id = parseInt(repoId);
-  var permissions;
-  if (user) {
-    if (permissions = user.get('permissions')) {
-      return permissions.contains(id);
-    }
-  }
-};
-
-var hasPushPermission = function(user, repoId) {
-  var id = parseInt(repoId);
-  var permissions;
-  if (user) {
-    if (permissions = user.get('pushPermissions')) {
-      return permissions.contains(id);
-    }
-  }
-};
-
-var hasAdminPermission = function(user, repoId) {
-  var id = parseInt(repoId);
-  var permissions;
-  if (user) {
-    if (permissions = user.get('adminPermissions')) {
-      return permissions.contains(id);
-    }
-  }
-};
-
-export {hasPermission, hasPushPermission, hasAdminPermission};

app/utils/status-image-formats.js

@@ -27,7 +27,7 @@ rstStatusImage = (function(url, slug, branch) {
 });
 
 podStatusImage = (function(url, slug, branch) {
-  return "=for html <a href=\"" + url + "\"><img src=\"" + (statusImageUrl(slug, branch)) + "\"></a>";
+  return "=for HTML <a href=\"" + url + "\"><img src=\"" + (statusImageUrl(slug, branch)) + "\"></a>";
 });
 
 ccxmlStatusUrl = (function(slug, branch) {