Hacker0x01 · martijnrusschen · Jul 2, 2014 · Jul 1, 2014 · Jul 1, 2014 · Jul 1, 2014
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+# React Date Picker
+
+## Installation
+
+- Install Bower `npm install -g bower`
+- Install packages `npm install`
+- Start a static webserver `python -m SimpleHTTPServer`
+- And visit `localhost:8000/example.html` to see the example.
diff --git a/bower.json b/bower.json
@@ -2,7 +2,8 @@
   "name": "react-date-picker",
   "version": "0.0.0",
   "authors": [
-    "Remon Oldenbeuving <remon@hackerone.com>"
+    "Remon Oldenbeuving <remon@hackerone.com>",
+    "Martijn Russchen <martijn@hackerone.com"
   ],
   "description": "A simple and reusable datepicker component for React",
   "dependencies": {

diff --git a/example.html b/example.html
@@ -4,12 +4,12 @@
     <script src="bower_components/moment/moment.js"></script>
     <script src="bower_components/react/react-with-addons.js"></script>
 		<script src="bower_components/react/JSXTransformer.js"></script>
-    <link rel="stylesheet" type="text/css" href="src/stylesheets/style.css">
+    <link rel="stylesheet" type="text/css" href="src/stylesheets/style.min.css">
   </head>
   <body>
     <h1>ReactJS DatePicker Example</h1>
 
-    <div id="calendar"></div>
+    <div id="calendar-container"></div>
 
     <script type="text/javascript" src="src/util/date.js"></script>
     <script type="text/jsx" src="src/day.jsx"></script>
@@ -18,7 +18,7 @@ <h1>ReactJS DatePicker Example</h1>
 
     <script type="text/jsx">
       /** @jsx React.DOM */
-      React.renderComponent(<DatePicker />, document.querySelector('#calendar'));
+      React.renderComponent(<DatePicker />, document.querySelector('#calendar-container'));
     </script>
   </body>
 </html>
diff --git a/gruntfile.js b/gruntfile.js
@@ -7,7 +7,7 @@ module.exports = function(grunt) {
           style: 'compressed'
         },
         files: {
-          'src/stylesheets/style.css' : 'src/stylesheets/datepicker.scss'
+          'src/stylesheets/style.min.css' : 'src/stylesheets/datepicker.scss'
         }
       }
     },

