Fix focus to match portal (#56)

less/Common/Constants.less

@@ -54,6 +54,8 @@
 
 @SelectionColor: #3074B0;
 
+@FocusColor: #00bcf2;
+
 /******************************************************************************
                                 METRICS
 /******************************************************************************/
@@ -198,7 +200,7 @@
 }
 
 .focus() {
-    outline: 1px dashed @AccentMedium;
+    outline: 1px dashed @FocusColor;
 }
 
 /************************************************************************************************

less/documentDB.less

@@ -14,6 +14,10 @@ body {
     font-family: @DataExplorerFont;
     font-size: 12px;
     height: 100%;
+
+    :focus {
+        .focus()
+    }
 }
 
 .float-right {

src/Explorer/Controls/FeaturePanel/FeaturePanelComponent.tsx

@@ -133,7 +133,7 @@ export const FeaturePanelComponent: React.FunctionComponent = () => {
       .find(f => f.key === "feature.notebookserverurl")
       .reactState[1]("https://localhost:10001/12345/notebook/");
     stringFeatures.find(f => f.key === "feature.notebookservertoken").reactState[1]("token");
-    stringFeatures.find(f => f.key === "feature.notebookbasepath").reactState[1](".");
+    stringFeatures.find(f => f.key === "feature.notebookbasepath").reactState[1]("./notebooks");
     setPlatform(platformOptions.find(o => o.key === "Hosted"));
   };
 

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -6,10 +6,9 @@
  */
 
 import * as React from "react";
-import * as ReactDOM from "react-dom";
 import * as Constants from "../../../Common/Constants";
 import AnimateHeight from "react-animate-height";
-import { IconButton } from "office-ui-fabric-react/lib/Button";
+import { IconButton, IButtonStyles } from "office-ui-fabric-react/lib/Button";
 import {
   DirectionalHint,
   IContextualMenuItemProps,
@@ -227,6 +226,10 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
 
   private renderContextMenuButton(node: TreeNode): JSX.Element {
     const menuItemLabel = "More";
+    const buttonStyles: Partial<IButtonStyles> = {
+      rootFocused: { outline: `1px dashed ${Constants.StyleConstants.FocusColor}` }
+    };
+
     return (
       <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
@@ -264,6 +267,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
               onRenderIcon: (props: any) => <img src={menuItem.iconSrc} alt="" />
             }))
           }}
+          styles={buttonStyles}
         />
       </div>
     );

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -191,6 +191,13 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
           }
         }
         name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
       />
     </div>
   </div>
@@ -314,6 +321,13 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
           }
         }
         name="More"
+        styles={
+          Object {
+            "rootFocused": Object {
+              "outline": "1px dashed undefined",
+            },
+          }
+        }
       />
     </div>
   </div>