From a71f7d6b13f530b70b3f467306ca760ead6305d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Mon, 2 Nov 2020 10:46:28 +0100
Subject: [PATCH] Removing general hover classes and moving them into each
 component css

---
 webapp/src/components/boardCard.scss  |  9 +++++
 webapp/src/components/boardCard.tsx   |  5 ++-
 webapp/src/components/cardDetail.scss | 10 ++++-
 webapp/src/components/cardDetail.tsx  |  4 +-
 webapp/src/components/sidebar.tsx     |  6 +--
 webapp/src/components/tableRow.scss   |  4 ++
 webapp/src/components/tableRow.tsx    | 18 ++++-----
 webapp/src/components/viewTitle.scss  |  7 +++-
 webapp/src/components/viewTitle.tsx   |  2 +-
 webapp/src/styles/main.scss           | 57 ---------------------------
 10 files changed, 44 insertions(+), 78 deletions(-)

diff --git a/webapp/src/components/boardCard.scss b/webapp/src/components/boardCard.scss
index 946fbb293..a0f618eef 100644
--- a/webapp/src/components/boardCard.scss
+++ b/webapp/src/components/boardCard.scss
@@ -50,4 +50,13 @@
             margin-right: 5px;
         }
     }
+    .IconButton {
+        border-radius: 3px;
+        margin-right: 6px;
+        padding: 0;
+        background: rgb(var(--main-fg), 0.1);
+        box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
+        height: 24px;
+        width: 24px;
+    }
 }
diff --git a/webapp/src/components/boardCard.tsx b/webapp/src/components/boardCard.tsx
index ad780846a..f16cb0965 100644
--- a/webapp/src/components/boardCard.tsx
+++ b/webapp/src/components/boardCard.tsx
@@ -13,6 +13,7 @@ import Menu from '../widgets/menu'
 import OptionsIcon from '../widgets/icons/options'
 import DeleteIcon from '../widgets/icons/delete'
 import DuplicateIcon from '../widgets/icons/duplicate'
+import IconButton from '../widgets/buttons/iconButton'
 
 import PropertyValueElement from './propertyValueElement'
 
@@ -88,8 +89,8 @@ class BoardCard extends React.Component<BoardCardProps, BoardCardState> {
                     className='optionsMenu'
                     stopPropagationOnToggle={true}
                 >
-                    <div className='octo-hoverbutton square'><OptionsIcon/></div>
-                    <Menu>
+                    <IconButton icon={<OptionsIcon/>}/>
+                    <Menu position='left'>
                         <Menu.Text
                             icon={<DeleteIcon/>}
                             id='delete'
diff --git a/webapp/src/components/cardDetail.scss b/webapp/src/components/cardDetail.scss
index fccc7d3c2..a5a216440 100644
--- a/webapp/src/components/cardDetail.scss
+++ b/webapp/src/components/cardDetail.scss
@@ -3,13 +3,19 @@
         width: 100%;
     }
 
