Add light theme

app/src/components/BrokerStatistics.tsx

@@ -6,6 +6,7 @@ import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 import { TopicViewModel } from '../TopicViewModel'
 import { Typography } from '@material-ui/core'
 import { Base64Message } from '../../../backend/src/Model/Base64Message';
+import lime from '@material-ui/core/colors/teal'
 
 const abbreviate = require('number-abbreviate')
 
@@ -22,7 +23,7 @@ const styles: StyleRulesCallback = theme => ({
   container: {
     width: '100%',
     height: '224px',
-    backgroundColor: 'rebeccapurple',
+    backgroundColor: theme.palette.type === 'dark' ? 'rebeccapurple' : '#ebebeb',
     marginBottom: 0,
     padding: '8px',
   },

app/src/components/CodeBlockColors.ts

@@ -0,0 +1,8 @@
+export enum CodeBlockColors {
+  text = "#080808",
+  background = "#F9F9F9",
+  numeric = "#811F24",
+  boolean = "#811F24",
+  string = "#0B6125",
+  variable = "#234A97"
+}

app/src/components/CodeDiff.tsx

@@ -4,6 +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';
 
 interface Props {
   previous: string
@@ -44,7 +45,7 @@ class CodeDiff extends React.Component<Props, {}> {
     })
 
     return (
-      <div>
+      <div style={{ backgroundColor: '#ebebeb' }}>
         <pre className={`language-json ${this.props.classes.codeBlock}`}>
           {code}
         </pre>
@@ -99,6 +100,7 @@ const style = (theme: Theme) => {
   }
   const before = {
     margin: '0 2px 0 -9px',
+    color: CodeBlockColors.text,
   }
   return {
     additions: {
@@ -113,7 +115,29 @@ const style = (theme: Theme) => {
     codeBlock: {
       fontSize: '12px',
       maxHeight: '200px',
-      marginLeft: '-16px',
+      marginLeft: '33px !important',
+      backgroundColor: `${CodeBlockColors.background} !important`,
+      '& .token.number': {
+        color: CodeBlockColors.numeric,
+      },
+      '& .token.boolean': {
+        color: CodeBlockColors.numeric,
+      },
+      '& .token.property': {
+        color: CodeBlockColors.variable,
+      },
+      '& .token.string': {
+        color: CodeBlockColors.string,
+      },
+      '& .token': {
+        color: CodeBlockColors.text,
+      },
+      '& .token.operator': {
+        color: CodeBlockColors.text,
+      },
+      '& .token.punctuation': {
+        color: CodeBlockColors.text,
+      },
     },
     noChange: {
       ...baseStyle,

app/src/components/ConnectionHealthIndicator.tsx

@@ -12,11 +12,15 @@ const styles: StyleRulesCallback = theme => ({
     color: red[700],
   },
   online: {
-    color: green[500],
+    color: green[400],
   },
   connecting: {
     color: orange[600],
   },
+  icon: {
+    boxShadow: theme.shadows[10],
+    padding: '4px', borderRadius: '50%', backgroundColor: '#eee'
+  }
 })
 
 interface Props {
@@ -38,7 +42,9 @@ class ConnectionHealthIndicator extends React.Component<Props, {}> {
 
     return (
       <Tooltip title={`Connection health "${health}"`}>
-        <DeviceHubOutlined className={classes[health]} />
+        <div className={classes.icon}>
+          <DeviceHubOutlined className={classes[health]} />
+        </div>
       </Tooltip>
     )
   }

app/src/components/ContentView.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import SplitPane from 'react-split-pane'
+import { Sidebar } from './Sidebar'
+import Tree from './Tree/Tree';
+
+export default function ContentView(props: {heightProperty: any, paneDefaults: any, connectionId: any}) {
+  return (
+    <SplitPane
+      step={20}
+      primary="second"
+      className={props.heightProperty}
+      split="vertical"
+      minSize={250}
+      defaultSize={500}
+      resizerStyle={{ width: '2px', margin: '0 -10px 0 0px' }}
+      allowResize={true}
+      style={{ position: 'relative' }}
+      pane1Style={{ overflow: 'hidden' }}
+    >
+      <div className={props.paneDefaults}>
+        <Tree />
+      </div>
+      <div className={props.paneDefaults}>
+        <Sidebar connectionId={props.connectionId} />
+      </div>
+    </SplitPane>
+  )
+}

app/src/components/Sidebar/History.tsx

@@ -14,6 +14,7 @@ interface Props {
   onClick?: (index: number, element: EventTarget) => void
   classes: any
   contentTypeIndicator?: JSX.Element
+  theme: Theme
 }
 
 interface State {
@@ -30,7 +31,7 @@ class MessageHistory extends React.Component<Props, State> {
 
   public renderHistory() {
     const style = (element: HistoryItem) => ({
-      backgroundColor: element.selected ? 'rgba(120, 120, 120, 0.6)' : 'rgba(80, 80, 80, 0.6)',
+      backgroundColor: element.selected ? this.props.theme.palette.action.selected : this.props.theme.palette.action.hover,
       margin: '8px',
       padding: '8px 8px 0 8px',
       cursor: this.props.onClick ? 'pointer' : 'inherit',
@@ -53,7 +54,7 @@ class MessageHistory extends React.Component<Props, State> {
     const visible = this.props.items.length > 0 && this.state.collapsed
 
     return (
-      <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
+      <div className={this.props.classes.main}>
         <Typography
           component={'span'}
           onClick={this.toggle}
@@ -93,7 +94,11 @@ class MessageHistory extends React.Component<Props, State> {
 }
 
 const styles = (theme: Theme) => ({
+  main: {
+    backgroundColor: 'rgba(170, 170, 170, 0.2)',
+    marginTop: '16px',
+  },
   badge: { right:'-25px' },
 })
 
-export default withStyles(styles)(MessageHistory)
+export default withStyles(styles, { withTheme: true })(MessageHistory)

app/src/components/Sidebar/Publish/Publish.tsx

@@ -3,6 +3,7 @@ import 'brace/mode/json'
 import 'brace/mode/text'
 import 'brace/mode/xml'
 import 'brace/theme/monokai'
+import 'brace/theme/dawn'
 
 import * as React from 'react'
 import * as q from '../../../../../backend/src/Model'
@@ -20,6 +21,8 @@ import {
   MenuItem,
   Tooltip,
   Fab,
+  Theme,
+  withTheme,
 } from '@material-ui/core'
 
 // tslint:disable-next-line
@@ -45,6 +48,7 @@ interface Props {
   retain: boolean
   editorMode: string
   qos: 0 | 1 | 2
+  theme: Theme
 }
 
 interface State {
@@ -310,7 +314,7 @@ class Publish extends React.Component<Props, State> {
     return (
       <AceEditor
         mode={this.props.editorMode}
-        theme="monokai"
+        theme={this.props.theme.palette.type === 'dark' ? 'monokai' : 'dawn'}
         name="UNIQUE_ID_OF_DIV"
         width="100%"
         height="200px"
@@ -341,4 +345,4 @@ const mapStateToProps = (state: AppState) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(Publish)
+export default withTheme(connect(mapStateToProps, mapDispatchToProps)(Publish))

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

@@ -2,10 +2,10 @@ import * as q from '../../../../../backend/src/Model'
 import * as React from 'react'
 import CodeDiff from '../../CodeDiff'
 import { AppState } from '../../../reducers'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 import { connect } from 'react-redux'
 import { default as ReactResizeDetector } from 'react-resize-detector'
 import { ValueRendererDisplayMode } from '../../../reducers/Settings'
-import { Base64Message } from '../../../../../backend/src/Model/Base64Message';
 
 interface Props {
   message: q.Message
@@ -42,7 +42,6 @@ class ValueRenderer extends React.Component<Props, State> {
     if (renderMode === 'raw') {
       compareMessage = message
     }
-
     if (!message.value) {
       return null
     }
@@ -69,7 +68,7 @@ class ValueRenderer extends React.Component<Props, State> {
       const compare = this.messageToPrettyJson(compareStr) || compareStr
       const language = current && compare ? 'json' : undefined
 
-      return this.renderDiff(str, compareStr, language)
+      return this.renderDiff(current, compare, language)
     }
   }
 

app/src/components/TitleBar.tsx

@@ -69,6 +69,10 @@ const styles: StyleRulesCallback = theme => ({
     marginLeft: -12,
     marginRight: 20,
   },
+  disconnect: {
+    margin: 'auto 8px auto auto',
+    color: theme.palette.primary.contrastText,
+  }
 })
 
 interface Props {
@@ -97,7 +101,7 @@ class TitleBar extends React.Component<Props, {}> {
           </IconButton>
           <Typography className={classes.title} variant="h6" color="inherit">MQTT Explorer</Typography>
           {this.renderSearch()}
-          <Button style={{ margin: 'auto 8px auto auto' }} onClick={actions.connection.disconnect}>
+          <Button className={classes.disconnect} onClick={actions.connection.disconnect}>
             Disconnect <CloudOff style={{ marginRight: '8px', paddingLeft: '8px' }}/>
           </Button>
           <ConnectionHealthIndicator />

app/src/components/Tree/TreeNode.tsx

@@ -32,10 +32,10 @@ const styles = (theme: Theme) => {
       marginLeft: theme.spacing(1.5),
     },
     selected: {
-      backgroundColor: 'rgba(170, 170, 170, 0.55)',
+      backgroundColor: theme.palette.type === 'dark' ? 'rgba(170, 170, 170, 0.55)' : 'rgba(170, 170, 170, 0.55)',
     },
     hover: {
-      backgroundColor: 'rgba(100, 100, 100, 0.55)',
+      backgroundColor: theme.palette.type === 'dark' ? 'rgba(100, 100, 100, 0.55)' : 'rgba(200, 200, 200, 0.55)',
     },
   }
 }
@@ -55,6 +55,7 @@ interface Props {
   didSelectTopic: any
   highlightTopicUpdates: boolean
   selectTopicWithMouseOver: boolean
+  theme: Theme
 }
 
 interface State {
@@ -184,7 +185,8 @@ class TreeNode extends React.Component<Props, State> {
     this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
     const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot && this.props.highlightTopicUpdates
-    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: 'example 0.5s' } : {}
+    const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
+    const animation = shouldStartAnimation ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` } : {}
     this.animationDirty = shouldStartAnimation
 
     const highlightClass = this.state.selected ? this.props.classes.selected : (this.state.mouseOver ? this.props.classes.hover : '')
@@ -269,4 +271,4 @@ class TreeNode extends React.Component<Props, State> {
   }
 }
 
-export default withStyles(styles)(TreeNode)
+export default withStyles(styles, { withTheme: true })(TreeNode)