diff --git a/src/calendar.jsx b/src/calendar.jsx
@@ -53,29 +53,30 @@ window.Calendar = React.createClass({
   render: function() {
     return (
       <div className="calendar">
+        <div className="calendar-triangle"></div>
         <div className="calendar-header">
-          <a className="calendar-month-navigation-left"
+          <a className="calendar-header-navigation-left"
               onClick={this.decreaseMonth}>
-            &laquo;
+            <i className="icon-backward"></i>
           </a>
-          <span className="calendar-current-month">
+          <span className="calendar-header-month">
             {this.state.date.format("MMMM YYYY")}
           </span>
-          <a className="calendar-month-navigation-right"
+          <a className="calendar-header-navigation-right"
               onClick={this.increaseMonth}>
-            &raquo;
+            <i className="icon-forward"></i>
           </a>
-        </div>
-        <div className="month">
           <div>
-            <div className="day head">MO</div>
-            <div className="day head">TU</div>
-            <div className="day head">WE</div>
-            <div className="day head">TH</div>
-            <div className="day head">FR</div>
-            <div className="day head">SA</div>
-            <div className="day head">SU</div>
+            <div className="calendar-header-day">MO</div>
+            <div className="calendar-header-day">TU</div>
+            <div className="calendar-header-day">WE</div>
+            <div className="calendar-header-day">TH</div>
+            <div className="calendar-header-day">FR</div>
+            <div className="calendar-header-day">SA</div>
+            <div className="calendar-header-day">SU</div>
           </div>
+        </div>
+        <div className="calendar-month">
           {this.weeks()}
         </div>
       </div>

diff --git a/src/day.jsx b/src/day.jsx
@@ -7,7 +7,7 @@ window.Day = React.createClass({
 
   render: function() {
     classes = React.addons.classSet({
-      'day': true,
+      'calendar-day': true,
       'selected': this.props.day.sameDay(this.props.selected),
       'this-month': this.props.day.sameMonth(this.props.date),
       'today': this.props.day.sameDay(moment())

diff --git a/src/fonts/OpenSans-Bold.ttf b/src/fonts/OpenSans-Bold.ttf
diff --git a/src/fonts/OpenSans-Regular.ttf b/src/fonts/OpenSans-Regular.ttf
diff --git a/src/fonts/config.json b/src/fonts/config.json
@@ -0,0 +1,16 @@
+{
+  "name": "",
+  "css_prefix_text": "icon-",
+  "css_use_suffix": false,
+  "hinting": true,
+  "units_per_em": 1000,
+  "ascent": 850,
+  "glyphs": [
+    {
+      "uid": "ce06b5805120d0c2f8d60cd3f1a4fdb5",
+      "css": "play",
+      "code": 59392,
+      "src": "fontawesome"
+    }
+  ]
+}
diff --git a/src/fonts/fontello.woff b/src/fonts/fontello.woff
diff --git a/src/stylesheets/datepicker.scss b/src/stylesheets/datepicker.scss
@@ -1,56 +1,91 @@
-.month {
-  border-left: 1px solid black;
-  border-top: 1px solid black;
-  display: inline-block;
-}
+@import 'variables';
+@import 'mixins';
+@import 'open-sans';
+@import 'fontello';
 
-.day {
-  display: inline-block;
-  width: 28px;
-  border-right: 1px solid black;
-  border-bottom: 1px solid black;
-  line-height: 28px;
-  text-align: center;
+.calendar {
+  font-family: 'Open Sans', sans-serif;
+  font-size: 11px;
   color: #ccc;
-  cursor: pointer;
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+  display: inline-block;
+  position: relative;
 }
 
-.this-month {
-  color: black;
+.calendar-triangle {
+  @extend %triangle-arrow-up;
+  position: absolute;
+  left: 50px;
 }
 
-.selected {
-  color: blue;
+.calendar-header {
+  text-align: center;
+  background-color: $background-color;
+  border-bottom: 1px solid $border-color;
+  border-top-left-radius: $border-radius;
+  border-top-right-radius: $border-radius;
+  padding-top: 5px;
+  position: relative;
 }
 
-.today {
-  color: red;
+.calendar-header-month {
+  color: black;
+  font-weight: bold;
+  font-size: 13px;
 }
 
-.calendar-month-navigation-left,
-.calendar-month-navigation-right {
-  width: 28px;
-  line-height: 28px;
-  text-align: center;
-  cursor: pointer;
-  border-right: 1px solid black;
-  border-left: 1px solid black;
+.calendar-header-navigation-left {
+  @extend %calendar-navigation;
+  left: 10px;
 }
 
-.calendar-month-navigation-left {
-  float: left;
+.calendar-header-navigation-right {
+  @extend %calendar-navigation;
+  right: 10px;
 }
 
-.calendar-month-navigation-right {
-  float: right;
+.calendar-header-day {
+  display: inline-block;
+  width: $item-size;
+  line-height: $item-size;
 }
 
-.calendar-header {
-  position: relative;
+.calendar-month {
+  margin: $calendar-margin;
   text-align: center;
-  border-top: 1px solid black;
 }
 
-.calendar {
+.calendar-day {
   display: inline-block;
+  width: $item-size;
+  line-height: $item-size;
+  text-align: center;
+  margin: 2px;
+
+  &.this-month {
+    color: black;
+    cursor: pointer;
+  }
+
+  &:hover {
+    @extend %transparant-rounded-border;
+    background-color: $background-color;
+    color: black;
+  }
+
+  &.today {
+    font-weight: bold;
+  }
+
+  &.selected {
+    @extend %transparant-rounded-border;
+    background-color: $selected-color;
+    color: white;
+
+    &:hover {
+      background-color: darken($selected-color, 5%);
+      color: white;
+    }
+  }
 }
diff --git a/src/stylesheets/fontello.scss b/src/stylesheets/fontello.scss
@@ -0,0 +1,41 @@
+// ATTENTION:
+// Generate the font using fontello.com, upload fontello-config.json.
+// Then replace the font (woff) and manually update this file with the added icons.
+
+@font-face {
+  font-family: 'fontello';
+  src: url('../fonts/fontello.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+ .icon-forward,
+ .icon-backward {
+  font-family: "fontello";
+  font-style: normal;
+  font-weight: normal;
+  speak: none;
+  display: inline-block;
+  text-decoration: inherit;
+  width: 1em;
+  margin-right: .2em;
+  text-align: center;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1em;
+  margin-left: .2em;
+}
+
+
+// Formally icon-play, but renamed for readability
+.icon-forward:before { content: '\e800'; }
+
+.icon-backward {
+  transform:rotate(180deg);
+  -webkit-transform:rotate(180deg);
+  -ms-transform:rotate(180deg);
+
+  &:before {
+    content: '\e800';
+  }
+}
diff --git a/src/stylesheets/mixins.scss b/src/stylesheets/mixins.scss
@@ -0,0 +1,39 @@
+%triangle-arrow-up {
+  margin-top: -$triangleSize;
+  margin-left: -$triangleSize;
+
+  &, &:before {
+    box-sizing: content-box;
+    position: absolute;
+    border: $triangleSize solid transparent;
+
+    height: 0;
+    width: 1px;
+    border-top: none;
+    border-bottom-color: $background-color;
+  }
+
+  &:before {
+    content: '';
+    z-index: -1;
+    border-width: $triangleSize;
+
+    top: -1px;
+    left: -$triangleSize;
+    border-bottom-color: $border-color;
+  }
+}
+
+%calendar-navigation {
+  width: $item-size;
+  line-height: $item-size;
+  text-align: center;
+  cursor: pointer;
+  position: absolute;
+  top: 5px;
+}
+
+%transparant-rounded-border {
+  border: 1px solid transparant;
+  border-radius: $border-radius;
+}
diff --git a/src/stylesheets/open-sans.scss b/src/stylesheets/open-sans.scss
@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url('../fonts/OpenSans-Regular.woff') format('woff');
+}
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../fonts/OpenSans-Bold.woff') format('woff');
+}
diff --git a/src/stylesheets/style.css b/src/stylesheets/style.css
diff --git a/src/stylesheets/style.min.css b/src/stylesheets/style.min.css
diff --git a/src/stylesheets/variables.scss b/src/stylesheets/variables.scss
@@ -0,0 +1,8 @@
+$border-color: #aeaeae;
+$background-color: #f0f0f0;
+$selected-color: #216ba5;
+
+$border-radius: 4px;
+$item-size: 24px;
+$calendar-margin: 5px;
+$triangleSize: 8px;