18 files changed, 953 insertions, 0 deletions
diff --git a/server/src/Design/Color.hs b/server/src/Design/Color.hs
new file mode 100644
index 0000000..06c468e
--- /dev/null
+++ b/server/src/Design/Color.hs
@@ -0,0 +1,35 @@
+module Design.Color where
+
+import qualified Clay.Color as C
+
+-- 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
diff --git a/server/src/Design/Constants.hs b/server/src/Design/Constants.hs
new file mode 100644
index 0000000..4e2b8cc
--- /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/Dialog.hs b/server/src/Design/Dialog.hs
new file mode 100644
index 0000000..4678633
--- /dev/null
+++ b/server/src/Design/Dialog.hs
@@ -0,0 +1,24 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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
+      ".selectInput" ? do
+        select ? width (pct 100)
+        marginBottom (em 1)
+
+  ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
+    h1 ? marginBottom (em 1.5)
diff --git a/server/src/Design/Errors.hs b/server/src/Design/Errors.hs
new file mode 100644
index 0000000..57aaeee
--- /dev/null
+++ b/server/src/Design/Errors.hs
@@ -0,0 +1,55 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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..ebb8ac8
--- /dev/null
+++ b/server/src/Design/Form.hs
@@ -0,0 +1,130 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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
+  let inputZIndex = 1
+
+  label ? do
+    cursor pointer
+    color Color.silver
+
+  ".textInput" ? do
+    position relative
+    marginBottom (em 1.5)
+    paddingTop (px inputTop)
+    marginTop (px (-10))
+
+    input ? do
+      width (pct 100)
+      position relative
+      zIndex inputZIndex
+      backgroundColor transparent
+      paddingBottom (px inputPaddingBottom)
+      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
+      lineHeight (px inputHeight)
+      position absolute
+      top (px inputTop)
+      left (px 0)
+      transition "all" (sec 0.2) easeIn (sec 0)
+
+    button ? do
+      position absolute
+      right (px 0)
+      top (px 27)
+      zIndex inputZIndex
+      hover & "svg path" ? do
+        "fill" -: "rgb(220, 220, 220)"
+
+    (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
+
+  ".radioGroup" ? do
+    position relative
+    marginBottom (em 2)
+
+    ".title" ? do
+      color Color.silver
+      marginBottom (em 0.8)
+
+    ".radioInputs" ? do
+      display flex
+      "justify-content" -: "center"
+
+      ".radioInput:not(:last-child)::after" ? do
+        content (stringContent "/")
+        marginLeft (px 10)
+        marginRight (px 10)
+
+      input ? do
+        opacity 0
+        width (px 30)
+        margin (px 0) (px (-15)) (px 0) (px (-15))
+
+      "input:focus + label" ? do
+        textDecoration underline
+
+      "input:checked + label" ? do
+        color Color.chestnutRose
+        fontWeight bold
+
+  ".selectInput" ? do
+    label ? do
+      display block
+      marginBottom (px 10)
+      fontSize (pct 80)
+    select ? do
+      backgroundColor Color.white
+      border solid (px 1) Color.silver
+      sym borderRadius (px 3)
+      sym2 padding (px 5) (px 8)
+      option ? do
+        firstChild & display none
+        sym2 padding (px 5) (px 8)
+    ".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..47ea4a9
--- /dev/null
+++ b/server/src/Design/Global.hs
@@ -0,0 +1,75 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Global
+  ( globalDesign
+  ) where
+
+import Clay
+
+import Data.Text.Lazy (Text)
+
+import qualified Design.Views as Views
+import qualified Design.Form as Form
+import qualified Design.Errors as Errors
+import qualified Design.Dialog as Dialog
+import qualified Design.Tooltip as Tooltip
+
+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
+
+global :: Css
+global = do
+  ".errors" ? Errors.design
+  ".dialog" ? Dialog.design
+  ".tooltip" ? Tooltip.design
+  Views.design
+  Form.design
+
+  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
+
+  input ? fontSize inherit
+
+  h1 ? do
+    color Color.chestnutRose
+    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"
+    "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)
diff --git a/server/src/Design/Helper.hs b/server/src/Design/Helper.hs
new file mode 100644
index 0000000..41528ed
--- /dev/null
+++ b/server/src/Design/Helper.hs
@@ -0,0 +1,90 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Helper
+  ( clearFix
+  , button
+  , waitable
+  , input
+  , centeredWithMargin
+  , verticalCentering
+  ) where
+
+import Prelude hiding (span)
+
+import Clay hiding (button, input)
+
+import Design.Constants
+import Design.Color as Color
+
+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)
+  waitable
+
+waitable :: Css
+waitable = do
+  svg # ".loader" ? display none
+  ".waiting" & do
+    ".content" ? do
+      display flex
+      fontSize (px 0)
+      opacity 0
+    svg # ".loader" ? do
+      display block
+      rotateKeyframes
+      rotateAnimation
+
+input :: Double -> Css
+input h = do
+  height (px h)
+  padding (px 10) (px 10) (px 10) (px 10)
+  borderRadius radius radius radius radius
+  border solid (px 1) Color.dustyGray
+  focus & borderColor Color.silver
+  verticalAlign middle
+
+centeredWithMargin :: Css
+centeredWithMargin = do
+  width (pct blockPercentWidth)
+  marginLeft auto
+  marginRight auto
+
+verticalCentering :: Css
+verticalCentering = do
+  position absolute
+  top (pct 50)
+  "transform" -: "translateY(-50%)"
+
+rotateAnimation :: Css
+rotateAnimation = do
+  animationName "rotate"
+  animationDuration (sec 1)
+  animationTimingFunction easeOut
+  animationIterationCount infinite
+
+rotateKeyframes :: Css
+rotateKeyframes = keyframes
+  "rotate"
+  [ (0, "transform" -: "rotate(0deg)")
+  , (100, "transform" -: "rotate(360deg)")
+  ]
diff --git a/server/src/Design/Media.hs b/server/src/Design/Media.hs
new file mode 100644
index 0000000..77220ee
--- /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 Clay.Stylesheet (Feature)
+import qualified Clay.Media as Media
+
+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/Tooltip.hs b/server/src/Design/Tooltip.hs
new file mode 100644
index 0000000..1da8764
--- /dev/null
+++ b/server/src/Design/Tooltip.hs
@@ -0,0 +1,16 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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/Header.hs b/server/src/Design/View/Header.hs
new file mode 100644
index 0000000..20627e6
--- /dev/null
+++ b/server/src/Design/View/Header.hs
@@ -0,0 +1,78 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Header
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+import Design.Color as Color
+import qualified Design.Helper as Helper
+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
+    height (pct 100)
+    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
+      Helper.waitable
+      heightMedia
+      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/Payment.hs b/server/src/Design/View/Payment.hs
new file mode 100644
index 0000000..d3c7650
--- /dev/null
+++ b/server/src/Design/View/Payment.hs
@@ -0,0 +1,17 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.View.Payment.Header as Header
+import qualified Design.View.Payment.Table as Table
+import qualified Design.View.Payment.Pages as Pages
+
+design :: Css
+design = do
+  ".header" ? Header.design
+  ".table" ? Table.design
+  ".pages" ? Pages.design
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
new file mode 100644
index 0000000..f02da8a
--- /dev/null
+++ b/server/src/Design/View/Payment/Header.hs
@@ -0,0 +1,84 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment.Header
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+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
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
+  marginLeft (pct blockPercentMargin)
+  marginRight (pct blockPercentMargin)
+
+  ".payerAndAdd" ? do
+    Media.tabletDesktop $ display flex
+    marginBottom (em 1)
+
+    ".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)
+
+    ".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
+      Media.mobile $ textAlign (alignSide sideCenter)
+
+      ".textInput" ? do
+        display inlineBlock
+        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
+
+  ".infos" ? 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/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
new file mode 100644
index 0000000..ade81a8
--- /dev/null
+++ b/server/src/Design/View/Payment/Pages.hs
@@ -0,0 +1,54 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment.Pages
+  ( design
+  ) where
+
+import Clay
+
+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
+  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
+    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/Table.hs b/server/src/Design/View/Payment/Table.hs
new file mode 100644
index 0000000..a866b40
--- /dev/null
+++ b/server/src/Design/View/Payment/Table.hs
@@ -0,0 +1,42 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment.Table
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  ".cell" ? do
+    ".name" & do
+      Media.tabletDesktop $ width (pct 30)
+
+    ".cost" & do
+      Media.tabletDesktop $ width (pct 10)
+
+    ".user" & do
+      Media.tabletDesktop $ width (pct 15)
+
+    ".category" & do
+      Media.tabletDesktop $ width (pct 10)
+
+    ".date" & do
+      Media.tabletDesktop $ width (pct 15)
+      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)
+
+    ".button" & svg ? do
+      "path" ? ("fill" -: (plain . unValue . value $ Color.chestnutRose))
+      width (px 18)
diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
new file mode 100644
index 0000000..214e663
--- /dev/null
+++ b/server/src/Design/View/SignIn.hs
@@ -0,0 +1,42 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.SignIn
+  ( design
+  ) where
+
+import Clay
+import Data.Monoid ((<>))
+
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+
+design :: Css
+design = do
+  let inputHeight = 50
+  width (px 500)
+  marginTop (px 100)
+  marginLeft auto
+  marginRight auto
+
+  input ? do
+    Helper.input inputHeight
+    display block
+    width (pct 100)
+    marginBottom (px 10)
+
+  button ? 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..0a5b258
--- /dev/null
+++ b/server/src/Design/View/Stat.hs
@@ -0,0 +1,15 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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)
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
new file mode 100644
index 0000000..95abf90
--- /dev/null
+++ b/server/src/Design/View/Table.hs
@@ -0,0 +1,84 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+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)
+
+  ".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
+
+      ".cell.button" & do
+        position relative
+        textAlign (alignSide sideCenter)
+        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/server/src/Design/Views.hs b/server/src/Design/Views.hs
new file mode 100644
index 0000000..bc6ac83
--- /dev/null
+++ b/server/src/Design/Views.hs
@@ -0,0 +1,49 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Views
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.View.Header as Header
+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
+
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  header ? Header.design
+  ".payment" ? Payment.design
+  ".signIn" ? SignIn.design
+  ".stat" ? Stat.design
+  Table.design
+
+  ".withMargin" ? do
+    "margin" -: "0 2vw"
+
+  ".titleButton" ? do
+    h1 ? do
+      Media.tabletDesktop $ float floatLeft
+
+    button ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.tabletDesktop $ do
+        float floatRight
+        position relative
+        top (px (-8))
+      Media.mobile $ do
+        width (pct 100)
+        marginBottom (px 20)
+
+  ".tag" ? do
+    sym borderRadius (px 4)
+    sym2 padding (px 2) (px 5)
+    boxShadow (px 2) (px 2) (px 5) (rgba 0 0 0 0.3)
+    color Color.white