Add the user name in the header

1 files changed, 38 insertions, 21 deletions

diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index a45a7b2..8a348ad 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -4,6 +4,8 @@ module Design.Header
   ( headerDesign
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 import Design.Color as C
@@ -13,28 +15,43 @@ headerDesign :: Css
 headerDesign =
 
   header ? do
-    let headerHeight = 80
-    let sidePercent = (pct blockPercentMargin)
+    let headerHeight = px 80
+    let headerPadding = px 20
+    let darkenedRed = C.red +. 10
+    lineHeight headerHeight
+    height headerHeight
+    marginBottom blockMarginBottom
+    position relative
 
-    h1 ? do
-      fontSize (px 45)
-      textAlign (alignSide sideLeft)
-      backgroundColor C.red
+    button ? do
       color C.white
-      lineHeight (px headerHeight)
-      marginBottom blockMarginBottom
-      paddingLeft sidePercent
+      backgroundColor C.red
+      hover & backgroundColor darkenedRed
+      focus & backgroundColor darkenedRed
+
+    ".title" ? do
+      width (pct 100)
+      height (pct 100)
+
+      h1 ? do
+        fontSize (px 35)
+        textAlign (alignSide sideLeft)
+        paddingLeft headerPadding
+        paddingRight headerPadding
 
-    button # ".icon" ? do
-      let iconHeight = 50
-      let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
+    ".signedPanel" ? do
+      float floatRight
+      height (pct 100)
+      display flex
       position absolute
-      top (px sideMargin)
-      right sidePercent
-      height (px iconHeight)
-      lineHeight (px iconHeight)
-      backgroundColor C.red
-      color C.white
-      fontSize iconFontSize
-      hover & i ? transform (scale 1.2 1.2)
-      focus & i ? transform (scale 1.2 1.2)
+      top (px 0)
+      right (px 0)
+
+      ".user" <> ".icon" ? do
+        paddingLeft headerPadding
+        paddingRight headerPadding
+        borderLeft solid (px 1) darkenedRed
+
+      ".icon" ? do
+        fontSize iconFontSize
+        borderRight solid (px 1) darkenedRed