The user can remove a monthly payment

1 files changed, 28 insertions, 18 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 098269b..80498f8 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -17,12 +17,15 @@ import Design.Media
 globalDesign :: Text
 globalDesign = renderWith compact [] global
 
-iconFontSize :: Integer
-iconFontSize = 32
+iconFontSize :: Size Abs
+iconFontSize = px 32
 
 radius :: Size Abs
 radius = px 3
 
+blockPadding :: Size Abs
+blockPadding = px 15
+
 global :: Css
 global = do
 
@@ -50,28 +53,27 @@ global = do
       backgroundColor C.white
       color C.red
       borderWidth (px 0)
-      fontSize (px iconFontSize)
+      fontSize iconFontSize
       hover & transform (scale 1.2 1.2)
 
   ".payments" ? do
     let inputHeight = 40
 
     ".exceedingPayers" ? do
-      width (pct 95)
-      margin (px 0) auto (px 45) auto
-      padding (px 15) (px 15) (px 15) (px 15)
+      centeredWithMargin
       backgroundColor C.green
       color C.white
       fontWeight bold
-      borderRadius (px 5) (px 5) (px 5) (px 5)
+      borderRadius radius radius radius radius
+      paddingLeft blockPadding
+      paddingRight blockPadding
 
-      ".exceedingPayer" Clay.** ".userName" ? marginRight (px 10)
+      ".exceedingPayer" ? do
+        lineHeight (px inputHeight)
+        ".userName" ? marginRight (px 10)
 
     form # ".add" ? do
-      width (pct 95)
-      marginLeft auto
-      marginRight auto
-      marginBottom (px 45)
+      centeredWithMargin
       clearFix
 
       ".name" <> ".cost" ? do
@@ -141,8 +143,7 @@ global = do
         left (px 0)
 
     ".monthlyPayments" ? do
-      width (pct 95)
-      margin (px 0) auto (px 45) auto
+      centeredWithMargin
 
       button # ".count" ? do
         width (pct 100)
@@ -150,6 +151,8 @@ global = do
         borderRadius radius radius radius radius
         textAlign (alignSide sideLeft)
         position relative
+        paddingLeft blockPadding
+        paddingRight blockPadding
 
         ".expand" ? do
           float floatRight
@@ -171,7 +174,7 @@ global = do
         fontWeight bold
         backgroundColor C.red
         color C.white
-        fontSize (px iconFontSize)
+        fontSize iconFontSize
         lineHeight (px 70)
 
       ".row" ? do
@@ -181,7 +184,7 @@ global = do
         nthChild "odd" & backgroundColor C.lightGrey
         ".edition" & do
           backgroundColor C.paymentFocus
-          ".remove" ? visibility visible
+          ".delete" ? visibility visible
 
       ".cell" ? do
         display tableCell
@@ -196,7 +199,7 @@ global = do
           largeScreen $ do
             ".shortDate" ? display none
             ".longDate" ? display inline
-        ".remove" & do
+        ".delete" & do
           width (px 10)
           height (px 10)
           textAlign (alignSide sideCenter)
@@ -212,7 +215,7 @@ global = do
         display inlineBlock
         border solid (px 2) C.darkGrey
         color C.darkGrey
-        borderRadius (px 2) (px 2) (px 2) (px 2)
+        borderRadius radius radius radius radius
         marginRight (px 10)
         let side = 50
         width (px side)
@@ -280,3 +283,10 @@ defaultInput inputHeight = do
   border solid (px 1) C.darkGrey
   focus & borderColor C.grey
   verticalAlign middle
+
+centeredWithMargin :: Css
+centeredWithMargin = do
+  width (pct 95)
+  marginLeft auto
+  marginRight auto
+  marginBottom (px 45)