Payment frequence choice between either punctual or monthly, UI only

1 files changed, 36 insertions, 16 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index e3dd824..79ea6ac 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -20,6 +20,9 @@ globalDesign = renderWith compact [] global
 iconFontSize :: Integer
 iconFontSize = 32
 
+radius :: Size Abs
+radius = px 3
+
 global :: Css
 global = do
 
@@ -53,7 +56,8 @@ global = do
   ".payments" ? do
 
     ".exceedingPayers" ? do
-      margin (px 0) (px 20) (px 45) (px 20)
+      width (pct 95)
+      margin (px 0) auto (px 45) auto
       padding (px 15) (px 15) (px 15) (px 15)
       backgroundColor C.green
       color C.white
@@ -65,7 +69,7 @@ global = do
 
     form # ".add" ? do
       let inputHeight = 40
-      width (pct 80)
+      width (pct 95)
       marginLeft auto
       marginRight auto
       marginBottom (px 45)
@@ -86,31 +90,44 @@ global = do
           fontSize (px 22)
           verticalAlign middle
           cursor cursorText
-          borderRadius (px 0) (px 3) (px 3) (px 0)
+          borderRadius (px 0) radius radius (px 0)
         input ? do
           defaultInput inputHeight
-          borderRadius (px 3) (px 0) (px 0) (px 3)
+          borderRadius radius (px 0) (px 0) radius
         "input:focus + label" ? backgroundColor C.grey
 
       ".name" ? do
         float floatLeft
-        width (pct 50)
+        width (pct 40)
         input ? width (pct 75)
         label ? width (pct 20)
         paddingRight (pct 5)
 
       ".cost" ? do
         float floatLeft
-        width (pct 35)
+        width (pct 25)
         input ? width (pct 65)
         label ? width (pct 30)
         paddingRight (pct 5)
 
+      ".frequency" ? do
+        float floatLeft
+        width (pct 15)
+        marginRight (pct 5)
+
+        (".punctual" <> ".monthly") ? do
+          defaultButton C.lightGrey C.darkGrey (inputHeight `Prelude.div` 2)
+          ".selected" & do
+            backgroundColor C.blue
+            color C.white
+
+        ".punctual" ? borderRadius radius radius 0 0
+        ".monthly" ? borderRadius 0 0 radius radius
+
       button ? do
-        defaultButton
+        defaultButton C.red C.white inputHeight
         float floatLeft
         width (pct 15)
-        height (px inputHeight)
 
       ".name.error" <> ".cost.error" ? do
         input ? borderColor C.redError
@@ -207,10 +224,9 @@ global = do
         marginBottom (px 10)
 
       button ? do
-        defaultButton
+        defaultButton C.red C.white inputHeight
         display block
         width (pct 100)
-        height (px inputHeight)
 
     ".result" ? do
       marginTop (px 40)
@@ -225,19 +241,23 @@ clearFix =
     display D.table
     clear both
 
-defaultButton :: Css
-defaultButton = do
-  backgroundColor C.red
-  color C.white
+defaultButton :: Color -> Color -> Integer -> Css
+defaultButton backgroundCol textCol pxHeight = do
+  backgroundColor backgroundCol
+  color textCol
   borderWidth (px 0)
-  borderRadius (px 3) (px 3) (px 3) (px 3)
+  borderRadius radius radius radius radius
   verticalAlign middle
+  cursor pointer
+  height (px pxHeight)
+  lineHeight (px pxHeight)
+  textAlign (alignSide sideCenter)
 
 defaultInput :: Integer -> Css
 defaultInput inputHeight = do
   height (px inputHeight)
   padding (px 10) (px 10) (px 10) (px 10)
-  borderRadius (px 3) (px 3) (px 3) (px 3)
+  borderRadius radius radius radius radius
   border solid (px 1) C.darkGrey
   focus & borderColor C.grey
   verticalAlign middle