Clean up the styling to be a bit more readable

I'M SO GOOD AT CSS FITE ME

assets/css/canary.css

@@ -0,0 +1,18 @@
+
+.project {
+    border-bottom: 1px solid #868e96;
+}
+
+.event {
+    background-color: #f8f9fa;
+    overflow: overlay;
+    margin-bottom: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.issue-metadata {
+    border-bottom: 1px solid #f8f9fa;
+    border-top: 1px solid #f8f9fa;
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+}

config.ru

@@ -6,7 +6,8 @@ ENV['RACK_ENV'] ||= 'development'
 require 'canary'
 require 'raven'
 
-use Rack::Static, :urls => ['/css', '/img', '/js'], :root => 'public'
+# Skip over Sinatra entirely for static assets
+use Rack::Static, :urls => ['/css', '/img', '/js'], :root => 'assets'
 use Raven::Rack
 
 run CodeValet::Canary::App

views/_base.haml

@@ -13,6 +13,8 @@
       :href => 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css',
       :integrity => 'sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ',
       :crossorigin => 'anonymous'}/
+    %link{:rel => 'stylesheet',
+      :href => "#{@url_root}css/canary.css"}/
     %script{:src => 'https://code.jquery.com/jquery-3.2.1.slim.min.js',
       :integrity => 'sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN',
       :crossorigin => 'anonymous'}

views/index.haml

@@ -45,30 +45,31 @@
 
         - else
           - projects.each do |project|
-            %h4= project.name
-            %p
+            .row.p-3.project
+              %h4= project.name
               - events = sentry.issues_for(project.slug)
-              - unless events.size > 0
-                No recent events (yay).
-              - else
-                - events.each do |event|
-                  - badge = 'danger'
-                  - if event.level != 'error'
-                    - badge = event.level
-                  .row
-                    .col-lg-10
-                      %strong
-                        = event.title
-
-                      .mb-2.text-muted
+              .col-lg-12
+                - unless events.size > 0
+                  No recent events (yay).
+                - else
+                  - events.each do |event|
+                    - badge = 'danger'
+                    - if event.level != 'error'
+                      - badge = event.level
+                    .row.p-2.event
+                      .col-lg-10
                         %span.badge{:class => "badge-#{badge}"}
                           = event.count
-                        = event.culprit
+                        %strong
+                          = event.title
 
-                      %p
-                        %a{:href => "issue/#{event.id}"}
-                          View
-                        ·
-                        %a{:href => event.permalink, :target => '_blank'}
-                          View in Sentry
-        %hr/
+                        .mb-2.text-muted
+                          = event.culprit
+
+                        %p
+                          %a{:href => "issue/#{event.id}"}
+                            View
+                          ·
+                          %a{:href => event.permalink, :target => '_blank'}
+                            View in Sentry
+          %hr/

views/issue.haml

@@ -4,34 +4,46 @@
       - unless events
         Something went wrong when rendering this page :(
       - else
-        %h2
+        %h3
           = issue.title
-        %h3.text-muted
+        %h4.text-muted
           = issue.culprit
-        .row
-          .col-md-12
-            %small
-              There are
-              %strong
-                = events.size
-              events associated with this issue.
 
-        - events.each do |event|
+        - event = events.first
+        .row
+          .col-md-12.issue-metadata
+            .container
+              .row.p-1
+                %strong
+                  Tags
+                %div.tags
+                  - event.tags.each do |tag|
+                    %span.badge.badge-info
+                      #{tag['key']}:#{tag['value']}
+              .row.p-1
+                %small
+                  There are
+                  %strong
+                    = events.size
+                  similar events associated with this issue.
+        - event.entries.each do |entry|
           .row
             .col-md-12
-              - event.tags.each do |tag|
-                %span.badge.badge-info
-                  #{tag['key']}:#{tag['value']}
-              - event.entries.each do |entry|
-                / #{entry.inspect}
-                - if entry['type'] == 'message'
-                  %p
+              / #{entry.inspect}
+              - if entry['type'] == 'message'
+                %h5
+                  Message
+                .container.p-1
+                  %blockquote.blockquote
                     - if entry['data']['formatted']
                       = entry['data']['formatted']
                     - else
                       = entry['data']['message']
 
-                - if entry['type'] == 'exception'
+              - if entry['type'] == 'exception'
+                %h5
+                  Stack trace
+                .container.p-1
                   - entry['data']['values'].each do |val|
                     %ul.list-unstyled
                       - val['stacktrace']['frames'].reverse_each do |frame|
@@ -46,4 +58,3 @@
                             %code
                               = frame['absPath']
 
-          - break