Improvements in calendar component

components/calendar/index.cjsx

@@ -10,13 +10,11 @@ module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    className:      React.PropTypes.string
     onChange:       React.PropTypes.func
     selectedDate:   React.PropTypes.object
     viewDate:       React.PropTypes.object
 
   getDefaultProps: ->
-    className:       ''
     selectedDate:   new Date()
     viewDate:       new Date()
 

components/calendar/month.cjsx

@@ -12,7 +12,9 @@ module.exports = React.createClass
 
   render: ->
     <div>
-      <span>{ util.monthInWords(@props.viewDate)}, {@props.viewDate.getFullYear() }</span>
+      <span className={css.title}>
+        { util.monthInWords(@props.viewDate)} {@props.viewDate.getFullYear() }
+      </span>
       <div className={css.week}>
         { <span key={"dw#{i}"}>{ util.weekDayInWords(i).charAt(0) }</span> for i in [0..6] }
       </div>

components/calendar/style.styl

@@ -2,7 +2,8 @@
 
 // -- Calendar sizes
 ROW_HEIGHT   = 40px
-TOTAL_HEIGHT = ROW_HEIGHT * 8
+DAY_PADDING  = 2px
+TOTAL_HEIGHT = ROW_HEIGHT * 8 + DAY_PADDING * 12
 
 :local(.root)
   background        : WHITE
@@ -14,7 +15,9 @@ TOTAL_HEIGHT = ROW_HEIGHT * 8
   text-align        : center
 
 :local(.prev), :local(.next)
+  color             : lighten(TEXT, 15%)
   cursor            : pointer
+  font-size         : 26px
   height            : ROW_HEIGHT
   line-height       : ROW_HEIGHT
   opacity           : .7
@@ -24,6 +27,9 @@ TOTAL_HEIGHT = ROW_HEIGHT * 8
   width             : ROW_HEIGHT
   z-index           : Z_INDEX_HIGH
 
+:local(.title)
+  font-weight       : 500
+
 :local(.prev)
   left              : 0
 
@@ -48,7 +54,7 @@ TOTAL_HEIGHT = ROW_HEIGHT * 8
 
 :local(.day)
   flex              : 0 0 (100/7)%
-  padding           : 2px
+  padding           : DAY_PADDING
 
   > span
     border-radius   : 50%

components/commons.styl

@@ -1,4 +1,4 @@
-@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
+@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,700')
 @import './vendor.styl'
 @import './normalize.styl'