Removing general hover classes and moving them into each component css

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;
+    }
 }

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>
+                    <IconButton icon={<OptionsIcon/>}/>
-                    <Menu>
+                    <Menu position='left'>
                         <Menu.Text
                             icon={<DeleteIcon/>}
                             id='delete'

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;
             }
         }
     }

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()

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

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 {

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
+                    <div className='open-button'>
-                        className='octo-hoverbutton open-button'
+                        <Button onClick={() => this.setState({showCard: true})}>
-                        onClick={() => {
+                            <FormattedMessage
-                            this.setState({showCard: true})
+                                id='TableRow.open'
-                        }}
+                                defaultMessage='Open'
-                    >
+                            />
-                        <FormattedMessage
+                        </Button>
-                            id='TableRow.open'
-                            defaultMessage='Open'
-                        />
                     </div>
                     {this.state.showCard &&
                     <RootPortal>

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;
         }

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()

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;