-    .octo-hovercontrols {
+    .add-buttons {
+        display: flex;
+        flex-direction: column;
+	    min-height: 30px;
+	    color:rgba(var(--main-fg), 0.4);
+	    width: 100%;
+	    align-items: flex-start;
         .Button {
             display: none;
         }
         &:hover {
             .Button {
-                display: block;
+                display: flex;
             }
         }
     }
diff --git a/webapp/src/components/cardDetail.tsx b/webapp/src/components/cardDetail.tsx
index 49336e2b2..536ed935e 100644
--- a/webapp/src/components/cardDetail.tsx
+++ b/webapp/src/components/cardDetail.tsx
@@ -99,7 +99,7 @@ class CardDetail extends React.Component<Props, State> {
                 </div>)
         } else {
             contentElements = (<div className='octo-content'>
-                <div className='octo-block octo-hover-container'>
+                <div className='octo-block'>
                     <div className='octo-block-margin'/>
                     <MarkdownEditor
                         text=''
@@ -126,7 +126,7 @@ class CardDetail extends React.Component<Props, State> {
                         size='l'
                     />
                     {!icon &&
-                        <div className='octo-hovercontrols'>
+                        <div className='add-buttons'>
                             <Button
                                 onClick={() => {
                                     const newIcon = BlockIcons.shared.randomIcon()
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index b68e9a589..8078c6d6e 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -80,7 +80,7 @@ class Sidebar extends React.Component<Props, State> {
 
         return (
             <div className='Sidebar octo-sidebar'>
-                <div className='octo-sidebar-header octo-hover-container'>
+                <div className='octo-sidebar-header'>
                     {'OCTO'}
                     <div className='octo-spacer'/>
                     <IconButton
@@ -99,7 +99,7 @@ class Sidebar extends React.Component<Props, State> {
                         const boardViews = views.filter((view) => view.parentId === board.id)
                         return (
                             <div key={board.id}>
-                                <div className={'octo-sidebar-item octo-hover-container ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
+                                <div className={'octo-sidebar-item ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
                                     <IconButton
                                         icon={<SubmenuTriangleIcon/>}
                                         onClick={() => {
@@ -150,7 +150,7 @@ class Sidebar extends React.Component<Props, State> {
                                 {!collapsedBoards[board.id] && boardViews.map((view) => (
                                     <div
                                         key={view.id}
-                                        className='octo-sidebar-item subitem octo-hover-container'
+                                        className='octo-sidebar-item subitem'
                                     >
                                         <DotIcon/>
                                         <div
diff --git a/webapp/src/components/tableRow.scss b/webapp/src/components/tableRow.scss
index 72ababe63..767a72bf5 100644
--- a/webapp/src/components/tableRow.scss
+++ b/webapp/src/components/tableRow.scss
@@ -1,6 +1,10 @@
 .TableRow {
     .open-button {
         display: none;
+        .Button {
+            background-color: rgba(var(--main-fg), 0.1);
+            box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
+        }
     }
     &:hover {
         .open-button {
diff --git a/webapp/src/components/tableRow.tsx b/webapp/src/components/tableRow.tsx
index b2e36ba6e..0ceb109ce 100644
--- a/webapp/src/components/tableRow.tsx
+++ b/webapp/src/components/tableRow.tsx
@@ -8,6 +8,7 @@ import {Card} from '../blocks/card'
 import mutator from '../mutator'
 
 import Editable from '../widgets/editable'
+import Button from '../widgets/buttons/button'
 
 import PropertyValueElement from './propertyValueElement'
 import {CardDialog} from './cardDialog'
@@ -80,16 +81,13 @@ class TableRow extends React.Component<Props, State> {
                         />
                     </div>
 
-                    <div
-                        className='octo-hoverbutton open-button'
-                        onClick={() => {
-                            this.setState({showCard: true})
-                        }}
-                    >
-                        <FormattedMessage
-                            id='TableRow.open'
-                            defaultMessage='Open'
-                        />
+                    <div className='open-button'>
+                        <Button onClick={() => this.setState({showCard: true})}>
+                            <FormattedMessage
+                                id='TableRow.open'
+                                defaultMessage='Open'
+                            />
+                        </Button>
                     </div>
                     {this.state.showCard &&
                     <RootPortal>
diff --git a/webapp/src/components/viewTitle.scss b/webapp/src/components/viewTitle.scss
index 5ade542ef..552638a1a 100644
--- a/webapp/src/components/viewTitle.scss
+++ b/webapp/src/components/viewTitle.scss
@@ -4,7 +4,12 @@
 	flex-direction: row;
 	align-items: center;
 
-    &.octo-hovercontrols {
+    &.add-buttons {
+        flex-direction: column;
+	    min-height: 30px;
+	    color:rgba(var(--main-fg), 0.4);
+	    width: 100%;
+	    align-items: flex-start;
         .Button {
             display: none;
         }
diff --git a/webapp/src/components/viewTitle.tsx b/webapp/src/components/viewTitle.tsx
index 99aa7e8bf..c992b88b5 100644
--- a/webapp/src/components/viewTitle.tsx
+++ b/webapp/src/components/viewTitle.tsx
@@ -39,7 +39,7 @@ class ViewTitle extends React.Component<Props, State> {
 
         return (
             <>
-                <div className={'ViewTitle octo-hovercontrols ' + (board.icon ? '' : 'add-visible')}>
+                <div className={'ViewTitle add-buttons ' + (board.icon ? '' : 'add-visible')}>
                     <Button
                         onClick={() => {
                             const newIcon = BlockIcons.shared.randomIcon()
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index 1eb2ab2b2..81db2bd4e 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -121,16 +121,6 @@ hr {
 
 /* Icons */
 
-.octo-hovercontrols {
-    display: flex;
-    flex-direction: column;
-	align-items: flex-start;
-
-	min-height: 30px;
-	width: 100%;
-	color:rgba(var(--main-fg), 0.4);
-}
-
 .octo-icon {
 	font-family: "Apple Color Emoji", "Segoe UI Emoji", NotoColorEmoji, "Noto Color Emoji", "Segoe UI Symbol", "Android Emoji", EmojiSymbols;
 	line-height: 1.5em;
@@ -182,59 +172,12 @@ hr {
 	box-shadow: rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px, rgba(15, 15, 15, 0.2) 0px 9px 24px;
 }
 
-.octo-hoverbutton {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-	border-radius: 3px;
-
-	position: absolute;
-	right: 6px;
-	top: 4px;
-	cursor: pointer;
-	background: rgb(var(--main-fg), 0.1);
-	box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
-	padding: 0 5px;
-
-    &.square {
-        height: 24px;
-        width: 24px;
-        padding: 0;
-    }
-}
-
-/* Hover panel */
-
-.octo-hoverpanel {
-    display: flex;
-    flex-direction: column;
-	align-items: flex-start;
-
-	min-height: 30px;
-	width: 100%;
-	color:rgba(var(--main-fg), 0.4);
-}
-
 .octo-block img {
 	max-width: 500px;
 	max-height: 500px;
 	margin: 5px 0;
 }
 
-/* This needs to be declared after other co-classes */
-.octo-hover-container {
-	position: relative;
-}
-
-.octo-hover-item {
-	display: none;
-}
-
-.octo-hover-container:hover .octo-hover-item {
-	display: flex;
-}
-
 .octo-content {
 	width: 100%;
 	margin-right: 50px;