Responsive home page

19 files changed, 220 insertions, 114 deletions

diff --git a/README.md b/README.md
index 88cc739..3b3335d 100644
--- a/README.md
+++ b/README.md
@@ -22,8 +22,7 @@ npm start
 
 ## TODO
 
+- Income CRUD
 - Server error message
 - Dates after today most be forbidden
-- Income CRUD
-- Responsive design
 - Get rid of npm
diff --git a/src/client/elm/Dialog/AddPaymentButton/View.elm b/src/client/elm/Dialog/AddPaymentButton/View.elm
index 16616fe..585b1b7 100644
--- a/src/client/elm/Dialog/AddPaymentButton/View.elm
+++ b/src/client/elm/Dialog/AddPaymentButton/View.elm
@@ -62,7 +62,7 @@ addPaymentForm loggedData addPayment =
         ]
         [ htmlMap <| Form.textInput loggedData.translations addPayment "payment" "name"
         , htmlMap <| Form.textInput loggedData.translations addPayment "payment" "cost"
-        , if (Maybe.map .frequency <| Form.getOutput addPayment) == Just Punctual
+        , if (Form.getFieldAsString "frequency" addPayment).value == Just (toString Punctual)
             then htmlMap <| Form.textInput loggedData.translations addPayment "payment" "date"
             else text ""
         , htmlMap <| Form.radioInputs loggedData.translations addPayment "payment" "frequency" [ toString Punctual, toString Monthly ]
diff --git a/src/client/elm/LoggedIn/Home/Header/View.elm b/src/client/elm/LoggedIn/Home/Header/View.elm
index 6ddd846..95cef3c 100644
--- a/src/client/elm/LoggedIn/Home/Header/View.elm
+++ b/src/client/elm/LoggedIn/Home/Header/View.elm
@@ -36,25 +36,23 @@ import Utils.Tuple as Tuple
 
 view : LoggedData -> Home.Model -> Payments -> Frequency -> Html Msg
 view loggedData { search } payments frequency =
-  Html.div
-    [ class "header" ]
-    [ ExceedingPayers.view loggedData
-    , searchLine loggedData search frequency
-    , infos loggedData payments
-    ]
-
-searchLine : LoggedData -> Form String Home.Search -> Frequency -> Html Msg
-searchLine loggedData search frequency =
   let currentDate = Date.fromTime loggedData.currentTime
   in  Html.div
-        [ class "searchLine" ]
-        [ searchForm loggedData search
-        , AddPaymentButton.view
-            loggedData
-            (DialogModel.addPaymentInitial loggedData.translations currentDate frequency)
-            "AddPayment"
-            (text (getMessage "AddPayment" loggedData.translations))
-            Nothing
+        [ class "header" ]
+        [ div
+            [ class "payerAndAdd" ]
+            [ ExceedingPayers.view loggedData
+            , AddPaymentButton.view
+                loggedData
+                (DialogModel.addPaymentInitial loggedData.translations currentDate frequency)
+                "AddPayment"
+                (text (getMessage "AddPayment" loggedData.translations))
+                Nothing
+            ]
+        , Html.div
+            [ class "searchLine" ]
+            [ searchForm loggedData search ]
+        , infos loggedData payments
         ]
 
 searchForm : LoggedData -> Form String Home.Search -> Html Msg
@@ -78,7 +76,9 @@ infos loggedData payments =
               sum = paymentsSum loggedData.conf payments
           in  div
                 [ class "infos" ]
-                [ text <| getParamMessage [ count, sum ] "Worth" loggedData.translations
+                [ span
+                    [ class "total" ]
+                    [ text <| getParamMessage [ count, sum ] "Worth" loggedData.translations ]
                 , span
                     [ class "partition" ]
                     [ text <| paymentsPartition loggedData payments ]
diff --git a/src/client/elm/LoggedIn/Home/View/Paging.elm b/src/client/elm/LoggedIn/Home/View/Paging.elm
index 90ae522..5bcb827 100644
--- a/src/client/elm/LoggedIn/Home/View/Paging.elm
+++ b/src/client/elm/LoggedIn/Home/View/Paging.elm
@@ -60,7 +60,7 @@ firstPage homeModel =
         ]
     , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| 1)
     ]
-    [ FontAwesome.fast_backward grey 15 ]
+    [ FontAwesome.fast_backward grey 13 ]
 
 previousPage : HomeModel.Model -> Html Msg
 previousPage homeModel =
@@ -71,7 +71,7 @@ previousPage homeModel =
           then (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| homeModel.currentPage - 1)
           else Msg.NoOp
     ]
