Show payment header infos

4 files changed, 18 insertions, 151 deletions

diff --git a/server/src/Design/View/Payment/Delete.hs b/server/src/Design/View/Payment/Delete.hs
deleted file mode 100644
index f3d7e3f..0000000
--- a/server/src/Design/View/Payment/Delete.hs
+++ /dev/null
@@ -1,35 +0,0 @@
-module Design.View.Payment.Delete
-  ( design
-  ) where
-
-import           Clay
-
-import qualified Design.Color     as Color
-import qualified Design.Constants as Constants
-import qualified Design.Helper    as Helper
-
-design :: Css
-design = do
-  ".deleteHeader" ? do
-    backgroundColor Color.chestnutRose
-    fontSize (px 18)
-    color Color.white
-    sym padding (px 20)
-    textAlign (alignSide sideCenter)
-    borderRadius (px 5) (px 5) (px 0) (px 0)
-
-  ".deleteContent" ? do
-    sym padding (px 20)
-
-    ".buttons" ? do
-      display flex
-      justifyContent spaceAround
-      marginTop (em 1.5)
-
-      ".confirm" ?
-        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-      ".undo" ?
-        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
-
-      (".confirm" <> ".undo") ?
-        width (px 90)
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 9111374..49c1a09 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -8,45 +8,36 @@ import           Clay
 
 import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
-import qualified Design.Helper    as Helper
 import qualified Design.Media     as Media
 
 design :: Css
 design = do
-  Media.desktop $ marginBottom (em 3)
-  Media.mobileTablet $ marginBottom (em 2)
+  Media.desktop $ marginBottom (em 2)
+  Media.mobileTablet $ marginBottom (em 1)
   marginLeft (pct Constants.blockPercentMargin)
   marginRight (pct Constants.blockPercentMargin)
 
-  ".payerAndAdd" ? do
-    Media.tabletDesktop $ display flex
+  ".g-HeaderInfos__ExceedingPayers" ? do
+    backgroundColor Color.mossGreen
+    borderRadius (px 5) (px 5) (px 5) (px 5)
+    color Color.white
+    lineHeight (px Constants.inputHeight)
+    paddingLeft (px 10)
+    paddingRight (px 10)
     marginBottom (em 1)
 
-    ".exceedingPayers" ? do
-      backgroundColor Color.mossGreen
-      borderRadius (px 5) (px 5) (px 5) (px 5)
-      color Color.white
-      lineHeight (px Constants.inputHeight)
-      paddingLeft (px 10)
-      paddingRight (px 10)
+    Media.mobile $ do
+      textAlign (alignSide sideCenter)
 
-      Media.tabletDesktop $ do
-        "flex-grow" -: "1"
-        marginRight (px 15)
+    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
 
-      Media.mobile $ do
-        marginBottom (em 1)
-        textAlign (alignSide sideCenter)
-
-      ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
-
-      ".userName" ? marginRight (px 8)
+    ".userName" ? marginRight (px 8)
 
-    ".addPayment" ? do
-      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-      Media.mobile $ width (pct 100)
+  -- ".addPayment" ? do
+  --   Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+  --   Media.mobile $ width (pct 100)
 
-  ".searchLine" ? do
+  ".g-HeaderForm" ? do
     marginBottom (em 1)
     Media.mobile $ textAlign (alignSide sideCenter)
 
@@ -62,7 +53,7 @@ design = do
     ".selectInput" ? do
       Media.tabletDesktop $ display inlineBlock
 
-  ".infos" ? do
+  ".g-HeaderInfos__Repartition" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
     Media.mobile $ lineHeight (px 25)
 
diff --git a/server/src/Design/View/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
deleted file mode 100644
index 2028c1b..0000000
--- a/server/src/Design/View/Payment/Pages.hs
+++ /dev/null
@@ -1,54 +0,0 @@
-module Design.View.Payment.Pages
-  ( design
-  ) where
-
-import           Clay
-
-import qualified Design.Color     as Color
-import qualified Design.Constants as Constants
-import qualified Design.Helper    as Helper
-import qualified Design.Media     as Media
-
-design :: Css
-design = do
-  display flex
-  justifyContent center
-
-  Media.desktop $ do
-    padding (px 40) (px 30) (px 30) (px 30)
-
-  Media.tablet $ do
-    padding (px 30) (px 30) (px 30) (px 30)
-
-  Media.mobile $ do
-    padding (px 20) (px 0) (px 20) (px 0)
-    lineHeight (px 40)
-
-  svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)
-
-  ".page" ? do
-    display inlineBlock
-    fontWeight bold
-
-    Media.desktop $ do
-      Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken
-
-    Media.tabletDesktop $ do
-      border solid (px 2) Color.dustyGray
-      marginRight (px 10)
-
-    Media.tablet $ do
-      Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
-      fontSize (px 15)
-
-    Media.mobile $ do
-      Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
-      fontSize (px 12)
-      border solid (px 1) Color.dustyGray
-      marginRight (px 5)
-
-    ":not(.current)" & cursor pointer
-
-    ".current" & do
-      borderColor Color.chestnutRose
-      color Color.chestnutRose
diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
deleted file mode 100644
index 67828c9..0000000
--- a/server/src/Design/View/Payment/Table.hs
+++ /dev/null
@@ -1,35 +0,0 @@
-module Design.View.Payment.Table
-  ( design
-  ) where
-
-import           Clay
-
-import qualified Design.Media as Media
-
-design :: Css
-design = do
-  ".cell" ? do
-    ".name" & do
-      Media.tabletDesktop $ width (pct 30)
-
-    ".cost" & do
-      Media.tabletDesktop $ width (pct 10)
-
-    ".user" & do
-      Media.tabletDesktop $ width (pct 15)
-
-    ".category" & do
-      Media.tabletDesktop $ width (pct 10)
-
-    ".date" & do
-      Media.tabletDesktop $ width (pct 15)
-      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)