Better styling

RawToast · Mar 30, 2018 · e27fe66 · e27fe66
1 parent b394fc9
commit e27fe66
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 24 deletions.
diff --git a/dokusho/src/app/DateSelector.re b/dokusho/src/app/DateSelector.re
@@ -3,8 +3,7 @@ let component = ReasonReact.statelessComponent("DateSelector");
 let make = (~today: string, _children) => {
   ...component,
   render: (_) =>
-    <div className="dateselector"> <ReactToolbox.DatePicker 
-        label="Today"
-        /> 
+    <div> 
+        <ReactToolbox.DatePicker label="Today"/> 
     </div>
 };
diff --git a/dokusho/src/app/Dokusho.re b/dokusho/src/app/Dokusho.re
@@ -35,18 +35,20 @@ module Dokusho {
           <div>
             <div className="title"> 
               (ReasonReact.stringToElement("Dokusho"))
+            </div> 
+            <div className="dokusho">
               <Input 
                 selection=self.state.selectedEntry
                 onSubmit=(self.reduce((text) => AddEntry(self.state.selectedEntry, int_of_string(text))))
                 />
               <PageTypeSelection onChangeSelect=(self.reduce(selected => ChangeSelection(selected))) />
 
               <DateSelector today="" />  
-          </div>
 
-            <Entries entries=(List.hd(self.state.readingData.days).entries) />
+              <Entries entries=(List.hd(self.state.readingData.days).entries) />
 
-            <Footer pageCount=(pageCount) />
+              <Footer pageCount=(pageCount) />
+            </div>
           </div>
     }
   };  

diff --git a/dokusho/src/app/Input.re b/dokusho/src/app/Input.re
@@ -22,8 +22,8 @@ module Input = {
         ReasonReact.Update({ text: filtered, selection: state.selection })
     },
       render: ({state: state, reduce}) => {
-          <div>
-            <ReactToolbox.Input
+        <ReactToolbox.Input
+              className="textinput"
               value=state.text
               _type="text"
               hint=str("Pages")
@@ -37,7 +37,6 @@ module Input = {
                 }
               )
             />
-        </div>
-        }
+         }
     };
   };
diff --git a/dokusho/src/app/PageTypeSelection.re b/dokusho/src/app/PageTypeSelection.re
@@ -16,8 +16,8 @@ module PageTypeSelection = {
     initialState: () => {text: "Book"},
     reducer: (state: inputS, _ext) => ReasonReact.Update({text: state.text}),
     render: ({state, reduce}) =>
-      <div>
         <ReactToolbox.Dropdown
+          className="pageselect"
           auto=true
           source=(Array.of_list(ptArray))
           value=(`String(state.text))
@@ -31,6 +31,5 @@ module PageTypeSelection = {
               }
           )
         />
-      </div>
   };
 };
diff --git a/dokusho/src/styles/index.css b/dokusho/src/styles/index.css
@@ -12,7 +12,6 @@ body {
 #root {
   display: flex;
   flex-direction: column;
-
   align-items: center;
   justify-content: center;
   position: absolute;
@@ -24,7 +23,6 @@ body {
 
 .app {
   flex-direction: column;
-
   width: 280px;
   max-height: 450px;
   flex: 1;
@@ -41,6 +39,17 @@ body {
   padding: 20px;
 }
 
+.dokusho {
+  align-items: center;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.textinput {
+  padding-top: 20px;
+  padding-bottom: 10px;
+}
+
 .entries {
   flex-direction: column;
   text-align: center;
@@ -61,13 +70,3 @@ body {
   align-self: flex-end;
   padding: 5px 10px 20px;
 }
-
-/* input[type="checkbox"] {
-margin-right: 10px;
-}
-
-input[type="text"] {
-align-self: stretch;
-padding: 3px 5px;
-margin-top: 20px;
-} */