Improved styling on graphs

app/styles/play/ladder/ladder_tab.sass

@@ -13,14 +13,21 @@
     fill: #fff
     
   .specialbar rect
-    fill: red
+    fill: #555555
     
     
   .axis path, .axis line
     fill: none
-    stroke: #000
+    stroke: #555555
     shape-rendering: crispEdges
-  .x.axis
-    color: red
+    
+  .humans-bar
+    fill: #bf3f3f
+    shape-rendering: crispEdges
+  .ogres-bar
+    fill: #3f44bf
+    shape-rendering: crispEdges
+  text
+    fill: #555555
     
     

app/styles/play/ladder/my_matches_tab.sass

@@ -1,7 +1,7 @@
 #my-matches-tab-view
   .axis path, .axis line
     fill: none
-    stroke: #000
+    stroke: #555
     shape-rendering: crispEdges
   .x.axis.path
     display: none
@@ -10,4 +10,20 @@
     fill: none
     stroke: steelblue
     stroke-width: 1.5px
+    
+  .humans-line
+    fill: none
+    stroke: #bf3f3f
+    stroke-width: 1.5px
+   
+  .ogres-line
+    fill: none
+    stroke: #3f44bf
+    stroke-width: 1.5px
 
+  .axis text
+    stroke: none
+    fill: #555555
+    shape-rendering: crispEdges
+    
+    

app/views/play/ladder/ladder_tab.coffee

@@ -191,11 +191,14 @@ module.exports = class LadderTabView extends CocoView
       .attr("height", height + margin.top + margin.bottom)
     .append("g")
       .attr("transform","translate(#{margin.left},#{margin.top})")
+    barClass = "bar"
+    if teamName.toLowerCase() is "ogres" then barClass = "ogres-bar"
+    if teamName.toLowerCase() is "humans" then barClass = "humans-bar"
     
     bar = svg.selectAll(".bar")
       .data(data)
     .enter().append("g")
-      .attr("class","bar")
+      .attr("class",barClass)
       .attr("transform", (d) -> "translate(#{x(d.x)},#{y(d.y)})")  
     
     bar.append("rect")

app/views/play/ladder/my_matches_tab.coffee

@@ -117,12 +117,10 @@ module.exports = class MyMatchesTabView extends CocoView
     @$el.find('.score-chart-wrapper').each (i, el) =>
       scoreWrapper = $(el)
       team = _.find @teams, name: scoreWrapper.data('team-name')
-      @generateScoreLineChart(scoreWrapper.attr('id'), team.scoreHistory)
+      @generateScoreLineChart(scoreWrapper.attr('id'), team.scoreHistory, team.name)
       
 
-  generateScoreLineChart: (wrapperID, scoreHistory) =>
-    
-    
+  generateScoreLineChart: (wrapperID, scoreHistory,teamName) =>
     margin = 
       top: 20
       right: 20
@@ -167,10 +165,12 @@ module.exports = class MyMatchesTabView extends CocoView
       .attr("dy", ".75em")
       .style("text-anchor","end")
       .text("Score")
-    
+    lineClass = "line"
+    if teamName.toLowerCase() is "ogres" then lineClass = "ogres-line"
+    if teamName.toLowerCase() is "humans" then lineClass = "humans-line"
     svg.append("path")
       .datum(data)
-      .attr("class","line")
+      .attr("class",lineClass)
       .attr("d",line)