Fix react warnings

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>
     )

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',
+    },
   }
 }
 

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} >
+            <CustomIconButton onClick={this.handleClick} >
-            {icon}
+              {icon}
-          </CustomIconButton>
+            </CustomIconButton>
           </span>
         </Tooltip>
-        <span>
+        <Snackbar
-          <Snackbar
+          anchorOrigin={{
-            anchorOrigin={{
+            vertical: 'bottom',
-              vertical: 'bottom',
+            horizontal: 'left',
-              horizontal: 'left',
+          }}
-            }}
+          open={this.state.snackBarOpen}
-            open={this.state.snackBarOpen}
+          autoHideDuration={2000}
-            autoHideDuration={2000}
+          onClose={() => { this.setState({ snackBarOpen: false }) }}
-            onClose={() => { this.setState({ snackBarOpen: false }) }}
+        >
-          >
+          <SnackbarContent
-            <SnackbarContent
+            className={this.props.classes.snackbar}
-              className={this.props.classes.snackbar}
+            message="Copied to clipboard"
-              message="Copied to clipboard"
+          />
-            />
+        </Snackbar>
-          </Snackbar>
-        </span>
       </span>
     )
   }