Simpler add payment with icons instead of text for labels

3 files changed, 21 insertions, 15 deletions

diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index 88a1bd7..d1431b8 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -17,6 +17,7 @@ import Update.Payment.Add exposing (..)
 import Model.View.Payment.Add exposing (..)
 
 import View.Events exposing (onSubmitPrevDefault)
+import View.Icon exposing (renderIcon)
 
 import Utils.Maybe exposing (isJust)
 import Utils.Either exposing (toMaybeError)
@@ -33,16 +34,16 @@ addPayment addPayment =
     ]
     [ div
         [ class "name" ]
-        [ label
-            [ for "nameInput" ]
-            [ text "Category" ]
-        , input
+        [ input
             [ id "nameInput"
             , class (if isJust addPayment.nameError then "error" else "")
             , value addPayment.name
             , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName)
             ]
             []
+        , label
+            [ for "nameInput" ]
+            [ renderIcon "shopping-cart" ]
         , case addPayment.nameError of
             Just error ->
               div [ class "errorMessage" ] [ text error ]
@@ -51,16 +52,16 @@ addPayment addPayment =
         ]
     , div
         [ class "cost" ]
-        [ label
-            [ for "costInput" ]
-            [ text "Cost" ]
-        , input
+        [ input
             [ id "costInput"
             , class (if isJust addPayment.costError then "error" else "")
             , value addPayment.cost
             , on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost)
             ]
             []
+        , label
+            [ for "costInput" ]
+            [ renderIcon "euro" ]
         , case addPayment.costError of
             Just error ->
               div [ class "errorMessage" ] [ text error ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 25b7d95..59e4171 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -64,19 +64,23 @@ global = do
         width (pct 49)
         label ? do
           display inlineBlock
-          width (pct 25)
-          paddingRight (pct 5)
+          width (pct 20)
+          textAlign (alignSide sideCenter)
+          color C.brown
+          height (px inputHeight)
+          lineHeight (px inputHeight)
+          fontSize (px 22)
+          verticalAlign middle
         input ? defaultInput inputHeight
 
       ".name" ? do
         float floatLeft
-        input ? width (pct 70)
+        input ? width (pct 75)
 
       ".cost" ? do
         float floatRight
-        input ? do
-          width (pct 45)
-          marginRight (pct 5)
+        input ? do width (pct 50)
+        label ? marginRight (pct 5)
         button ? do
           defaultButton
           width (pct 20)
@@ -145,6 +149,7 @@ defaultButton = do
   color C.white
   borderWidth (px 0)
   borderRadius (px 3) (px 3) (px 3) (px 3)
+  verticalAlign middle
 
 defaultInput :: Integer -> Css
 defaultInput inputHeight = do
@@ -153,3 +158,4 @@ defaultInput inputHeight = do
   borderRadius (px 0) (px 0) (px 0) (px 0)
   border solid (px 1) C.grey
   focus & borderColor C.green
+  verticalAlign middle
diff --git a/src/server/View/Page.hs b/src/server/View/Page.hs
index 5b9f06e..a397a96 100644
--- a/src/server/View/Page.hs
+++ b/src/server/View/Page.hs
@@ -5,7 +5,6 @@ module View.Page
   ) where
 
 import Data.Text.Internal.Lazy (Text)
-import Data.Text.Internal.Lazy as TL
 
 import Text.Blaze.Html
 import Text.Blaze.Html5