Adding error feedbacks when adding a payment

1 files changed, 17 insertions, 11 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 50cdbc4..ebe7ad7 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -7,6 +7,8 @@ module Design.Global
 import qualified Prelude
 import Prelude
 
+import Data.Monoid ((<>))
+
 import Clay
 
 import Data.Text.Lazy (Text)
@@ -51,30 +53,27 @@ global = do
   ".payments" ? do
     form # ".add" ? do
       let inputHeight = 40
-      width (pct 90)
+      width (pct 60)
       marginLeft auto
       marginRight auto
       marginBottom (px 45)
       clearFix
 
-      ".name" ? do
+      ".name" <> ".cost" ? do
+        position relative
         width (pct 50)
-        float floatLeft
         label ? do
           width (pct 25)
           paddingRight (pct 5)
-        input ? do
-          defaultInput inputHeight
-          width (pct 70)
+        input ? defaultInput inputHeight
+
+      ".name" ? do
+        float floatLeft
+        input ? 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
@@ -82,6 +81,13 @@ global = do
           width (pct 20)
           height (px inputHeight)
 
+      input # ".error" ? borderColor C.red
+      ".errorMessage" ? do
+        position absolute
+        color C.red
+        top (px (inputHeight + 10))
+        left (px 0)
+
     table ? do
       width (pct 100)
       textAlign (alignSide (sideCenter))