style form

2 files changed, 38 insertions, 3 deletions

diff --git a/frontend/app/Form/Input.hs b/frontend/app/Form/Input.hs
index 3539e96..0b4f1ca 100644
--- a/frontend/app/Form/Input.hs
+++ b/frontend/app/Form/Input.hs
@@ -120,7 +120,9 @@ inputNumber label =
   let parse :: MisoString -> Either MisoString Double
       parse i =
         let i' = strip i
-         in if Miso.String.null i' then Left "required" else Right (read (fromMisoString i'))
+         in if Miso.String.null i'
+              then Left "required"
+              else Right (read (fromMisoString i'))
    in Form
         { view = \i ->
             [ div_ [] $
@@ -149,7 +151,7 @@ inputText label =
          in if Miso.String.null i' then Left "required" else Right i'
    in Form
         { view = \i ->
-            [ div_ [] $
+            [ div_ [class_ "input text"] $
                 [ label_ [] $
                     [ text label,
                       div_ [] $
@@ -158,7 +160,7 @@ inputText label =
                               value_ i,
                               onInput id
                             ],
-                          div_ [] $
+                          div_ [ class_ "error-helper" ] $
                             [either text (\_ -> text "") (parse i)]
                         ]
                     ]
diff --git a/frontend/app/Main.hs b/frontend/app/Main.hs
index d851cca..bf8ada3 100644
--- a/frontend/app/Main.hs
+++ b/frontend/app/Main.hs
@@ -295,6 +295,39 @@ table td {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 480px; }
+
+/* form */
+.input label {
+  display: block;
+  padding-left: 6px; }
+
+.input .error-helper {
+  display: block;
+  padding-left: 6px; }
+
+.input label > div {
+  margin-left: -6px;
+  margin-right: -6px; }
+
+.input input {
+  font-size: 1rem;
+  margin-top: 4px;
+  margin-bottom: 4px; }
+
+.input input[type=text] {
+  padding: 2px 6px; }
+
+form {
+  margin: -12px 0; }
+
+.error-helper {
+  color: red;
+  line-height: 1rem;
+  height: 1rem; }
+
+.input {
+  margin: 12px 0; }
+
 |]
         )
     ]