Show a message if there is an error during a server request

2 files changed, 57 insertions, 0 deletions

diff --git a/src/server/Design/Errors.hs b/src/server/Design/Errors.hs
new file mode 100644
index 0000000..57aaeee
--- /dev/null
+++ b/src/server/Design/Errors.hs
@@ -0,0 +1,55 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Errors
+  ( design
+  ) where
+
+import Clay
+
+import Design.Color as Color
+
+design :: Css
+design = do
+  position fixed
+  top (px 20)
+  left (pct 50)
+  "transform" -: "translateX(-50%)"
+  margin (px 0) (px 0) (px 0) (px 0)
+  disapearKeyframes
+
+  ".error" ? do
+    disapearAnimation
+    let errorColor = Color.chestnutRose -. 15
+    color errorColor
+    border solid (px 2) errorColor
+    backgroundColor Color.white
+    borderRadius (px 5) (px 5) (px 5) (px 5)
+    padding (px 5) (px 5) (px 5) (px 5)
+
+    before & display none
+
+disapearAnimation :: Css
+disapearAnimation = do
+  animationName "disapear"
+  animationDelay (sec 5)
+  animationDuration (sec 1)
+  animationFillMode forwards
+
+disapearKeyframes :: Css
+disapearKeyframes = keyframes
+  "disapear"
+  [ ( 10
+    , do
+        opacity 0
+        height (px 40)
+        lineHeight (px 40)
+        marginBottom (px 10)
+    )
+  , ( 100
+    , do
+        opacity 0
+        height (px 0)
+        lineHeight (px 0)
+        marginBottom (px 0)
+    )
+  ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 26c1a42..e742978 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Design.Header as Header
 import qualified Design.SignIn as SignIn
 import qualified Design.LoggedIn as LoggedIn
 import qualified Design.Form as Form
+import qualified Design.Errors as Errors
 import qualified Design.Dialog as Dialog
 import qualified Design.Tooltip as Tooltip
 
@@ -29,6 +30,7 @@ global = do
   header ? Header.design
   ".signIn" ? SignIn.design
   ".loggedIn" ? LoggedIn.design
+  ".errors" ? Errors.design
   ".dialog" ? Dialog.design
   ".tooltip" ? Tooltip.design
   Form.design