Set focus properties to button elements

26 files changed, 197 insertions, 164 deletions

diff --git a/public/css/reset.css b/public/css/reset.css
index a8ccc8a..2eecc94 100644
--- a/public/css/reset.css
+++ b/public/css/reset.css
@@ -53,9 +53,8 @@ button {
   background-color: transparent;
 }
 button:hover { cursor: pointer; }
-button::-moz-focus-inner {
-  border: 0;
-}
+button::-moz-focus-inner { border: 0; }
+:focus { outline: none; }
 
 html { box-sizing: border-box; }
 *, *:before, *:after { box-sizing: inherit; }
diff --git a/src/client/elm/Main.elm b/src/client/elm/Main.elm
index 34afa92..e8bbd54 100644
--- a/src/client/elm/Main.elm
+++ b/src/client/elm/Main.elm
@@ -20,7 +20,7 @@ import View exposing (view)
 
 import Persona as Persona exposing (operations)
 
-import ServerCommunication exposing (initViewAction)
+import Server
 
 main : Signal Html
 main = app.html
@@ -29,7 +29,7 @@ app : App Model
 app = StartApp.start
   { init =
       ( initialModel initialTime translations config
-      , Effects.task initViewAction
+      , Effects.task Server.initViewAction
       )
   , view = view
   , update = update
diff --git a/src/client/elm/Model/Action.elm b/src/client/elm/Model/Action.elm
index 033467d..ba47f2d 100644
--- a/src/client/elm/Model/Action.elm
+++ b/src/client/elm/Model/Action.elm
@@ -10,14 +10,14 @@ import Model.Payment exposing (Payments)
 import Model.Payer exposing (Payers)
 import Model.Action.SignInAction exposing (SignInAction)
 import Model.Action.LoggedInAction exposing (LoggedInAction)
-import Model.Communication exposing (Communication)
 
 type Action =
   NoOp
-  | ServerCommunication Communication
   | SignIn String
+  | SetIncome Time Int
   | UpdateTime Time
   | GoLoggedInView Users UserId Payments Payments Int Payers
   | UpdateSignIn SignInAction
   | UpdateLoggedIn LoggedInAction
   | GoSignInView
+  | SignOut
diff --git a/src/client/elm/Model/Action/LoggedInAction.elm b/src/client/elm/Model/Action/LoggedInAction.elm
index 18d2224..ef81b09 100644
--- a/src/client/elm/Model/Action/LoggedInAction.elm
+++ b/src/client/elm/Model/Action/LoggedInAction.elm
@@ -8,11 +8,13 @@ import Model.Action.AccountAction exposing (AccountAction)
 import Model.Action.AddPaymentAction exposing (AddPaymentAction)
 
 type LoggedInAction =
-  UpdateAdd AddPaymentAction
+  NoOp
+  | UpdateAdd AddPaymentAction
   | UpdatePayments Payments
   | AddPayment String Int PaymentFrequency
   | ValidateAddPayment PaymentId String Int PaymentFrequency
   | DeletePayment Payment PaymentFrequency
+  | ValidateDeletePayment Payment PaymentFrequency
   | ToggleEdit PaymentId
   | UpdatePage Int
   | UpdateMonthly MonthlyAction
diff --git a/src/client/elm/Model/Communication.elm b/src/client/elm/Model/Communication.elm
deleted file mode 100644
index b8da175..0000000
--- a/src/client/elm/Model/Communication.elm
+++ /dev/null
@@ -1,15 +0,0 @@
-module Model.Communication
-  ( Communication(..)
-  ) where
-
-import Time exposing (Time)
-
-import Model.User exposing (UserId)
-import Model.Payment exposing (..)
-
-type Communication =
-  SignIn String
-  | SetIncome Time Int
-  | AddPayment String Int PaymentFrequency
-  | DeletePayment Payment PaymentFrequency
-  | SignOut
diff --git a/src/client/elm/Server.elm b/src/client/elm/Server.elm
new file mode 100644
index 0000000..cb65868
--- /dev/null
+++ b/src/client/elm/Server.elm
@@ -0,0 +1,65 @@
+module Server
+  ( signIn
+  , addPayment
+  , deletePayment
+  , setIncome
+  , signOut
+  , initViewAction
+  ) where
+
+import Signal
+import Task as Task exposing (Task)
+import Http
+import Json.Decode as Json exposing ((:=))
+import Date
+import Time exposing (Time)
+import Debug
+
+import SimpleHTTP exposing (..)
+
+import Model.Action as U exposing (Action)
+import Model.Action.LoggedInAction as UL exposing (LoggedInAction)
+import Model.Action.MonthlyAction as UM exposing (MonthlyAction)
+import Model.Action.AccountAction as UA exposing (AccountAction)
+import Model.Payment exposing (..)
+import Model.Payer exposing (Payers, payersDecoder)
+import Model.User exposing (Users, usersDecoder, UserId, userIdDecoder)
+
+import Update.SignIn exposing (updateSignIn)
+
+signIn : String -> Task Http.Error Action
+signIn assertion =
+  post ("/signIn?assertion=" ++ assertion)
+    |> flip Task.andThen (always initViewAction)
+
+addPayment : String -> Int -> PaymentFrequency -> Task Http.Error LoggedInAction
+addPayment name cost frequency =
+  post ("/payment/add?name=" ++ name ++ "&cost=" ++ (toString cost) ++ "&frequency=" ++ (toString frequency))
+    |> flip Task.andThen (decodeHttpValue <| "id" := paymentIdDecoder)
+    |> Task.map (\paymentId -> (UL.ValidateAddPayment paymentId name cost frequency))
+
+deletePayment : Payment -> PaymentFrequency -> Task Http.Error LoggedInAction
+deletePayment payment frequency =
+  post ("payment/delete?id=" ++ (toString payment.id))
+    |> Task.map (always (UL.ValidateDeletePayment payment frequency))
+
+setIncome : Time -> Int -> Task Http.Error Action
+setIncome currentTime amount =
+  post ("/income?amount=" ++ (toString amount))
+    |> Task.map (always (U.UpdateLoggedIn (UL.UpdateAccount (UA.UpdateIncome currentTime amount))))
+
+signOut : Task Http.Error Action
+signOut =
+  post "/signOut"
+    |> Task.map (always U.GoSignInView)
+
+initViewAction = Task.onError loggedInView (always <| Task.succeed U.GoSignInView)
+
+loggedInView : Task Http.Error Action
+loggedInView =
+  Task.map U.GoLoggedInView (Http.get usersDecoder "/users")
+    `Task.andMap` (Http.get ("id" := userIdDecoder) "/whoAmI")
+    `Task.andMap` (Http.get paymentsDecoder "/monthlyPayments")
+    `Task.andMap` (Http.get paymentsDecoder "/payments")
+    `Task.andMap` (Http.get ("number" := Json.int) "/payments/count")
+    `Task.andMap` (Http.get payersDecoder "/payers")
diff --git a/src/client/elm/ServerCommunication.elm b/src/client/elm/ServerCommunication.elm
deleted file mode 100644
index 7c46d79..0000000
--- a/src/client/elm/ServerCommunication.elm
+++ /dev/null
@@ -1,69 +0,0 @@
-module ServerCommunication
-  ( sendRequest
-  , initViewAction
-  ) where
-
-import Signal
-import Task as Task exposing (Task)
-import Http
-import Json.Decode as Json exposing ((:=))
-import Date
-import Time exposing (Time)
-import Debug
-
-import SimpleHTTP exposing (..)
-
-import Model.Communication exposing (..)
-import Model.Action as U exposing (Action)
-import Model.Action.LoggedInAction as UL
-import Model.Action.MonthlyAction as UM
-import Model.Action.AccountAction as UA
-import Model.Payment exposing (..)
-import Model.Payer exposing (Payers, payersDecoder)
-import Model.User exposing (Users, usersDecoder, UserId, userIdDecoder)
-
-import Update.SignIn exposing (updateSignIn)
-
-sendRequest : Communication -> Task Http.Error U.Action
-sendRequest communication =
-  case communication of
-
-    SignIn assertion ->
-      post ("/signIn?assertion=" ++ assertion)
-        |> flip Task.andThen (always initViewAction)
-
-    AddPayment name cost frequency ->
-      post (addPaymentURL name cost frequency)
-        |> flip Task.andThen (decodeHttpValue <| "id" := paymentIdDecoder)
-        |> Task.map (\paymentId -> (U.UpdateLoggedIn (UL.ValidateAddPayment paymentId name cost frequency)))
-
-    DeletePayment payment frequency ->
-      post (deletePaymentURL payment.id)
-        |> Task.map (always (U.UpdateLoggedIn (UL.DeletePayment payment frequency)))
-
-    SetIncome currentTime amount ->
-      post ("/income?amount=" ++ (toString amount))
-        |> Task.map (always (U.UpdateLoggedIn (UL.UpdateAccount (UA.UpdateIncome currentTime amount))))
-
-    SignOut ->
-      post "/signOut"
-        |> Task.map (always U.GoSignInView)
-
-addPaymentURL : String -> Int -> PaymentFrequency -> String
-addPaymentURL name cost frequency =
-  "/payment/add?name=" ++ name ++ "&cost=" ++ (toString cost) ++ "&frequency=" ++ (toString frequency)
-
-deletePaymentURL : PaymentId -> String
-deletePaymentURL id =
-  "payment/delete?id=" ++ (toString id)
-
-initViewAction = Task.onError loggedInView (always <| Task.succeed U.GoSignInView)
-
-loggedInView : Task Http.Error Action
-loggedInView =
-  Task.map U.GoLoggedInView (Http.get usersDecoder "/users")
-    `Task.andMap` (Http.get ("id" := userIdDecoder) "/whoAmI")
-    `Task.andMap` (Http.get paymentsDecoder "/monthlyPayments")
-    `Task.andMap` (Http.get paymentsDecoder "/payments")
-    `Task.andMap` (Http.get ("number" := Json.int) "/payments/count")
-    `Task.andMap` (Http.get payersDecoder "/payers")
diff --git a/src/client/elm/Update.elm b/src/client/elm/Update.elm
index a33d47d..b473c9d 100644
--- a/src/client/elm/Update.elm
+++ b/src/client/elm/Update.elm
@@ -6,7 +6,7 @@ import Task
 
 import Effects exposing (Effects)
 
-import ServerCommunication exposing (sendRequest)
+import Server
 
 import Model exposing (Model)
 import Model.Translations exposing (getMessage)
@@ -16,7 +16,6 @@ import Model.Action.LoggedInAction exposing (LoggedInAction)
 import Model.View as V
 import Model.View.SignInView exposing (..)
 import Model.View.LoggedInView exposing (..)
-import Model.Communication as Communication exposing (Communication)
 
 import Update.LoggedIn exposing (updateLoggedIn)
 import Update.SignIn exposing (updateSignIn)
@@ -32,25 +31,25 @@ update action model =
 
     SignIn assertion ->
       ( applySignIn model (SignInAction.WaitingServer)
-      , sendRequest (Communication.SignIn assertion)
+      , Server.signIn assertion
           |> flip Task.onError (\_ ->
                Task.succeed (UpdateSignIn (SignInAction.ErrorLogin (getMessage "ErrorSignIn" model.translations)))
              )
           |> Effects.task
       )
 
-    GoLoggedInView users me monthlyPayments payments paymentsCount payers ->
-      ( { model | view = V.LoggedInView (initLoggedInView users me monthlyPayments payments paymentsCount payers) }
-      , Effects.none
-      )
-
-    ServerCommunication communication ->
+    SetIncome currentTime amount ->
       ( model
-      , sendRequest communication
+      , Server.setIncome currentTime amount
           |> flip Task.onError (always <| Task.succeed NoOp)
           |> Effects.task
       )
 
+    GoLoggedInView users me monthlyPayments payments paymentsCount payers ->
+      ( { model | view = V.LoggedInView (initLoggedInView users me monthlyPayments payments paymentsCount payers) }
+      , Effects.none
+      )
+
     UpdateTime time ->
       ({ model | currentTime = time }, Effects.none)
 
@@ -63,6 +62,13 @@ update action model =
     UpdateLoggedIn loggedInAction ->
       applyLoggedIn model loggedInAction
 
+    SignOut ->
+      ( model
+      , Server.signOut
+          |> flip Task.onError (always <| Task.succeed NoOp)
+          |> Effects.task
+      )
+
 applySignIn : Model -> SignInAction -> Model
 applySignIn model signInAction =
   case model.view of
@@ -77,7 +83,7 @@ applyLoggedIn model loggedInAction =
     V.LoggedInView loggedInView ->
       let (loggedInView, effects) = updateLoggedIn model loggedInAction loggedInView
       in  ( { model | view = V.LoggedInView loggedInView }
-          , effects
+          , Effects.map UpdateLoggedIn effects
           )
     _ ->
       (model, Effects.none)
diff --git a/src/client/elm/Update/LoggedIn.elm b/src/client/elm/Update/LoggedIn.elm
index fe53af7..69a1b75 100644
--- a/src/client/elm/Update/LoggedIn.elm
+++ b/src/client/elm/Update/LoggedIn.elm
@@ -8,17 +8,15 @@ import Dict
 import Effects exposing (Effects)
 import Task
 
-import ServerCommunication exposing (sendRequest)
+import Server
 
 import Model exposing (Model)
 import Model.User exposing (UserId)
 import Model.Payment exposing (..)
-import Model.Action exposing (..)
 import Model.Action.LoggedInAction exposing (..)
 import Model.Action.AccountAction exposing (..)
 import Model.Action.MonthlyAction as Monthly
 import Model.Action.AddPaymentAction as AddPayment
-import Model.Communication as Communication exposing (Communication)
 import Model.View.LoggedInView exposing (..)
 import Model.View.LoggedIn.AddPayment exposing (..)
 
@@ -26,10 +24,12 @@ import Update.LoggedIn.AddPayment exposing (updateAddPayment)
 import Update.LoggedIn.Monthly exposing (updateMonthly)
 import Update.LoggedIn.Account exposing (updateAccount)
 
-updateLoggedIn : Model -> LoggedInAction -> LoggedInView -> (LoggedInView, Effects Action)
+updateLoggedIn : Model -> LoggedInAction -> LoggedInView -> (LoggedInView, Effects LoggedInAction)
 updateLoggedIn model action loggedInView =
   case action of
 
+    NoOp -> (loggedInView, Effects.none)
+
     UpdateAdd addPaymentAction ->
       ( { loggedInView | add = updateAddPayment addPaymentAction loggedInView.add }
       , Effects.none
@@ -42,7 +42,7 @@ updateLoggedIn model action loggedInView =
 
     AddPayment name cost frequency ->
       ( { loggedInView | add = updateAddPayment AddPayment.WaitingServer loggedInView.add }
-      , sendRequest (Communication.AddPayment name cost frequency)
+      , Server.addPayment name cost frequency
           |> flip Task.onError (always <| Task.succeed NoOp)
           |> Effects.task
       )
@@ -75,6 +75,13 @@ updateLoggedIn model action loggedInView =
       )
 
     DeletePayment payment frequency ->
+      ( loggedInView
+      , Server.deletePayment payment frequency
+          |> flip Task.onError (always <| Task.succeed NoOp)
+          |> Effects.task
+      )
+
+    ValidateDeletePayment payment frequency ->
       case frequency of
         Monthly ->
           ( { loggedInView
diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm
index 9d57c05..b8a5bf1 100644
--- a/src/client/elm/View/Header.elm
+++ b/src/client/elm/View/Header.elm
@@ -10,7 +10,6 @@ import Html.Events exposing (..)
 
 import Model exposing (Model)
 import Model.Translations exposing (getMessage)
-import Model.Communication as Communication
 import Model.Action exposing (..)
 import Model.View exposing (..)
 
@@ -27,7 +26,7 @@ renderHeader address model =
         LoggedInView _ ->
           button
             [ class "icon"
-            , onClick address (ServerCommunication Communication.SignOut)
+            , onClick address SignOut
             ]
             [ renderIcon "power-off" ]
         _ ->
diff --git a/src/client/elm/View/LoggedIn/Account.elm b/src/client/elm/View/LoggedIn/Account.elm
index 9459740..a7c20d5 100644
--- a/src/client/elm/View/LoggedIn/Account.elm
+++ b/src/client/elm/View/LoggedIn/Account.elm
@@ -17,7 +17,6 @@ import Model.Translations exposing (getParamMessage, getMessage)
 import Model.Action exposing (..)
 import Model.Action.LoggedInAction exposing (..)
 import Model.Action.AccountAction exposing (..)
-import Model.Communication as Communication
 
 import Model.View.LoggedInView exposing (LoggedInView)
 import Model.View.LoggedIn.Account exposing (..)
@@ -95,7 +94,7 @@ incomeEdition address model account edition =
   H.form
     [ case validateIncome edition.income model.translations of
         Ok validatedAmount ->
-          onSubmitPrevDefault address (ServerCommunication <| Communication.SetIncome model.currentTime validatedAmount)
+          onSubmitPrevDefault address (SetIncome model.currentTime validatedAmount)
         Err error ->
           onSubmitPrevDefault address (UpdateLoggedIn << UpdateAccount << UpdateEditionError <| error)
     , class "income"
diff --git a/src/client/elm/View/LoggedIn/AddPayment.elm b/src/client/elm/View/LoggedIn/AddPayment.elm
index 283d392..0b39591 100644
--- a/src/client/elm/View/LoggedIn/AddPayment.elm
+++ b/src/client/elm/View/LoggedIn/AddPayment.elm
@@ -13,10 +13,9 @@ import Html.Events exposing (..)
 import Model exposing (Model)
 import Model.Payment exposing (PaymentFrequency(..))
 import Model.Translations exposing (getMessage)
-import Model.Action exposing (..)
+import Model.Action as Action exposing (..)
 import Model.Action.LoggedInAction as LoggedInAction exposing (..)
 import Model.Action.AddPaymentAction exposing (..)
-import Model.Communication as Communication
 
 import Model.View.LoggedIn.AddPayment exposing (..)
 import Model.View.LoggedInView exposing (LoggedInView)
@@ -32,7 +31,7 @@ addPayment address model loggedInView =
   H.form
     [ let update =
             if loggedInView.add.waitingServer
-              then NoOp
+              then Action.NoOp
               else
                 case (validateName loggedInView.add.name model.translations, validateCost loggedInView.add.cost model.translations) of
                   (Ok name, Ok cost) ->
diff --git a/src/client/elm/View/LoggedIn/Monthly.elm b/src/client/elm/View/LoggedIn/Monthly.elm
index c0294d7..2e9ff1e 100644
--- a/src/client/elm/View/LoggedIn/Monthly.elm
+++ b/src/client/elm/View/LoggedIn/Monthly.elm
@@ -13,9 +13,8 @@ import Model exposing (Model)
 import Model.Payment as Payment exposing (Payments, Payment)
 import Model.Translations exposing (getMessage, getParamMessage)
 import Model.Action exposing (..)
-import Model.Action.LoggedInAction exposing (..)
+import Model.Action.LoggedInAction as LoggedInAction exposing (..)
 import Model.Action.MonthlyAction exposing (..)
-import Model.Communication as Communication
 import Model.View.LoggedIn.Monthly exposing (Monthly)
 import Model.View.LoggedInView exposing (LoggedInView)
 
@@ -81,7 +80,7 @@ paymentLine address model loggedInView payment =
         [ text (price model payment.cost) ]
     , div
         [ class "cell delete"
-        , onClick address (ServerCommunication <| Communication.DeletePayment payment Payment.Monthly)
+        , onClick address (UpdateLoggedIn <| LoggedInAction.DeletePayment payment Payment.Monthly)
         ]
         [ button [] [ renderIcon "times" ]
         ]
diff --git a/src/client/elm/View/LoggedIn/Table.elm b/src/client/elm/View/LoggedIn/Table.elm
index cb3969b..ca5680f 100644
--- a/src/client/elm/View/LoggedIn/Table.elm
+++ b/src/client/elm/View/LoggedIn/Table.elm
@@ -17,7 +17,6 @@ import Model.Payment exposing (..)
 import Model.Translations exposing (getMessage)
 import Model.Action exposing (..)
 import Model.Action.LoggedInAction exposing (..)
-import Model.Communication as Communication
 import Model.View.LoggedInView exposing (LoggedInView)
 
 import View.Icon exposing (renderIcon)
@@ -88,7 +87,7 @@ paymentLine address model loggedInView payment =
           div
             [ class "cell delete" ]
             [ button
-                [ onClick address (ServerCommunication <| Communication.DeletePayment payment Punctual)]
+                [ onClick address (UpdateLoggedIn <| DeletePayment payment Punctual)]
                 [ renderIcon "times" ]
             ]
         else
diff --git a/src/client/elm/View/SignIn.elm b/src/client/elm/View/SignIn.elm
index 4b9f2bb..c21c16c 100644
--- a/src/client/elm/View/SignIn.elm
+++ b/src/client/elm/View/SignIn.elm
@@ -26,7 +26,7 @@ renderSignIn address model signInView =
     [ class "signIn" ]
     [ button
         ( if signInView.waitingServer
-            then []
+            then [ class "waitingServer" ]
             else [ onClick operations.address Persona.SignIn ]
         )
         [ span [] [ text (getMessage "SignIn" model.translations) ]
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index adbe50f..126a231 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -5,9 +5,6 @@ import qualified Clay.Color as C
 white :: C.Color
 white = C.white
 
-greenSuccess :: C.Color
-greenSuccess = C.green
-
 redError :: C.Color
 redError = C.red
 
@@ -15,7 +12,7 @@ red :: C.Color
 red = C.rgb 207 92 86
 
 green :: C.Color
-green = C.rgb 169 220 175
+green = C.rgb 159 210 165
 
 blue :: C.Color
 blue = C.rgb 108 162 164
diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index 6c4ab90..94df14b 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -20,8 +20,14 @@ blockPercentMargin = (100 - blockPercentWidth) / 2
 blockMarginBottom :: Size Abs
 blockMarginBottom = px 50
 
-rowHeight :: Size Abs
-rowHeight = px 60
+rowHeightPx :: Integer
+rowHeightPx = 60
 
 inputHeight :: Integer
 inputHeight = 40
+
+focusLighten :: Color -> Color
+focusLighten color = color +. 20
+
+focusDarken :: Color -> Color
+focusDarken color = color -. 20
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 9f5a4fc..c41d06f 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -24,6 +24,8 @@ global = do
     minWidth (px 550)
     fontFamily ["Cantarell"] [sansSerif]
 
+  a ? cursor pointer
+
   allKeyframes
 
   signInDesign
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 5ef3fb0..a45a7b2 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -6,8 +6,6 @@ module Design.Header
 
 import Clay
 
-import Data.Monoid ((<>))
-
 import Design.Color as C
 import Design.Constants
 
@@ -39,3 +37,4 @@ headerDesign =
       color C.white
       fontSize iconFontSize
       hover & i ? transform (scale 1.2 1.2)
+      focus & i ? transform (scale 1.2 1.2)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 40218f8..f4c19fa 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -27,19 +27,22 @@ clearFix =
     display D.table
     clear both
 
-defaultButton :: Color -> Color -> Size Abs -> Css
-defaultButton backgroundCol textCol h = do
+defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
+defaultButton backgroundCol textCol h focusOp = do
   backgroundColor backgroundCol
   color textCol
   borderRadius radius radius radius radius
   verticalAlign middle
   cursor pointer
   lineHeight h
+  height h
   textAlign (alignSide sideCenter)
+  hover & backgroundColor (focusOp backgroundCol)
+  focus & backgroundColor (focusOp backgroundCol)
 
-iconButton :: Color -> Color -> Size Abs -> Css
-iconButton backgroundCol textCol h = do
-  defaultButton backgroundCol textCol h
+iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
+iconButton backgroundCol textCol h focusOp = do
+  defaultButton backgroundCol textCol h focusOp
   i <> span ? do
     height h
     lineHeight h
@@ -49,11 +52,10 @@ iconButton backgroundCol textCol h = do
   i ? do
     marginLeft (px 15)
     marginRight (px 20)
-  hover & i ? transform (scale 1.2 1.2)
 
 defaultInput :: Integer -> Css
-defaultInput inputHeight = do
-  height (px inputHeight)
+defaultInput h = do
+  height (px h)
   padding (px 10) (px 10) (px 10) (px 10)
   borderRadius radius radius radius radius
   border solid (px 1) C.darkGrey
@@ -72,7 +74,7 @@ expandBlock headerBackground headerColor headerHeight = do
   marginLeft (pct blockPercentMargin)
   marginRight (pct blockPercentMargin)
   ".header" ? do
-    defaultButton headerBackground headerColor headerHeight
+    defaultButton headerBackground headerColor headerHeight focusLighten
     width (pct 100)
     fontSize (px 18)
     borderRadius radius radius radius radius
diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
index 3bdfb65..ef0603c 100644
--- a/src/server/Design/LoggedIn/Add.hs
+++ b/src/server/Design/LoggedIn/Add.hs
@@ -43,6 +43,9 @@ addDesign =
         borderRadius radius (px 0) (px 0) radius
         "width" -: "calc(100% - 40px)"
       "input:focus + label" ? backgroundColor C.grey
+      hover & do
+        input ? borderColor C.grey
+        label ? backgroundColor C.grey
 
     ".name" ? minWidth (px 150)
 
@@ -51,18 +54,24 @@ addDesign =
       marginRight (pct blockPercentMargin)
 
       (".punctual" <> ".monthly") ? do
-        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
+        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
         paddingLeft (px 15)
         paddingRight (px 15)
         ".selected" & do
           backgroundColor C.blue
           color C.white
 
+      hover & (".punctual" <> ".monthly") ?
+        ".selected" & backgroundColor (focusLighten C.blue)
+
+      focus & (".punctual" <> ".monthly") ?
+        ".selected" & backgroundColor (focusLighten C.blue)
+
       ".punctual" ? borderRadius radius radius 0 0
       ".monthly" ? borderRadius 0 0 radius radius
 
     button # ".add" ? do
-      defaultButton C.red C.white (px inputHeight)
+      defaultButton C.red C.white (px inputHeight) focusLighten
       paddingLeft (px 15)
       paddingRight (px 15)
       i ? marginLeft (px 10)
diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
index 66a9b06..8ef42cd 100644
--- a/src/server/Design/LoggedIn/Expandables.hs
+++ b/src/server/Design/LoggedIn/Expandables.hs
@@ -22,7 +22,8 @@ expandablesDesign =
       right blockPadding
       bottom (px 2)
 
-    ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+    ".monthlyPayments" ? do
+      expandBlock C.blue C.white (px inputHeight)
 
     ".account" ? do
       expandBlock C.green C.white (px inputHeight)
@@ -35,7 +36,7 @@ expandablesDesign =
         backgroundColor C.lightGrey
         padding (px 0) (px 20) (px 0) (px 20)
         position relative
-        lineHeight rowHeight
+        lineHeight (px rowHeightPx)
 
         input ? do
           defaultInput inputHeight
@@ -50,10 +51,10 @@ expandablesDesign =
           marginTop (px (-5))
 
         ".validateIncomeEdition" <> ".editIncomeEdition" ?
-          defaultButton C.red C.white (px inputHeight)
+          defaultButton C.red C.white (px inputHeight) focusLighten
 
         ".undoIncomeEdition" ?
-          defaultButton C.blue C.white (px inputHeight)
+          defaultButton C.blue C.white (px inputHeight) focusLighten
 
         ".error" ? do
           color C.redError
diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs
index c42e9f3..f7946b8 100644
--- a/src/server/Design/LoggedIn/Pages.hs
+++ b/src/server/Design/LoggedIn/Pages.hs
@@ -19,17 +19,12 @@ pagesDesign =
     clearFix
 
     ".page" ? do
+      defaultButton C.white C.darkGrey (px 50) focusDarken
       display inlineBlock
       border solid (px 2) C.darkGrey
-      color C.darkGrey
-      borderRadius radius radius radius radius
       marginRight (px 10)
-      let h = 50
       paddingLeft (px 10)
       paddingRight (px 10)
-      height (px h)
-      lineHeight (px h)
-      textAlign (alignSide (sideCenter))
       fontWeight bold
 
       ":not(.current)" & cursor pointer
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
index 2876fa1..d9fc318 100644
--- a/src/server/Design/LoggedIn/Table.hs
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -12,6 +12,7 @@ import qualified Clay.Display as D
 import Design.Color as C
 import Design.Media
 import Design.Constants
+import Design.Helper
 
 tableDesign :: Css
 tableDesign =
@@ -33,20 +34,48 @@ tableDesign =
       lineHeight headerHeight
 
     ".row" ? do
-      fontSize (px 20)
-      cursor pointer
-      lineHeight rowHeight
-      nthChild "odd" & backgroundColor C.lightGrey
+      fontSize (px 18)
+      lineHeight (px rowHeightPx)
+
+      hover & do
+        let (borderW, triangleW, triangleH) = (4, 6, 8)
+        ".cell:first-child::before" ? do
+          display block
+          content (stringContent "")
+          position absolute
+          top (px 0)
+          left (px 0)
+
+          width (px borderW)
+          height (px rowHeightPx)
+          backgroundColor C.green
+
+        ".cell:first-child::after" ? do
+          display block
+          content (stringContent "")
+          position absolute
+          top (px (rowHeightPx `Prelude.div` 2 - triangleH))
+          left (px borderW)
+
+          width (px 0)
+          height (px 0)
+          borderTop solid (px triangleH) transparent
+          borderBottom solid (px triangleH) transparent
+          borderLeft solid (px triangleW) C.green
+
+      nthChild "odd" & do
+        backgroundColor C.lightGrey
       ".edition" & do
         backgroundColor C.paymentFocus
-        ".delete" ? visibility visible
+        ".delete" |> button ? visibility visible
 
     ".cell" ? do
       display tableCell
+      position relative
       ".category" & width (pct 40)
       ".cost" & do
         width (pct 17)
-        ".refund" & color C.greenSuccess
+        ".refund" & color C.green
       ".user" & width (pct 20)
       ".date" & do
         width (pct 20)
@@ -57,12 +86,13 @@ tableDesign =
           ".shortDate" ? display none
           ".longDate" ? display inline
       ".delete" & do
+        position relative
         width (pct 3)
-        height rowHeight
         textAlign (alignSide sideCenter)
-        backgroundColor C.red
-        visibility hidden
         button ? do
+          defaultButton C.red C.white (px rowHeightPx) focusLighten
+          position absolute
+          top (px 0)
+          right (px 0)
           width (pct 100)
-          height (pct 100)
-          color C.white
+          visibility hidden
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index a90832e..a565ee4 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -8,6 +8,7 @@ import Clay
 
 import Design.Color as C
 import Design.Helper
+import Design.Constants
 
 signInDesign :: Css
 signInDesign =
@@ -17,9 +18,10 @@ signInDesign =
     button ? do
       display block
       margin (em 5) auto (em 2) auto
-      iconButton C.blue C.white (em 2.5)
+      iconButton C.blue C.white (em 2.5) focusLighten
       fontSize (em 1.5)
       position relative
+      ".waitingServer" & ("cursor" -: "not-allowed")
 
     ".error" ? do
       textAlign (alignSide sideCenter)
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 2212e1a..7ca6483 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -191,8 +191,8 @@ m l PluralMonthlyCount =
 m l Income =
   T.concat
     [ case l of
-        English -> "You have a monthly net income of {1}"
-        French  -> "Votre revenu mensuel net est de {1}"
+        English -> "Monthly net income: {1}"
+        French  -> "Revenu mensuel net : {1}"
     ]
 
 m l NoIncome =