Use buttons or links when elements are clickable

4 files changed, 24 insertions, 17 deletions

diff --git a/public/css/reset.css b/public/css/reset.css
index dfaff5f..a8ccc8a 100644
--- a/public/css/reset.css
+++ b/public/css/reset.css
@@ -47,8 +47,15 @@ a {
   color: inherit;
 }
 
-button { padding: 0; }
+button {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+}
 button:hover { cursor: pointer; }
+button::-moz-focus-inner {
+  border: 0;
+}
 
 html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; }
diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index deffb95..f352f1f 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -28,8 +28,7 @@ import Utils.Either exposing (toMaybeError)
 addPayment : Model -> LoggedView -> Html
 addPayment model loggedView =
   H.form
-    [ class "add"
-    , case (validateName loggedView.add.name model.translations, validateCost loggedView.add.cost model.translations) of
+    [ case (validateName loggedView.add.name model.translations, validateCost loggedView.add.cost model.translations) of
         (Ok name, Ok cost) ->
           let action =
                 case loggedView.add.frequency of
@@ -43,7 +42,8 @@ addPayment model loggedView =
     , addPaymentCost model loggedView.add
     , paymentFrequency model loggedView.add
     , button
-        [ type' "submit" ]
+        [ type' "submit"
+        , class "add" ]
         [ text (getMessage "Add" model.translations)]
     ]
 
@@ -91,8 +91,9 @@ addPaymentCost model addPayment =
 
 paymentFrequency : Model -> AddPayment -> Html
 paymentFrequency model addPayment =
-  div
-    [ class "frequency"
+  button
+    [ type' "button"
+    , class "frequency"
     , onClick actions.address (UpdateLoggedView << UpdateAdd <| ToggleFrequency)
     ]
     [ div
diff --git a/src/client/View/Payments/Paging.elm b/src/client/View/Payments/Paging.elm
index 53df3b3..b9a0109 100644
--- a/src/client/View/Payments/Paging.elm
+++ b/src/client/View/Payments/Paging.elm
@@ -27,7 +27,7 @@ paymentsPaging loggedView =
         then
           text ""
         else
-          ul
+          div
             [ class "pages" ]
             (  ( if loggedView.currentPage > 1
                    then [ firstPage, previousPage loggedView ]
@@ -56,7 +56,7 @@ truncatePages currentPage pages =
 
 firstPage : Html
 firstPage =
-  li
+  button
     [ class "page"
     , onClick serverCommunications.address (SC.UpdatePage 1)
     ]
@@ -64,7 +64,7 @@ firstPage =
 
 previousPage : LoggedView -> Html
 previousPage loggedView =
-  li
+  button
     [ class "page"
     , onClick serverCommunications.address (SC.UpdatePage (loggedView.currentPage - 1))
     ]
@@ -72,7 +72,7 @@ previousPage loggedView =
 
 nextPage : LoggedView -> Html
 nextPage loggedView =
-  li
+  button
     [ class "page"
     , onClick serverCommunications.address (SC.UpdatePage (loggedView.currentPage + 1))
     ]
@@ -80,7 +80,7 @@ nextPage loggedView =
 
 lastPage : Int -> Html
 lastPage maxPage =
-  li
+  button
     [ class "page"
     , onClick serverCommunications.address (SC.UpdatePage maxPage)
     ]
@@ -89,7 +89,7 @@ lastPage maxPage =
 paymentsPage : LoggedView -> Int -> Html
 paymentsPage loggedView page =
   let onCurrentPage = page == loggedView.currentPage
-  in  li
+  in  button
         [ class ("page" ++ (if onCurrentPage then " current" else ""))
         , onClick serverCommunications.address <|
             if onCurrentPage then SC.NoCommunication else SC.UpdatePage page
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 80498f8..4c8277b 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -52,7 +52,6 @@ global = do
       lineHeight (px iconHeight)
       backgroundColor C.white
       color C.red
-      borderWidth (px 0)
       fontSize iconFontSize
       hover & transform (scale 1.2 1.2)
 
@@ -72,7 +71,7 @@ global = do
         lineHeight (px inputHeight)
         ".userName" ? marginRight (px 10)
 
-    form # ".add" ? do
+    form ? do
       centeredWithMargin
       clearFix
 
@@ -111,7 +110,7 @@ global = do
         label ? width (pct 30)
         paddingRight (pct 5)
 
-      ".frequency" ? do
+      button # ".frequency" ? do
         fontSize (pct 90)
         float floatLeft
         width (pct 15)
@@ -126,7 +125,7 @@ global = do
         ".punctual" ? borderRadius radius radius 0 0
         ".monthly" ? borderRadius 0 0 radius radius
 
-      button ? do
+      button # ".add" ? do
         defaultButton C.red C.white inputHeight
         float floatLeft
         width (pct 15)
@@ -211,6 +210,7 @@ global = do
       padding (px 30) (px 30) (px 30) (px 30)
       textAlign (alignSide (sideCenter))
       clearFix
+
       ".page" ? do
         display inlineBlock
         border solid (px 2) C.darkGrey
@@ -267,7 +267,6 @@ defaultButton :: Color -> Color -> Integer -> Css
 defaultButton backgroundCol textCol pxHeight = do
   backgroundColor backgroundCol
   color textCol
-  borderWidth (px 0)
   borderRadius radius radius radius radius
   verticalAlign middle
   cursor pointer