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.Color        as Color
import qualified Design.Constants    as Constants
import qualified Design.Helper       as Helper
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