From 898e7ed11ab0958fcdaf65b99b33f7b04787630a Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 24 Sep 2017 22:14:48 +0200
Subject: Bootstrap with GHCJS and reflex:

- setup login and logout,
- first draft of payment view.
---
 src/server/Design/Color.hs                |  3 ++
 src/server/Design/Global.hs               | 11 ++--
 src/server/Design/Header.hs               | 74 ---------------------------
 src/server/Design/Helper.hs               | 46 +++++++++++------
 src/server/Design/LoggedIn.hs             | 45 -----------------
 src/server/Design/LoggedIn/Home.hs        | 17 -------
 src/server/Design/LoggedIn/Home/Header.hs | 84 -------------------------------
 src/server/Design/LoggedIn/Home/Pages.hs  | 54 --------------------
 src/server/Design/LoggedIn/Home/Table.hs  | 37 --------------
 src/server/Design/LoggedIn/Stat.hs        | 15 ------
 src/server/Design/LoggedIn/Table.hs       | 84 -------------------------------
 src/server/Design/SignIn.hs               | 40 ---------------
 src/server/Design/View/Header.hs          | 78 ++++++++++++++++++++++++++++
 src/server/Design/View/Payment.hs         | 17 +++++++
 src/server/Design/View/Payment/Header.hs  | 84 +++++++++++++++++++++++++++++++
 src/server/Design/View/Payment/Pages.hs   | 54 ++++++++++++++++++++
 src/server/Design/View/Payment/Table.hs   | 42 ++++++++++++++++
 src/server/Design/View/SignIn.hs          | 42 ++++++++++++++++
 src/server/Design/View/Stat.hs            | 15 ++++++
 src/server/Design/View/Table.hs           | 84 +++++++++++++++++++++++++++++++
 src/server/Design/Views.hs                | 49 ++++++++++++++++++
 21 files changed, 503 insertions(+), 472 deletions(-)
 delete mode 100644 src/server/Design/Header.hs
 delete mode 100644 src/server/Design/LoggedIn.hs
 delete mode 100644 src/server/Design/LoggedIn/Home.hs
 delete mode 100644 src/server/Design/LoggedIn/Home/Header.hs
 delete mode 100644 src/server/Design/LoggedIn/Home/Pages.hs
 delete mode 100644 src/server/Design/LoggedIn/Home/Table.hs
 delete mode 100644 src/server/Design/LoggedIn/Stat.hs
 delete mode 100644 src/server/Design/LoggedIn/Table.hs
 delete mode 100644 src/server/Design/SignIn.hs
 create mode 100644 src/server/Design/View/Header.hs
 create mode 100644 src/server/Design/View/Payment.hs
 create mode 100644 src/server/Design/View/Payment/Header.hs
 create mode 100644 src/server/Design/View/Payment/Pages.hs
 create mode 100644 src/server/Design/View/Payment/Table.hs
 create mode 100644 src/server/Design/View/SignIn.hs
 create mode 100644 src/server/Design/View/Stat.hs
 create mode 100644 src/server/Design/View/Table.hs
 create mode 100644 src/server/Design/Views.hs

(limited to 'src/server/Design')

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index afc601f..06c468e 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -7,6 +7,9 @@ import qualified Clay.Color as C
 white :: C.Color
 white = C.white
 
+black :: C.Color
+black = C.black
+
 chestnutRose :: C.Color
 chestnutRose = C.rgb 207 92 86
 
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index e742978..47ea4a9 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -8,9 +8,7 @@ import Clay
 
 import Data.Text.Lazy (Text)
 
-import qualified Design.Header as Header
-import qualified Design.SignIn as SignIn
-import qualified Design.LoggedIn as LoggedIn
+import qualified Design.Views as Views
 import qualified Design.Form as Form
 import qualified Design.Errors as Errors
 import qualified Design.Dialog as Dialog
@@ -26,13 +24,10 @@ globalDesign = renderWith compact [] global
 
 global :: Css
 global = do
-
-  header ? Header.design
-  ".signIn" ? SignIn.design
-  ".loggedIn" ? LoggedIn.design
   ".errors" ? Errors.design
   ".dialog" ? Dialog.design
   ".tooltip" ? Tooltip.design
+  Views.design
   Form.design
 
   body ? do
@@ -49,6 +44,8 @@ global = do
 
   a ? cursor pointer
 
+  input ? fontSize inherit
+
   h1 ? do
     color Color.chestnutRose
     marginBottom (em 1)
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
deleted file mode 100644
index 8feac64..0000000
--- a/src/server/Design/Header.hs
+++ /dev/null
@@ -1,74 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.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
-    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
-      heightMedia
-      svg ? do
-        Media.mobile $ width (px 20)
-
-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/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 869616d..41528ed 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -3,8 +3,8 @@
 module Design.Helper
   ( clearFix
   , button
+  , waitable
   , input
-  , iconButton
   , centeredWithMargin
   , verticalCentering
   ) where
@@ -13,8 +13,6 @@ import Prelude hiding (span)
 
 import Clay hiding (button, input)
 
-import Data.Monoid ((<>))
-
 import Design.Constants
 import Design.Color as Color
 
@@ -27,6 +25,9 @@ clearFix =
 
 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
