Almost removed all the octo-button class

webapp/src/components/boardComponent.scss

@@ -53,10 +53,6 @@
         &.narrow {
             width: 220px;
         }
-        > .octo-button {
-            color: #909090;
-            text-align: left;
-        }
     }
 
     .octo-board-hidden-item {

webapp/src/components/cardDetail.scss

@@ -40,4 +40,16 @@
             color: rgba(var(--main-fg), 0.4);
         }
     }
+
+    &.add-content {
+        .Button {
+            opacity: 0;
+            color: rgba(var(--main-fg), 0.6);
+        }
+        &:hover {
+            .Button {
+                opacity: 1;
+            }
+        }
+    }
 }

webapp/src/components/cardDetail.tsx

@@ -208,16 +208,15 @@ class CardDetail extends React.Component<Props, State> {
                     {contentElements}
                 </div>
 
-                <div className='CardDetail content'>
+                <div className='CardDetail content add-content'>
-                    <div className='octo-hoverpanel octo-hover-container'>
                     <MenuWrapper>
-                            <div className='octo-button octo-hovercontrol octo-hover-item'>
+                        <Button>
                             <FormattedMessage
                                 id='CardDetail.add-content'
                                 defaultMessage='Add content'
                             />
-                            </div>
+                        </Button>
-                            <Menu>
+                        <Menu position='top'>
                             <Menu.Text
                                 id='text'
                                 name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
@@ -240,7 +239,6 @@ class CardDetail extends React.Component<Props, State> {
                         </Menu>
                     </MenuWrapper>
                 </div>
-                </div>
             </>
         )
     }

webapp/src/components/commentsList.scss

@@ -21,14 +21,6 @@
         color: rgba(var(--main-fg), 0.8);
         flex-grow: 1;
         margin-left: 5px;
-        .octo-button {
-            display: none;
-        }
-        &:focus {
-            .octo-button {
-                display: block;
-            }
-        }
     }
 }
 

webapp/src/components/tableComponent.scss

@@ -46,7 +46,6 @@
             line-height: 17px;
         }
 
-        .octo-button,
         .octo-editable,
         .octo-propertyvalue
         {

webapp/src/widgets/buttons/buttonWithMenu.scss

@@ -1,4 +1,4 @@
-.ButtonWithMenu.octo-button {
+.ButtonWithMenu {
     display: flex;
     align-items: stretch;
 	text-align: center;

webapp/src/widgets/buttons/buttonWithMenu.tsx

@@ -19,7 +19,7 @@ export default class ButtonWithMenu extends React.PureComponent<Props> {
         return (
             <div
                 onClick={this.props.onClick}
-                className='ButtonWithMenu octo-button'
+                className='ButtonWithMenu'
                 title={this.props.title}
             >
                 <div className='button-text'>