BluePrint React components are now used everywhere instead of css classes. Styling is now done in css files instead of setting the style prop.

src/ui/ApplicationComponent.css

@@ -18,13 +18,8 @@
     margin-left: 2;
 }
 
-.ApplicationComponent-file-upload {
+.ApplicationComponent-button-bar > * {
-    display: inline-block;
+    margin-right: 10px;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    word-wrap: normal;
 }
 
 .ApplicationComponent-main {

src/ui/ApplicationComponent.tsx

@@ -1,4 +1,4 @@
-import { Button, Dialog, Intent } from '@blueprintjs/core';
+import { Button, Dialog, Intent, Classes, Navbar, NavbarGroup, NavbarHeading, FileInput, HTMLSelect, FormGroup, InputGroup } from '@blueprintjs/core';
 import { observer } from 'mobx-react';
 import React, { ChangeEvent, KeyboardEvent } from 'react';
 import { saveCurrentQuestToFile, setCurrentAreaId } from '../actions/appState';
@@ -24,49 +24,45 @@ export class ApplicationComponent extends React.Component<{}, {
     render() {
         const quest = appStateStore.currentQuest;
         const model = appStateStore.currentModel;
-        const areas = quest ? Array.from(quest.areaVariants).map(a => a.area) : undefined;
+        const areas = quest && Array.from(quest.areaVariants).map(a => a.area);
         const area = appStateStore.currentArea;
-        const areaId = area ? String(area.id) : undefined;
+        const areaId = area && String(area.id);
 
         return (
-            <div className="ApplicationComponent bp3-app bp3-dark">
+            <div className={`ApplicationComponent ${Classes.DARK}`}>
-                <nav className="bp3-navbar">
+                <Navbar>
-                    <div className="bp3-navbar-group">
+                    <NavbarGroup className="ApplicationComponent-button-bar">
-                        <div className="ApplicationComponent-heading bp3-navbar-heading">
+                        <NavbarHeading className="ApplicationComponent-heading">
-                            Phantasmal Quest Editor
+                            Phantasmal World
                             <sup className="ApplicationComponent-beta">BETA</sup>
-                        </div>
+                        </NavbarHeading>
-                        <label className="bp3-file-input">
+                        <FileInput
-                            <input
+                            text={this.state.filename || 'Choose file...'}
-                                type="file"
+                            inputProps={{
-                                accept=".nj, .qst, .xj"
+                                type: 'file',
-                                onChange={this.onFileChange} />
+                                accept: '.nj, .qst, .xj',
-                            <span className="bp3-file-upload-input">
+                                onChange: this.onFileChange
-                                <span className="ApplicationComponent-file-upload">
+                            }}
-                                    {this.state.filename || 'Choose file...'}
+                        />
-                                </span>
+                        {areas ? (
-                            </span>
+                            <HTMLSelect
-                        </label>
+                                onChange={this.onAreaSelectChange}
-                        {areas
+                                defaultValue={areaId}
-                            ? (
+                            >
-                                <div className="bp3-select" style={{ marginLeft: 10 }}>
+                                {areas.map(area =>
-                                    <select
+                                    <option key={area.id} value={area.id}>{area.name}</option>
-                                        onChange={this.onAreaSelectChange}
+                                )}
-                                        defaultValue={areaId}>
+                            </HTMLSelect>
-                                        {areas.map(area =>
+                        ) : null}
-                                            <option key={area.id} value={area.id}>{area.name}</option>)}
+                        {quest ? (
-                                    </select>
+                            <Button
-                                </div>
-                            ) : null}
-                        {quest
-                            ? <Button
                                 text="Save as..."
                                 icon="floppy-disk"
-                                style={{ marginLeft: 10 }}
+                                onClick={this.onSaveAsClick}
-                                onClick={this.onSaveAsClick} />
+                            />
-                            : null}
+                        ) : null}
-                    </div>
+                    </NavbarGroup>
-                </nav>
+                </Navbar>
                 <div className="ApplicationComponent-main">
                     <QuestInfoComponent
                         quest={quest} />
@@ -79,27 +75,24 @@ export class ApplicationComponent extends React.Component<{}, {
                 <Dialog
                     title="Save as..."
                     icon="floppy-disk"
-                    className="bp3-dark"
+                    className={Classes.DARK}
                     style={{ width: 360 }}
                     isOpen={this.state.saveDialogOpen}
                     onClose={this.onSaveDialogClose}>
-                    <div className="bp3-dialog-body">
+                    <div className={Classes.DIALOG_BODY}>
-                        <label className="bp3-label bp3-inline">
+                        <FormGroup label="Name:" labelFor="file-name-input">
-                            Name:
+                            <InputGroup
-                            <input
+                                id="file-name-input"
                                 autoFocus={true}
-                                className="bp3-input"
-                                style={{ width: 200, margin: '0 10px 0 10px' }}
                                 value={this.state.saveDialogFilename}
                                 maxLength={12}
                                 onChange={this.onSaveDialogNameChange}
                                 onKeyUp={this.onSaveDialogNameKeyUp}
                             />
-                            (.qst)
+                        </FormGroup>
-                        </label>
                     </div>
-                    <div className="bp3-dialog-footer">
+                    <div className={Classes.DIALOG_FOOTER}>
-                        <div className="bp3-dialog-footer-actions">
+                        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
                             <Button
                                 text="Save"
                                 style={{ marginLeft: 10 }}

src/ui/EntityInfoComponent.css

@@ -1,3 +1,14 @@
+.EntityInfoComponent-container {
+    width: 200px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.EntityInfoComponent-table {
+    border-collapse: collapse;
+}
+
 .EntityInfoComponent-coord input {
     text-align: right;
     padding-right: 10px !important;

src/ui/EntityInfoComponent.tsx

@@ -1,20 +1,9 @@
-import React, { CSSProperties } from 'react';
-import { observer } from 'mobx-react';
 import { NumericInput } from '@blueprintjs/core';
-import { VisibleQuestEntity, QuestObject, QuestNpc } from '../domain';
+import { observer } from 'mobx-react';
+import React from 'react';
+import { QuestNpc, QuestObject, VisibleQuestEntity } from '../domain';
 import './EntityInfoComponent.css';
 
-const containerStyle: CSSProperties = {
-    width: 200,
-    padding: 10,
-    display: 'flex',
-    flexDirection: 'column'
-};
-
-const tableStyle: CSSProperties = {
-    borderCollapse: 'collapse'
-};
-
 interface Props {
     entity?: VisibleQuestEntity
 }
@@ -62,8 +51,8 @@ export class EntityInfoComponent extends React.Component<Props, any> {
             }
 
             return (
-                <div style={containerStyle}>
+                <div className="EntityInfoComponent-container">
-                    <table style={tableStyle}>
+                    <table className="EntityInfoComponent-table">
                         <tbody>
                             {name}
                             <tr>
@@ -102,7 +91,7 @@ export class EntityInfoComponent extends React.Component<Props, any> {
                 </div>
             );
         } else {
-            return <div style={containerStyle} />;
+            return <div className="EntityInfoComponent-container" />;
         }
     }
 
@@ -120,7 +109,8 @@ export class EntityInfoComponent extends React.Component<Props, any> {
                     <td>
                         <NumericInput
                             value={value}
-                            className="pt-fill EntityInfoComponent-coord"
+                            className="EntityInfoComponent-coord"
+                            fill={true}
                             buttonPosition="none"
                             onValueChange={(this.posChange as any)[posType][coord]}
                             onBlur={this.coordInputBlurred} />

src/ui/QuestInfoComponent.css

@@ -0,0 +1,20 @@
+.QuestInfoComponent {
+    width: 280px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+}
+
+.QuestInfoComponent table {
+    border-collapse: collapse;
+    width: 100%;
+}
+
+.QuestInfoComponent table tbody th {
+    text-align: right;
+    padding-right: 5px;
+}
+
+.QuestInfoComponent-npc-counts-container {
+    overflow: auto;
+}

src/ui/QuestInfoComponent.tsx

@@ -1,31 +1,7 @@
-import React, { CSSProperties } from 'react';
+import React from 'react';
 import { NpcType, Quest } from '../domain';
-
+import { Pre } from '@blueprintjs/core';
-const containerStyle: CSSProperties = {
+import './QuestInfoComponent.css';
-    width: 280,
-    padding: 10,
-    display: 'flex',
-    flexDirection: 'column'
-};
-
-const tableStyle: CSSProperties = {
-    borderCollapse: 'collapse',
-    width: '100%'
-};
-
-const tableHeaderStyle: CSSProperties = {
-    textAlign: 'right',
-    paddingRight: 5
-};
-
-const descriptionStyle: CSSProperties = {
-    whiteSpace: 'pre-wrap',
-    margin: '3px 0 3px 0'
-};
-
-const npcCountsContainerStyle: CSSProperties = {
-    overflow: 'auto'
-};
 
 export function QuestInfoComponent({ quest }: { quest?: Quest }) {
     if (quest) {
@@ -53,31 +29,31 @@ export function QuestInfoComponent({ quest }: { quest?: Quest }) {
         });
 
         return (
-            <div style={containerStyle}>
+            <div className="QuestInfoComponent">
-                <table style={tableStyle}>
+                <table>
                     <tbody>
                         <tr>
-                            <th style={tableHeaderStyle}>Name:</th><td>{quest.name}</td>
+                            <th>Name:</th><td>{quest.name}</td>
                         </tr>
                         <tr>
-                            <th style={tableHeaderStyle}>Episode:</th><td>{episode}</td>
+                            <th>Episode:</th><td>{episode}</td>
                         </tr>
                         <tr>
                             <td colSpan={2}>
-                                <pre className="bp3-code-block" style={descriptionStyle}>{quest.shortDescription}</pre>
+                                <Pre>{quest.shortDescription}</Pre>
                             </td>
                         </tr>
                         <tr>
                             <td colSpan={2}>
-                                <pre className="bp3-code-block" style={descriptionStyle}>{quest.longDescription}</pre>
+                                <Pre>{quest.longDescription}</Pre>
                             </td>
                         </tr>
                     </tbody>
                 </table>
-                <div style={npcCountsContainerStyle}>
+                <div className="QuestInfoComponent-npc-counts-container">
-                    <table style={tableStyle}>
+                    <table >
                         <thead>
-                            <tr><th>NPC Counts</th></tr>
+                            <tr><th colSpan={2}>NPC Counts</th></tr>
                         </thead>
                         <tbody>
                             {npcCountRows}
@@ -87,6 +63,6 @@ export function QuestInfoComponent({ quest }: { quest?: Quest }) {
             </div>
         );
     } else {
-        return <div style={containerStyle} />;
+        return <div className="QuestInfoComponent" />;
     }
 }