3 files changed, 48 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
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index ce03d34..8a37a2a 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -52,5 +52,7 @@ data Key =
   | Add
   | PaymentNotDeleted
   | MoneySymbol
+  | Punctual
+  | Monthly
 
   deriving (Enum, Bounded, Show)
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 6c569fd..ec8cf19 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -199,3 +199,13 @@ m l MoneySymbol =
   case l of
     English -> "$"
     French  -> "€"
+
+m l Punctual =
+  case l of
+    English -> "Punctual"
+    French  -> "Ponctuel"
+
+m l Monthly =
+  case l of
+    English -> "Monthly"
+    French  -> "Mensuel"