{-# LANGUAGE OverloadedStrings #-}

module Design.LoggedIn.Add
  ( addDesign
  ) where

import Data.Monoid ((<>))

import Clay

import Design.Color as C
import Design.Helper
import Design.Constants

addDesign :: Css
addDesign =

  form # ".addPayment" ? do
    centeredWithMargin
    marginBottom blockMarginBottom
    display flex
    "justify-content" -: "center"

    ".name" <> ".cost" ? do
      position relative
      display flex
      marginRight (pct blockPercentMargin)
      label ? do
        fontWeight bold
        display inlineBlock
        width (px 50)
        textAlign (alignSide sideCenter)
        backgroundColor C.darkGrey
        color C.white
        height (px inputHeight)
        lineHeight (px inputHeight)
        fontSize (px 22)
        verticalAlign middle
        cursor cursorText
        borderRadius (px 0) radius radius (px 0)
      input ? do
        defaultInput inputHeight
        borderRadius radius (px 0) (px 0) radius
        "width" -: "calc(100% - 40px)"
      "input:focus + label" ? backgroundColor C.grey
      hover & do
        input ? borderColor C.grey
        label ? backgroundColor C.grey

    ".name" ? minWidth (px 150)

    button # ".frequency" ? do
      fontSize (pct 90)
      marginRight (pct blockPercentMargin)

      (".punctual" <> ".monthly") ? do
        defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
        paddingLeft (px 15)
        paddingRight (px 15)
        ".selected" & do
          backgroundColor C.blue
          color C.white

      hover & (".punctual" <> ".monthly") ?
        ".selected" & backgroundColor (focusLighten C.blue)

      focus & (".punctual" <> ".monthly") ?
        ".selected" & backgroundColor (focusLighten C.blue)

      ".punctual" ? borderRadius radius radius 0 0
      ".monthly" ? borderRadius 0 0 radius radius

    button # ".add" ? do
      defaultButton C.red C.white (px inputHeight) focusLighten
      paddingLeft (px 15)
      paddingRight (px 15)
      i ? marginLeft (px 10)
      ".waitingServer" & ("cursor" -: "not-allowed")

    ".name.error" <> ".cost.error" ? do
      input ? borderColor C.redError
      label ? backgroundColor C.redError
      "input:focus + label" ? backgroundColor C.redError

    ".errorMessage" ? do
      position absolute
      color C.redError
      top (px (inputHeight + 10))
      left (px 0)