Amelioring the payment add design

1 files changed, 25 insertions, 13 deletions

diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index 32010ef..9d246ef 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -24,19 +24,31 @@ addPayment name cost =
              Ok number -> SC.AddPayment name number
              Err _ -> SC.NoCommunication
     ]
-    [ text "Name"
-    , input
-        [ value name
-        , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateName)
+    [ div
+        [ class "name" ]
+        [ label
+            [ for "nameInput" ]
+            [ text "Name" ]
+        , input
+            [ id "nameInput"
+            , value name
+            , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateName)
+            ]
+            []
         ]
-        []
-    , text "Cost"
-    , input
-        [ value cost
-        , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateCost)
+    , div
+        [ class "cost" ]
+        [ label
+            [ for "costInput" ]
+            [ text "Cost" ]
+        , input
+            [ id "costInput"
+            , value cost
+            , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateCost)
+            ]
+            []
+        , button
+            [ type' "submit" ]
+            [ text "Add" ]
         ]
-        []
-    , button
-        [ type' "submit" ]
-        [ text "Add" ]
     ]