Showing either error or success message at sign in page

2 files changed, 32 insertions, 19 deletions

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index b744cf2..a9529ab 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -5,6 +5,9 @@ import qualified Clay.Color as C
 white :: C.Color
 white = C.white
 
+red :: C.Color
+red = C.red
+
 brown :: C.Color
 brown = C.brown
 
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 6e3cbe6..6985174 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -68,22 +68,32 @@ global = do
       nthChild "odd" & backgroundColor C.lightGrey
 
   ".signIn" ? do
-    let inputHeight = 50
-    width (px 500)
-    marginTop (px 50)
-    marginLeft auto
-    marginRight auto
-    input ? do
-      display block
-      width (pct 100)
-      padding (px 10) (px 10) (px 10) (px 10)
-      height (px inputHeight)
-      marginBottom (px 10)
-    button ? do
-      display block
-      width (pct 100)
-      height (px inputHeight)
-      backgroundColor C.brown
-      color C.white
-      borderWidth (px 0)
-      borderRadius (px 3) (px 3) (px 3) (px 3)
+
+    ".form" ? do
+      let inputHeight = 50
+      width (px 500)
+      marginTop (px 50)
+      marginLeft auto
+      marginRight auto
+
+      input ? do
+        display block
+        width (pct 100)
+        padding (px 10) (px 10) (px 10) (px 10)
+        height (px inputHeight)
+        marginBottom (px 10)
+
+      button ? do
+        display block
+        width (pct 100)
+        height (px inputHeight)
+        backgroundColor C.brown
+        color C.white
+        borderWidth (px 0)
+        borderRadius (px 3) (px 3) (px 3) (px 3)
+
+    ".result" ? do
+      marginTop (px 40)
+      textAlign (alignSide sideCenter)
+      ".success" ? color C.green
+      ".error" ? color C.red