Fix IconButton shapes and positioning

Fixes #106

app/src/components/Sidebar/CodeDiff.tsx

@@ -117,6 +117,7 @@ const style = (theme: Theme) => {
     font: "12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace",
     display: 'inline-grid' as 'inline-grid',
     margin: '0',
+    padding: '1px 0 2px 0',
   }
 
   return {

app/src/components/Sidebar/Sidebar.tsx

@@ -19,7 +19,6 @@ import {
   ExpansionPanelDetails,
   ExpansionPanelSummary,
   Typography,
-  Tooltip,
   Badge,
 } from '@material-ui/core'
 
@@ -71,7 +70,7 @@ class Sidebar extends React.Component<Props, State> {
 
     return (
       <CustomIconButton onClick={() => this.deleteTopic(this.props.node)} tooltip="Clear this topic">
-        <Delete />
+        <Delete style={{ marginTop: '-3px' }} />
       </CustomIconButton>
     )
   }
@@ -90,7 +89,7 @@ class Sidebar extends React.Component<Props, State> {
         color="secondary"
       >
         <CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
-          <Delete color="action" />
+          <Delete style={{ marginTop: '-3px' }} color="action" />
         </CustomIconButton>
       </Badge>
     )
@@ -196,6 +195,10 @@ const styles: StyleRulesCallback<string> = (theme: Theme) => {
       display: 'block',
       height: '100%',
     },
+    badge: {
+      top: '3px',
+      right: '3px',
+    },
     valuePaper: {
       margin: theme.spacing(1),
     },

app/src/components/helper/CustomIconButton.tsx

@@ -12,6 +12,8 @@ const styles = (theme: Theme) => ({
   button: {
     padding: '6px',
     fontSize: '1.2em',
+    width: '32px',
+    height: '32px',
   },
 })