Responsive header

4 files changed, 36 insertions, 36 deletions

diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
index 7613ba3..1a8b499 100644
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -8,7 +8,7 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants
 
@@ -28,8 +28,8 @@ design = do
       display inlineBlock
       width (px 50)
       textAlign (alignSide sideCenter)
-      backgroundColor C.darkGrey
-      color C.white
+      backgroundColor Color.mountainMist
+      color Color.white
       height (px inputHeight)
       lineHeight (px inputHeight)
       fontSize (px 22)
@@ -40,10 +40,10 @@ design = do
       defaultInput inputHeight
       borderRadius radius (px 0) (px 0) radius
       "width" -: "calc(100% - 40px)"
-    "input:focus + label" ? backgroundColor C.grey
+    "input:focus + label" ? backgroundColor Color.pumice
     hover & do
-      input ? borderColor C.grey
-      label ? backgroundColor C.grey
+      input ? borderColor Color.pumice
+      label ? backgroundColor Color.pumice
 
   ".name" ? minWidth (px 150)
 
@@ -52,36 +52,36 @@ design = do
     marginRight (pct blockPercentMargin)
 
     (".punctual" <> ".monthly") ? do
-      defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
+      defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten
       paddingLeft (px 15)
       paddingRight (px 15)
       ".selected" & do
-        backgroundColor C.blue
-        color C.white
+        backgroundColor Color.blue
+        color Color.white
 
     hover & (".punctual" <> ".monthly") ?
-      ".selected" & backgroundColor (focusLighten C.blue)
+      ".selected" & backgroundColor (focusLighten Color.blue)
 
     focus & (".punctual" <> ".monthly") ?
-      ".selected" & backgroundColor (focusLighten C.blue)
+      ".selected" & backgroundColor (focusLighten Color.blue)
 
     ".punctual" ? borderRadius radius radius 0 0
     ".monthly" ? borderRadius 0 0 radius radius
 
   button # ".add" ? do
-    defaultButton C.red C.white (px inputHeight) focusLighten
+    defaultButton Color.red Color.white (px inputHeight) focusLighten
     paddingLeft (px 15)
     paddingRight (px 15)
     i ? marginLeft (px 10)
     ".waitingServer" & ("cursor" -: "not-allowed")
 
   ".name.error" <> ".cost.error" ? do
-    input ? borderColor C.redError
-    label ? backgroundColor C.redError
-    "input:focus + label" ? backgroundColor C.redError
+    input ? borderColor Color.redError
+    label ? backgroundColor Color.redError
+    "input:focus + label" ? backgroundColor Color.redError
 
   ".errorMessage" ? do
     position absolute
-    color C.redError
+    color Color.redError
     top (px (inputHeight + 10))
     left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs
index 5ba5711..dc36392 100644
--- a/src/server/Design/LoggedIn/Home/Expandables.hs
+++ b/src/server/Design/LoggedIn/Home/Expandables.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Expandables
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants
 
@@ -18,10 +18,10 @@ design = do
     right blockPadding
     bottom (px 2)
 
-  ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+  ".monthlyPayments" ? expandBlock Color.blue Color.white (px inputHeight)
 
   ".account" ? do
-    expandBlock C.green C.white (px inputHeight)
+    expandBlock Color.green Color.white (px inputHeight)
     ".userName" ? marginRight (px 10)
 
   ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 0572fbf..f95a925 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Pages
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants
 
@@ -17,9 +17,9 @@ design = do
   clearFix
 
   ".page" ? do
-    defaultButton C.white C.darkGrey (px 50) focusDarken
+    defaultButton Color.white Color.mountainMist (px 50) focusDarken
     display inlineBlock
-    border solid (px 2) C.darkGrey
+    border solid (px 2) Color.mountainMist
     marginRight (px 10)
     paddingLeft (px 10)
     paddingRight (px 10)
@@ -28,5 +28,5 @@ design = do
     ":not(.current)" & cursor pointer
 
     ".current" & do
-      borderColor C.red
-      color C.red
+      borderColor Color.red
+      color Color.red
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 58ffb33..e7a00d1 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -9,8 +9,8 @@ import Data.Monoid ((<>))
 import Clay
 import qualified Clay.Display as D
 
-import Design.Color as C
-import Design.Media
+import Design.Color as Color
+import qualified Design.Media as Media
 import Design.Constants
 import Design.Helper
 
@@ -26,8 +26,8 @@ design = do
 
   ".header" ? do
     fontWeight bold
-    backgroundColor C.blue
-    color C.white
+    backgroundColor Color.blue
+    color Color.white
     fontSize iconFontSize
     lineHeight headerHeight
 
@@ -46,7 +46,7 @@ design = do
 
         width (px borderW)
         height (px rowHeightPx)
-        backgroundColor C.green
+        backgroundColor Color.green
 
       ".cell:first-child::after" ? do
         display block
@@ -59,12 +59,12 @@ design = do
         height (px 0)
         borderTop solid (px triangleH) transparent
         borderBottom solid (px triangleH) transparent
-        borderLeft solid (px triangleW) C.green
+        borderLeft solid (px triangleW) Color.green
 
     nthChild "odd" & do
-      backgroundColor C.lightGrey
+      backgroundColor Color.mercury
     ".edition" & do
-      backgroundColor C.paymentFocus
+      backgroundColor Color.paymentFocus
       ".delete" |> button ? visibility visible
 
   ".cell" ? do
@@ -73,14 +73,14 @@ design = do
     ".category" & width (pct 40)
     ".cost" & do
       width (pct 17)
-      ".refund" & color C.green
+      ".refund" & color Color.green
     ".user" & width (pct 20)
     ".date" & do
       width (pct 20)
-      smallScreen $ do
+      Media.mobileTablet $ do
         ".shortDate" ? display inline
         ".longDate" ? display none
-      largeScreen $ do
+      Media.desktop $ do
         ".shortDate" ? display none
         ".longDate" ? display inline
     ".delete" & do
@@ -88,7 +88,7 @@ design = do
       width (pct 3)
       textAlign (alignSide sideCenter)
       button ? do
-        defaultButton C.red C.white (px rowHeightPx) focusLighten
+        defaultButton Color.red Color.white (px rowHeightPx) focusLighten
         borderRadius (px 0) (px 0) (px 0) (px 0)
         position absolute
         top (px 0)