Tidy up ui

app/src/components/Sidebar/CodeDiff/ChartPreview.tsx

@@ -40,7 +40,7 @@ function ChartPreview(props: Props) {
   const hasEnoughDataToDisplayDiagrams = props.treeNode.messageHistory.count() > 1
 
   const addChartToPanelButton = hasEnoughDataToDisplayDiagrams ? (
-    <Tooltip title="Click to add to chart panel">
+    <Tooltip title="Add to chart panel">
       <ShowChart
         ref={chartIconRef}
         className={props.classes.icon}
@@ -50,7 +50,7 @@ function ChartPreview(props: Props) {
       />
     </Tooltip>
   ) : (
-    <Tooltip title="Click to add to chart panel, not enough data for preview">
+    <Tooltip title="Add to chart panel, not enough data for preview">
       <ShowChart onClick={onClick} className={props.classes.icon} style={{ color: '#aaa' }} />
     </Tooltip>
   )

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

@@ -11,6 +11,7 @@ import { TopicViewModel } from '../../../model/TopicViewModel'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
 import { connect } from 'react-redux'
+import CustomIconButton from '../../helper/CustomIconButton'
 
 const throttle = require('lodash.throttle')
 
@@ -109,7 +110,19 @@ class MessageHistory extends React.Component<Props, State> {
       <div>
         <History
           items={historyElements}
-          contentTypeIndicator={isMessagePlottable ? <ShowChart onClick={this.addNodeToCharts} /> : undefined}
+          contentTypeIndicator={
+            isMessagePlottable ? (
+              <CustomIconButton
+                style={{ height: '22px', width: '22px' }}
+                onClick={this.addNodeToCharts}
+                tooltip="Add to chart panel"
+              >
+                <ShowChart style={{ marginTop: '-5px' }} />
+              </CustomIconButton>
+            ) : (
+              undefined
+            )
+          }
           onClick={this.displayMessage}
         >
           {isMessagePlottable ? <TopicPlot history={node.messageHistory} /> : null}

app/src/components/helper/CustomIconButton.tsx

@@ -6,6 +6,7 @@ interface Props {
   onClick: any
   tooltip: string
   classes: any
+  style?: React.CSSProperties
 }
 
 const styles = (theme: Theme) => ({
@@ -32,7 +33,7 @@ class CustomIconButton extends React.Component<Props, {}> {
 
   public render() {
     return (
-      <IconButton className={this.props.classes.button} onClick={this.onClick}>
+      <IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
         <Tooltip title={this.props.tooltip} className={this.props.classes.label}>
           <span>{this.props.children}</span>
         </Tooltip>