ensure pikaday respects our color scheme

app/assets/javascripts/discourse/components/date-picker.js.es6

@@ -9,24 +9,28 @@ export default Em.Component.extend({
   @on("didInsertElement")
   _loadDatePicker() {
     const input = this.$(".date-picker")[0];
+    const container = $("#" + this.get("containerId"))[0];
 
     loadScript("/javascripts/pikaday.js").then(() => {
-      let default_opts = {
-        field: input,
-        container: this.$()[0],
-        format: "YYYY-MM-DD",
-        firstDay: moment.localeData().firstDayOfWeek(),
-        i18n: {
-          previousMonth: I18n.t('dates.previous_month'),
-          nextMonth: I18n.t('dates.next_month'),
-          months: moment.months(),
-          weekdays: moment.weekdays(),
-          weekdaysShort: moment.weekdaysShort()
-        },
-        onSelect: date => this.set("value", moment(date).format("YYYY-MM-DD"))
-      };
+      Ember.run.next(() => {
+        let default_opts = {
+          field: input,
+          container: container || this.$()[0],
+          bound: container === undefined,
+          format: "YYYY-MM-DD",
+          firstDay: moment.localeData().firstDayOfWeek(),
+          i18n: {
+            previousMonth: I18n.t('dates.previous_month'),
+            nextMonth: I18n.t('dates.next_month'),
+            months: moment.months(),
+            weekdays: moment.weekdays(),
+            weekdaysShort: moment.weekdaysShort()
+          },
+          onSelect: date => this.set("value", moment(date).format("YYYY-MM-DD"))
+        };
 
-      this._picker = new Pikaday(_.merge(default_opts, this._opts()));
+        this._picker = new Pikaday(_.merge(default_opts, this._opts()));
+      });
     });
   },
 

app/assets/javascripts/discourse/templates/components/date-picker.hbs

@@ -1 +1 @@
-<input class="date-picker">
+<input type="text" class="date-picker">

app/assets/javascripts/discourse/templates/modal/change-timestamp.hbs

@@ -1,4 +1,4 @@
-<div class="modal-body">
+<div class="modal-body change-timestamp">
   <p>
     {{i18n 'topic.change_timestamp.instructions'}}
   </p>
@@ -8,9 +8,11 @@
   </p>
 
   <form>
-    {{input type="date" value=date}}
+    {{date-picker-past value=date containerId="date-container"}}
     {{input type="time" value=time}}
   </form>
+
+  <div id="date-container" />
 </div>
 
 <div class="modal-footer">

app/assets/stylesheets/desktop/modal.scss

@@ -196,3 +196,19 @@
     width: 400px;
   }
 }
+
+.change-timestamp {
+  min-height: 300px;
+
+  .date-picker {
+    width: 10em;
+  }
+
+  input[type=time] {
+    width: 6em;
+  }
+
+  form {
+    margin: 0;
+  }
+}

app/assets/stylesheets/vendor/pikaday.scss

@@ -1,3 +1,5 @@
+@import "common/foundation/variables";
+
 /*!
  * Pikaday
  * Copyright © 2014 David Bushell | BSD & MIT license | http://dbushell.com/
@@ -8,24 +10,24 @@
 // Variables are namespaced with the pd (pikaday) prefix
 
 // Colours
-$pd-text-color: #333 !default;
-$pd-title-color: #333 !default;
-$pd-title-bg: #fff !default;
-$pd-picker-bg: #fff !default;
-$pd-picker-border: #ccc !default;
-$pd-picker-border-bottom: #bbb !default;
+$pd-text-color: $primary !default;
+$pd-title-color: $primary !default;
+$pd-title-bg: $secondary !default;
+$pd-picker-bg: $secondary !default;
+$pd-picker-border: dark-light-diff($secondary, $primary, -20%, 20%) !default;
+$pd-picker-border-bottom: dark-light-diff($secondary, $primary, -30%, 30%) !default;
 $pd-picker-shadow: rgba(0,0,0,.5) !default;
-$pd-th-color: #999 !default;
-$pd-day-color: #666 !default;
-$pd-day-bg: #f5f5f5 !default;
-$pd-day-hover-color: #fff !default;
-$pd-day-hover-bg: #ff8000 !default;
-$pd-day-today-color: #33aaff !default;
-$pd-day-selected-color: #fff !default;
-$pd-day-selected-bg: #33aaff !default;
-$pd-day-selected-shadow: #178fe5 !default;
-$pd-day-disabled-color: #999 !default;
-$pd-week-color: #999 !default;
+$pd-th-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
+$pd-day-color: dark-light-diff($primary, $secondary, -30%, 30%) !default;
+$pd-day-bg: dark-light-diff($primary, $secondary, 90%, -90%) !default;
+$pd-day-hover-color: $secondary !default;
+$pd-day-hover-bg: dark-light-diff($tertiary, $secondary, 30%, -30%) !default;
+$pd-day-today-color: $tertiary !default;
+$pd-day-selected-color: $secondary !default;
+$pd-day-selected-bg: $tertiary !default;
+$pd-day-selected-shadow: dark-light-diff($tertiary, $secondary, 50%, -50%) !default;
+$pd-day-disabled-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
+$pd-week-color: dark-light-diff($primary, $secondary, -20%, 20%) !default;
 
 // Font
 $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
@@ -233,15 +235,15 @@ $pd-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 }
 
 .is-startrange .pika-button {
-    color: #fff;
+    color: $secondary;
     background: #6CB31D;
     box-shadow: none;
     border-radius: 3px;
 }
 
 .is-endrange .pika-button {
-    color: #fff;
-    background: #33aaff;
+    color: $secondary;
+    background: $tertiary;
     box-shadow: none;
     border-radius: 3px;
 }