Add payment clone

2 files changed, 38 insertions, 1 deletions

diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
index dce2ef9..4020eb0 100644
--- a/server/src/Design/Modal.hs
+++ b/server/src/Design/Modal.hs
@@ -7,6 +7,7 @@ import           Data.Monoid                ((<>))
 
 import qualified Design.View.Payment.Add    as Add
 import qualified Design.View.Payment.Delete as Delete
+import qualified Design.View.Payment.Form   as Form
 
 design :: Css
 design = do
@@ -14,9 +15,9 @@ design = do
   appearKeyframe
 
   ".g-Modal" ? do
+    display none
     appearAnimation
     transition "all" (sec 0.2) ease (sec 0)
-    display none
     opacity 0
 
   ".g-Modal--Show" & do
@@ -47,6 +48,7 @@ design = do
     boxShadow . pure . bsColor (rgba 0 0 0 0.5) $ shadowWithBlur (px 0) (px 0) (px 15)
 
     ".add" ? Add.design
+    ".form" ? Form.design
     ".delete" ? Delete.design
 
   ".paymentModal" & do
diff --git a/server/src/Design/View/Payment/Form.hs b/server/src/Design/View/Payment/Form.hs
new file mode 100644
index 0000000..aada12b
--- /dev/null
+++ b/server/src/Design/View/Payment/Form.hs
@@ -0,0 +1,35 @@
+module Design.View.Payment.Form
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".formHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym2 padding (px 20) (px 30)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".formContent" ? do
+    sym2 padding (px 20) (px 30)
+
+    ".buttons" ? do
+      display flex
+      justifyContent spaceAround
+      marginTop (em 1.5)
+
+      ".confirm" ?
+        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)