-    [ FontAwesome.backward grey 15 ]
+    [ FontAwesome.backward grey 13 ]
 
 nextPage : HomeModel.Model -> Int -> Html Msg
 nextPage homeModel maxPage =
@@ -82,7 +82,7 @@ nextPage homeModel maxPage =
           then (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| homeModel.currentPage + 1)
           else Msg.NoOp
     ]
-    [ FontAwesome.forward grey 15 ]
+    [ FontAwesome.forward grey 13 ]
 
 lastPage : HomeModel.Model -> Int -> Html Msg
 lastPage homeModel maxPage =
@@ -90,7 +90,7 @@ lastPage homeModel maxPage =
     [ class "page"
     , onClick (Msg.UpdateLoggedIn << LoggedInMsg.HomeMsg << HomeMsg.UpdatePage <| maxPage)
     ]
-    [ FontAwesome.fast_forward grey 15 ]
+    [ FontAwesome.fast_forward grey 13 ]
 
 paymentsPage : HomeModel.Model -> Int -> Html Msg
 paymentsPage homeModel page =
diff --git a/src/client/elm/LoggedIn/Home/View/Table.elm b/src/client/elm/LoggedIn/Home/View/Table.elm
index 05c9e06..429632c 100644
--- a/src/client/elm/LoggedIn/Home/View/Table.elm
+++ b/src/client/elm/LoggedIn/Home/View/Table.elm
@@ -131,7 +131,7 @@ paymentLine loggedData homeModel frequency payment =
               text ""
             else
               let dialogConfig =
