aboutsummaryrefslogtreecommitdiff
path: root/server/src/Design
diff options
context:
space:
mode:
Diffstat (limited to 'server/src/Design')
-rw-r--r--server/src/Design/Form.hs12
-rw-r--r--server/src/Design/Modal.hs8
-rw-r--r--server/src/Design/View/Payment.hs2
-rw-r--r--server/src/Design/View/Payment/Add.hs32
-rw-r--r--server/src/Design/View/Payment/Header.hs9
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