From e2b45da9d02e817735ed1554bc9f4f44cc4bb4c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sun, 1 Nov 2020 16:35:49 +0100
Subject: [PATCH] Migrating some octo-button class divs into Button objects

---
 webapp/src/components/commentsList.tsx |  8 ++++---
 webapp/src/components/viewHeader.scss  |  7 ++++++
 webapp/src/components/viewHeader.tsx   | 33 ++++++++------------------
 webapp/src/styles/main.scss            |  9 -------
 webapp/src/widgets/buttons/button.scss | 10 ++++++++
 webapp/src/widgets/buttons/button.tsx  |  3 ++-
 6 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/webapp/src/components/commentsList.tsx b/webapp/src/components/commentsList.tsx
index 6166c2557..bf477b6db 100644
--- a/webapp/src/components/commentsList.tsx
+++ b/webapp/src/components/commentsList.tsx
@@ -8,6 +8,8 @@ import {IBlock} from '../blocks/block'
 import {Utils} from '../utils'
 import mutator from '../mutator'
 
+import Button from '../widgets/buttons/button'
+
 import Comment from './comment'
 
 import './commentsList.scss'
@@ -84,8 +86,8 @@ class CommentsList extends React.Component<Props, State> {
                     />
 
                     {this.state.newComment &&
-                        <div
-                            className='octo-button filled'
+                        <Button
+                            filled={true}
                             onClick={() => {
                                 if (this.state.newComment) {
                                     Utils.log(`Send comment: ${this.state.newComment}`)
@@ -98,7 +100,7 @@ class CommentsList extends React.Component<Props, State> {
                                 id='CommentsList.send'
                                 defaultMessage='Send'
                             />
-                        </div>
+                        </Button>
                     }
                 </div>
             </div>
diff --git a/webapp/src/components/viewHeader.scss b/webapp/src/components/viewHeader.scss
index 535eeada1..53d972d6e 100644
--- a/webapp/src/components/viewHeader.scss
+++ b/webapp/src/components/viewHeader.scss
@@ -17,4 +17,11 @@
     #groupByLabel {
         margin-left: 0.3em;
     }
+
+    .IconButton {
+        background: none;
+        &:hover {
+            background: rgba(var(--main-fg), 0.1);
+        }
+    }
 }
diff --git a/webapp/src/components/viewHeader.tsx b/webapp/src/components/viewHeader.tsx
index 0381f15f2..007647667 100644
--- a/webapp/src/components/viewHeader.tsx
+++ b/webapp/src/components/viewHeader.tsx
@@ -22,6 +22,8 @@ import OptionsIcon from '../widgets/icons/options'
 import SortUpIcon from '../widgets/icons/sortUp'
 import SortDownIcon from '../widgets/icons/sortDown'
 import ButtonWithMenu from '../widgets/buttons/buttonWithMenu'
+import IconButton from '../widgets/buttons/iconButton'
+import Button from '../widgets/buttons/button'
 
 import {Editable} from './editable'
 import FilterComponent from './filterComponent'
@@ -136,12 +138,7 @@ class ViewHeader extends React.Component<Props, State> {
                     }}
                 />
                 <MenuWrapper>
-                    <div
-                        className='octo-button'
-                        style={{color: 'rgb(var(--main-fg))', fontWeight: 600}}
-                    >
-                        <DropdownIcon/>
-                    </div>
+                    <IconButton icon={<DropdownIcon/>}/>
                     <ViewMenu
                         board={board}
                         boardTree={boardTree}
@@ -150,12 +147,12 @@ class ViewHeader extends React.Component<Props, State> {
                 </MenuWrapper>
                 <div className='octo-spacer'/>
                 <MenuWrapper>
-                    <div className={'octo-button'}>
+                    <Button>
                         <FormattedMessage
                             id='ViewHeader.properties'
                             defaultMessage='Properties'
                         />
-                    </div>
+                    </Button>
                     <Menu>
                         {boardTree.board.cardProperties.map((option: IPropertyTemplate) => (
                             <Menu.Switch
@@ -182,10 +179,7 @@ class ViewHeader extends React.Component<Props, State> {
                 </MenuWrapper>
                 {withGroupBy &&
                     <MenuWrapper>
-                        <div
-                            className='octo-button'
-                            id='groupByButton'
-                        >
+                        <Button>
                             <FormattedMessage
                                 id='ViewHeader.group-by'
                                 defaultMessage='Group by {property}'
@@ -200,7 +194,7 @@ class ViewHeader extends React.Component<Props, State> {
                                     ),
                                 }}
                             />
-                        </div>
+                        </Button>
                         <Menu>
                             {boardTree.board.cardProperties.filter((o: IPropertyTemplate) => o.type === 'select').map((option: IPropertyTemplate) => (
                                 <Menu.Text
@@ -307,21 +301,14 @@ class ViewHeader extends React.Component<Props, State> {
                         }}
                     />}
                 {!this.state.isSearching &&
-                    <div
-                        className='octo-button'
-                        onClick={() => {
-                            this.setState({isSearching: true})
-                        }}
-                    >
+                    <Button onClick={() => this.setState({isSearching: true})}>
                         <FormattedMessage
                             id='ViewHeader.search'
                             defaultMessage='Search'
                         />
-                    </div>}
+                    </Button>}
                 <MenuWrapper>
-                    <div className='octo-button'>
-                        <OptionsIcon/>
-                    </div>
+                    <IconButton icon={<OptionsIcon/>}/>
                     <Menu>
                         <Menu.Text
                             id='exportCsv'
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index a5388d8bc..a527fe3ca 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -137,15 +137,6 @@ hr {
     }
 }
 
-.filled {
-	color: #ffffff;
-	background-color: rgb(var(--button-bg));
-	padding: 2px 10px;
-
-    &:hover {
-        background-color:  rgb(var(--button-bg), 0.8);
-    }
-}
 
 /* Icons */
 
diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss
index 017217e3f..9518dfd19 100644
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@@ -15,6 +15,16 @@
         background-color: rgba(var(--main-fg), 0.1);
 	}
 
+    &.filled {
+        color: #ffffff;
+        background-color: rgb(var(--button-bg));
+        padding: 2px 10px;
+
+        &:hover {
+            background-color:  rgb(var(--button-bg), 0.8);
+        }
+    }
+
     .Icon {
         width: 14px;
         height: 14px;
diff --git a/webapp/src/widgets/buttons/button.tsx b/webapp/src/widgets/buttons/button.tsx
index ad66575e9..12f1e9f68 100644
--- a/webapp/src/widgets/buttons/button.tsx
+++ b/webapp/src/widgets/buttons/button.tsx
@@ -9,6 +9,7 @@ type Props = {
     children?: React.ReactNode
     title?: string
     icon?: React.ReactNode
+    filled?: boolean
 }
 
 export default class Button extends React.Component<Props> {
@@ -16,7 +17,7 @@ export default class Button extends React.Component<Props> {
         return (
             <div
                 onClick={this.props.onClick}
-                className='Button'
+                className={`Button ${this.props.filled ? 'filled' : ''}`}
                 title={this.props.title}
             >
                 {this.props.icon}