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">
+          <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

@@ -55,7 +55,6 @@ class Copy extends React.Component<Props, State> {
             </CustomIconButton>
           </span>
         </Tooltip>
-        <span>
         <Snackbar
           anchorOrigin={{
             vertical: 'bottom',
@@ -71,7 +70,6 @@ class Copy extends React.Component<Props, State> {
           />
         </Snackbar>
       </span>
-      </span>
     )
   }
 }