Show incomes in a table and update like payments are updated

1 files changed, 16 insertions, 86 deletions

diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 3358f5d..73ced3a 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -4,101 +4,31 @@ module Design.LoggedIn.Home.Table
   ( design
   ) where
 
-import Data.Monoid ((<>))
-
 import Clay
-import qualified Clay.Display as D
 
-import Design.Color as Color
 import qualified Design.Media as Media
 
 design :: Css
 design = do
-  ".noPayment" ? do
-    margin (em 2) (em 2) (em 2) (em 2)
-    textAlign (alignSide sideCenter)
+  ".cell" ? do
+    ".category" & do
+      Media.tabletDesktop $ width (pct 36)
 
-  ".lines" ? do
-    Media.tabletDesktop $ display D.table
-    width (pct 100)
-    textAlign (alignSide (sideCenter))
+    ".cost" & do
+      Media.tabletDesktop $ width (pct 15)
 
-    ".header" <> ".row" ? do
-      Media.tabletDesktop $ display tableRow
+    ".user" & do
+      Media.tabletDesktop $ width (pct 20)
 
-    ".header" ? do
+    ".date" & do
+      Media.tabletDesktop $ width (pct 20)
       Media.desktop $ do
-        fontSize (px 18)
-        height (px 70)
-
-      Media.tabletDesktop $ do
-        backgroundColor Color.gothic
-        color Color.white
-
+        ".shortDate" ? display none
+        ".longDate" ? display inline
       Media.tablet $ do
-        fontSize (px 16)
-        height (px 60)
-
+        ".shortDate" ? display inline
+        ".longDate" ? display none
       Media.mobile $ do
-        display none
-
-    ".row" ? do
-      nthChild "even" & backgroundColor Color.wildSand
-
-      Media.desktop $ do
-        fontSize (px 18)
-        height (px 60)
-
-      Media.tablet $ do
-        height (px 50)
-
-      Media.mobile $ do
-        lineHeight (px 25)
-        paddingTop (px 10)
-        paddingBottom (px 10)
-
-    ".cell" ? do
-      Media.tabletDesktop $ display tableCell
-      position relative
-      verticalAlign middle
-
-      ".category" & do
-        Media.tabletDesktop $ width (pct 36)
-        Media.mobile $ do
-          fontSize (px 20)
-          lineHeight (px 30)
-          color Color.gothic
-
-      ".cost" & do
-        Media.tabletDesktop $ width (pct 15)
-        ".refund" & color Color.mossGreen
-
-      ".user" & do
-        Media.tabletDesktop $ width (pct 20)
-
-      ".date" & do
-        Media.tabletDesktop $ width (pct 20)
-        Media.desktop $ do
-          ".shortDate" ? display none
-          ".longDate" ? display inline
-        Media.tablet $ do
-          ".shortDate" ? display inline
-          ".longDate" ? display none
-        Media.mobile $ do
-          ".shortDate" ? display none
-          ".longDate" ? display inline
-          marginBottom (em 0.5)
-
-      ".cell.button" & do
-        position relative
-        textAlign (alignSide sideCenter)
-        button ? do
-          padding (px 10) (px 10) (px 10) (px 10)
-          hover & "svg path" ? do
-            "fill" -: "rgb(237, 122, 116)"
-
-        Media.tabletDesktop $ width (pct 3)
-
-        Media.mobile $ do
-          display inlineBlock
-          button ? display flex
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+        marginBottom (em 0.5)