Add search for payments

4 files changed, 47 insertions, 50 deletions

diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
index 34d772e..5e5035c 100644
--- a/server/src/Design/Global.hs
+++ b/server/src/Design/Global.hs
@@ -71,3 +71,29 @@ global = do
     ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
 
   svg ? height (pct 100)
+
+  button ? do
+    ".content" ? display flex
+    svg # ".loader" ? display none
+
+    ".waiting" & do
+      ".content" ? do
+        display none
+      svg # ".loader" ? do
+        display block
+        rotateKeyframes
+        rotateAnimation
+
+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)")
+  ]
diff --git a/server/src/Design/Helper.hs b/server/src/Design/Helper.hs
index 89f5958..6980c71 100644
--- a/server/src/Design/Helper.hs
+++ b/server/src/Design/Helper.hs
@@ -1,7 +1,6 @@
 module Design.Helper
   ( clearFix
   , button
-  , waitable
   , input
   , centeredWithMargin
   , verticalCentering
@@ -37,20 +36,6 @@ button backgroundCol textCol h focusOp = do
   textAlign (alignSide sideCenter)
   hover & backgroundColor (focusOp backgroundCol)
   focus & backgroundColor (focusOp backgroundCol)
-  waitable
-
-waitable :: Css
-waitable = do
-  ".content" ? display flex
-  svg # ".loader" ? display none
-
-  ".waiting" & do
-    ".content" ? do
-      display none
-    svg # ".loader" ? do
-      display block
-      rotateKeyframes
-      rotateAnimation
 
 input :: Double -> Css
 input h = do
@@ -72,17 +57,3 @@ 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)")
-  ]
diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 904a2f5..97f1802 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -2,13 +2,12 @@ module Design.View.Header
   ( design
   ) where
 
-import           Data.Monoid   ((<>))
+import           Data.Monoid  ((<>))
 
 import           Clay
 
-import           Design.Color  as Color
-import qualified Design.Helper as Helper
-import qualified Design.Media  as Media
+import           Design.Color as Color
+import qualified Design.Media as Media
 
 design :: Css
 design = do
@@ -56,7 +55,6 @@ design = do
       Media.tabletDesktop $ headerPadding
 
     ".signOut" ? do
-      Helper.waitable
       display flex
       svg ? do
         Media.tabletDesktop $ width (px 30)
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 36bc8d9..80c5436 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -50,22 +50,24 @@ design = do
 
   ".searchLine" ? do
     marginBottom (em 1)
-    form ? do
-      Media.mobile $ textAlign (alignSide sideCenter)
-
-      ".textInput" ? do
-        display inlineBlock
-        marginBottom (px 0)
-
-        Media.tabletDesktop $ marginRight (px 30)
-        Media.mobile $ do
-          marginBottom (em 1)
-          width (pct 100)
-
-      ".radioGroup" ? do
-        display inlineBlock
-        marginBottom (px 0)
-        ".title" ? display none
+    Media.mobile $ textAlign (alignSide sideCenter)
+
+    ".textInput" ? do
+      display inlineBlock
+      marginBottom (px 0)
+      button ? do
+        svg ? "path" ? ("fill" -: Color.toString Color.silver)
+        hover & svg ? "path" ? ("fill" -: Color.toString (Color.silver -. 25))
+
+      Media.tabletDesktop $ marginRight (px 30)
+      Media.mobile $ do
+        marginBottom (em 1)
+        width (pct 100)
+
+    ".radioGroup" ? do
+      display inlineBlock
+      marginBottom (px 0)
+      ".title" ? display none
 
   ".infos" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)