Add the user name in the header

2 files changed, 60 insertions, 29 deletions

diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm
index b8a5bf1..b49cf74 100644
--- a/src/client/elm/View/Header.elm
+++ b/src/client/elm/View/Header.elm
@@ -3,6 +3,7 @@ module View.Header
   ) where
 
 import Signal exposing (Address)
+import Dict
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -19,16 +20,29 @@ renderHeader : Address Action -> Model -> Html
 renderHeader address model =
   header
     []
-    [ h1
-        []
-        [ text (getMessage "SharedCost" model.translations) ]
+    [ button
+        [ class "title" ]
+        [ h1
+            []
+            [ text (getMessage "SharedCost" model.translations) ]
+        ]
     , case model.view of
-        LoggedInView _ ->
-          button
-            [ class "icon"
-            , onClick address SignOut
+        LoggedInView { users, account } ->
+          div
+            [ class "signedPanel" ]
+            [ button
+                [ class "user" ]
+                [ Dict.get account.me users
+                    |> Maybe.map .name
+                    |> Maybe.withDefault ""
+                    |> text
+                ]
+            , button
+                [ class "icon"
+                , onClick address SignOut
+                ]
+                [ renderIcon "power-off" ]
             ]
-            [ renderIcon "power-off" ]
         _ ->
           text ""
     ]
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