fix user avatar/ status icon spacing

app/components/user-avatar.js

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

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

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

app/styles/app/modules/avatar.sass

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

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

@@ -54,7 +54,8 @@
 
 .build-title
   .status-icon
-    margin-left: -1.8rem
+    margin-left: -1.9rem
+    margin-right: 0.7rem
 
 .commit-info
   font-size: 15px

app/styles/app/modules/icons.sass

@@ -10,27 +10,6 @@
   height: 15px
   @extend %icon
 
-.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: 20px
-  margin-right: .3rem
-
-.request-icon
-  @extend %icon
-  width: 16px
-  height: 19px
-  margin-right: .1rem
-
 %icon-download-log
   background-image: inline-image('stroke-icons/icon-downloadlogs.svg')
 .icon-download-log

app/styles/app/modules/row.sass

@@ -110,18 +110,6 @@
       @media #{$medium-up}
         display: block
 
-  .icon
-    margin-right: .2em
-
-  .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/status-icon.sass

@@ -1,3 +1,25 @@
+.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

app/templates/components/branch-row.hbs

@@ -60,9 +60,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"><span class="label-align">{{build.last_build.commit.committer.name}}</span>
+        <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>
       {{else}}
-        <div class="avatar"></div><span class="label-align">no commits yet</span>
+        <div class="avatar--small"></div><span class="label-align">no commits yet</span>
       {{/if}}
     </div>
   </div>

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}}
+        {{user-avatar url=commit.authorAvatarUrlOrGravatar name=commit.authorName small=true}}
         <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}}
+          {{user-avatar url=commit.committerAvatarUrlOrGravatar name=commit.committerName smll=true}}
           <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}}
+    {{user-avatar url=build.commit.authorAvatarUrlOrGravatar name=build.commit.authorName small=true}}
     <span class="label-align">{{build.commit.authorName}}</span>
   </div>
 </div>