style orgs list

app/styles/app/layouts/profile.sass

@@ -0,0 +1,49 @@
+.profile
+  font-size: $font-size-sm
+  font-weight: 400
+
+
+
+
+.profile-orgs,
+.profile-user
+
+  .media-elem
+    width: 12%
+    img
+      width: 2rem
+      height: 2rem
+      border-radius: 50%
+  .media-body
+    width: 88%
+  p
+    margin: 0
+  ul
+    @include resetul
+  li
+    margin: 1.5rem 0 2.5rem
+  a
+    @extend %inline-block
+    width: 100%
+    &:hover
+      h1, h2
+        text-decoration: underline
+
+.profile-user h1,
+.profile-orgs h2
+  font-size: $font-size-sm
+  margin: 0
+  font-weight: 600
+  line-height: 1
+
+.profile-orgs
+  h1
+    color: #898b8c
+    font-size: $font-size-sm
+    border-bottom: solid 2px #f3f2f2
+
+.profile-user
+  margin-bottom: 2rem
+
+p.profile-user-last
+  margin-top: .5em

app/styles/app/modules/media.sass

@@ -0,0 +1,15 @@
+
+.media,
+.media-body
+  overflow: hidden
+  zoom: 1
+
+.media-elem
+  float: left
+  margin-right: 0
+  img
+    display: block
+
+.media-body
+  float: right
+  margin-left: 0

app/templates/profile/accounts.hbs

@@ -2,33 +2,29 @@
   <section class="profile-user">
     <div class="media">
       <div class="media-elem">
-        <img src="" alt="">
+        <img src="//placehold.it/50x50" alt="">
       </div>
       <div class="media-body">
         <h1>Justiine Arreche</h1>
         <p>Repositories <strong>12</strong></p>
-        <p>Token: <strong>dfigsd90u34r2hwa9ru239ur2</strong></p>
+        <p class="profile-user-last">Token: <strong>dfigsd90u34r2hwa9ru239ur2</strong></p>
       </div>
     </div>
   </section>
   <section class="profile-orgs">
-    <h1>Organiszations</h1>
+    <h1>Organizations</h1>
-    <ul class="profile-orglist">
+    {{#collection "accounts-list" contentBinding="controller"}}
-      {{#collection "accounts-list" contentBinding="controller"}}
+      {{#link-to "account" view.account class="name"}}
-        <li {{bind-attr class="view.classAccounts"}}>
+        <div class="media">
-          {{#link-to "account" view.account class="name"}}
+          <div class="media-elem">
-            <div class="media">
+            <img src="//placehold.it/50x50" alt="">
-              <div class="media-elem">
+          </div>
-                <img src="" alt="">
+          <div class="media-body">
-              </div>
+            <h2>{{view.name}}</h2>
-              <div class="media-body">
+            <p>Repositories <strong>{{view.account.reposCount}}</strong></p>
-                <h2>{{view.name}}</h2>
+          </div>
-                <p>Repositories <strong>{{view.account.reposCount}}</strong></p>
+        </div>
-              </div>
+      {{/link-to}}
-            </div>
+    {{/collection}}
-          {{/link-to}}
-        </li>
-      {{/collection}}
-    </ul>
   </section>
 </aside>

app/views/profile-accounts.coffee

@@ -2,6 +2,7 @@
 
 View = BasicView.extend
   tabBinding: 'controller.tab'
+  classNames: ['profile-orglist']
   templateName: 'profile/accounts'
   classAccounts: (->
     'active' if @get('tab') == 'accounts'