Fix button layout
This commit is contained in:
@@ -28,15 +28,11 @@ export const RecursiveTopicDeleteButton = (props: {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<Badge
|
<Badge
|
||||||
style={{
|
|
||||||
top: '3px',
|
|
||||||
right: '3px',
|
|
||||||
}}
|
|
||||||
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
|
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
|
||||||
color="secondary"
|
color="secondary"
|
||||||
>
|
>
|
||||||
<CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
|
<CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
|
||||||
<Delete style={{ marginTop: '-3px' }} color="action" />
|
<Delete color="action" />
|
||||||
</CustomIconButton>
|
</CustomIconButton>
|
||||||
</Badge>
|
</Badge>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ export const TopicDeleteButton = (props: {
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<CustomIconButton onClick={() => props.deleteTopicAction(node)} tooltip="Clear this topic">
|
<CustomIconButton onClick={() => props.deleteTopicAction(node)} tooltip="Clear this topic">
|
||||||
<Delete style={{ marginTop: '-3px' }} />
|
<Delete />
|
||||||
</CustomIconButton>
|
</CustomIconButton>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -44,13 +44,9 @@ class Copy extends React.PureComponent<Props, State> {
|
|||||||
)
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span>
|
|
||||||
<span style={{ fontSize: '16px' }}>
|
|
||||||
<CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
|
<CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
|
||||||
{icon}
|
<div style={{ marginTop: '2px' }}>{icon}</div>
|
||||||
</CustomIconButton>
|
</CustomIconButton>
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -16,6 +16,9 @@ const styles = (theme: Theme) => ({
|
|||||||
width: '32px',
|
width: '32px',
|
||||||
height: '32px',
|
height: '32px',
|
||||||
},
|
},
|
||||||
|
tooltip: {
|
||||||
|
marginTop: '-16px',
|
||||||
|
},
|
||||||
label: {
|
label: {
|
||||||
marginTop: '-2px',
|
marginTop: '-2px',
|
||||||
},
|
},
|
||||||
@@ -34,8 +37,8 @@ class CustomIconButton extends React.PureComponent<Props, {}> {
|
|||||||
public render() {
|
public render() {
|
||||||
return (
|
return (
|
||||||
<IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
|
<IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
|
||||||
<Tooltip title={this.props.tooltip} className={this.props.classes.label}>
|
<Tooltip title={this.props.tooltip} classes={{ popper: this.props.classes.tooltip }}>
|
||||||
<span>{this.props.children}</span>
|
<span className={this.props.classes.label}>{this.props.children}</span>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</IconButton>
|
</IconButton>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user