Adding UI income read-only

1 files changed, 57 insertions, 40 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 7d2b7b6..10e997d 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -26,9 +26,15 @@ radius = px 3
 blockPadding :: Size Abs
 blockPadding = px 15
 
+blockPercentWidth :: Double
+blockPercentWidth = 90
+
 blockMarginBottom :: Size Abs
 blockMarginBottom = px 50
 
+rowHeight :: Size Abs
+rowHeight = px 60
+
 global :: Css
 global = do
 
@@ -38,24 +44,27 @@ global = do
     fontFamily ["Cantarell"] [sansSerif]
 
   header ? do
-    let headerHeight = 150
+    let headerHeight = 80
+    let sidePercent = (pct ((100 - blockPercentWidth) / 2))
 
     h1 ? do
       fontSize (px 45)
-      textAlign (alignSide sideCenter)
-      color C.red
+      textAlign (alignSide sideLeft)
+      backgroundColor C.red
+      color C.white
       lineHeight (px headerHeight)
-
+      marginBottom blockMarginBottom
+      paddingLeft sidePercent
     button # ".signOut" ? do
       let iconHeight = 50
-      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2) + 5
+      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
       position absolute
       top (px sideMargin)
-      right (pct 2)
+      right sidePercent
       height (px iconHeight)
       lineHeight (px iconHeight)
-      backgroundColor C.white
-      color C.red
+      backgroundColor C.red
+      color C.white
       fontSize iconFontSize
       hover & transform (scale 1.2 1.2)
 
@@ -137,6 +146,11 @@ global = do
       centeredWithMargin
       clearFix
 
+      ".expand" ? do
+        position absolute
+        right blockPadding
+        bottom (px 2)
+
       ".monthlyPayments" ? do
         marginBottom blockMarginBottom
 
@@ -144,40 +158,35 @@ global = do
           float floatLeft
           width (pct 55)
 
-        button # ".count" ? do
-          width (pct 100)
-          fontSize (px 18)
+        ".count" ? do
           defaultButton C.blue C.white inputHeight
-          borderRadius radius radius radius radius
-          textAlign (alignSide sideLeft)
-          position relative
-          paddingLeft blockPadding
-          paddingRight blockPadding
-
-          ".expand" ? do
-            float floatRight
-            marginTop (px (-2))
-
-        ".detail" &
-          button # ".count" ?
-            borderRadius radius radius 0 0
-
-      ".exceedingPayers" ? do
-        backgroundColor C.green
-        color C.white
-        fontSize (px 18)
-        borderRadius radius radius radius radius
+          buttonBlock
+          cursor cursorText
+
+        button # ".count" ? cursor pointer
+
+      ".account" ? do
         marginBottom blockMarginBottom
-        paddingLeft blockPadding
-        paddingRight blockPadding
 
         largeScreen $ do
           float floatRight
           width (pct 40)
 
-        ".exceedingPayer" ? do
-          lineHeight (px inputHeight)
-          ".userName" ? marginRight (px 10)
+        ".exceedingPayers" ? do
+          defaultButton C.green C.white inputHeight
+          buttonBlock
+
+          ".exceedingPayer" ? do
+            lineHeight (px inputHeight)
+            ".userName" ? marginRight (px 10)
+
+        ".income" ? do
+          backgroundColor C.lightGrey
+          lineHeight rowHeight
+          padding (px 0) (px 20) (px 0) (px 20)
+
+      ".detail" |> (".count" <> ".exceedingPayers") ?
+        borderRadius radius radius 0 0
 
     ".table" ? do
       display D.table
@@ -187,11 +196,10 @@ global = do
 
       ".header" <> ".row" ? display tableRow
       let headerHeight = (px 70)
-      let rowHeight = (px 60)
 
       ".header" ? do
         fontWeight bold
-        backgroundColor C.red
+        backgroundColor C.blue
         color C.white
         fontSize iconFontSize
         lineHeight headerHeight
@@ -261,7 +269,7 @@ global = do
     form ? do
       let inputHeight = 50
       width (px 500)
-      marginTop (px 50)
+      marginTop (px 100)
       marginLeft auto
       marginRight auto
 
@@ -296,7 +304,6 @@ defaultButton backgroundCol textCol pxHeight = do
   borderRadius radius radius radius radius
   verticalAlign middle
   cursor pointer
-  height (px pxHeight)
   lineHeight (px pxHeight)
   textAlign (alignSide sideCenter)
 
@@ -311,6 +318,16 @@ defaultInput inputHeight = do
 
 centeredWithMargin :: Css
 centeredWithMargin = do
-  width (pct 90)
+  width (pct blockPercentWidth)
   marginLeft auto
   marginRight auto
+
+buttonBlock :: Css
+buttonBlock = do
+  width (pct 100)
+  fontSize (px 18)
+  borderRadius radius radius radius radius
+  textAlign (alignSide sideLeft)
+  position relative
+  paddingLeft blockPadding
+  paddingRight blockPadding