Tweaked look and feel.

antd.customize.less

@@ -1,4 +1,4 @@
-@primary-color: hsl(200, 100%, 50%);
+@primary-color: hsl(200, 60%, 75%);
 
 @white: #000;
 @black: #fff;

src/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import Logger from "js-logger";
-import "./index.less";
+import "./ui/index.less";
 import { ApplicationComponent } from "./ui/ApplicationComponent";
 import "react-virtualized/styles.css";
 import "react-select/dist/react-select.css";

src/rendering/Renderer.ts

@@ -37,6 +37,10 @@ export class Renderer<C extends Camera> {
     constructor(camera: C) {
         this.camera = camera;
 
+        this.dom_element.tabIndex = 0;
+        this.dom_element.addEventListener("mousedown", this.on_mouse_down);
+        this.dom_element.style.outline = "none";
+
         this.controls = new OrbitControls(camera, this.dom_element);
         this.controls.mouseButtons.ORBIT = MOUSE.RIGHT;
         this.controls.mouseButtons.PAN = MOUSE.LEFT;
@@ -82,6 +86,10 @@ export class Renderer<C extends Camera> {
         this.renderer.render(this.scene, this.camera);
     }
 
+    private on_mouse_down = (e: Event) => {
+        if (e.currentTarget) (e.currentTarget as HTMLElement).focus();
+    };
+
     private call_render = () => {
         this.render_scheduled = false;
         this.render();

src/ui/DisabledTextComponent.less

@@ -0,0 +1,4 @@
+.DisabledTextComponent {
+    color: @disabled-color;
+    padding: 5px 0;
+}

src/ui/DisabledTextComponent.tsx

@@ -0,0 +1,8 @@
+import React, { Component, ReactNode } from "react";
+import "./DisabledTextComponent.less";
+
+export class DisabledTextComponent extends Component<{ children: string }> {
+    render(): ReactNode {
+        return <div className="DisabledTextComponent">{this.props.children}</div>;
+    }
+}

src/ui/index.less

@@ -1,5 +1,7 @@
 @import "~antd/dist/antd.less";
-@import "ui/theme.less";
+@import "./theme.less";
+
+// React Root Element
 
 #phantasmal-world-root {
     position: absolute;
@@ -9,6 +11,8 @@
     right: 0;
 }
 
+// antd
+
 * {
     scrollbar-color: @scrollbar-thumb-color @scrollbar-color;
 
@@ -33,6 +37,8 @@
     background-color: @scrollbar-color;
 }
 
+// react-virtualized
+
 #phantasmal-world-root {
     & .ReactVirtualized__Grid {
         outline: none;
@@ -46,3 +52,37 @@
         margin: 0;
     }
 }
+
+// golden-layout
+
+#phantasmal-world-root {
+    & .lm_header {
+        background: darken(@component-background, 5%);
+    }
+
+    & .lm_goldenlayout {
+        background: darken(@component-background, 5%);
+    }
+
+    & .lm_content {
+        background: @component-background;
+    }
+
+    & .lm_tab {
+        height: 26px;
+        line-height: 26px;
+        padding: 0px 16px;
+        margin: 2px 2px 0px 0px;
+        background: darken(@component-background, 3%);
+        box-shadow: none;
+
+        &.lm_active {
+            background: @component-background;
+        }
+    }
+
+    & .lm_controls {
+        top: 6px;
+        right: 6px;
+    }
+}

src/ui/quest_editor/EntityInfoComponent.tsx

@@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import React, { Component, PureComponent, ReactNode } from "react";
 import { QuestEntity, QuestNpc, QuestObject } from "../../domain";
 import { quest_editor_store } from "../../stores/QuestEditorStore";
+import { DisabledTextComponent } from "../DisabledTextComponent";
 import "./EntityInfoComponent.css";
 
 @observer
@@ -97,7 +98,11 @@ export class EntityInfoComponent extends Component {
                 </div>
             );
         } else {
-            return <div className="EntityInfoComponent-container" />;
+            return (
+                <div className="EntityInfoComponent-container">
+                    <DisabledTextComponent>No entity selected.</DisabledTextComponent>
+                </div>
+            );
         }
     }
 }

