From a28fc958d4a175d0dd901a02a5b680598ef0fc26 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Mon, 15 Apr 2019 22:40:16 +0200
Subject: [PATCH] Fix IconButton shapes and positioning Fixes #106

---
 app/src/components/Sidebar/CodeDiff.tsx        | 1 +
 app/src/components/Sidebar/Sidebar.tsx         | 9 ++++++---
 app/src/components/helper/CustomIconButton.tsx | 2 ++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/src/components/Sidebar/CodeDiff.tsx b/app/src/components/Sidebar/CodeDiff.tsx
index 9db73bb..c44dae2 100644
--- a/app/src/components/Sidebar/CodeDiff.tsx
+++ b/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 {
diff --git a/app/src/components/Sidebar/Sidebar.tsx b/app/src/components/Sidebar/Sidebar.tsx
index 392ad7e..f078d3f 100644
--- a/app/src/components/Sidebar/Sidebar.tsx
+++ b/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),
     },
diff --git a/app/src/components/helper/CustomIconButton.tsx b/app/src/components/helper/CustomIconButton.tsx
index 0010429..93a0067 100644
--- a/app/src/components/helper/CustomIconButton.tsx
+++ b/app/src/components/helper/CustomIconButton.tsx
@@ -12,6 +12,8 @@ const styles = (theme: Theme) => ({
   button: {
     padding: '6px',
     fontSize: '1.2em',
+    width: '32px',
+    height: '32px',
   },
 })