Adding UI to sign in and sign out

3 files changed, 59 insertions, 12 deletions

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index dada3df..6344fe6 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -2,6 +2,9 @@ module Design.Color where
 
 import qualified Clay.Color as C
 
+white :: C.Color
+white = C.white
+
 brown :: C.Color
 brown = C.brown
 
@@ -9,4 +12,4 @@ green :: C.Color
 green = C.green
 
 lightGrey :: C.Color
-lightGrey = C.rgb 230 230 230
+lightGrey = C.rgb 245 245 245
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)
diff --git a/src/server/Main.hs b/src/server/Main.hs
index f73f2e0..8d5a625 100644
--- a/src/server/Main.hs
+++ b/src/server/Main.hs
@@ -31,12 +31,12 @@ main = do
       cost <- param "cost" :: ActionM Int
       insertPaymentAction email name cost
 
-    get "/signIn" $ do
+    post "/signIn" $ do
       login <- param "login" :: ActionM Text
       signIn login
 
-    get "/checkConnection" $
+    post "/checkConnection" $
       checkConnection
 
-    get "/signOut" $
+    post "/signOut" $
       signOut