Optimize and refactor payments

2 files changed, 49 insertions, 27 deletions

diff --git a/server/src/Design/View/Payment/HeaderForm.hs b/server/src/Design/View/Payment/HeaderForm.hs
new file mode 100644
index 0000000..6081443
--- /dev/null
+++ b/server/src/Design/View/Payment/HeaderForm.hs
@@ -0,0 +1,40 @@
+module Design.View.Payment.HeaderForm
+  ( 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
+
+  ".g-PaymentHeaderForm" ? do
+    marginBottom (em 2)
+    marginLeft (pct Constants.blockPercentMargin)
+    marginRight (pct Constants.blockPercentMargin)
+    display flex
+    justifyContent spaceBetween
+    alignItems center
+    Media.mobile $ flexDirection column
+
+    ".textInput" ? do
+      display inlineBlock
+      marginBottom (px 0)
+
+      Media.tabletDesktop $ marginRight (px 30)
+      Media.mobile $ do
+        marginBottom (em 1)
+        width (pct 100)
+
+    ".selectInput" ? do
+      Media.tabletDesktop $ display inlineBlock
+      Media.mobile $ marginBottom (em 2)
+
+    ".addPayment" ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.mobile $ width (pct 100)
+      flexShrink 0
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/HeaderInfos.hs
index 49c1a09..acb393b 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/HeaderInfos.hs
@@ -1,4 +1,4 @@
-module Design.View.Payment.Header
+module Design.View.Payment.HeaderInfos
   ( design
   ) where
 
@@ -12,12 +12,14 @@ import qualified Design.Media     as Media
 
 design :: Css
 design = do
-  Media.desktop $ marginBottom (em 2)
-  Media.mobileTablet $ marginBottom (em 1)
-  marginLeft (pct Constants.blockPercentMargin)
-  marginRight (pct Constants.blockPercentMargin)
 
-  ".g-HeaderInfos__ExceedingPayers" ? do
+  ".g-PaymentHeaderInfos" ? do
+    Media.desktop $ marginBottom (em 2)
+    Media.mobileTablet $ marginBottom (em 1)
+    marginLeft (pct Constants.blockPercentMargin)
+    marginRight (pct Constants.blockPercentMargin)
+
+  ".g-PaymentHeaderInfos__ExceedingPayers" ? do
     backgroundColor Color.mossGreen
     borderRadius (px 5) (px 5) (px 5) (px 5)
     color Color.white
@@ -33,27 +35,7 @@ design = do
 
     ".userName" ? marginRight (px 8)
 
-  -- ".addPayment" ? do
-  --   Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-  --   Media.mobile $ width (pct 100)
-
-  ".g-HeaderForm" ? do
-    marginBottom (em 1)
-    Media.mobile $ textAlign (alignSide sideCenter)
-
-    ".textInput" ? do
-      display inlineBlock
-      marginBottom (px 0)
-
-      Media.tabletDesktop $ marginRight (px 30)
-      Media.mobile $ do
-        marginBottom (em 1)
-        width (pct 100)
-
-    ".selectInput" ? do
-      Media.tabletDesktop $ display inlineBlock
-
-  ".g-HeaderInfos__Repartition" ? do
+  ".g-PaymentHeaderInfos__Repartition" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
     Media.mobile $ lineHeight (px 25)