Refactor

app/src/App.tsx

@@ -14,7 +14,7 @@ import { default as SplitPane } from 'react-split-pane'
 import { globalActions, settingsActions } from './actions'
 import { Theme, withStyles } from '@material-ui/core/styles'
 
-const Settings = React.lazy(() => import('./components/Settings'))
+const Settings = React.lazy(() => import('./components/SettingsDrawer/Settings'))
 const ContentView = React.lazy(() => import('./components/ContentView'))
 
 interface Props {

app/src/actions/Settings.ts

@@ -1,6 +1,6 @@
 import * as q from '../../../backend/src/Model'
 import { AppState } from '../reducers'
-import { autoExpandLimitSet } from '../components/Settings'
+import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
 import { batchActions } from 'redux-batched-actions'
 import { default as persistentStorage, StorageIdentifier } from '../PersistentStorage'
 import { Dispatch } from 'redux'

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -25,7 +25,7 @@ import {
   Switch,
   TextField,
 } from '@material-ui/core'
-import ConnectionHealthIndicator from '../ConnectionHealthIndicator'
+import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 
 interface Props {
   connection: ConnectionOptions

app/src/components/SettingsDrawer/BrokerStatistics.tsx

@@ -1,11 +1,11 @@
-import * as q from '../../../backend/src/Model'
+import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import { AppState } from '../reducers'
+import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { TopicViewModel } from '../TopicViewModel'
+import { TopicViewModel } from '../../TopicViewModel'
 import { Typography } from '@material-ui/core'
-import { Base64Message } from '../../../backend/src/Model/Base64Message'
+import { Base64Message } from '../../../../backend/src/Model/Base64Message'
 import teal from '@material-ui/core/colors/teal'
 
 const abbreviate = require('number-abbreviate')

app/src/components/SettingsDrawer/Settings.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
 import BrokerStatistics from './BrokerStatistics'
 import ChevronRight from '@material-ui/icons/ChevronRight'
-import { AppState } from '../reducers'
+import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { settingsActions } from '../actions'
+import { settingsActions } from '../../actions'
 import { shell } from 'electron'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { TopicOrder } from '../reducers/Settings'
+import { TopicOrder } from '../../reducers/Settings'
 
 import {
   Divider,

app/src/components/Sidebar/CodeDiff.tsx

@@ -4,7 +4,7 @@ import * as React from 'react'
 import { Theme, withStyles } from '@material-ui/core'
 import 'prismjs/components/prism-json'
 import 'prismjs/themes/prism-tomorrow.css'
-import { CodeBlockColors } from './CodeBlockColors'
+import { CodeBlockColors } from '../CodeBlockColors'
 
 interface Props {
   previous: string

app/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,6 @@
 import * as q from '../../../../backend/src/Model'
 import * as React from 'react'
-import Copy from '../Copy'
+import Copy from '../helper/Copy'
 import CustomIconButton from '../CustomIconButton'
 import Delete from '@material-ui/icons/Delete'
 import ExpandMore from '@material-ui/icons/ExpandMore'

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -2,7 +2,7 @@ import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
 import Clear from '@material-ui/icons/Clear'
 import Code from '@material-ui/icons/Code'
-import Copy from '../../Copy'
+import Copy from '../../helper/Copy'
 import DateFormatter from '../../helper/DateFormatter'
 import ExpandMore from '@material-ui/icons/ExpandMore'
 import MessageHistory from './MessageHistory'

app/src/components/Sidebar/ValueRenderer/ValueRenderer.tsx

@@ -1,6 +1,6 @@
 import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
-import CodeDiff from '../../CodeDiff'
+import CodeDiff from '../CodeDiff'
 import { AppState } from '../../../reducers'
 import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'

app/src/components/TitleBar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ClearAdornment from './helper/ClearAdornment'
 import CloudOff from '@material-ui/icons/CloudOff'
-import ConnectionHealthIndicator from './ConnectionHealthIndicator'
+import ConnectionHealthIndicator from './helper/ConnectionHealthIndicator'
 import Menu from '@material-ui/icons/Menu'
 import Search from '@material-ui/icons/Search'
 import { AppState } from '../reducers'

app/src/components/helper/ConnectionHealthIndicator.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import DeviceHubOutlined from '@material-ui/icons/DeviceHubOutlined'
-import { AppState } from '../reducers'
+import { AppState } from '../../reducers'
 import { connect } from 'react-redux'
-import { ConnectionHealth } from '../reducers/Connection'
+import { ConnectionHealth } from '../../reducers/Connection'
 import { green, orange, red } from '@material-ui/core/colors'
 import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { Tooltip } from '@material-ui/core'

app/src/components/helper/Copy.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import Check from '@material-ui/icons/Check'
-import CustomIconButton from './CustomIconButton'
+import CustomIconButton from '../CustomIconButton'
 import FileCopy from '@material-ui/icons/FileCopy'
 import green from '@material-ui/core/colors/green'
 import { Snackbar, SnackbarContent, Tooltip } from '@material-ui/core'

app/src/index.tsx

@@ -19,6 +19,7 @@ import lime from '@material-ui/core/colors/lime'
 import green from '@material-ui/core/colors/green'
 import teal from '@material-ui/core/colors/teal'
 import amber from '@material-ui/core/colors/amber'
+import brown from '@material-ui/core/colors/brown'
 
 const composeEnhancers = /*(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || */ compose
 const store = createStore(
@@ -45,8 +46,11 @@ function createTheme(type: 'light' | 'dark') {
         background: {
           default: '#fafafa',
         },
-        primary: teal,
+        //primary: teal,
         secondary: amber,
+        primary: {
+          main: '#931e2e'
+        },
         // error: red,
         action: {
           disabledBackground: '#fafafa',