Adding UI to sign in and sign out

1 files changed, 52 insertions, 8 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 6460220..7074f65 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -4,6 +4,9 @@ module Design.Global
   ( globalDesign
   ) where
 
+import qualified Prelude
+import Prelude
+
 import Clay
 
 import Data.Monoid ((<>))
@@ -14,15 +17,36 @@ import Design.Color as C
 globalDesign :: Text
 globalDesign = renderWith compact [] global
 
+iconFontSize :: Integer
+iconFontSize = 32
+
 global :: Css
 global = do
 
-  header ?
+  header ? do
+    let headerHeight = 120
+
     h1 ? do
       fontSize (px 40)
       textAlign (alignSide sideCenter)
-      margin (px 30) (px 0) (px 40) (px 0)
       color C.brown
+      lineHeight (px headerHeight)
+
+    button # ".signOut" ? do
+      let iconHeight = 50
+      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
+      position absolute
+      top (px 0)
+      right (px 10)
+      marginTop (px sideMargin)
+      marginRight (px sideMargin)
+      height (px iconHeight)
+      lineHeight (px iconHeight)
+      backgroundColor C.white
+      color C.brown
+      borderWidth (px 0)
+      fontSize (px iconFontSize)
+      hover & transform (scale 1.2 1.2)
 
   table ? do
     width (pct 100)
@@ -30,10 +54,30 @@ global = do
     "border-spacing" -: "10 px"
 
     th ? do
-      color C.green
-      fontWeight bold
-      borderBottom solid (px 1) C.brown
+      backgroundColor C.brown
+      color C.white
+      fontSize (px iconFontSize)
+      lineHeight (px 70)
+
+    tr ? do
+      fontSize (px 20)
+      lineHeight (px 60)
+      nthChild "odd" & backgroundColor C.lightGrey
 
-    tr <> th ? do
-      fontSize (px 18)
-      lineHeight (px 30)
+  form # ".signIn" ? do
+    let inputHeight = 50
+    marginTop (px 80)
+    marginBottom (px 80)
+    width (pct 60)
+    marginLeft auto
+    marginRight auto
+    input ? do
+      width (pct 80)
+      padding (px 10) (px 10) (px 10) (px 10)
+      height (px inputHeight)
+    button ? do
+      width (pct 20)
+      height (px inputHeight)
+      backgroundColor C.brown
+      color C.white
+      borderWidth (px 0)