Use a dialog to add a payment

3 files changed, 45 insertions, 25 deletions

diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 2ad6a9c..4bd1ad6 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -19,7 +19,7 @@ design = do
 
   ".textInput" ? do
     position relative
-    marginBottom (em 1)
+    marginBottom (em 1.5)
     paddingTop (px inputTop)
     marginTop (px (-10))
 
@@ -57,3 +57,23 @@ design = do
         position absolute
         color Color.chestnutRose
         fontSize (pct 80)
+
+  ".radioGroup" ? do
+    position relative
+    marginBottom (em 2)
+
+    ".title" ? do
+      color Color.silver
+      marginBottom (em 0.8)
+
+    ".radioElems" ? do
+      display flex
+      "justify-content" -: "space-around"
+
+      label ? do
+        marginBottom (px 5)
+        display block
+        cursor pointer
+        input ? do
+          margin (px 0) (px 8) (px (-1)) (px 0)
+          cursor pointer
diff --git a/src/server/Design/LoggedIn/Home/Search.hs b/src/server/Design/LoggedIn/Home/Search.hs
index 1bc91ef..726b4cf 100644
--- a/src/server/Design/LoggedIn/Home/Search.hs
+++ b/src/server/Design/LoggedIn/Home/Search.hs
@@ -8,6 +8,10 @@ import Clay
 
 import Design.Constants
 
+import qualified Design.Helper as Helper
+import qualified Design.Color as Color
+import qualified Design.Constants as Constants
+
 design :: Css
 design = do
   marginBottom blockMarginBottom
@@ -17,3 +21,11 @@ design = do
   ".textInput" ? do
     display inlineBlock
     marginRight (px 30)
+    marginBottom (px 0)
+
+  ".stat" ? do
+    lineHeight (pct 100)
+
+  ".addPayment" ? do
+    Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+    float floatRight
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index b68f48f..538bc6d 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -33,32 +33,20 @@ design = do
   ".row" ? do
     fontSize (px 18)
     height (px rowHeightPx)
+    ".cell:first-child::before" ? do
+      display block
+      content (stringContent "")
+      position absolute
+      top (px 0)
+      left (px 0)
+      width (px 0)
+      height (px rowHeightPx)
+      backgroundColor Color.mossGreen
+      transition "width" (sec 0.3) ease (sec 0)
+      opacity (0.8)
 
     hover & do
-      let (borderW, triangleW, triangleH) = (4, 6, 8)
-      ".cell:first-child::before" ? do
-        display block
-        content (stringContent "")
-        position absolute
-        top (px 0)
-        left (px 0)
-
-        width (px borderW)
-        height (px rowHeightPx)
-        backgroundColor Color.mossGreen
-
-      ".cell:first-child::after" ? do
-        display block
-        content (stringContent "")
-        position absolute
-        top (px (rowHeightPx `Prelude.div` 2 - triangleH))
-        left (px borderW)
-
-        width (px 0)
-        height (px 0)
-        borderTop solid (px triangleH) transparent
-        borderBottom solid (px triangleH) transparent
-        borderLeft solid (px triangleW) Color.mossGreen
+      ".cell:first-child::before" ? width (px 5)
 
     nthChild "odd" & do
       backgroundColor Color.wildSand