From 28568db1bfb92d5df6f02699b9d7c84a020b3d9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sun, 1 Nov 2020 17:35:25 +0100
Subject: [PATCH] Almost removed all the octo-button class

---
 webapp/src/components/boardComponent.scss     |  4 --
 webapp/src/components/cardDetail.scss         | 12 ++++
 webapp/src/components/cardDetail.tsx          | 60 +++++++++----------
 webapp/src/components/commentsList.scss       |  8 ---
 webapp/src/components/tableComponent.scss     |  1 -
 .../src/widgets/buttons/buttonWithMenu.scss   |  2 +-
 webapp/src/widgets/buttons/buttonWithMenu.tsx |  2 +-
 7 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/webapp/src/components/boardComponent.scss b/webapp/src/components/boardComponent.scss
index 236783520..294986d4a 100644
--- a/webapp/src/components/boardComponent.scss
+++ b/webapp/src/components/boardComponent.scss
@@ -53,10 +53,6 @@
         &.narrow {
             width: 220px;
         }
-        > .octo-button {
-            color: #909090;
-            text-align: left;
-        }
     }
 
     .octo-board-hidden-item {
diff --git a/webapp/src/components/cardDetail.scss b/webapp/src/components/cardDetail.scss
index 8e47ce977..d7adb243b 100644
--- a/webapp/src/components/cardDetail.scss
+++ b/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;
+            }
+        }
+    }
 }
diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index f441f60a8..a55c0ba83 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -208,38 +208,36 @@ class CardDetail extends React.Component<Props, State> {
                     {contentElements}
                 </div>
 
-                <div className='CardDetail content'>
-                    <div className='octo-hoverpanel octo-hover-container'>
-                        <MenuWrapper>
-                            <div className='octo-button octo-hovercontrol octo-hover-item'>
-                                <FormattedMessage
-                                    id='CardDetail.add-content'
-                                    defaultMessage='Add content'
-                                />
-                            </div>
-                            <Menu>
-                                <Menu.Text
-                                    id='text'
-                                    name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
-                                    onClick={() => {
-                                        const block = new MutableTextBlock()
-                                        block.parentId = card.id
-                                        block.order = cardTree.contents.length * 1000
-                                        mutator.insertBlock(block, 'add text')
-                                    }}
-                                />
-                                <Menu.Text
-                                    id='image'
-                                    name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
-                                    onClick={() => Utils.selectLocalFile(
-                                        (file) => mutator.createImageBlock(card.id, file, cardTree.contents.length * 1000),
-                                        '.jpg,.jpeg,.png',
-                                    )}
-                                />
+                <div className='CardDetail content add-content'>
+                    <MenuWrapper>
+                        <Button>
+                            <FormattedMessage
+                                id='CardDetail.add-content'
+                                defaultMessage='Add content'
+                            />
+                        </Button>
+                        <Menu position='top'>
+                            <Menu.Text
+                                id='text'
+                                name={intl.formatMessage({id: 'CardDetail.text', defaultMessage: 'Text'})}
+                                onClick={() => {
+                                    const block = new MutableTextBlock()
+                                    block.parentId = card.id
+                                    block.order = cardTree.contents.length * 1000
+                                    mutator.insertBlock(block, 'add text')
+                                }}
+                            />
+                            <Menu.Text
+                                id='image'
+                                name={intl.formatMessage({id: 'CardDetail.image', defaultMessage: 'Image'})}
+                                onClick={() => Utils.selectLocalFile(
+                                    (file) => mutator.createImageBlock(card.id, file, cardTree.contents.length * 1000),
+                                    '.jpg,.jpeg,.png',
+                                )}
+                            />
 
-                            </Menu>
-                        </MenuWrapper>
-                    </div>
+                        </Menu>
+                    </MenuWrapper>
                 </div>
             </>
         )
diff --git a/webapp/src/components/commentsList.scss b/webapp/src/components/commentsList.scss
index 38d57b379..7d7b5b7cd 100644
--- a/webapp/src/components/commentsList.scss
+++ b/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;
-            }
-        }
     }
 }
 
diff --git a/webapp/src/components/tableComponent.scss b/webapp/src/components/tableComponent.scss
index c37e4621b..1984f7d49 100644
--- a/webapp/src/components/tableComponent.scss
+++ b/webapp/src/components/tableComponent.scss
@@ -46,7 +46,6 @@
             line-height: 17px;
         }
 
-        .octo-button,
         .octo-editable,
         .octo-propertyvalue
         {
diff --git a/webapp/src/widgets/buttons/buttonWithMenu.scss b/webapp/src/widgets/buttons/buttonWithMenu.scss
index b420a66f7..f245b0341 100644
--- a/webapp/src/widgets/buttons/buttonWithMenu.scss
+++ b/webapp/src/widgets/buttons/buttonWithMenu.scss
@@ -1,4 +1,4 @@
-.ButtonWithMenu.octo-button {
+.ButtonWithMenu {
     display: flex;
     align-items: stretch;
 	text-align: center;
diff --git a/webapp/src/widgets/buttons/buttonWithMenu.tsx b/webapp/src/widgets/buttons/buttonWithMenu.tsx
index b48f80fbc..2b74e3410 100644
--- a/webapp/src/widgets/buttons/buttonWithMenu.tsx
+++ b/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'>