Change the template and style of the Stats page

app/assets/stylesheets/stats.scss

@@ -1,9 +1,56 @@
 @import "card";
 
-.stats {
+$dark-grey: #333333;
-  .stat-card {
+
-    @extend .card;
+$default-space: 15px;
-    margin: 15px auto;
+
-    max-width: 1200px;
+$new-h1-margin-bottom: 4 * $default-space;
+.new-h1 {
+  color: $dark-grey;
+  text-align: center;
+  margin-top: 0;
+  margin-bottom: $new-h1-margin-bottom;
+}
+
+$statistiques-padding-top: $default-space * 2;
+.statistiques {
+  width: 1040px;
+  margin: 0 auto;
+  padding-top: $statistiques-padding-top;
+}
+
+.stat-cards {
+  .stat-card:nth-of-type(even) {
+    margin-right: 0px;
   }
 }
+
+$stat-card-margin-bottom: 3 * $default-space;
+.stat-card {
+  @extend .card;
+  margin-bottom: $stat-card-margin-bottom;
+  border-radius: 5px;
+  box-shadow: none;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+$stat-card-half-horizontal-spacing: 4 * $default-space;
+.stat-card-half {
+  width: calc((100% - #{$stat-card-half-horizontal-spacing}) / 2);
+  margin-right: 3 * $default-space;
+}
+
+.stat-card-title {
+  color: $dark-grey;
+  margin-top: -2px;
+  font-size: 26px;
+  font-weight: 500;
+}
+
+.chart-container {
+  margin-top: 36px;
+}
+
+.chart {
+  width: 100%;
+}

app/views/stats/index.html.haml

@@ -1,11 +1,23 @@
 = javascript_include_tag 'https://code.highcharts.com/highcharts.js', 'chartkick'
 
-.container
+.statistiques
-  .stats
-    .stat-card
-      %h1 Procédures créées
-      = line_chart @procedures_30_days_flow,
 
-    .stat-card
+  %h1.new-h1 Statistiques
-      %h1 Dossiers créés
+
-      = line_chart @dossiers_30_days_flow,
+  .stat-cards
+
+    .stat-card.stat-card-half.pull-left
+      %span.stat-card-title.pull-left Procédures
+      .chart-container
+        .chart.flux-procedures-chart
+          = line_chart @procedures_30_days_flow,
+            :colors => ["rgba(61, 149, 236, 1)"]
+
+    .stat-card.stat-card-half.pull-left
+      %span.stat-card-title.pull-left Dossiers
+      .chart-container
+        .chart.flux-dossiers-chart
+          = line_chart @dossiers_30_days_flow,
+            :colors => ["rgba(61, 149, 236, 1)"]
+
+    .clearfix