From b394fc92d69e087e0f10d3df8db5c964399aa76c Mon Sep 17 00:00:00 2001
From: rawtoast <jim@jamesmorris.org>
Date: Fri, 30 Mar 2018 19:30:59 +0100
Subject: [PATCH] Bad date selector

---
 dokusho/src/app/DateSelector.re | 10 +++++
 dokusho/src/app/Dokusho.re      |  4 +-
 dokusho/src/app/Input.re        |  5 +--
 dokusho/src/styles/index.css    | 68 ++++++++++++++++++---------------
 4 files changed, 53 insertions(+), 34 deletions(-)
 create mode 100644 dokusho/src/app/DateSelector.re

diff --git a/dokusho/src/app/DateSelector.re b/dokusho/src/app/DateSelector.re
new file mode 100644
index 0000000..f3c0cba
--- /dev/null
+++ b/dokusho/src/app/DateSelector.re
@@ -0,0 +1,10 @@
+let component = ReasonReact.statelessComponent("DateSelector");
+
+let make = (~today: string, _children) => {
+  ...component,
+  render: (_) =>
+    <div className="dateselector"> <ReactToolbox.DatePicker 
+        label="Today"
+        /> 
+    </div>
+};
\ No newline at end of file
diff --git a/dokusho/src/app/Dokusho.re b/dokusho/src/app/Dokusho.re
index 0194db1..2d2c6e5 100644
--- a/dokusho/src/app/Dokusho.re
+++ b/dokusho/src/app/Dokusho.re
@@ -40,7 +40,9 @@ module Dokusho {
                 onSubmit=(self.reduce((text) => AddEntry(self.state.selectedEntry, int_of_string(text))))
                 />
               <PageTypeSelection onChangeSelect=(self.reduce(selected => ChangeSelection(selected))) />
-            </div>
+            
+              <DateSelector today="" />  
+          </div>
 
             <Entries entries=(List.hd(self.state.readingData.days).entries) />
             
diff --git a/dokusho/src/app/Input.re b/dokusho/src/app/Input.re
index 3595386..1bdb094 100644
--- a/dokusho/src/app/Input.re
+++ b/dokusho/src/app/Input.re
@@ -31,14 +31,13 @@ module Input = {
                 reduce(() => {text: txt, selection: state.selection})()
               })
               onKeyDown=((evt) =>
-                  if (ReactEventRe.Keyboard.key(evt) == "Enter") {
+                if (ReactEventRe.Keyboard.key(evt) == "Enter") {
                   onSubmit(state.text);
                   (reduce(() => {text: "", selection: state.selection }))()
-                  }
+                }
               )
             />
         </div>
-        
         }
     };
   };
diff --git a/dokusho/src/styles/index.css b/dokusho/src/styles/index.css
index 1381758..712371e 100644
--- a/dokusho/src/styles/index.css
+++ b/dokusho/src/styles/index.css
@@ -1,57 +1,65 @@
 /* @embed base.css */
 /* reset */
-body, div {
-  display: flex;
-  flex-direction: column;
-  box-sizing: border-box;
-  flex-shrink: 0;
+
+.dateselector {
+  flex-direction: box;
 }
 
 body {
-font: 14px "Century Gothic", Futura, sans-serif;
+  font: 14px "Century Gothic", Futura, sans-serif;
 }
 
 #root {
-align-items: center;
-justify-content: center;
-position: absolute;
-top: 0;
-left: 0;
-bottom: 0;
-right: 0;
+  display: flex;
+  flex-direction: column;
+
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
 }
 
 .app {
-width: 280px;
-max-height: 450px;
-flex: 1;
-box-shadow: 0 2px 15px #ccc;
-margin: 10px;
-align-items: stretch;
-}
+  flex-direction: column;
+
+  width: 280px;
+  max-height: 450px;
+  flex: 1;
+  box-shadow: 0 2px 15px #ccc;
+  margin: 10px;
+  align-items: stretch;
+  }
 
 .title {
-font-size: 20px;
-align-items: center;
-padding: 20px;
+  display: flex;
+  flex-direction: column;
+  font-size: 20px;
+  align-items: center;
+  padding: 20px;
 }
 
 .entries {
-text-align: center;
-flex: 1;
-overflow: auto;
+  flex-direction: column;
+  text-align: center;
+  flex: 1;
+  overflow: auto;
 }
 
 .entry {
-  display: flex;
+  flex-direction: column;
   padding: 5px 10px;
   align-items: center;
-  flex-direction: col;
 }
 
 .footer {
-align-items: center;
-padding: 5px 10px 20px;
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-self: flex-end;
+  padding: 5px 10px 20px;
 }
 
 /* input[type="checkbox"] {