restructure inbox design

app/assets/stylesheets/scss/user.scss

@@ -44,4 +44,18 @@
 
 .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
+  .row
+    .col-md-3.col-xs-12.col-sm-3
+      .panel.panel-default.inbox--panel
+        .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'
-  .alert.alert-info
-    .row
-      .col-md-9.col-sm-8.col-xs-12
-        Out of questions?
-      .col-md-3.col-sm-5.col-xs-12
-        %button.btn.btn-block.btn-info{type: :button, id: 'ib-generate-question'} Get new question
-
   #entries
     - @inbox.each do |i|
       = render 'inbox/entry', i: i