Amelioring the payment add design

1 files changed, 57 insertions, 13 deletions

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