src/ui/quest_editor/QuestEditorComponent.tsx

@@ -27,6 +27,15 @@ export class QuestEditorComponent extends Component {
                         settings: {
                             showPopoutIcon: false,
                         },
+                        dimensions: {
+                            headerHeight: 28,
+                        },
+                        labels: {
+                            close: "Close",
+                            maximise: "Maximise",
+                            minimise: "Minimise",
+                            popout: "Open in new window",
+                        },
                         content: [
                             {
                                 type: "row",

src/ui/quest_editor/QuestInfoComponent.tsx

@@ -3,6 +3,7 @@ import React, { Component, ReactNode } from "react";
 import { NpcType } from "../../domain";
 import { quest_editor_store } from "../../stores/QuestEditorStore";
 import "./QuestInfoComponent.css";
+import { DisabledTextComponent } from "../DisabledTextComponent";
 
 @observer
 export class QuestInfoComponent extends Component {
@@ -70,7 +71,11 @@ export class QuestInfoComponent extends Component {
                 </div>
             );
         } else {
-            return <div className="qe-QuestInfoComponent" />;
+            return (
+                <div className="qe-QuestInfoComponent">
+                    <DisabledTextComponent>No quest loaded.</DisabledTextComponent>
+                </div>
+            );
         }
     }
 }

src/ui/theme.less

@@ -1,28 +1,7 @@
+// Variables used throughout the code in addition to antd.customize.less.
+
 @scrollbar-color: darken(@component-background, 3%);
 @scrollbar-thumb-color: lighten(@component-background, 3%);
 
 @table-scrollbar-color: lighten(@scrollbar-color, 1%);
 @table-scrollbar-thumb-color: lighten(@scrollbar-thumb-color, 5%);
-
-#phantasmal-world-root {
-    & .lm_header {
-        background: darken(@component-background, 5%);
-    }
-
-    & .lm_goldenlayout {
-        background: darken(@component-background, 5%);
-    }
-
-    & .lm_content {
-        background: @component-background;
-    }
-
-    & .lm_tab {
-        background: darken(@component-background, 5%);
-        box-shadow: none;
-
-        &.lm_active {
-            background: @component-background;
-        }
-    }
-}

src/ui/viewer/models/AnimationSelectionComponent.less

@@ -14,11 +14,11 @@
             white-space: nowrap;
 
             &.selected {
-                color: lighten(@primary-color, 15%);
+                color: @primary-color;
             }
 
             &:hover {
-                color: lighten(@primary-color, 30%);
+                color: lighten(@primary-color, 15%);
             }
         }
     }

src/ui/viewer/models/ModelSelectionComponent.less

@@ -6,10 +6,10 @@
     cursor: pointer;
 
     &.selected {
-        color: lighten(@primary-color, 15%);
+        color: @primary-color;
     }
 
     &:hover {
-        color: lighten(@primary-color, 30%);
+        color: lighten(@primary-color, 15%);
     }
 }

src/ui/viewer/models/ModelSelectionComponent.tsx

@@ -1,10 +1,15 @@
 import { List } from "antd";
+import { observer } from "mobx-react";
 import React, { Component, ReactNode } from "react";
 import { model_viewer_store } from "../../../stores/ModelViewerStore";
 import "./ModelSelectionComponent.less";
 
+@observer
 export class ModelSelectionComponent extends Component {
     render(): ReactNode {
+        // Make sure we trigger mobx.
+        const current = model_viewer_store.current_player_model;
+
         return (
             <section className="v-m-ModelSelectionComponent">
                 <List
@@ -12,7 +17,7 @@ export class ModelSelectionComponent extends Component {
                     dataSource={model_viewer_store.models}
                     size="small"
                     renderItem={model => {
-                        const selected = model_viewer_store.current_player_model === model;
+                        const selected = current === model;
 
                         return (
                             <List.Item onClick={() => model_viewer_store.load_model(model)}>