FEATURE: Redesigned GitHub oneboxes

Bump onebox version, and add new styling

Commit, PR and Issue oneboxes are updated with a new design. Timestamps are now localized using local-dates (if installed).

Gemfile

@@ -50,7 +50,7 @@ gem 'redis-namespace'
 
 gem 'active_model_serializers', '~> 0.8.3'
 
-gem 'onebox', '1.9.15'
+gem 'onebox', '1.9.16'
 
 gem 'http_accept_language', '~>2.0.5', require: false
 

Gemfile.lock

@@ -245,7 +245,7 @@ GEM
     omniauth-twitter (1.4.0)
       omniauth-oauth (~> 1.1)
       rack
-    onebox (1.9.15)
+    onebox (1.9.16)
       htmlentities (~> 4.3)
       moneta (~> 1.0)
       multi_json (~> 1.11)
@@ -501,7 +501,7 @@ DEPENDENCIES
   omniauth-oauth2
   omniauth-openid
   omniauth-twitter
-  onebox (= 1.9.15)
+  onebox (= 1.9.16)
   openid-redis-store
   parallel_tests
   pg

app/assets/stylesheets/common/base/onebox.scss

@@ -382,18 +382,75 @@ pre.onebox code {
 .onebox.githubpullrequest,
 .onebox.githubcommit,
 .onebox.githubissue {
+  .onebox-body {
+    h4 {
+      margin-bottom: 5px;
+    }
+
+    > .github-icon {
+      // For backwards compatibility with old onebox
+      float: left;
+      margin-right: 5px;
+    }
+  }
+
+  .github-row {
+    display: flex;
+  }
+
+  .github-icon-container {
+    display: flex;
+    align-items: flex-start;
+    margin-right: 5px;
+  }
+
   .github-icon {
-    float: left;
-    margin-right: 4px;
     fill: $primary-high;
-    width: 30px;
-    height: 30px;
+    width: 40px;
+    height: 40px;
+  }
+
+  .branches {
+    font-size: $font-down-1;
+  }
+
+  .github-info {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    > div {
+      margin: 2.5px 0;
+    }
+
+    > div:not(:last-child) {
+      margin-right: 15px;
+    }
+
+    .lines {
+      font-weight: bold;
+
+      .added {
+        color: $success;
+      }
+      .removed {
+        color: $danger;
+      }
+    }
   }
 
   .onebox-avatar-inline {
-    height: 1em;
-    width: 1em;
-    margin-right: 4px;
+    height: 20px;
+    width: 20px;
+    border-radius: 2px;
+    float: none;
+    margin: 0;
+    vertical-align: middle;
+    max-width: none;
+  }
+
+  .github-content {
+    margin: 5px 0 0 0;
   }
 }