More uialignment fixes (#60)

- Masthead user display name and email are now centered vertically.
- Shell now allows Masthead to use a different NavigationProperties than the one passed to the main navbar.

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG
 
+## v6.0.3
+### Fixed
+- Masthead user display name and email are now centered vertically.
+- Shell now allows Masthead to use a different NavigationProperties than the one passed to the main navbar.
+
 ## v6.0.2
 ### Fixed
 - Changed Checkbox and RadioInputs to be controlled components: pass the `checked` parameter instead of `defaultChecked` to fix issue when the checkbox state change did not reflect the new value. Also change the onChange handlers to return the new values from the incoming props instead of relying on the html element.

lib/components/Masthead/Masthead.module.scss

@@ -118,18 +118,7 @@ $search-max-size: 100 * $grid-size;
             padding: 0 $grid-size*4;
             width: 100%;
 
-            &>* {
-                height: $layout-nav-item-height / 2;
-                display: block;
-            }
-
-            .name {
-                line-height: #{$layout-nav-item-height / 2 + $grid-size};
-            }
-
             .email {
-                line-height: #{$layout-nav-item-height / 2 - 3*$grid-size};
-
                 @include themify {
                     color: themed('color-text-placeholder');
                 }
@@ -206,6 +195,10 @@ $search-max-size: 100 * $grid-size;
 
                     .masthead-toolbar-btn-container {
                         width: 100%;
+                        height: $layout-nav-item-height;
+                        display: flex;
+                        flex-direction: column;
+                        justify-content: center; // vertically align
                         text-align: left;
 
                         button {

lib/components/Shell/Shell.tsx

@@ -27,7 +27,7 @@ export function Shell({ theme, isRtl, masthead, navigation, children, onClick }:
     return (
         <div className={css('theme-' + theme)}>
             <div className={css('shell', { rtl: isRtl })} onClick={onClick}>
-                {masthead && <Masthead {...masthead} navigation={navigation} />}
+                {masthead && <Masthead navigation={navigation} {...masthead} />}
                 <div className={css('nav-and-workspace')}>
                     {navigation && <Navigation {...navigation} />}
                     <div className={css('workspace')}>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "6.0.2",
+    "version": "6.0.3",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",