Adding UI to modify the income

4 files changed, 35 insertions, 7 deletions

diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 53839c1..6e2fde3 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -6,6 +6,7 @@ module Design.Helper
   , defaultInput
   , centeredWithMargin
   , expandBlock
+  , verticalCentering
   ) where
 
 import Clay
@@ -60,3 +61,9 @@ expandBlock headerBackground headerColor headerHeight = do
     position relative
     paddingLeft blockPadding
     paddingRight (px 55)
+
+verticalCentering :: Css
+verticalCentering = do
+  position absolute
+  top (pct 50)
+  "transform" -: "translateY(-50%)"
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index 6bfa034..35a30a6 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -6,10 +6,6 @@ module Design.LoggedIn
 
 import Clay
 
-import Design.Color as C
-import Design.Helper
-import Design.Constants
-
 import Design.LoggedIn.Add
 import Design.LoggedIn.Expandables
 import Design.LoggedIn.Table
diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs
index 6d4de69..579cead 100644
--- a/src/server/Design/LoggedIn/Add.hs
+++ b/src/server/Design/LoggedIn/Add.hs
@@ -15,7 +15,7 @@ import Design.Constants
 addDesign :: Css
 addDesign =
 
-  form ? do
+  form # ".addPayment" ? do
     centeredWithMargin
     marginBottom blockMarginBottom
     display flex
@@ -28,7 +28,7 @@ addDesign =
       label ? do
         fontWeight bold
         display inlineBlock
-        width (px 40)
+        width (px 50)
         textAlign (alignSide sideCenter)
         backgroundColor C.darkGrey
         color C.white
diff --git a/src/server/Design/LoggedIn/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs
index 3807da4..66a9b06 100644
--- a/src/server/Design/LoggedIn/Expandables.hs
+++ b/src/server/Design/LoggedIn/Expandables.hs
@@ -4,6 +4,8 @@ module Design.LoggedIn.Expandables
   ( expandablesDesign
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 import Design.Color as C
@@ -31,7 +33,30 @@ expandablesDesign =
 
       ".income" ? do
         backgroundColor C.lightGrey
-        lineHeight rowHeight
         padding (px 0) (px 20) (px 0) (px 20)
+        position relative
+        lineHeight rowHeight
+
+        input ? do
+          defaultInput inputHeight
+          marginLeft (px 20)
+          marginTop (px (-5))
+          width (px 100)
+
+        button ? do
+          marginLeft (px 20)
+          paddingLeft (px 15)
+          paddingRight (px 15)
+          marginTop (px (-5))
+
+        ".validateIncomeEdition" <> ".editIncomeEdition" ?
+          defaultButton C.red C.white (px inputHeight)
+
+        ".undoIncomeEdition" ?
+          defaultButton C.blue C.white (px inputHeight)
+
+        ".error" ? do
+          color C.redError
+          lineHeight (px 30)
 
     ".detail" |> ".header" ? borderRadius radius radius 0 0