1 files changed, 31 insertions, 15 deletions
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 869616d..41528ed 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -3,8 +3,8 @@
 module Design.Helper
   ( clearFix
   , button
+  , waitable
   , input
-  , iconButton
   , centeredWithMargin
   , verticalCentering
   ) where
@@ -13,8 +13,6 @@ import Prelude hiding (span)
 
 import Clay hiding (button, input)
 
-import Data.Monoid ((<>))
-
 import Design.Constants
 import Design.Color as Color
 
@@ -27,6 +25,9 @@ clearFix =
 
 button :: Color -> Color -> Size a -> (Color -> Color) -> Css
 button backgroundCol textCol h focusOp = do
+  display flex
+  alignItems center
+  justifyContent center
   backgroundColor backgroundCol
   padding (px 0) (px 10) (px 0) (px 10)
   color textCol
@@ -38,19 +39,20 @@ button backgroundCol textCol h focusOp = do
   textAlign (alignSide sideCenter)
   hover & backgroundColor (focusOp backgroundCol)
   focus & backgroundColor (focusOp backgroundCol)
+  waitable
 
-iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css
-iconButton backgroundCol textCol h focusOp = do
-  button backgroundCol textCol h focusOp
-  i <> span ? do
-    height h
-    lineHeight h
-  span ? do
-    display inlineBlock
-    marginLeft (px 20)
-  i ? do
-    marginLeft (px 15)
-    marginRight (px 20)
+waitable :: Css
+waitable = do
+  svg # ".loader" ? display none
+  ".waiting" & do
+    ".content" ? do
+      display flex
+      fontSize (px 0)
+      opacity 0
+    svg # ".loader" ? do
+      display block
+      rotateKeyframes
+      rotateAnimation
 
 input :: Double -> Css
 input h = do
@@ -72,3 +74,17 @@ verticalCentering = do
   position absolute
   top (pct 50)
   "transform" -: "translateY(-50%)"
+
+rotateAnimation :: Css
+rotateAnimation = do
+  animationName "rotate"
+  animationDuration (sec 1)
+  animationTimingFunction easeOut
+  animationIterationCount infinite
+
+rotateKeyframes :: Css
+rotateKeyframes = keyframes
+  "rotate"
+  [ (0, "transform" -: "rotate(0deg)")
+  , (100, "transform" -: "rotate(360deg)")
+  ]