-                    { className = "paymentDialog"
+                    { className = "deletePaymentDialog"
                     , title = getMessage "ConfirmPaymentDelete" loggedData.translations
                     , body = always <| text ""
                     , confirm = getMessage "Confirm" loggedData.translations
diff --git a/src/client/elm/LoggedIn/Income/View.elm b/src/client/elm/LoggedIn/Income/View.elm
index 9638ddc..2b69806 100644
--- a/src/client/elm/LoggedIn/Income/View.elm
+++ b/src/client/elm/LoggedIn/Income/View.elm
@@ -113,7 +113,7 @@ incomeView loggedData (incomeId, income) =
     , text "    −    "
     , text <| Format.price loggedData.conf income.amount
     , let dialogConfig =
-            { className = "incomeDialog"
+            { className = "deleteIncomeDialog"
             , title = getMessage "ConfirmIncomeDelete" loggedData.translations
             , body = always <| text ""
             , confirm = getMessage "Confirm" loggedData.translations
diff --git a/src/client/elm/Model/Payment.elm b/src/client/elm/Model/Payment.elm
index b08166e..b986148 100644
--- a/src/client/elm/Model/Payment.elm
+++ b/src/client/elm/Model/Payment.elm
@@ -28,7 +28,7 @@ import Model.Date exposing (dateDecoder)
 import Utils.List as List
 
 perPage : Int
-perPage = 8
+perPage = 7
 
 type alias Payments = List Payment
 
diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index 3395852..7d196cb 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -17,12 +17,6 @@ blockPercentWidth = 90
 blockPercentMargin :: Double
 blockPercentMargin = (100 - blockPercentWidth) / 2
 
-blockMarginBottom :: Size Abs
-blockMarginBottom = px 50
-
-rowHeightPx :: Integer
-rowHeightPx = 60
-
 inputHeight :: Integer
 inputHeight = 40
 
diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
index f0b8009..2320c45 100644
--- a/src/server/Design/Dialog.hs
+++ b/src/server/Design/Dialog.hs
@@ -4,10 +4,18 @@ module Design.Dialog
   ( design
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 design :: Css
 design = do
 
+  ".content" ? do
+    minWidth (px 270)
+
   ".paymentDialog" ? do
     ".radioGroup" ? ".title" ? display none
+
+  ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
+    h1 ? marginBottom (em 1.5)
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index caee8ff..3043125 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -25,6 +25,7 @@ design = do
     marginTop (px (-10))
 
     input ? do
+      width (pct 100)
       position relative
       zIndex inputZIndex
       backgroundColor transparent
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index dfe19b0..26c1a42 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -15,9 +15,10 @@ import qualified Design.Form as Form
 import qualified Design.Dialog as Dialog
 import qualified Design.Tooltip as Tooltip
 
-import Design.Color as Color
-import Design.Helper as Helper
-import Design.Constants as Constants
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Media as Media
 
 globalDesign :: Text
 globalDesign = renderWith compact [] global
@@ -35,13 +36,25 @@ global = do
   body ? do
     minWidth (px 320)
     fontFamily ["Cantarell"] [sansSerif]
+    Media.tablet $ do
+      fontSize (px 15)
+      button ? fontSize (px 15)
+      input ? fontSize (px 15)
+    Media.mobile $ do
+      fontSize (px 14)
+      button ? fontSize (px 14)
+      input ? fontSize (px 14)
 
   a ? cursor pointer
 
   h1 ? do
-    fontSize (px 24)
     color Color.chestnutRose
-    "margin-bottom" -: "3vh"
+    marginBottom (em 1)
+    lineHeight (em 1.2)
+
+    Media.desktop $ fontSize (px 24)
+    Media.tablet $ fontSize (px 22)
+    Media.mobile $ fontSize (px 20)
 
   ul ? do
     "margin-bottom" -: "3vh"
@@ -57,7 +70,7 @@ global = do
         "margin-top" -: "2vh"
 
   ".dialog" ? ".content" ? button ? do
-    ".confirm" & Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-    ".undo" & Helper.defaultButton Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
 
   svg ? height (pct 100)
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 4e31891..8feac64 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,7 +8,6 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import Design.Constants
 import Design.Color as Color
 import qualified Design.Media as Media
 
@@ -18,10 +17,12 @@ design = do
   display flex
   "flex-wrap" -: "wrap"
   lineHeightMedia
-  marginBottom blockMarginBottom
   position relative
   backgroundColor Color.chestnutRose
   color Color.white
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
+  Media.mobile $ marginBottom (em 1.5)
 
   ".title" <> ".item" ? headerPadding
 
@@ -62,10 +63,12 @@ design = do
 
 lineHeightMedia :: Css
 lineHeightMedia = do
+  Media.desktop $ lineHeight (px 80)
+  Media.tablet $ lineHeight (px 65)
   Media.mobile $ lineHeight (px 50)
-  Media.tabletDesktop $ lineHeight (px 80)
 
 heightMedia :: Css
 heightMedia = do
+  Media.desktop $ height (px 80)
+  Media.tablet $ height (px 65)
   Media.mobile $ height (px 50)
-  Media.tabletDesktop $ height (px 80)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index c8b3070..36cedb0 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -2,8 +2,8 @@
 
 module Design.Helper
   ( clearFix
-  , defaultButton
-  , defaultInput
+  , button
+  , input
   , iconButton
   , centeredWithMargin
   , verticalCentering
@@ -11,7 +11,7 @@ module Design.Helper
 
 import Prelude hiding (span)
 
-import Clay
+import Clay hiding (button, input)
 
 import Data.Monoid ((<>))
 
@@ -26,8 +26,8 @@ clearFix =
     display D.table
     clear both
 
-defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
-defaultButton backgroundCol textCol h focusOp = do
+button :: Color -> Color -> Size a -> (Color -> Color) -> Css
+button backgroundCol textCol h focusOp = do
   backgroundColor backgroundCol
   padding (px 0) (px 10) (px 0) (px 10)
   color textCol
@@ -42,7 +42,7 @@ defaultButton backgroundCol textCol h focusOp = do
 
 iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
 iconButton backgroundCol textCol h focusOp = do
-  defaultButton backgroundCol textCol h focusOp
+  button backgroundCol textCol h focusOp
   i <> span ? do
     height h
     lineHeight h
@@ -53,8 +53,8 @@ iconButton backgroundCol textCol h focusOp = do
     marginLeft (px 15)
     marginRight (px 20)
 
-defaultInput :: Integer -> Css
-defaultInput h = do
+input :: Integer -> Css
+input h = do
   height (px h)
   padding (px 10) (px 10) (px 10) (px 10)
   borderRadius radius radius radius radius
diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs
index 9008a95..5fd2d79 100644
--- a/src/server/Design/LoggedIn/Home/Header.hs
+++ b/src/server/Design/LoggedIn/Home/Header.hs
@@ -4,6 +4,8 @@ module Design.LoggedIn.Home.Header
   ( design
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 import Design.Constants
@@ -11,46 +13,72 @@ import Design.Constants
 import qualified Design.Helper as Helper
 import qualified Design.Color as Color
 import qualified Design.Constants as Constants
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  marginBottom blockMarginBottom
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
   marginLeft (pct blockPercentMargin)
   marginRight (pct blockPercentMargin)
 
-  ".exceedingPayers" ? do
-    backgroundColor Color.mossGreen
-    padding (px 10) (px 10) (px 10) (px 10)
-    borderRadius (px 5) (px 5) (px 5) (px 5)
-    color Color.white
+  ".payerAndAdd" ? do
+    Media.tabletDesktop $ display flex
     marginBottom (em 1)
 
-    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+    ".exceedingPayers" ? do
+      backgroundColor Color.mossGreen
+      borderRadius (px 5) (px 5) (px 5) (px 5)
+      color Color.white
+      lineHeight (px Constants.inputHeight)
+      paddingLeft (px 10)
+      paddingRight (px 10)
+
+      Media.tabletDesktop $ do
+        "flex-grow" -: "1"
+        marginRight (px 15)
+
+      Media.mobile $ do
+        marginBottom (em 1)
+        textAlign (alignSide sideCenter)
+
+      ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+
+      ".userName" ? marginRight (px 8)
 
-    ".userName" ? marginRight (px 5)
+    ".addPayment" ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.mobile $ width (pct 100)
 
   ".searchLine" ? do
     marginBottom (em 1)
     form ? do
-      display inlineBlock
+      Media.mobile $ textAlign (alignSide sideCenter)
 
       ".textInput" ? do
         display inlineBlock
-        marginRight (px 30)
         marginBottom (px 0)
 
+        Media.tabletDesktop $ marginRight (px 30)
+        Media.mobile $ do
+          marginBottom (em 1)
+          width (pct 100)
+
       ".radioGroup" ? do
         display inlineBlock
         marginBottom (px 0)
         ".title" ? display none
 
-    ".addPayment" ? do
-      Helper.defaultButton Color.chestnutRose Color.white (px 47) Constants.focusLighten
-      float floatRight
-
   ".infos" ? do
-    lineHeight (px Constants.inputHeight)
+    Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
+    Media.mobile $ lineHeight (px 25)
+
+    ".total" <> ".partition" ? do
+      Media.mobileTablet $ display block
+      Media.mobile $ do
+        fontSize (pct 90)
+        textAlign (alignSide sideCenter)
 
     ".partition" ? do
       color Color.dustyGray
-      marginLeft (px 15)
+      Media.desktop $ marginLeft (px 15)
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 1d5899f..71f3254 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,25 +6,47 @@ module Design.LoggedIn.Home.Pages
 
 import Clay
 
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  padding (px 40) (px 30) (px 30) (px 30)
-  textAlign (alignSide (sideCenter))
-  clearFix
+  textAlign (alignSide sideCenter)
+  Helper.clearFix
+
+  Media.desktop $ do
+    padding (px 40) (px 30) (px 30) (px 30)
+
+  Media.tablet $ do
+    padding (px 30) (px 30) (px 30) (px 30)
+
+  Media.mobile $ do
+    padding (px 20) (px 0) (px 20) (px 0)
+    lineHeight (px 40)
 
   ".page" ? do
-    defaultButton Color.white Color.dustyGray (px 50) focusDarken
     display inlineBlock
-    border solid (px 2) Color.dustyGray
-    marginRight (px 10)
-    paddingLeft (px 10)
-    paddingRight (px 10)
     fontWeight bold
 
+    Media.desktop $ do
+      Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken
+
+    Media.tabletDesktop $ do
+      border solid (px 2) Color.dustyGray
+      marginRight (px 10)
+
+    Media.tablet $ do
+      Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
+      fontSize (px 15)
+
+    Media.mobile $ do
+      Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
+      fontSize (px 12)
+      border solid (px 1) Color.dustyGray
+      marginRight (px 5)
+
     ":not(.current)" & cursor pointer
 
     ".current" & do
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 3f55207..3358f5d 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -11,7 +11,6 @@ import qualified Clay.Display as D
 
 import Design.Color as Color
 import qualified Design.Media as Media
-import Design.Constants as Constants
 
 design :: Css
 design = do
@@ -20,47 +19,86 @@ design = do
     textAlign (alignSide sideCenter)
 
   ".lines" ? do
-    display D.table
+    Media.tabletDesktop $ display D.table
     width (pct 100)
     textAlign (alignSide (sideCenter))
 
-    ".header" <> ".row" ? display tableRow
-    let headerHeight = (px 70)
+    ".header" <> ".row" ? do
+      Media.tabletDesktop $ display tableRow
 
     ".header" ? do
-      fontWeight bold
-      backgroundColor Color.gothic
-      color Color.white
-      fontSize (px 18)
-      height headerHeight
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 70)
+
+      Media.tabletDesktop $ do
+        backgroundColor Color.gothic
+        color Color.white
+
+      Media.tablet $ do
+        fontSize (px 16)
+        height (px 60)
+
+      Media.mobile $ do
+        display none
 
     ".row" ? do
-      fontSize (px 18)
-      height (px rowHeightPx)
+      nthChild "even" & backgroundColor Color.wildSand
+
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 60)
 
-      nthChild "odd" & do
-        backgroundColor Color.wildSand
+      Media.tablet $ do
+        height (px 50)
+
+      Media.mobile $ do
+        lineHeight (px 25)
+        paddingTop (px 10)
+        paddingBottom (px 10)
 
     ".cell" ? do
-      display tableCell
+      Media.tabletDesktop $ display tableCell
       position relative
       verticalAlign middle
-      ".category" & width (pct 36)
+
+      ".category" & do
+        Media.tabletDesktop $ width (pct 36)
+        Media.mobile $ do
+          fontSize (px 20)
+          lineHeight (px 30)
+          color Color.gothic
+
       ".cost" & do
-        width (pct 15)
+        Media.tabletDesktop $ width (pct 15)
         ".refund" & color Color.mossGreen
-      ".user" & width (pct 20)
+
+      ".user" & do
+        Media.tabletDesktop $ width (pct 20)
+
       ".date" & do
-        width (pct 20)
-        Media.mobileTablet $ do
+        Media.tabletDesktop $ width (pct 20)
+        Media.desktop $ do
+          ".shortDate" ? display none
+          ".longDate" ? display inline
+        Media.tablet $ do
           ".shortDate" ? display inline
           ".longDate" ? display none
-        Media.desktop $ do
+        Media.mobile $ do
           ".shortDate" ? display none
           ".longDate" ? display inline
+          marginBottom (em 0.5)
+
       ".cell.button" & do
         position relative
-        width (pct 3)
         textAlign (alignSide sideCenter)
-        button # hover ? "svg path" ? do
-          "fill" -: "rgb(237, 122, 116)"
+        button ? do
+          padding (px 10) (px 10) (px 10) (px 10)
+          hover & "svg path" ? do
+            "fill" -: "rgb(237, 122, 116)"
+
+        Media.tabletDesktop $ width (pct 3)
+
+        Media.mobile $ do
+          display inlineBlock
+          button ? display flex
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
index 84ae521..5773e04 100644
--- a/src/server/Design/LoggedIn/Income.hs
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -22,7 +22,7 @@ design = do
     ".textInput" ? marginRight (px 30)
 
     button # ".add" ? do
-      Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       marginTop (px 3)
 
   ul # ".incomes" ? button ?
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index 2856016..75f2f98 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -6,9 +6,9 @@ module Design.SignIn
 
 import Clay
 
-import Design.Color as Color
-import Design.Helper
-import Design.Constants (focusLighten)
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
 
 design :: Css
 design = do
@@ -21,13 +21,13 @@ design = do
     marginRight auto
 
     input ? do
-      defaultInput inputHeight
+      Helper.input inputHeight
       display block
       width (pct 100)
       marginBottom (px 10)
 
     button ? do
-      iconButton Color.gothic Color.white (px inputHeight) focusLighten
+      Helper.iconButton Color.gothic Color.white (px inputHeight) Constants.focusLighten
       display block
       width (pct 100)
       fontSize (em 1.2)
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 9b018f6..5dcf428 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -105,7 +105,7 @@ m l SignInMail =
               ]
           , "{2}"
           , ""
-          , "À très vite !"
+          , "À très vite !"
           ]
     )
 
@@ -339,8 +339,8 @@ m l PaymentMonthly =
 
 m l ConfirmPaymentDelete =
   case l of
-    English -> "Are you sure to delete this payment ?"
-    French  -> "Voulez-vous vraiment supprimer ce paiement ?"
+    English -> "Are you sure to delete this payment ?"
+    French  -> "Voulez-vous vraiment supprimer ce paiement ?"
 
 m l Edit =
   case l of
@@ -391,8 +391,8 @@ m l IncomeAmount =
 
 m l ConfirmIncomeDelete =
   case l of
-    English -> "Are you sure to delete this income ?"
-    French  -> "Voulez-vous vraiment supprimer ce revenu ?"
+    English -> "Are you sure to delete this income ?"
+    French  -> "Voulez-vous vraiment supprimer ce revenu ?"
 
 m l Add =
   case l of