Merge branch 'with-ghcjs' into 'master'

Use Haskell on the frontend

See merge request guyonvarch/shared-cost!2

24 files changed, 1178 insertions, 0 deletions

diff --git a/server/src/Design/Appearing.hs b/server/src/Design/Appearing.hs
new file mode 100644
index 0000000..79b94b3
--- /dev/null
+++ b/server/src/Design/Appearing.hs
@@ -0,0 +1,25 @@
+module Design.Appearing
+  ( design
+  ) where
+
+import           Clay
+
+design :: Css
+design = do
+
+  appearKeyframe
+
+  ".g-Appearing" ? do
+    appearAnimation
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.2)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
+  ]
diff --git a/server/src/Design/Color.hs b/server/src/Design/Color.hs
new file mode 100644
index 0000000..e7f5aec
--- /dev/null
+++ b/server/src/Design/Color.hs
@@ -0,0 +1,40 @@
+module Design.Color where
+
+import           Clay
+import qualified Clay.Color as C
+import           Data.Text  (Text)
+
+-- http://chir.ag/projects/name-that-color/#969696
+
+white :: C.Color
+white = C.white
+
+black :: C.Color
+black = C.black
+
+chestnutRose :: C.Color
+chestnutRose = C.rgb 207 92 86
+
+unknown :: C.Color
+unknown = C.rgb 86 92 207
+
+mossGreen :: C.Color
+mossGreen = C.rgb 159 210 165
+
+gothic :: C.Color
+gothic = C.rgb 108 162 164
+
+negroni :: C.Color
+negroni = C.rgb 255 223 196
+
+wildSand :: C.Color
+wildSand = C.rgb 245 245 245
+
+silver :: C.Color
+silver = C.rgb 200 200 200
+
+dustyGray :: C.Color
+dustyGray = C.rgb 150 150 150
+
+toString :: C.Color -> Text
+toString = plain . unValue . value
diff --git a/server/src/Design/Constants.hs b/server/src/Design/Constants.hs
new file mode 100644
index 0000000..a3123d9
--- /dev/null
+++ b/server/src/Design/Constants.hs
@@ -0,0 +1,27 @@
+module Design.Constants where
+
+import           Clay
+
+iconFontSize :: Size LengthUnit
+iconFontSize = px 32
+
+radius :: Size LengthUnit
+radius = px 3
+
+blockPadding :: Size LengthUnit
+blockPadding = px 15
+
+blockPercentWidth :: Double
+blockPercentWidth = 90
+
+blockPercentMargin :: Double
+blockPercentMargin = (100 - blockPercentWidth) / 2
+
+inputHeight :: Double
+inputHeight = 40
+
+focusLighten :: Color -> Color
+focusLighten baseColor = baseColor +. 20
+
+focusDarken :: Color -> Color
+focusDarken baseColor = baseColor -. 20
diff --git a/server/src/Design/Errors.hs b/server/src/Design/Errors.hs
new file mode 100644
index 0000000..9f435eb
--- /dev/null
+++ b/server/src/Design/Errors.hs
@@ -0,0 +1,53 @@
+module Design.Errors
+  ( design
+  ) where
+
+import           Clay
+
+import           Design.Color as Color
+
+design :: Css
+design = do
+  position fixed
+  top (px 20)
+  left (pct 50)
+  "transform" -: "translateX(-50%)"
+  margin (px 0) (px 0) (px 0) (px 0)
+  disapearKeyframes
+
+  ".error" ? do
+    disapearAnimation
+    let errorColor = Color.chestnutRose -. 15
+    color errorColor
+    border solid (px 2) errorColor
+    backgroundColor Color.white
+    borderRadius (px 5) (px 5) (px 5) (px 5)
+    padding (px 5) (px 5) (px 5) (px 5)
+
+    before & display none
+
+disapearAnimation :: Css
+disapearAnimation = do
+  animationName "disapear"
+  animationDelay (sec 5)
+  animationDuration (sec 1)
+  animationFillMode forwards
+
+disapearKeyframes :: Css
+disapearKeyframes = keyframes
+  "disapear"
+  [ ( 10
+    , do
+        opacity 0
+        height (px 40)
+        lineHeight (px 40)
+        marginBottom (px 10)
+    )
+  , ( 100
+    , do
+        opacity 0
+        height (px 0)
+        lineHeight (px 0)
+        marginBottom (px 0)
+    )
+  ]
diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
new file mode 100644
index 0000000..5713bfe
--- /dev/null
+++ b/server/src/Design/Form.hs
@@ -0,0 +1,101 @@
+module Design.Form
+  ( design
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay
+
+import           Design.Color as Color
+
+design :: Css
+design = do
+
+  let inputHeight = 30
+  let inputTop = 22
+  let inputPaddingBottom = 3
+
+  ".textInput" ? do
+    position relative
+    marginBottom (em 2)
+    paddingTop (px inputTop)
+    marginTop (px (-10))
+
+    input ? do
+      width (pct 100)
+      position relative
+      backgroundColor transparent
+      paddingBottom (px inputPaddingBottom)
+      paddingRight (px 14) -- Space for the delete icon
+      borderStyle none
+      borderBottom solid (px 1) Color.dustyGray
+      marginBottom (px 5)
+      height (px inputHeight)
+      lineHeight (px inputHeight)
+      focus & do
+        borderWidth (px 2)
+        paddingBottom (px $ inputPaddingBottom - 1)
+
+    ".label" ? do
+      zIndex (-1)
+      color Color.silver
+      lineHeight (px inputHeight)
+      position absolute
+      top (px inputTop)
+      left (px 0)
+      transition "all" (sec 0.2) easeInOut (sec 0)
+
+    button ? do
+      position absolute
+      right (px 0)
+      top (px 27)
+      svg ? "path" ?
+        ("fill" -: Color.toString Color.silver)
+      hover & svg ? "path" ?
+        ("fill" -: Color.toString (Color.silver -. 25))
+
+    (input # ".filled" |+ ".label") <> (input # focus |+ ".label") ? do
+      top (px 0)
+      fontSize (pct 80)
+
+    ".error" & do
+      input ? do
+        borderBottomColor Color.chestnutRose
+
+      ".errorMessage" ? do
+        position absolute
+        color Color.chestnutRose
+        fontSize (pct 80)
+
+  ".colorInput" ? do
+    display flex
+    alignItems center
+    marginBottom (em 1.5)
+
+    input ? do
+      borderColor transparent
+      backgroundColor transparent
+
+  ".selectInput" ? do
+
+    ".label" ? do
+      color Color.silver
+      display block
+      marginBottom (px 10)
+      fontSize (pct 80)
+
+    select ? do
+      width (pct 100)
+      backgroundColor Color.white
+      border solid (px 1) Color.silver
+      sym borderRadius (px 3)
+      sym2 padding (px 5) (px 8)
+      option ? sym2 padding (px 5) (px 8)
+      focus & backgroundColor Color.wildSand
+
+    ".error" & do
+      select ? borderColor Color.chestnutRose
+      ".errorMessage" ? do
+        color Color.chestnutRose
+        fontSize (pct 80)
+        marginTop (em 0.5)
diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
new file mode 100644
index 0000000..c67db7c
--- /dev/null
+++ b/server/src/Design/Global.hs
@@ -0,0 +1,165 @@
+module Design.Global
+  ( globalDesign
+  ) where
+
+import           Clay
+import           Clay.Color       as C
+import           Data.Text.Lazy   (Text)
+
+import qualified Design.Appearing as Appearing
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Errors    as Errors
+import qualified Design.Form      as Form
+import qualified Design.Helper    as Helper
+import qualified Design.Loadable  as Loadable
+import qualified Design.Media     as Media
+import qualified Design.Modal     as Modal
+import qualified Design.Tooltip   as Tooltip
+import qualified Design.Views     as Views
+
+globalDesign :: Text
+globalDesign = renderWith compact [] global
+
+global :: Css
+global = do
+  ".errors" ? Errors.design
+  Appearing.design
+  Modal.design
+  ".tooltip" ? Tooltip.design
+  Views.design
+  Form.design
+  Loadable.design
+
+  spinKeyframes
+  appearKeyframe
+
+  html ? do
+    height (pct 100)
+
+  "g-Body--Modal" ?
+    overflowY hidden
+
+  body ? do
+    position relative
+    minWidth (px 320)
+    height (pct 100)
+    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)
+
+  ".app" ? do
+    appearAnimation
+    display flex
+    height (pct 100)
+    flexDirection column
+
+  -- "main" ?
+  --   appearAnimation
+
+  ".pageSpinner" ? do
+    display flex
+    alignItems center
+    justifyContent center
+    flexGrow 1
+
+  ".spinner" ? do
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    height (pct 100)
+    paddingBottom (pct 10)
+
+    before & do
+      display block
+      content (stringContent "")
+      width (px 50)
+      height (px 50)
+      border solid (px 3) (C.setA 0.3 Color.chestnutRose)
+      sym borderRadius (pct 50)
+      borderTopColor Color.chestnutRose
+      spinKeyframes
+      spinAnimation
+
+  a ? cursor pointer
+
+  input ? fontSize inherit
+
+  h1 ? do
+    color Color.chestnutRose
+    lineHeight (em 1.3)
+
+    Media.desktop $ fontSize (px 24)
+    Media.tablet $ fontSize (px 22)
+    Media.mobile $ fontSize (px 20)
+
+  ul ? do
+    "margin-top" -: "1vh"
+    "margin-bottom" -: "3vh"
+    "margin-left" -: "1vh"
+    li <? do
+      "margin-bottom" -: "2vh"
+      before & do
+        content (stringContent "• ")
+        color Color.chestnutRose
+        "margin-right" -: "0.3vw"
+      ul <? do
+        "margin-left" -: "3vh"
+        "margin-top" -: "2vh"
+
+  ".dialog" ? ".content" ? button ? do
+    ".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)
+
+  button ? do
+    position relative
+
+    ".content" ? do
+      display flex
+
+    svg # ".loader" ? do
+      display none
+      position absolute
+
+    ".waiting" & do
+      ".content" ? do
+        opacity 0
+      svg # ".loader" ? do
+        display block
+        spinAnimation
+
+  select ? cursor pointer
+
+spinAnimation :: Css
+spinAnimation = do
+  animationName "rotate"
+  animationDuration (sec 1)
+  animationTimingFunction easeInOut
+  animationIterationCount infinite
+
+spinKeyframes :: Css
+spinKeyframes = keyframes
+  "rotate"
+  [ (100, "transform" -: "rotate(360deg)")
+  ]
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.2)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
+  ]
diff --git a/server/src/Design/Helper.hs b/server/src/Design/Helper.hs
new file mode 100644
index 0000000..e586d56
--- /dev/null
+++ b/server/src/Design/Helper.hs
@@ -0,0 +1,48 @@
+module Design.Helper
+  ( clearFix
+  , button
+  , centeredWithMargin
+  , verticalCentering
+  ) where
+
+import           Prelude          hiding (span)
+
+import           Clay             hiding (button)
+
+import           Design.Constants
+
+clearFix :: Css
+clearFix =
+  after & do
+    content (stringContent "")
+    display displayTable
+    clear both
+
+button :: Color -> Color -> Size a -> (Color -> Color) -> Css
+button backgroundCol textCol h focusOp = do
+  display flex
+  alignItems center
+  justifyContent center
+  backgroundColor backgroundCol
+  padding (px 0) (px 10) (px 0) (px 10)
+  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)
+
+centeredWithMargin :: Css
+centeredWithMargin = do
+  width (pct blockPercentWidth)
+  marginLeft auto
+  marginRight auto
+
+verticalCentering :: Css
+verticalCentering = do
+  position absolute
+  top (pct 50)
+  "transform" -: "translateY(-50%)"
diff --git a/server/src/Design/Loadable.hs b/server/src/Design/Loadable.hs
new file mode 100644
index 0000000..6b13f2d
--- /dev/null
+++ b/server/src/Design/Loadable.hs
@@ -0,0 +1,29 @@
+module Design.Loadable
+  ( design
+  ) where
+
+import           Clay
+
+design :: Css
+design = do
+  ".g-Loadable" ? do
+    position relative
+    width (pct 100)
+    height (pct 100)
+
+  ".g-Loadable__Spinner" ? do
+    position absolute
+    top (px 0)
+    left (px 0)
+    width (pct 100)
+    height (pct 100)
+    display none
+
+  ".g-Loadable__Spinner--Loading" ? do
+    display block
+
+  ".g-Loadable__Content" ?
+    transition "opacity" (sec 0.4) ease (sec 0)
+
+  ".g-Loadable__Content--Loading" ?
+    opacity 0.5
diff --git a/server/src/Design/Media.hs b/server/src/Design/Media.hs
new file mode 100644
index 0000000..19a3b8c
--- /dev/null
+++ b/server/src/Design/Media.hs
@@ -0,0 +1,36 @@
+module Design.Media
+  ( mobile
+  , mobileTablet
+  , tablet
+  , tabletDesktop
+  , desktop
+  ) where
+
+import           Clay            hiding (query)
+import qualified Clay
+import qualified Clay.Media      as Media
+import           Clay.Stylesheet (Feature)
+
+mobile :: Css -> Css
+mobile = query [Media.maxWidth mobileTabletLimit]
+
+mobileTablet :: Css -> Css
+mobileTablet = query [Media.maxWidth tabletDesktopLimit]
+
+tablet :: Css -> Css
+tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]
+
+tabletDesktop :: Css -> Css
+tabletDesktop = query [Media.minWidth mobileTabletLimit]
+
+desktop :: Css -> Css
+desktop = query [Media.minWidth tabletDesktopLimit]
+
+query :: [Feature] -> Css -> Css
+query = Clay.query Media.screen
+
+mobileTabletLimit :: Size LengthUnit
+mobileTabletLimit = (px 520)
+
+tabletDesktopLimit :: Size LengthUnit
+tabletDesktopLimit = (px 950)
diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
new file mode 100644
index 0000000..1195e10
--- /dev/null
+++ b/server/src/Design/Modal.hs
@@ -0,0 +1,69 @@
+module Design.Modal
+  ( design
+  ) where
+
+import           Clay
+import           Data.Monoid              ((<>))
+
+import qualified Design.View.Payment.Form as Form
+
+design :: Css
+design = do
+
+  appearKeyframe
+
+  ".g-Modal" ? do
+    display none
+    appearAnimation
+    transition "all" (sec 0.2) ease (sec 0)
+    opacity 0
+
+  ".g-Modal--Show" & do
+    display block
+    opacity 1
+
+  ".g-Modal--Hiding" & do
+    display block
+
+  ".g-Modal__Curtain" ? do
+    position fixed
+    top (px 0)
+    left (px 0)
+    width (pct 100)
+    height (pct 100)
+    backgroundColor (rgba 0 0 0 0.6)
+    zIndex 1
+
+  ".g-Modal__Content" ? do
+    minWidth (px 300)
+    position fixed
+    top (pct 25)
+    left (pct 50)
+    "transform" -: "translate(-50%, -25%)"
+    zIndex 1
+    backgroundColor white
+    sym borderRadius (px 5)
+    boxShadow . pure . bsColor (rgba 0 0 0 0.5) $ shadowWithBlur (px 0) (px 0) (px 15)
+
+    ".form" ? Form.design
+
+  ".paymentModal" & do
+    ".radioGroup" ? ".title" ? display none
+    ".selectInput" ? do
+      select ? width (pct 100)
+      marginBottom (em 1)
+
+  ".deletePaymentModal" <> ".deleteIncomeModal" ? do
+    h1 ? marginBottom (em 1.5)
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.15)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
+  ]
diff --git a/server/src/Design/Tooltip.hs b/server/src/Design/Tooltip.hs
new file mode 100644
index 0000000..eef804e
--- /dev/null
+++ b/server/src/Design/Tooltip.hs
@@ -0,0 +1,14 @@
+module Design.Tooltip
+  ( design
+  ) where
+
+import           Clay
+
+import           Design.Color as Color
+
+design :: Css
+design = do
+  backgroundColor Color.mossGreen
+  borderRadius (px 5) (px 5) (px 5) (px 5)
+  padding (px 5) (px 5) (px 5) (px 5)
+  color Color.white
diff --git a/server/src/Design/View/ConfirmDialog.hs b/server/src/Design/View/ConfirmDialog.hs
new file mode 100644
index 0000000..410d4d8
--- /dev/null
+++ b/server/src/Design/View/ConfirmDialog.hs
@@ -0,0 +1,36 @@
+module Design.View.ConfirmDialog
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".confirm" ? do
+    ".confirmHeader" ? do
+      backgroundColor Color.chestnutRose
+      fontSize (px 18)
+      color Color.white
+      sym padding (px 20)
+      textAlign (alignSide sideCenter)
+      borderRadius (px 5) (px 5) (px 0) (px 0)
+
+    ".confirmContent" ? do
+      sym padding (px 20)
+
+      ".buttons" ? do
+        display flex
+        justifyContent spaceAround
+        marginTop (em 1.5)
+
+        ".confirm" ?
+          Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+        ".undo" ?
+          Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+        (".confirm" <> ".undo") ?
+          width (px 90)
diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
new file mode 100644
index 0000000..609d8fc
--- /dev/null
+++ b/server/src/Design/View/Header.hs
@@ -0,0 +1,78 @@
+module Design.View.Header
+  ( design
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay
+
+import           Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  let headerPadding = "padding" -: "0 20px"
+  display flex
+  "flex-wrap" -: "wrap"
+  lineHeightMedia
+  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
+
+  ".title" ? do
+    textAlign (alignSide sideLeft)
+
+    Media.mobile $ fontSize (px 22)
+    Media.mobileTablet $ width (pct 100)
+    Media.tabletDesktop $ do
+      display inlineBlock
+      fontSize (px 35)
+
+  ".item" ? do
+    display inlineBlock
+    transition "background-color" (ms 50) easeIn (sec 0)
+    ".current" & backgroundColor (Color.chestnutRose -. 20)
+    Media.mobile $ fontSize (px 13)
+
+  (".item" # hover) <> (".item" # focus) ?
+    backgroundColor (Color.chestnutRose +. 10)
+
+  (".item.current" # hover) <> (".item.current" # focus) ?
+    backgroundColor (Color.chestnutRose -. 10)
+
+  ".nameSignOut" ? do
+    display flex
+    heightMedia
+    position absolute
+    top (px 0)
+    right (px 0)
+
+    ".name" ? do
+      Media.mobile $ display none
+      Media.tabletDesktop $ headerPadding
+
+    ".signOut" ? do
+      display flex
+      justifyContent center
+      alignItems center
+      svg ? do
+        Media.tabletDesktop $ width (px 30)
+        Media.mobile $ width (px 20)
+        "path" ? ("fill" -: "white")
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+  Media.desktop $ lineHeight (px 80)
+  Media.tablet $ lineHeight (px 65)
+  Media.mobile $ lineHeight (px 50)
+
+heightMedia :: Css
+heightMedia = do
+  Media.desktop $ height (px 80)
+  Media.tablet $ height (px 65)
+  Media.mobile $ height (px 50)
diff --git a/server/src/Design/View/NotFound.hs b/server/src/Design/View/NotFound.hs
new file mode 100644
index 0000000..150c6fc
--- /dev/null
+++ b/server/src/Design/View/NotFound.hs
@@ -0,0 +1,21 @@
+module Design.View.NotFound
+  ( design
+  ) where
+
+import           Clay
+import           Prelude      hiding (rem)
+
+import qualified Design.Color as Color
+
+design :: Css
+design = do
+
+  marginLeft (rem 3)
+
+  ".link" ? do
+    display block
+    marginTop (rem 1)
+    color Color.chestnutRose
+    textDecoration underline
+    hover &
+      color (Color.chestnutRose +. 15)
diff --git a/server/src/Design/View/Pages.hs b/server/src/Design/View/Pages.hs
new file mode 100644
index 0000000..1482ef4
--- /dev/null
+++ b/server/src/Design/View/Pages.hs
@@ -0,0 +1,55 @@
+module Design.View.Pages
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
+
+design :: Css
+design =
+  ".pages" ? do
+    display flex
+    justifyContent center
+
+    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)
+
+    svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)
+
+    ".page" ? do
+      display inlineBlock
+      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
+        borderColor Color.chestnutRose
+        color Color.chestnutRose
diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
new file mode 100644
index 0000000..d563f5d
--- /dev/null
+++ b/server/src/Design/View/Payment.hs
@@ -0,0 +1,13 @@
+module Design.View.Payment
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.View.Payment.HeaderForm  as HeaderForm
+import qualified Design.View.Payment.HeaderInfos as HeaderInfos
+
+design :: Css
+design = do
+  HeaderForm.design
+  HeaderInfos.design
diff --git a/server/src/Design/View/Payment/Add.hs b/server/src/Design/View/Payment/Add.hs
new file mode 100644
index 0000000..5ecae7a
--- /dev/null
+++ b/server/src/Design/View/Payment/Add.hs
@@ -0,0 +1,35 @@
+module Design.View.Payment.Add
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".addHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym2 padding (px 20) (px 30)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".addContent" ? do
+    sym2 padding (px 20) (px 30)
+
+    ".buttons" ? do
+      display flex
+      justifyContent spaceAround
+      marginTop (em 1.5)
+
+      ".confirm" ?
+        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      ".undo" ?
+        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)
diff --git a/server/src/Design/View/Payment/Form.hs b/server/src/Design/View/Payment/Form.hs
new file mode 100644
index 0000000..aada12b
--- /dev/null
+++ b/server/src/Design/View/Payment/Form.hs
@@ -0,0 +1,35 @@
+module Design.View.Payment.Form
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".formHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym2 padding (px 20) (px 30)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".formContent" ? do
+    sym2 padding (px 20) (px 30)
+
+    ".buttons" ? do
+      display flex
+      justifyContent spaceAround
+      marginTop (em 1.5)
+
+      ".confirm" ?
+        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      ".undo" ?
+        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)
diff --git a/server/src/Design/View/Payment/HeaderForm.hs b/server/src/Design/View/Payment/HeaderForm.hs
new file mode 100644
index 0000000..6081443
--- /dev/null
+++ b/server/src/Design/View/Payment/HeaderForm.hs
@@ -0,0 +1,40 @@
+module Design.View.Payment.HeaderForm
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
+
+design :: Css
+design = do
+
+  ".g-PaymentHeaderForm" ? do
+    marginBottom (em 2)
+    marginLeft (pct Constants.blockPercentMargin)
+    marginRight (pct Constants.blockPercentMargin)
+    display flex
+    justifyContent spaceBetween
+    alignItems center
+    Media.mobile $ flexDirection column
+
+    ".textInput" ? do
+      display inlineBlock
+      marginBottom (px 0)
+
+      Media.tabletDesktop $ marginRight (px 30)
+      Media.mobile $ do
+        marginBottom (em 1)
+        width (pct 100)
+
+    ".selectInput" ? do
+      Media.tabletDesktop $ display inlineBlock
+      Media.mobile $ marginBottom (em 2)
+
+    ".addPayment" ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.mobile $ width (pct 100)
+      flexShrink 0
diff --git a/server/src/Design/View/Payment/HeaderInfos.hs b/server/src/Design/View/Payment/HeaderInfos.hs
new file mode 100644
index 0000000..acb393b
--- /dev/null
+++ b/server/src/Design/View/Payment/HeaderInfos.hs
@@ -0,0 +1,50 @@
+module Design.View.Payment.HeaderInfos
+  ( design
+  ) where
+
+import           Data.Monoid      ((<>))
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Media     as Media
+
+design :: Css
+design = do
+
+  ".g-PaymentHeaderInfos" ? do
+    Media.desktop $ marginBottom (em 2)
+    Media.mobileTablet $ marginBottom (em 1)
+    marginLeft (pct Constants.blockPercentMargin)
+    marginRight (pct Constants.blockPercentMargin)
+
+  ".g-PaymentHeaderInfos__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)
+    marginBottom (em 1)
+
+    Media.mobile $ do
+      textAlign (alignSide sideCenter)
+
+    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+
+    ".userName" ? marginRight (px 8)
+
+  ".g-PaymentHeaderInfos__Repartition" ? do
+    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
+      Media.desktop $ marginLeft (px 15)
diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
new file mode 100644
index 0000000..42c9621
--- /dev/null
+++ b/server/src/Design/View/SignIn.hs
@@ -0,0 +1,36 @@
+module Design.View.SignIn
+  ( design
+  ) where
+
+import           Clay
+import           Data.Monoid      ((<>))
+import           Prelude          hiding (rem)
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  let inputHeight = 50
+  width (px 350)
+  sym2 padding (rem 0) (rem 2)
+  marginTop (px 100)
+  marginLeft auto
+  marginRight auto
+
+  button # ".validate" ? do
+    Helper.button Color.gothic Color.white (px inputHeight) Constants.focusLighten
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    fontSize (em 1.2)
+    svg ? "path" ? ("fill" -: "white")
+
+  ".success" <> ".error" ? do
+    marginTop (px 40)
+    textAlign (alignSide sideCenter)
+
+  ".success" ? color Color.mossGreen
+  ".error" ? color Color.chestnutRose
diff --git a/server/src/Design/View/Stat.hs b/server/src/Design/View/Stat.hs
new file mode 100644
index 0000000..2e4ecad
--- /dev/null
+++ b/server/src/Design/View/Stat.hs
@@ -0,0 +1,17 @@
+module Design.View.Stat
+  ( design
+  ) where
+
+import           Clay
+
+design :: Css
+design = do
+  h1 ? paddingBottom (px 0)
+
+  ".exceedingPayers" ? ".userName" ? marginRight (px 5)
+
+  ".mean" ? marginBottom (em 1.5)
+
+  ".g-Chart" ? do
+    width (pct 75)
+    sym2 margin (px 0) auto
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
new file mode 100644
index 0000000..56bd389
--- /dev/null
+++ b/server/src/Design/View/Table.hs
@@ -0,0 +1,99 @@
+module Design.View.Table
+  ( design
+  ) where
+
+import           Data.Monoid  ((<>))
+
+import           Clay
+
+import           Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  ".emptyTableMsg" ? do
+    margin (em 2) (em 2) (em 2) (em 2)
+    textAlign (alignSide sideCenter)
+
+  ".table" ? do
+    minHeight (px 540)
+
+  ".lines" ? do
+    Media.tabletDesktop $ display displayTable
+    width (pct 100)
+    textAlign (alignSide (sideCenter))
+
+    ".header" <> ".row" ? do
+      Media.tabletDesktop $ display tableRow
+
+    ".header" ? do
+      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
+      nthChild "even" & backgroundColor Color.wildSand
+
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 60)
+
+      Media.tablet $ do
+        height (px 50)
+
+      Media.mobile $ do
+        lineHeight (px 25)
+        paddingTop (px 10)
+        paddingBottom (px 10)
+
+    ".cell" ? do
+      Media.tabletDesktop $ display tableCell
+      position relative
+      verticalAlign middle
+
+      firstChild & do
+        Media.mobile $ do
+          fontSize (px 20)
+          lineHeight (px 30)
+          color Color.gothic
+
+      ".refund" & color Color.mossGreen
+
+      Media.desktop $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+      Media.tablet $ do
+        ".shortDate" ? display inline
+        ".longDate" ? display none
+      Media.mobile $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+        marginBottom (em 0.5)
+
+      ".cell.button" & do
+        position relative
+        textAlign (alignSide sideCenter)
+        button ? do
+          padding (px 10) (px 10) (px 10) (px 10)
+          svg ? do
+            "path" ? ("fill" -: Color.toString Color.chestnutRose)
+            width (px 18)
+          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/server/src/Design/Views.hs b/server/src/Design/Views.hs
new file mode 100644
index 0000000..4552796
--- /dev/null
+++ b/server/src/Design/Views.hs
@@ -0,0 +1,56 @@
+module Design.Views
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color              as Color
+import qualified Design.Constants          as Constants
+import qualified Design.Helper             as Helper
+import qualified Design.Media              as Media
+import qualified Design.View.ConfirmDialog as ConfirmDialog
+import qualified Design.View.Header        as Header
+import qualified Design.View.NotFound      as NotFound
+import qualified Design.View.Pages         as Pages
+import qualified Design.View.Payment       as Payment
+import qualified Design.View.SignIn        as SignIn
+import qualified Design.View.Stat          as Stat
+import qualified Design.View.Table         as Table
+
+design :: Css
+design = do
+  header ? Header.design
+  Payment.design
+  ".signIn" ? SignIn.design
+  Stat.design
+  ".notfound" ? NotFound.design
+  Table.design
+  Pages.design
+  ConfirmDialog.design
+
+  ".withMargin" ? do
+    "margin" -: "0 2vw"
+
+  ".titleButton" ? do
+    display flex
+    marginBottom (em 1)
+
+    Media.tabletDesktop $ do
+      justifyContent spaceBetween
+      alignItems center
+
+    Media.mobile $ do
+      flexDirection column
+      "h1" ? marginBottom (em 0.5)
+
+    button ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.mobile $ do
+        width (pct 100)
+        marginBottom (px 20)
+
+  ".tag" ? do
+    sym borderRadius (px 4)
+    sym2 padding (px 2) (px 5)
+    boxShadow . pure . bsColor (rgba 0 0 0 0.3) $ shadowWithBlur (px 2) (px 2) (px 5)
+    color Color.white