From 3d5a4af705c2d79f93107b6b72c395bfd970fb67 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Mon, 17 Jun 2019 18:27:19 +0200
Subject: [PATCH] Tidy up ui

---
 .../components/Sidebar/CodeDiff/ChartPreview.tsx  |  4 ++--
 .../Sidebar/ValueRenderer/MessageHistory.tsx      | 15 ++++++++++++++-
 app/src/components/helper/CustomIconButton.tsx    |  3 ++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx b/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
index def73e9..9549f8e 100644
--- a/app/src/components/Sidebar/CodeDiff/ChartPreview.tsx
+++ b/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>
   )
diff --git a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx b/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
index 50411d6..0b500f7 100644
--- a/app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx
+++ b/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}
diff --git a/app/src/components/helper/CustomIconButton.tsx b/app/src/components/helper/CustomIconButton.tsx
index aee1ee2..f91c099 100644
--- a/app/src/components/helper/CustomIconButton.tsx
+++ b/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>