Features/categories

9 files changed, 80 insertions, 52 deletions

diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index a532ac8..4e2b8cc 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -2,13 +2,13 @@ module Design.Constants where
 
 import Clay
 
-iconFontSize :: Size Abs
+iconFontSize :: Size LengthUnit
 iconFontSize = px 32
 
-radius :: Size Abs
+radius :: Size LengthUnit
 radius = px 3
 
-blockPadding :: Size Abs
+blockPadding :: Size LengthUnit
 blockPadding = px 15
 
 blockPercentWidth :: Double
diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
index 2320c45..4678633 100644
--- a/src/server/Design/Dialog.hs
+++ b/src/server/Design/Dialog.hs
@@ -14,8 +14,11 @@ design = do
   ".content" ? do
     minWidth (px 270)
 
-  ".paymentDialog" ? do
-    ".radioGroup" ? ".title" ? display none
+    ".paymentDialog" & do
+      ".radioGroup" ? ".title" ? display none
+      ".selectInput" ? do
+        select ? width (pct 100)
+        marginBottom (em 1)
 
   ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
     h1 ? marginBottom (em 1.5)
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 3043125..ebb8ac8 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -18,6 +18,10 @@ design = do
   let inputPaddingBottom = 3
   let inputZIndex = 1
 
+  label ? do
+    cursor pointer
+    color Color.silver
+
   ".textInput" ? do
     position relative
     marginBottom (em 1.5)
@@ -44,7 +48,6 @@ design = do
       position absolute
       top (px inputTop)
       left (px 0)
-      color Color.silver
       transition "all" (sec 0.2) easeIn (sec 0)
 
     button ? do
@@ -68,6 +71,15 @@ design = do
         color Color.chestnutRose
         fontSize (pct 80)
 
+  ".colorInput" ? do
+    display flex
+    alignItems center
+    marginBottom (em 1.5)
+
+    input ? do
+      borderColor transparent
+      backgroundColor transparent
+
   ".radioGroup" ? do
     position relative
     marginBottom (em 2)
@@ -90,11 +102,29 @@ design = do
         width (px 30)
         margin (px 0) (px (-15)) (px 0) (px (-15))
 
-      label ? cursor pointer
-
       "input:focus + label" ? do
         textDecoration underline
 
       "input:checked + label" ? do
         color Color.chestnutRose
         fontWeight bold
+
+  ".selectInput" ? do
+    label ? do
+      display block
+      marginBottom (px 10)
+      fontSize (pct 80)
+    select ? do
+      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)
+    ".error" & do
+      select ? borderColor Color.chestnutRose
+      ".errorMessage" ? do
+        color Color.chestnutRose
+        fontSize (pct 80)
+        marginTop (em 0.5)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index f25cf05..869616d 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -17,13 +17,12 @@ import Data.Monoid ((<>))
 
 import Design.Constants
 import Design.Color as Color
-import qualified Clay.Display as D
 
 clearFix :: Css
 clearFix =
   after & do
     content (stringContent "")
-    display D.table
+    display displayTable
     clear both
 
 button :: Color -> Color -> Size a -> (Color -> Color) -> Css
@@ -40,7 +39,7 @@ button backgroundCol textCol h focusOp = do
   hover & backgroundColor (focusOp backgroundCol)
   focus & backgroundColor (focusOp backgroundCol)
 
-iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
+iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css
 iconButton backgroundCol textCol h focusOp = do
   button backgroundCol textCol h focusOp
   i <> span ? do
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index 2899fa4..4a21832 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -7,16 +7,39 @@ module Design.LoggedIn
 import Clay
 
 import qualified Design.LoggedIn.Home as Home
-import qualified Design.LoggedIn.Income as Income
 import qualified Design.LoggedIn.Stat as Stat
 import qualified Design.LoggedIn.Table as Table
 
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
 design :: Css
 design = do
   ".home" ? Home.design
-  ".income" ? Income.design
   ".stat" ? Stat.design
   Table.design
 
-  ".textual" ? do
+  ".withMargin" ? do
     "margin" -: "0 2vw"
+
+  ".titleButton" ? do
+    h1 ? do
+      Media.tabletDesktop $ float floatLeft
+
+    button ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.tabletDesktop $ do
+        float floatRight
+        position relative
+        top (px (-8))
+      Media.mobile $ do
+        width (pct 100)
+        marginBottom (px 20)
+
+  ".tag" ? do
+    sym borderRadius (px 4)
+    sym2 padding (px 2) (px 5)
+    boxShadow (px 2) (px 2) (px 5) (rgba 0 0 0 0.3)
+    color Color.white
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 73ced3a..cb46ac9 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -11,17 +11,20 @@ import qualified Design.Media as Media
 design :: Css
 design = do
   ".cell" ? do
-    ".category" & do
-      Media.tabletDesktop $ width (pct 36)
+    ".name" & do
+      Media.tabletDesktop $ width (pct 30)
 
     ".cost" & do
-      Media.tabletDesktop $ width (pct 15)
+      Media.tabletDesktop $ width (pct 10)
 
     ".user" & do
-      Media.tabletDesktop $ width (pct 20)
+      Media.tabletDesktop $ width (pct 15)
+
+    ".category" & do
+      Media.tabletDesktop $ width (pct 10)
 
     ".date" & do
-      Media.tabletDesktop $ width (pct 20)
+      Media.tabletDesktop $ width (pct 15)
       Media.desktop $ do
         ".shortDate" ? display none
         ".longDate" ? display inline
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
deleted file mode 100644
index c44c67b..0000000
--- a/src/server/Design/LoggedIn/Income.hs
+++ /dev/null
@@ -1,29 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Income
-  ( design
-  ) where
-
-import Clay
-
-import qualified Design.Helper as Helper
-import qualified Design.Constants as Constants
-import qualified Design.Color as Color
-import qualified Design.Media as Media
-
-design :: Css
-design =
-  ".monthlyNetIncomes" ? do
-
-    h1 ? do
-      Media.tabletDesktop $ float floatLeft
-
-    ".addIncome" ? do
-      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-      Media.tabletDesktop $ do
-        float floatRight
-        position relative
-        top (px (-8))
-      Media.mobile $ do
-        width (pct 100)
-        marginBottom (px 20)
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
index 1af5e2b..44b001a 100644
--- a/src/server/Design/LoggedIn/Table.hs
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -7,7 +7,6 @@ module Design.LoggedIn.Table
 import Data.Monoid ((<>))
 
 import Clay
-import qualified Clay.Display as D
 
 import Design.Color as Color
 import qualified Design.Media as Media
@@ -19,7 +18,7 @@ design = do
     textAlign (alignSide sideCenter)
 
   ".lines" ? do
-    Media.tabletDesktop $ display D.table
+    Media.tabletDesktop $ display displayTable
     width (pct 100)
     textAlign (alignSide (sideCenter))
 
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
index d61a8e1..77220ee 100644
--- a/src/server/Design/Media.hs
+++ b/src/server/Design/Media.hs
@@ -29,8 +29,8 @@ desktop = query [Media.minWidth tabletDesktopLimit]
 query :: [Feature] -> Css -> Css
 query = Clay.query Media.screen
 
-mobileTabletLimit :: Size Abs
+mobileTabletLimit :: Size LengthUnit
 mobileTabletLimit = (px 520)
 
-tabletDesktopLimit :: Size Abs
+tabletDesktopLimit :: Size LengthUnit
 tabletDesktopLimit = (px 950)