Input and label design glued together

3 files changed, 15 insertions, 9 deletions

diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index 3aa44c8..ce4738b 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -35,10 +35,9 @@ addPayment model addPayment =
           onSubmitPrevDefault actions.address (UpdatePayment <| UpdateAdd <| AddError (toMaybeError resName) (toMaybeError resCost))
     ]
     [ div
-        [ class "name" ]
+        [ class ("name " ++ (if isJust addPayment.nameError then "error" else "")) ]
         [ input
             [ id "nameInput"
-            , class (if isJust addPayment.nameError then "error" else "")
             , value addPayment.name
             , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName)
             ]
@@ -53,10 +52,9 @@ addPayment model addPayment =
               text ""
         ]
     , div
-        [ class "cost" ]
+        [ class ("cost " ++ (if isJust addPayment.costError then "error" else "")) ]
         [ input
             [ id "costInput"
-            , class (if isJust addPayment.costError then "error" else "")
             , value addPayment.cost
             , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost)
             ]
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index a9529ab..97ad3d2 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -14,6 +14,9 @@ brown = C.brown
 green :: C.Color
 green = C.green
 
+darkgrey :: C.Color
+darkgrey = C.rgb 150 150 150
+
 grey :: C.Color
 grey = C.rgb 200 200 200
 
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 59e4171..15d3196 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -64,14 +64,16 @@ global = do
         width (pct 49)
         label ? do
           display inlineBlock
-          width (pct 20)
+          width (px 60)
           textAlign (alignSide sideCenter)
-          color C.brown
+          backgroundColor C.darkgrey
+          color C.white
           height (px inputHeight)
           lineHeight (px inputHeight)
           fontSize (px 22)
           verticalAlign middle
         input ? defaultInput inputHeight
+        "input:focus + label" ? backgroundColor C.grey
 
       ".name" ? do
         float floatLeft
@@ -86,7 +88,10 @@ global = do
           width (pct 20)
           height (px inputHeight)
 
-      input # ".error" ? borderColor C.red
+      ".error" ? do
+        input ? borderColor C.red
+        label ? backgroundColor C.red
+
       ".errorMessage" ? do
         position absolute
         color C.red
@@ -156,6 +161,6 @@ defaultInput inputHeight = do
   height (px inputHeight)
   padding (px 10) (px 10) (px 10) (px 10)
   borderRadius (px 0) (px 0) (px 0) (px 0)
-  border solid (px 1) C.grey
-  focus & borderColor C.green
+  border solid (px 1) C.darkgrey
+  focus & borderColor C.grey
   verticalAlign middle