restructure inbox design

app/assets/stylesheets/scss/user.scss

@@ -45,3 +45,17 @@
 .profile--panel .panel-body {
   padding-top: 0px;
 }
+
+.inbox--panel .panel-heading {
+  color: $brand-info;
+  border-bottom: 2px solid $brand-info;
+  background-color: #fff;
+  text-transform: uppercase;
+}
+
+.warning--panel .panel-heading {
+  color: $brand-danger;
+  border-bottom: 2px solid $brand-danger;
+  background-color: #fff;
+  text-transform: uppercase;
+}

app/views/inbox/show.html.haml

@@ -1,12 +1,18 @@
 .container.j2-page
-  = render 'layouts/messages'
-  .alert.alert-info
   .row
-      .col-md-9.col-sm-8.col-xs-12
+    .col-md-3.col-xs-12.col-sm-3
-        Out of questions?
+      .panel.panel-default.inbox--panel
-      .col-md-3.col-sm-5.col-xs-12
+        .panel-heading
+          %h3 Out of questions?
+        .panel-body
           %button.btn.btn-block.btn-info{type: :button, id: 'ib-generate-question'} Get new question
-
+      .panel.panel-default.warning--panel
+        .panel-heading
+          %h3 Actions
+        .panel-body
+          %button.btn.btn-block.btn-danger{type: :button, id: 'ib-delete-all'} Delete all questions
+    .col-md-9.col-xs-12.col-sm-9
+  = render 'layouts/messages'
   #entries
     - @inbox.each do |i|
       = render 'inbox/entry', i: i