styles for profile repo list

app/styles/app/layouts/profile.sass

@@ -26,7 +26,6 @@
       .sync-button
         margin-top: .5em
 
-
 .profile-getstarted
   position: relative
   margin-bottom: 3rem
@@ -57,7 +56,6 @@
         padding: 0 3.2em
         border-right: solid 2px #f3f2f2
 
-
 .profile-orgs,
 .profile-user
 
@@ -99,4 +97,48 @@
   margin: 1rem 0 2rem
 
 p.profile-user-last
-  margin-top: .5em
+  margin-top: .5em
+
+
+.profile-hooklist
+  @include resetul
+  font-size: $font-size-m
+  color: #7a7a7a
+  li
+    clear: both
+    margin-bottom: .8em
+    overflow: auto
+    > div
+      width: grid-calc(5, 24)
+  .switch
+    display: inline-block
+  .profile-settings
+    display: inline-block
+    margin-left: 1rem;
+    padding: .2em .2em .2em .5em;
+    height: 28px;
+    vertical-align: bottom;
+    .icon
+      width: 14px
+      height: 14px
+
+.profile-repo
+  @extend %border-radius-4px
+  width: grid-calc(19, 24)
+  padding: .25em .5em .3em
+  span
+    display: none
+    margin-left: 2rem
+    font-size: $font-size-sm
+    color: #484849
+  &:hover
+    background-color: #ededec
+    span
+      display: inline-block
+  .is-active &:hover
+    background-color: #e2eee2
+  @media #{$medium-up}
+    height: 30px
+
+
+

app/styles/app/modules/icons.sass

@@ -39,7 +39,7 @@
 
 .icon-cog,
 .icon--cog
-  background-image: inline-image('icons/settings.svg')
+  background-image: inline-image('svg/settings_gray.svg')
 
 .icon-star
   background-image: inline-image('dashboard/star-off.svg')
@@ -148,9 +148,6 @@
 .icon-hook-off
   background-image: inline-image('svg/hooks-off.svg')
 
-.icon-cog
-  background-image: inline-image('svg/settings_gray.svg')
-
 .icon--plus
   &:after
     content: "+"

app/templates/profile/show.hbs

@@ -29,15 +29,19 @@
   </section>
   <div>
     <ul class="profile-hooklist">
-      <li>
+      <li class="row is-active">
-        <button class="switch is-on"></button>
+        <div class="columns">
-        <a href="#"><span class="icon icon--cog"></span></a>
+          <button class="switch is-on"></button>
-        <a href="#">travis-ci/build-email <span>Lorem ipsum dolor sit amet</span></a>
+          <a href="#" class="profile-settings"><span class="icon icon--cog"></span></a>
+        </div>
+        <a href="#" class="profile-repo columns">travis-ci/build-email <span>Lorem ipsum dolor sit amet</span></a>
       </li>
-      <li>
+      <li class="row">
-        <button class="switch"></button>
+        <div class="columns">
-        <a href="#"><span class="icon icon--cog"></span></a>
+          <button class="switch"></button>
-        <a href="#">travis-ci/lorem <span>Lorem ipsum dolor sit amet</span></a>
+          <a href="#" class="profile-settings"><span class="icon icon--cog"></span></a>
+        </div>
+        <a href="#" class="profile-repo columns">travis-ci/lorem <span>Lorem ipsum dolor sit amet</span></a>
       </li>
     </ul>
   </div>