From 1c52aced6369e55bc076d35fe2c6d2104415b71a Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <xxnerowingerxx@gmail.com>
Date: Wed, 17 Jul 2019 11:00:57 +0200
Subject: [PATCH] Fix button layout

---
 .../Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx  |  6 +-----
 .../Sidebar/TopicPanel/TopicDeleteButton.tsx           |  2 +-
 app/src/components/helper/Copy.tsx                     | 10 +++-------
 app/src/components/helper/CustomIconButton.tsx         |  7 +++++--
 4 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx b/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx
index 2edcfb8..2cb32a2 100644
--- a/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx
+++ b/app/src/components/Sidebar/TopicPanel/RecursiveTopicDeleteButton.tsx
@@ -28,15 +28,11 @@ export const RecursiveTopicDeleteButton = (props: {
   }
   return (
     <Badge
-      style={{
-        top: '3px',
-        right: '3px',
-      }}
       badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
       color="secondary"
     >
       <CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
-        <Delete style={{ marginTop: '-3px' }} color="action" />
+        <Delete color="action" />
       </CustomIconButton>
     </Badge>
   )
diff --git a/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx b/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
index 9b41110..ae447ff 100644
--- a/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
+++ b/app/src/components/Sidebar/TopicPanel/TopicDeleteButton.tsx
@@ -13,7 +13,7 @@ export const TopicDeleteButton = (props: {
   }
   return (
     <CustomIconButton onClick={() => props.deleteTopicAction(node)} tooltip="Clear this topic">
-      <Delete style={{ marginTop: '-3px' }} />
+      <Delete />
     </CustomIconButton>
   )
 }
diff --git a/app/src/components/helper/Copy.tsx b/app/src/components/helper/Copy.tsx
index c9b496e..81aa75d 100644
--- a/app/src/components/helper/Copy.tsx
+++ b/app/src/components/helper/Copy.tsx
@@ -44,13 +44,9 @@ class Copy extends React.PureComponent<Props, State> {
     )
 
     return (
-      <span>
-        <span style={{ fontSize: '16px' }}>
-          <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
-            {icon}
-          </CustomIconButton>
-        </span>
-      </span>
+      <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
+        <div style={{ marginTop: '2px' }}>{icon}</div>
+      </CustomIconButton>
     )
   }
 }
diff --git a/app/src/components/helper/CustomIconButton.tsx b/app/src/components/helper/CustomIconButton.tsx
index d75990c..bd4ba03 100644
--- a/app/src/components/helper/CustomIconButton.tsx
+++ b/app/src/components/helper/CustomIconButton.tsx
@@ -16,6 +16,9 @@ const styles = (theme: Theme) => ({
     width: '32px',
     height: '32px',
   },
+  tooltip: {
+    marginTop: '-16px',
+  },
   label: {
     marginTop: '-2px',
   },
@@ -34,8 +37,8 @@ class CustomIconButton extends React.PureComponent<Props, {}> {
   public render() {
     return (
       <IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
-        <Tooltip title={this.props.tooltip} className={this.props.classes.label}>
-          <span>{this.props.children}</span>
+        <Tooltip title={this.props.tooltip} classes={{ popper: this.props.classes.tooltip }}>
+          <span className={this.props.classes.label}>{this.props.children}</span>
         </Tooltip>
       </IconButton>
     )