diff --git a/.env.development b/.env.development
new file mode 100644
index 00000000..5f323191
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+BROWSER=none
\ No newline at end of file
diff --git a/antd.customize.less b/antd.customize.less
new file mode 100644
index 00000000..55a9e034
--- /dev/null
+++ b/antd.customize.less
@@ -0,0 +1,42 @@
+@primary-color: hsl(200, 100%, 50%);
+
+@white: #000;
+@black: #fff;
+
+@primary-1: fade(@primary-color, 50%);
+@primary-2: fade(@primary-color, 40%);
+
+@body-background: hsl(200, 10%, 20%);
+@component-background: @body-background;
+@text-color: hsl(200, 10%, 90%);
+@text-color-secondary: hsl(200, 20%, 80%);
+
+@heading-color: fade(@black, 85%);
+
+@border-radius-base: 2px;
+@border-radius-sm: 0px;
+
+@background-color-light: lighten(@body-background, 20%); // background of header and selected item
+@background-color-base: fade(@primary-color, 20%); // Default grey background color
+
+@item-active-bg: fade(@primary-color, 20%);
+@item-hover-bg: fade(@primary-color, 10%);
+
+@border-color-base: lighten(@body-background, 20%); // base border outline a component
+@border-color-split: lighten(@body-background, 10%); // split border inside a component
+
+// Disabled states
+@disabled-color: fade(#fff, 50%);
+
+// Input
+@input-bg: darken(@body-background, 10%);
+
+// Buttons
+@btn-default-bg: lighten(@body-background, 10%);
+
+// Modal
+@modal-mask-bg: fade(black, 80%);
+
+// Table
+@table-selected-row-bg: @item-active-bg;
+@table-row-hover-bg: @item-hover-bg;
\ No newline at end of file
diff --git a/craco.config.js b/craco.config.js
new file mode 100644
index 00000000..12473c5c
--- /dev/null
+++ b/craco.config.js
@@ -0,0 +1,5 @@
+const CracoAntDesignPlugin = require("craco-antd");
+
+module.exports = {
+ plugins: [{ plugin: CracoAntDesignPlugin }]
+};
\ No newline at end of file
diff --git a/package.json b/package.json
index 87810f03..bdd1f954 100644
--- a/package.json
+++ b/package.json
@@ -3,12 +3,14 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@craco/craco": "^5.2.1",
"@types/jest": "24.0.13",
"@types/lodash": "^4.14.132",
"@types/react": "16.8.18",
"@types/react-dom": "16.8.4",
"@types/text-encoding": "^0.0.35",
"antd": "^3.19.1",
+ "craco-antd": "^1.11.0",
"lodash": "^4.17.11",
"mobx": "^5.9.4",
"mobx-react": "^5.4.4",
@@ -21,10 +23,9 @@
"typescript": "3.4.5"
},
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
"updateDropsEphinea": "ts-node --project=tsconfig-scripts.json src/static/updateDropsEphinea.ts"
},
"eslintConfig": {
diff --git a/src/ui/quest-editor/QuestEditorComponent.tsx b/src/ui/quest-editor/QuestEditorComponent.tsx
index 5cad219d..4370180a 100644
--- a/src/ui/quest-editor/QuestEditorComponent.tsx
+++ b/src/ui/quest-editor/QuestEditorComponent.tsx
@@ -50,8 +50,10 @@ export class QuestEditorComponent extends React.Component<{}, {
);
}
- private saveAsClicked = (filename: string) => {
- const name = filename.endsWith('.qst') ? filename.slice(0, -4) : filename;
+ private saveAsClicked = (filename?: string) => {
+ const name = filename
+ ? filename.endsWith('.qst') ? filename.slice(0, -4) : filename
+ : this.state.saveDialogFilename;
this.setState({
saveDialogOpen: true,
@@ -74,9 +76,9 @@ export class QuestEditorComponent extends React.Component<{}, {
}
@observer
-class Toolbar extends React.Component<{ onSaveAsClicked: (filename: string) => void }> {
+class Toolbar extends React.Component<{ onSaveAsClicked: (filename?: string) => void }> {
state = {
- filename: 'Choose file...'
+ filename: undefined
}
render() {
@@ -92,7 +94,7 @@ class Toolbar extends React.Component<{ onSaveAsClicked: (filename: string) => v
showUploadList={false}
onChange={this.setFilename}
>
-
+
{areas && (