Implementing client side validation

6 files changed, 68 insertions, 15 deletions

diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
index 0385cb4..31a2127 100644
--- a/server/src/Design/Form.hs
+++ b/server/src/Design/Form.hs
@@ -22,7 +22,7 @@ design = do
 
   ".textInput" ? do
     position relative
-    marginBottom (em 1.5)
+    marginBottom (em 2)
     paddingTop (px inputTop)
     marginTop (px (-10))
 
@@ -46,7 +46,7 @@ design = do
       position absolute
       top (px inputTop)
       left (px 0)
-      transition "all" (sec 0.2) easeIn (sec 0)
+      transition "all" (sec 0.2) easeInOut (sec 0)
 
     button ? do
       position absolute
@@ -110,11 +110,13 @@ design = do
         fontWeight bold
 
   ".selectInput" ? do
-    marginBottom (em 1)
+    marginBottom (em 2)
+
     label ? do
       display block
       marginBottom (px 10)
       fontSize (pct 80)
+
     select ? do
       width (pct 100)
       backgroundColor Color.white
@@ -122,6 +124,8 @@ design = do
       sym borderRadius (px 3)
       sym2 padding (px 5) (px 8)
       option ? sym2 padding (px 5) (px 8)
+      focus & backgroundColor Color.wildSand
+
     ".error" & do
       select ? borderColor Color.chestnutRose
       ".errorMessage" ? do
diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
index ba4ccb7..66e9f47 100644
--- a/server/src/Design/Global.hs
+++ b/server/src/Design/Global.hs
@@ -3,6 +3,7 @@ module Design.Global
   ) where
 
 import           Clay
+import           Clay.Color       as C
 import           Data.Text.Lazy   (Text)
 
 import qualified Design.Color     as Color
@@ -26,8 +27,16 @@ global = do
   Views.design
   Form.design
 
+  spinKeyframes
+  appearKeyframe
+
+  html ? do
+    height (pct 100)
+
   body ? do
+    position relative
     minWidth (px 320)
+    height (pct 100)
     fontFamily ["Cantarell"] [sansSerif]
     ".modal" &
       overflowY hidden
@@ -40,6 +49,28 @@ global = do
       button ? fontSize (px 14)
       input ? fontSize (px 14)
 
+  ".app" ? do
+    appearAnimation
+
+  ".spinner" ? do
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    height (pct 100)
+    paddingBottom (pct 10)
+
+    before & do
+      display block
+      content (stringContent "")
+      width (px 50)
+      height (px 50)
+      border solid (px 3) (C.setA 0.3 Color.chestnutRose)
+      sym borderRadius (pct 50)
+      borderTopColor Color.chestnutRose
+      spinKeyframes
+      spinAnimation
+
   a ? cursor pointer
 
   input ? fontSize inherit
@@ -87,21 +118,31 @@ global = do
         opacity 0
       svg # ".loader" ? do
         opacity 1
-        rotateKeyframes
-        rotateAnimation
+        spinAnimation
 
   select ? cursor pointer
 
-rotateAnimation :: Css
-rotateAnimation = do
+spinAnimation :: Css
+spinAnimation = do
   animationName "rotate"
   animationDuration (sec 1)
-  animationTimingFunction easeOut
+  animationTimingFunction easeInOut
   animationIterationCount infinite
 
-rotateKeyframes :: Css
-rotateKeyframes = keyframes
+spinKeyframes :: Css
+spinKeyframes = keyframes
   "rotate"
-  [ (0, "transform" -: "rotate(0deg)")
-  , (100, "transform" -: "rotate(360deg)")
+  [ (100, "transform" -: "rotate(360deg)")
+  ]
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.2)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
   ]
diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
index 914c011..9c016b9 100644
--- a/server/src/Design/Modal.hs
+++ b/server/src/Design/Modal.hs
@@ -23,7 +23,7 @@ design = do
     transition "all" (sec 0.2) ease (sec 0)
 
   ".modalContent" ? do
-    minWidth (px 270)
+    minWidth (px 300)
     position fixed
     top (pct 25)
     left (pct 50)
diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 97f1802..2422686 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -56,6 +56,8 @@ design = do
 
     ".signOut" ? do
       display flex
+      justifyContent center
+      alignItems center
       svg ? do
         Media.tabletDesktop $ width (px 30)
         Media.mobile $ width (px 20)
diff --git a/server/src/Design/View/Payment/Add.hs b/server/src/Design/View/Payment/Add.hs
index 199ad36..5ecae7a 100644
--- a/server/src/Design/View/Payment/Add.hs
+++ b/server/src/Design/View/Payment/Add.hs
@@ -14,12 +14,12 @@ design = do
     backgroundColor Color.chestnutRose
     fontSize (px 18)
     color Color.white
-    sym padding (px 20)
+    sym2 padding (px 20) (px 30)
     textAlign (alignSide sideCenter)
     borderRadius (px 5) (px 5) (px 0) (px 0)
 
   ".addContent" ? do
-    sym padding (px 20)
+    sym2 padding (px 20) (px 30)
 
     ".buttons" ? do
       display flex
@@ -30,3 +30,6 @@ design = do
         Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       ".undo" ?
         Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)
diff --git a/server/src/Design/View/Payment/Delete.hs b/server/src/Design/View/Payment/Delete.hs
index 5597f5b..f3d7e3f 100644
--- a/server/src/Design/View/Payment/Delete.hs
+++ b/server/src/Design/View/Payment/Delete.hs
@@ -30,3 +30,6 @@ design = do
         Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       ".undo" ?
         Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)