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