module Design.Views
  ( design
  ) where

import           Clay

import qualified Design.Color              as Color
import qualified Design.Constants          as Constants
import qualified Design.Helper             as Helper
import qualified Design.Media              as Media
import qualified Design.View.ConfirmDialog as ConfirmDialog
import qualified Design.View.Header        as Header
import qualified Design.View.NotFound      as NotFound
import qualified Design.View.Pages         as Pages
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

design :: Css
design = do
  header ? Header.design
  Payment.design
  ".signIn" ? SignIn.design
  ".stat" ? Stat.design
  ".notfound" ? NotFound.design
  Table.design
  Pages.design
  ConfirmDialog.design

  ".withMargin" ? do
    "margin" -: "0 2vw"

  ".titleButton" ? do
    display flex
    marginBottom (em 1)

    Media.tabletDesktop $ do
      justifyContent spaceBetween
      alignItems center

    Media.mobile $ do
      flexDirection column
      "h1" ? marginBottom (em 0.5)

    button ? do
      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
      Media.mobile $ do
        width (pct 100)
        marginBottom (px 20)

  ".tag" ? do
    sym borderRadius (px 4)
    sym2 padding (px 2) (px 5)
    boxShadow . pure . bsColor (rgba 0 0 0 0.3) $ shadowWithBlur (px 2) (px 2) (px 5)
    color Color.white