Adding icon button component

webapp/src/components/contentBlock.tsx

@@ -21,6 +21,7 @@ import AddIcon from '../widgets/icons/add'
 import TextIcon from '../widgets/icons/text'
 import ImageIcon from '../widgets/icons/image'
 import DividerIcon from '../widgets/icons/divider'
+import IconButton from '../widgets/buttons/iconButton'
 
 import {MarkdownEditor} from './markdownEditor'
 
@@ -47,7 +48,7 @@ class ContentBlock extends React.Component<Props> {
             <div className='ContentBlock octo-block'>
                 <div className='octo-block-margin'>
                     <MenuWrapper>
-                        <div className='octo-button octo-hovercontrol square '><OptionsIcon/></div>
+                        <IconButton icon={<OptionsIcon/>}/>
                         <Menu>
                             {index > 0 &&
                                 <Menu.Text

webapp/src/widgets/buttons/iconButton.scss

@@ -0,0 +1,10 @@
+.IconButton {
+    height: 24px;
+    width: 24px;
+    padding: 0;
+    background-color: rgba(var(--main-fg), 0.1);
+    .Icon {
+        height: 24px;
+        width: 24px;
+    }
+}

webapp/src/widgets/buttons/iconButton.tsx

@@ -0,0 +1,25 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+import React from 'react'
+
+import './iconButton.scss'
+
+type Props = {
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+    title?: string
+    icon?: React.ReactNode
+}
+
+export default class Button extends React.Component<Props> {
+    render() {
+        return (
+            <div
+                onClick={this.props.onClick}
+                className='Button IconButton'
+                title={this.props.title}
+            >
+                {this.props.icon}
+            </div>
+        )
+    }
+}