5 files changed, 46 insertions, 17 deletions
diff --git a/server/src/Design/Form.hs b/server/src/Design/Form.hs
index be0e74f..0385cb4 100644
--- a/server/src/Design/Form.hs
+++ b/server/src/Design/Form.hs
@@ -53,8 +53,10 @@ design = do
       right (px 0)
       top (px 27)
       zIndex inputZIndex
-      hover & "svg path" ? do
-        "fill" -: "rgb(220, 220, 220)"
+      svg ? "path" ?
+        ("fill" -: Color.toString Color.silver)
+      hover & svg ? "path" ?
+        ("fill" -: Color.toString (Color.silver -. 25))
 
     (input # ".filled" |+ label) <> (input # focus |+ label) ? do
       top (px 0)
@@ -108,18 +110,18 @@ design = do
         fontWeight bold
 
   ".selectInput" ? do
+    marginBottom (em 1)
     label ? do
       display block
       marginBottom (px 10)
       fontSize (pct 80)
     select ? do
+      width (pct 100)
       backgroundColor Color.white
       border solid (px 1) Color.silver
       sym borderRadius (px 3)
       sym2 padding (px 5) (px 8)
-      option ? do
-        firstChild & display none
-        sym2 padding (px 5) (px 8)
+      option ? sym2 padding (px 5) (px 8)
     ".error" & do
       select ? borderColor Color.chestnutRose
       ".errorMessage" ? do
diff --git a/server/src/Design/Modal.hs b/server/src/Design/Modal.hs
index 2612257..ce427c0 100644
--- a/server/src/Design/Modal.hs
+++ b/server/src/Design/Modal.hs
@@ -9,19 +9,18 @@ import           Clay
 design :: Css
 design = do
 
-  ".curtain" ? do
+  ".modalCurtain" ? do
     position fixed
-    cursor pointer
     top (px 0)
     left (px 0)
     width (pct 100)
     height (pct 100)
-    backgroundColor (rgba 0 0 0 0.5)
+    backgroundColor (rgba 0 0 0 0.7)
     zIndex 1000
     opacity 1
     transition "all" (sec 0.2) ease (sec 0)
 
-  ".content" ? do
+  ".modalContent" ? do
     minWidth (px 270)
     position fixed
     top (pct 25)
@@ -29,7 +28,6 @@ design = do
     "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)
 
diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index 0d59fa0..2102ff8 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -4,6 +4,7 @@ module Design.View.Payment
 
 import           Clay
 
+import qualified Design.View.Payment.Add    as Add
 import qualified Design.View.Payment.Header as Header
 import qualified Design.View.Payment.Pages  as Pages
 import qualified Design.View.Payment.Table  as Table
@@ -11,5 +12,6 @@ import qualified Design.View.Payment.Table  as Table
 design :: Css
 design = do
   ".header" ? Header.design
+  ".add" ? Add.design
   ".table" ? Table.design
   ".pages" ? Pages.design
diff --git a/server/src/Design/View/Payment/Add.hs b/server/src/Design/View/Payment/Add.hs
new file mode 100644
index 0000000..199ad36
--- /dev/null
+++ b/server/src/Design/View/Payment/Add.hs
@@ -0,0 +1,32 @@
+module Design.View.Payment.Add
+  ( 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
+  ".addHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym padding (px 20)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".addContent" ? do
+    sym padding (px 20)
+
+    ".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
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 80c5436..0cb5b5d 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -6,8 +6,6 @@ import           Data.Monoid      ((<>))
 
 import           Clay
 
-import           Design.Constants
-
 import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
 import qualified Design.Helper    as Helper
@@ -17,8 +15,8 @@ design :: Css
 design = do
   Media.desktop $ marginBottom (em 3)
   Media.mobileTablet $ marginBottom (em 2)
-  marginLeft (pct blockPercentMargin)
-  marginRight (pct blockPercentMargin)
+  marginLeft (pct Constants.blockPercentMargin)
+  marginRight (pct Constants.blockPercentMargin)
 
   ".payerAndAdd" ? do
     Media.tabletDesktop $ display flex
@@ -55,9 +53,6 @@ design = do
     ".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