Using dom buttons for payment delete

3 files changed, 17 insertions, 10 deletions

diff --git a/src/client/View/LoggedIn/Monthly.elm b/src/client/View/LoggedIn/Monthly.elm
index 6d30e4a..5d7260e 100644
--- a/src/client/View/LoggedIn/Monthly.elm
+++ b/src/client/View/LoggedIn/Monthly.elm
@@ -74,5 +74,6 @@ paymentLine model loggedInView payment =
         [ class "cell delete"
         , onClick serverCommunications.address (SC.DeleteMonthlyPayment payment.id)
         ]
-        [ renderIcon "times" ]
+        [ button [] [ renderIcon "times" ]
+        ]
     ]
diff --git a/src/client/View/LoggedIn/Table.elm b/src/client/View/LoggedIn/Table.elm
index 6342369..a8fef3e 100644
--- a/src/client/View/LoggedIn/Table.elm
+++ b/src/client/View/LoggedIn/Table.elm
@@ -77,10 +77,11 @@ paymentLine model loggedInView payment =
     , if loggedInView.me == payment.userId
         then
           div
-            [ class "cell delete"
-            , onClick serverCommunications.address (SC.DeletePayment payment.id payment.userId payment.cost loggedInView.currentPage)
+            [ class "cell delete" ]
+            [ button
+                [ onClick serverCommunications.address (SC.DeletePayment payment.id payment.userId payment.cost loggedInView.currentPage) ]
+                [ renderIcon "times" ]
             ]
-            [ renderIcon "times" ]
         else
           div [ class "cell" ] []
     ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 13b2d6a..53a73eb 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -168,18 +168,20 @@ global = do
       "border-spacing" -: "10 px"
 
       ".header" <> ".row" ? display tableRow
+      let headerHeight = (px 70)
+      let rowHeight = (px 60)
 
       ".header" ? do
         fontWeight bold
         backgroundColor C.red
         color C.white
         fontSize iconFontSize
-        lineHeight (px 70)
+        lineHeight headerHeight
 
       ".row" ? do
         fontSize (px 20)
         cursor pointer
-        lineHeight (px 60)
+        lineHeight rowHeight
         nthChild "odd" & backgroundColor C.lightGrey
         ".edition" & do
           backgroundColor C.paymentFocus
@@ -188,7 +190,7 @@ global = do
       ".cell" ? do
         display tableCell
         ".category" & width (pct 40)
-        ".cost" & width (pct 20)
+        ".cost" & width (pct 17)
         ".user" & width (pct 20)
         ".date" & do
           width (pct 20)
@@ -199,12 +201,15 @@ global = do
             ".shortDate" ? display none
             ".longDate" ? display inline
         ".delete" & do
-          width (px 10)
-          height (px 10)
+          width (pct 3)
+          height rowHeight
           textAlign (alignSide sideCenter)
           backgroundColor C.red
-          color C.white
           visibility hidden
+          button ? do
+            width (pct 100)
+            height (pct 100)
+            color C.white
 
     ".pages" ? do
       padding (px 30) (px 30) (px 30) (px 30)