From 6d6b35d5f8f65c978ff1ca4dd6b1ca7ca2389b26 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Mon, 15 Apr 2019 11:55:55 +0200
Subject: [PATCH] Fix react warnings

---
 app/src/components/Sidebar/Sidebar.tsx        |  4 ++-
 .../Sidebar/ValueRenderer/ValuePanel.tsx      |  7 ++--
 app/src/components/helper/Copy.tsx            | 36 +++++++++----------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index 2582a0e..5ebebf8 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/app/src/components/Sidebar/Sidebar.tsx
@@ -72,7 +72,9 @@ class Sidebar extends React.Component<Props, State> {
     return (
       <CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
         <Tooltip title="Clear this topic">
-          <Delete />
+          <span>
+            <Delete />
+          </span>
         </Tooltip>
       </CustomIconButton>
     )
diff --git a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
index 1ac5b50..2d90d1d 100644
--- a/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
+++ b/app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx
@@ -118,12 +118,12 @@ class ValuePanel extends React.Component<Props, State> {
       <ToggleButtonGroup id="valueRendererDisplayMode" value={this.props.valueRendererDisplayMode} exclusive={true} onChange={handleValue}>
         <ToggleButton className={this.props.classes.toggleButton} value="diff" id="valueRendererDisplayMode-diff">
           <Tooltip title="Show difference between the current and the last message">
-            <Code />
+            <span><Code className={this.props.classes.toggleButtonIcon} /></span>
           </Tooltip>
         </ToggleButton>
         <ToggleButton className={this.props.classes.toggleButton} value="raw" id="valueRendererDisplayMode-raw">
           <Tooltip title="Raw value">
-            <Reorder />
+            <span><Reorder className={this.props.classes.toggleButtonIcon} /></span>
           </Tooltip>
         </ToggleButton>
       </ToggleButtonGroup>
@@ -193,6 +193,9 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
     toggleButton: {
       height: '36px',
     },
+    toggleButtonIcon: {
+      verticalAlign: 'middle',
+    },
   }
 }
 
diff --git a/app/src/components/helper/Copy.tsx b/app/src/components/helper/Copy.tsx
index 332c6ee..49bf06a 100644
--- a/app/src/components/helper/Copy.tsx
+++ b/app/src/components/helper/Copy.tsx
@@ -50,27 +50,25 @@ class Copy extends React.Component<Props, State> {
       <span>
         <Tooltip placement="top" title="Copy to clipboard">
           <span style={{ fontSize: '16px' }}>
-          <CustomIconButton onClick={this.handleClick} >
-            {icon}
-          </CustomIconButton>
+            <CustomIconButton onClick={this.handleClick} >
+              {icon}
+            </CustomIconButton>
           </span>
         </Tooltip>
-        <span>
-          <Snackbar
-            anchorOrigin={{
-              vertical: 'bottom',
-              horizontal: 'left',
-            }}
-            open={this.state.snackBarOpen}
-            autoHideDuration={2000}
-            onClose={() => { this.setState({ snackBarOpen: false }) }}
-          >
-            <SnackbarContent
-              className={this.props.classes.snackbar}
-              message="Copied to clipboard"
-            />
-          </Snackbar>
-        </span>
+        <Snackbar
+          anchorOrigin={{
+            vertical: 'bottom',
+            horizontal: 'left',
+          }}
+          open={this.state.snackBarOpen}
+          autoHideDuration={2000}
+          onClose={() => { this.setState({ snackBarOpen: false }) }}
+        >
+          <SnackbarContent
+            className={this.props.classes.snackbar}
+            message="Copied to clipboard"
+          />
+        </Snackbar>
       </span>
     )
   }