Add modal component

3 files changed, 51 insertions, 30 deletions

diff --git a/server/src/Design/Dialog.hs b/server/src/Design/Dialog.hs
deleted file mode 100644
index 034a8b1..0000000
--- a/server/src/Design/Dialog.hs
+++ /dev/null
@@ -1,22 +0,0 @@
-module Design.Dialog
-  ( design
-  ) where
-
-import           Data.Monoid ((<>))
-
-import           Clay
-
-design :: Css
-design = do
-
-  ".content" ? do
-    minWidth (px 270)
-
-    ".paymentDialog" & do
-      ".radioGroup" ? ".title" ? display none
-      ".selectInput" ? do
-        select ? width (pct 100)
-        marginBottom (em 1)
-
-  ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
-    h1 ? marginBottom (em 1.5)
diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
index 5e5035c..4da4ffb 100644
--- a/server/src/Design/Global.hs
+++ b/server/src/Design/Global.hs
@@ -3,19 +3,17 @@ module Design.Global
   ) where
 
 import           Clay
-
 import           Data.Text.Lazy   (Text)
 
-import qualified Design.Dialog    as Dialog
-import qualified Design.Errors    as Errors
-import qualified Design.Form      as Form
-import qualified Design.Tooltip   as Tooltip
-import qualified Design.Views     as Views
-
 import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
+import qualified Design.Errors    as Errors
+import qualified Design.Form      as Form
 import qualified Design.Helper    as Helper
 import qualified Design.Media     as Media
+import qualified Design.Modal     as Modal
+import qualified Design.Tooltip   as Tooltip
+import qualified Design.Views     as Views
 
 globalDesign :: Text
 globalDesign = renderWith compact [] global
@@ -23,7 +21,7 @@ globalDesign = renderWith compact [] global
 global :: Css
 global = do
   ".errors" ? Errors.design
-  ".dialog" ? Dialog.design
+  ".modal" ? Modal.design
   ".tooltip" ? Tooltip.design
   Views.design
   Form.design
@@ -84,6 +82,8 @@ global = do
         rotateKeyframes
         rotateAnimation
 
+  select ? cursor pointer
+
 rotateAnimation :: Css
 rotateAnimation = do
   animationName "rotate"
diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
new file mode 100644
index 0000000..2612257
--- /dev/null
+++ b/server/src/Design/Modal.hs
@@ -0,0 +1,43 @@
+module Design.Modal
+  ( design
+  ) where
+
+import           Data.Monoid ((<>))
+
+import           Clay
+
+design :: Css
+design = do
+
+  ".curtain" ? do
+    position fixed
+    cursor pointer
+    top (px 0)
+    left (px 0)
+    width (pct 100)
+    height (pct 100)
+    backgroundColor (rgba 0 0 0 0.5)
+    zIndex 1000
+    opacity 1
+    transition "all" (sec 0.2) ease (sec 0)
+
+  ".content" ? do
+    minWidth (px 270)
+    position fixed
+    top (pct 25)
+    left (pct 50)
+    "transform" -: "translate(-50%, -25%)"
+    zIndex 1000
+    backgroundColor white
+    sym padding (px 20)
+    sym borderRadius (px 5)
+    boxShadow (px 0) (px 0) (px 15) (rgba 0 0 0 0.5)
+
+  ".paymentModal" & do
+    ".radioGroup" ? ".title" ? display none
+    ".selectInput" ? do
+      select ? width (pct 100)
+      marginBottom (em 1)
+
+  ".deletePaymentModal" <> ".deleteIncomeModal" ? do
+    h1 ? marginBottom (em 1.5)