2 files changed, 82 insertions, 26 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" ]
     ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 1f35732..50cdbc4 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -10,6 +10,7 @@ import Prelude
 import Clay
 
 import Data.Text.Lazy (Text)
+import qualified Clay.Display as D
 
 import Design.Color as C
 
@@ -22,10 +23,6 @@ iconFontSize = 32
 global :: Css
 global = do
 
-  input ? do
-    borderRadius (px 0) (px 0) (px 0) (px 0)
-    border solid (px 1) C.grey
-
   header ? do
     let headerHeight = 150
 
@@ -52,9 +49,38 @@ global = do
       hover & transform (scale 1.2 1.2)
 
   ".payments" ? do
-    ".add" ? do
-      marginBottom (px 20)
-      marginLeft (px 20)
+    form # ".add" ? do
+      let inputHeight = 40
+      width (pct 90)
+      marginLeft auto
+      marginRight auto
+      marginBottom (px 45)
+      clearFix
+
+      ".name" ? do
+        width (pct 50)
+        float floatLeft
+        label ? do
+          width (pct 25)
+          paddingRight (pct 5)
+        input ? do
+          defaultInput inputHeight
+          width (pct 70)
+
+      ".cost" ? do
+        width (pct 50)
+        float floatRight
+        label ? do
+          width (pct 25)
+          paddingRight (pct 5)
+        input ? do
+          defaultInput inputHeight
+          width (pct 45)
+          marginRight (pct 5)
+        button ? do
+          defaultButton
+          width (pct 20)
+          height (px inputHeight)
 
     table ? do
       width (pct 100)
@@ -82,23 +108,41 @@ global = do
       marginRight auto
 
       input ? do
+        defaultInput inputHeight
         display block
         width (pct 100)
-        padding (px 10) (px 10) (px 10) (px 10)
-        height (px inputHeight)
         marginBottom (px 10)
 
       button ? do
+        defaultButton
         display block
         width (pct 100)
         height (px inputHeight)
-        backgroundColor C.brown
-        color C.white
-        borderWidth (px 0)
-        borderRadius (px 3) (px 3) (px 3) (px 3)
 
     ".result" ? do
       marginTop (px 40)
       textAlign (alignSide sideCenter)
       ".success" ? color C.green
       ".error" ? color C.red
+
+clearFix :: Css
+clearFix =
+  after & do
+    content (stringContent "")
+    display D.table
+    clear both
+
+defaultButton :: Css
+defaultButton = do
+  backgroundColor C.brown
+  color C.white
+  borderWidth (px 0)
+  borderRadius (px 3) (px 3) (px 3) (px 3)
+
+defaultInput :: Integer -> Css
+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