1 files changed, 84 insertions, 0 deletions
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)