Ejected from create-react-app. Development server and production builds are working. Using css modules now.

.env.dev

@@ -0,0 +1,2 @@
+REACT_APP_LOG_LEVEL=DEBUG
+PUBLIC_URL=/assets

.env.development

@@ -1,2 +0,0 @@
-BROWSER=none
-REACT_APP_LOG_LEVEL=DEBUG

.env.prod

@@ -0,0 +1,2 @@
+REACT_APP_LOG_LEVEL=WARN
+PUBLIC_URL=/assets

.gitignore

@@ -13,6 +13,7 @@
 
 # production
 /build
+/dist
 /deployment
 
 # misc

README.md

@@ -10,7 +10,7 @@ React is used for the frontend, MobX is used for state management and THREE.js f
 
 1. Install Yarn ([https://yarnpkg.com/](https://yarnpkg.com/))
 2. cd to the project directory
-3. Launch server on [http://localhost:3000/](http://localhost:3000/) with `yarn start`
+3. Launch server on [http://localhost:8080/](http://localhost:8080/) with `yarn start`
 4. src/index.tsx is the application's entry point
 
 ### Tests

antd.customize.less

@@ -1,79 +0,0 @@
-@primary-color: hsl(200, 60%, 75%);
-
-@white: #000;
-@black: #fff;
-
-// Color used by default to control hover and active backgrounds and for
-// alert info backgrounds.
-@primary-1: fade(@primary-color, 50%);
-@primary-2: fade(@primary-color, 40%);
-
-@body-background: hsl(200, 0%, 20%);
-@component-background: @body-background;
-@text-color: hsl(200, 0%, 90%);
-@text-color-secondary: hsl(200, 0%, 80%);
-@text-color-dark: fade(white, 85%);
-@text-color-secondary-dark: fade(white, 65%);
-
-@heading-color: fade(@black, 85%);
-
-@border-radius-base: 0px;
-@border-radius-sm: 0px;
-
-// vertical paddings
-@padding-lg: 12px; // containers
-@padding-md: 8px; // small containers and buttons
-@padding-sm: 6px; // Form controls and items
-@padding-xs: 4px; // small items
-
-@background-color-light: lighten(@component-background, 20%); // background of header and selected item
-@background-color-base: @component-background; // Default grey background color
-
-@item-active-bg: fade(@primary-color, 20%);
-@item-hover-bg: fade(@primary-color, 10%);
-
-@border-color-base: lighten(@component-background, 20%); // base border outline a component
-@border-color-split: lighten(@component-background, 10%); // split border inside a component
-
-// Disabled states
-@disabled-color: fade(#fff, 50%);
-
-// Animation
-@animation-duration-slow: 0s; // Modal
-@animation-duration-base: 0s;
-@animation-duration-fast: 0s; // Tooltip
-
-// Input
-@input-bg: darken(@component-background, 5%);
-
-@input-height-base: 28px;
-@input-height-lg: 34px;
-@input-height-sm: 24px;
-
-// Buttons
-@btn-default-bg: lighten(@component-background, 10%);
-
-@btn-height-base: 28px;
-@btn-height-lg: 34px;
-@btn-height-sm: 24px;
-
-// Modal
-@modal-mask-bg: fade(black, 80%);
-
-// Table
-@table-selected-row-bg: @item-active-bg;
-@table-row-hover-bg: @item-hover-bg;
-
-// Menu
-@menu-dark-bg: @component-background;
-
-
-// Tabs
-// ---
-@tabs-card-head-background: darken(@background-color-base, 5%);
-@tabs-card-height: 28px;
-@tabs-card-active-color: white;
-@tabs-highlight-color: white;
-@tabs-hover-color: white;
-@tabs-card-active-color: white;
-@tabs-ink-bar-color: white;

antd_theme.js

@@ -0,0 +1,73 @@
+module.exports = {
+    // Some colors are set to ridiculous values so they stand out once
+    // they're first used. They can then be changed to something more
+    // sensible.
+    "@background-color-base": "hsl(0, 0%, 20%)",
+    "@background-color-light": "lighten(@background-color-base, 20%)",
+    "@body-background": "@background-color-base",
+    "@component-background": "@background-color-base",
+
+    "@text-color": "hsl(0, 0%, 90%)",
+    "@text-color-secondary": "hsl(0, 0%, 35%)",
+    "@text-color-dark": "hsl(0, 0%, 15%)",
+    "@text-color-dark-secondary": "hsl(0, 0%, 35%)",
+    "@heading-color": "hsl(0, 0%, 85%)",
+
+    "@item-hover-bg": "hsl(200, 30%, 30%)",
+    "@item-active-bg": "hsl(200, 50%, 30%)",
+
+    "@primary-color": "hsl(200, 60%, 75%)",
+    // Color used to control the text color in many active and hover states.
+    "@primary-5": "hsl(200, 10%, 60%)",
+    // Color used to control the text color of active buttons.
+    "@primary-6": "hsl(200, 30%, 60%)",
+    "@disabled-color": "hsl(0, 0%, 50%)",
+    "@tag-default-bg": "yellow",
+    "@popover-bg": "yellow",
+    "@highlight-color": "blue",
+    "@info-color": "orange",
+    "@warning-color": "salmon",
+    "@alert-message-color": "red",
+
+    "@padding-lg": "12px",
+    "@padding-md": "8px",
+    "@padding-sm": "6px",
+    "@padding-xs": "4px",
+
+    "@layout-body-background": "cyan",
+    "@layout-sider-background": "lime",
+    "@layout-header-background": "lime",
+    "@layout-trigger-color": "magenta",
+    "@layout-trigger-background": "purple",
+
+    "@menu-dark-bg": "@component-background",
+    "@menu-dark-submenu-bg": "@component-background",
+
+    "@input-bg": "darken(@background-color-base, 5%)",
+    "@input-height-base": "28px",
+    "@input-height-lg": "34px",
+    "@input-height-sm": "24px",
+
+    "@btn-height-base": "28px",
+    "@btn-height-lg": "34px",
+    "@btn-height-sm": "24px",
+    "@btn-default-bg": "lighten(@background-color-base, 10%)",
+
+    "@border-color-base": "lighten(@background-color-base, 20%)",
+    "@border-color-split": "lighten(@background-color-base, 10%)",
+    "@border-radius-base": "0",
+    "@border-radius-sm": "0",
+
+    "@table-selected-row-bg": "@item-active-bg",
+    "@table-row-hover-bg": "@item-hover-bg",
+    "@collapse-header-bg": "yellow",
+
+    "@tabs-card-head-background": "darken(@background-color-base, 5%)",
+    "@tabs-card-height": "28px",
+    "@tabs-card-active-color": "white",
+    "@tabs-highlight-color": "white",
+    "@tabs-hover-color": "white",
+    "@tabs-active-color": "white",
+    "@tabs-card-active-color": "white",
+    "@tabs-ink-bar-color": "white",
+};