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

1 files changed, 55 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)
+    )
+  ]