@@ -38,19 +39,20 @@ button backgroundCol textCol h focusOp = do
   textAlign (alignSide sideCenter)
   hover & backgroundColor (focusOp backgroundCol)
   focus & backgroundColor (focusOp backgroundCol)
+  waitable
 
-iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css
-iconButton backgroundCol textCol h focusOp = do
-  button backgroundCol textCol h focusOp
-  i <> span ? do
-    height h
-    lineHeight h
-  span ? do
-    display inlineBlock
-    marginLeft (px 20)
-  i ? do
-    marginLeft (px 15)
-    marginRight (px 20)
+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
@@ -72,3 +74,17 @@ 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/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
deleted file mode 100644
index 4a21832..0000000
--- a/src/server/Design/LoggedIn.hs
+++ /dev/null
@@ -1,45 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn
-  ( design
-  ) where
-
-import Clay
-
-import qualified Design.LoggedIn.Home as Home
-import qualified Design.LoggedIn.Stat as Stat
-import qualified Design.LoggedIn.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
-  ".home" ? Home.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
diff --git a/src/server/Design/LoggedIn/Home.hs b/src/server/Design/LoggedIn/Home.hs
deleted file mode 100644
index 7845434..0000000
--- a/src/server/Design/LoggedIn/Home.hs
+++ /dev/null
@@ -1,17 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home
-  ( design
-  ) where
-
-import Clay
-
-import qualified Design.LoggedIn.Home.Header as Header
-import qualified Design.LoggedIn.Home.Table as Table
-import qualified Design.LoggedIn.Home.Pages as Pages
-
-design :: Css
-design = do
-  ".header" ? Header.design
-  ".table" ? Table.design
-  ".pages" ? Pages.design
diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs
deleted file mode 100644
index 5fd2d79..0000000
--- a/src/server/Design/LoggedIn/Home/Header.hs
+++ /dev/null
@@ -1,84 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.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/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
deleted file mode 100644
index 71f3254..0000000
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ /dev/null
@@ -1,54 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.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/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
deleted file mode 100644
index cb46ac9..0000000
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ /dev/null
@@ -1,37 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home.Table
-  ( design
-  ) where
-
-import Clay
-
-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)
diff --git a/src/server/Design/LoggedIn/Stat.hs b/src/server/Design/LoggedIn/Stat.hs
deleted file mode 100644
index 62028cb..0000000
--- a/src/server/Design/LoggedIn/Stat.hs
+++ /dev/null
@@ -1,15 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.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/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
deleted file mode 100644
index 44b001a..0000000
--- a/src/server/Design/LoggedIn/Table.hs
+++ /dev/null
@@ -1,84 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.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/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
deleted file mode 100644
index 75f2f98..0000000
--- a/src/server/Design/SignIn.hs
+++ /dev/null
@@ -1,40 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.SignIn
-  ( design
-  ) where
-
-import Clay
-
-import qualified Design.Color as Color
-import qualified Design.Helper as Helper
-import qualified Design.Constants as Constants
-
-design :: Css
-design = do
-
-  form ? 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.iconButton Color.gothic Color.white (px inputHeight) Constants.focusLighten
-      display block
-      width (pct 100)
-      fontSize (em 1.2)
-      ".waitingServer" & ("cursor" -: "not-allowed")
-
-  ".result" ? do
-    marginTop (px 40)
-    textAlign (alignSide sideCenter)
-    ".success" ? color Color.mossGreen
-    ".error" ? color Color.chestnutRose
diff --git a/src/server/Design/View/Header.hs b/src/server/Design/View/Header.hs
new file mode 100644
index 0000000..20627e6
--- /dev/null
+++ b/src/server/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/src/server/Design/View/Payment.hs b/src/server/Design/View/Payment.hs
new file mode 100644
index 0000000..d3c7650
--- /dev/null
+++ b/src/server/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/src/server/Design/View/Payment/Header.hs b/src/server/Design/View/Payment/Header.hs
new file mode 100644
index 0000000..f02da8a
--- /dev/null
+++ b/src/server/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/src/server/Design/View/Payment/Pages.hs b/src/server/Design/View/Payment/Pages.hs
new file mode 100644
index 0000000..ade81a8
--- /dev/null
+++ b/src/server/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/src/server/Design/View/Payment/Table.hs b/src/server/Design/View/Payment/Table.hs
new file mode 100644
index 0000000..a866b40
--- /dev/null
+++ b/src/server/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/src/server/Design/View/SignIn.hs b/src/server/Design/View/SignIn.hs
new file mode 100644
index 0000000..214e663
--- /dev/null
+++ b/src/server/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/src/server/Design/View/Stat.hs b/src/server/Design/View/Stat.hs
new file mode 100644
index 0000000..0a5b258
--- /dev/null
+++ b/src/server/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/src/server/Design/View/Table.hs b/src/server/Design/View/Table.hs
new file mode 100644
index 0000000..95abf90
--- /dev/null
+++ b/src/server/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/src/server/Design/Views.hs b/src/server/Design/Views.hs
new file mode 100644
index 0000000..bc6ac83
--- /dev/null
+++ b/src/server/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
-- 
cgit v1.2.3