basic error message styling and fix {{#if}} nesting in accounts

app/styles/app/layouts/profile.sass

@@ -128,7 +128,7 @@ p.profile-user-last
     clear: both
     margin-bottom: .8em
     overflow: auto
-    > div
+  .profile-hooks
     width: grid-calc(10, 24)
     @media #{$medium-up}
       width: grid-calc(7, 24)
@@ -195,3 +195,21 @@ p.profile-user-last
   a
     color: #adaaab
     text-decoration: underline
+
+.error
+  width: 100%;
+  padding: 0 $column-gutter/2;
+  p
+    position: relative
+    padding: $column-gutter/2;
+    color: #de4248
+    background-color: #f1b6ad
+    &:after
+      content: ""
+      position: absolute
+      top: -0.5em
+      left: 1.5em
+      width: 1.2em
+      height: 1.2em
+      background: #f1b6ad
+      transform: rotate(45deg)

app/templates/account.hbs

@@ -11,7 +11,6 @@
           <span class="sync-spinner"><i></i><i></i><i></i></span>Syncing from GitHub
         </button>
       </div>
-  </header>
     {{else}}
       <div class="sync-button">
         <button {{action sync}} class="button">
@@ -43,6 +42,7 @@
         {{else}}
         <p>We're only showing your public repositories. You can find your private projects on <a href="https://travis-ci.com" title="travis-ci.com">travis-ci.com</a>.</p>
       {{/if}}
+    {{/if}}
 
   </header>
 
@@ -105,7 +105,7 @@
       </ul>
     </div>
   {{/if}}
-  {{/if}}
+
 {{else}}
   <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
 {{/if}}

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

@@ -1,4 +1,4 @@
-<div class="columns">
+<div class="profile-hooks columns">
   {{hook-switch hook=hook onToggleError="handleToggleError"}}
   {{!-- <button class="switch is-on"></button> --}}
   {{#if hook.isSaving}}
@@ -13,6 +13,6 @@
 
 {{#if errorMessage}}
   <div class="error">
-    {{errorMessage}}
+    <p>{{errorMessage}}</p>
   </div>
 {{/if}}