From 1b19819141fabb357a9128a66c38d332678a46e3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Sat, 31 Oct 2020 17:30:56 +0100
Subject: [PATCH] Using more widely the Button and IconButton components

---
 webapp/src/components/comment.tsx          |  4 +-
 webapp/src/components/dialog.tsx           |  5 +-
 webapp/src/components/sidebar.scss         | 42 ++++++++++++-----
 webapp/src/components/sidebar.tsx          | 54 +++++++++++-----------
 webapp/src/widgets/buttons/button.scss     |  1 +
 webapp/src/widgets/buttons/iconButton.scss |  5 +-
 6 files changed, 69 insertions(+), 42 deletions(-)

diff --git a/webapp/src/components/comment.tsx b/webapp/src/components/comment.tsx
index 8408532ef..99a1c661e 100644
--- a/webapp/src/components/comment.tsx
+++ b/webapp/src/components/comment.tsx
@@ -9,6 +9,8 @@ import {IBlock} from '../blocks/block'
 import Menu from '../widgets/menu'
 import MenuWrapper from '../widgets/menuWrapper'
 import DeleteIcon from '../widgets/icons/delete'
+import OptionsIcon from '../widgets/icons/options'
+import IconButton from '../widgets/buttons/iconButton'
 
 import './comment.scss'
 import {Utils} from '../utils'
@@ -36,7 +38,7 @@ const Comment: FC<Props> = (props: Props) => {
                 <div className='comment-username'>{username}</div>
                 <div className='comment-date'>{(new Date(comment.createAt)).toLocaleTimeString()}</div>
                 <MenuWrapper>
-                    <div className='octo-hoverbutton square'>{'...'}</div>
+                    <IconButton icon={<OptionsIcon/>}/>
                     <Menu position='left'>
                         <Menu.Text
                             icon={<DeleteIcon/>}
diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx
index 380e16f61..85a26205c 100644
--- a/webapp/src/components/dialog.tsx
+++ b/webapp/src/components/dialog.tsx
@@ -3,7 +3,8 @@
 import React from 'react'
 
 import MenuWrapper from '../widgets/menuWrapper'
-import Button from '../widgets/buttons/button'
+import OptionsIcon from '../widgets/icons/options'
+import IconButton from '../widgets/buttons/iconButton'
 
 import './dialog.scss'
 
@@ -54,7 +55,7 @@ export default class Dialog extends React.PureComponent<Props> {
                     <div className='toolbar'>
                         <div className='octo-spacer'/>
                         <MenuWrapper>
-                            <Button>{'...'}</Button>
+                            <IconButton icon={<OptionsIcon/>}/>
                             {toolsMenu}
                         </MenuWrapper>
                     </div>}
diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss
index b64699198..cf6a0b2fa 100644
--- a/webapp/src/components/sidebar.scss
+++ b/webapp/src/components/sidebar.scss
@@ -32,18 +32,24 @@
         font-weight: 600;
         padding: 3px 20px;
         margin-bottom: 5px;
-        .show-button {
-            .HamburgerIcon {
+        .IconButton {
+            background-color: var(--sidebar-bg);
+            &:hover {
+                background-color: rgba(var(--sidebar-fg), 0.1);
+            }
+        }
+        &.show-button {
+            .hamburger-icon {
                 display: block;
             }
-            .ShowSidebarIcon {
+            .show-icon {
                 display: none;
             }
             &:hover {
-                .HamburgerIcon {
+                .hamburger-icon {
                     display: none;
                 }
-                .ShowSidebarIcon {
+                .show-icon {
                     display: block;
                 }
             }
@@ -70,20 +76,32 @@
                 background-color: rgba(var(--sidebar-bg));
             }
         }
-        .octo-button {
+
+        .IconButton {
+            background-color: var(--sidebar-bg);
             &:hover {
                 background-color: rgba(var(--sidebar-fg), 0.1);
             }
-            &.expanded {
-                .SubmenuTriangleIcon {
-                    transform: rotate(90deg);
-                }
+        }
+        .MenuWrapper {
+            display: none;
+        }
+        &:hover {
+            display: flex;
+            .MenuWrapper {
+                display: block;
             }
+        }
+
+        &.expanded {
             .SubmenuTriangleIcon {
-                transition: 200ms ease-in-out;
-                transform: rotate(0deg);
+                transform: rotate(90deg);
             }
         }
+        .SubmenuTriangleIcon {
+            transition: 200ms ease-in-out;
+            transform: rotate(0deg);
+        }
     }
 
     .octo-sidebar-title {
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index f29991a77..b68e9a589 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -14,8 +14,11 @@ import OptionsIcon from '../widgets/icons/options'
 import ShowSidebarIcon from '../widgets/icons/showSidebar'
 import HideSidebarIcon from '../widgets/icons/hideSidebar'
 import HamburgerIcon from '../widgets/icons/hamburger'
+import DeleteIcon from '../widgets/icons/delete'
 import SubmenuTriangleIcon from '../widgets/icons/submenuTriangle'
 import DotIcon from '../widgets/icons/dot'
+import IconButton from '../widgets/buttons/iconButton'
+import Button from '../widgets/buttons/button'
 import {WorkspaceTree} from '../viewModel/workspaceTree'
 import {BoardView} from '../blocks/boardView'
 
@@ -57,13 +60,18 @@ class Sidebar extends React.Component<Props, State> {
         if (this.state.isHidden) {
             return (
                 <div className='Sidebar octo-sidebar hidden'>
-                    <div className='octo-sidebar-header'>
-                        <div
-                            className='octo-button square show-button'
-                            onClick={() => this.showClicked()}
-                        >
-                            <HamburgerIcon/>
-                            <ShowSidebarIcon/>
+                    <div className='octo-sidebar-header show-button'>
+                        <div className='hamburger-icon'>
+                            <IconButton
+                                icon={<HamburgerIcon/>}
+                                onClick={() => this.showClicked()}
+                            />
+                        </div>
+                        <div className='show-icon'>
+                            <IconButton
+                                icon={<ShowSidebarIcon/>}
+                                onClick={() => this.showClicked()}
+                            />
                         </div>
                     </div>
                 </div>
@@ -75,10 +83,10 @@ class Sidebar extends React.Component<Props, State> {
                 <div className='octo-sidebar-header octo-hover-container'>
                     {'OCTO'}
                     <div className='octo-spacer'/>
-                    <div
-                        className='octo-button square octo-hover-item'
+                    <IconButton
                         onClick={() => this.hideClicked()}
-                    ><HideSidebarIcon/></div>
+                        icon={<HideSidebarIcon/>}
+                    />
                 </div>
                 {
                     boards.map((board) => {
@@ -91,17 +99,15 @@ 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'>
-                                    <div
-                                        className={'octo-button square ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}
+                                <div className={'octo-sidebar-item octo-hover-container ' + (collapsedBoards[board.id] ? 'collapsed' : 'expanded')}>
+                                    <IconButton
+                                        icon={<SubmenuTriangleIcon/>}
                                         onClick={() => {
                                             const newCollapsedBoards = {...this.state.collapsedBoards}
                                             newCollapsedBoards[board.id] = !newCollapsedBoards[board.id]
                                             this.setState({collapsedBoards: newCollapsedBoards})
                                         }}
-                                    >
-                                        <SubmenuTriangleIcon/>
-                                    </div>
+                                    />
                                     <div
                                         className='octo-sidebar-title'
                                         onClick={() => {
@@ -111,11 +117,12 @@ class Sidebar extends React.Component<Props, State> {
                                         {board.icon ? `${board.icon} ${displayTitle}` : displayTitle}
                                     </div>
                                     <MenuWrapper>
-                                        <div className='octo-button square octo-hover-item'><OptionsIcon/></div>
+                                        <IconButton icon={<OptionsIcon/>}/>
                                         <Menu>
                                             <Menu.Text
                                                 id='delete'
                                                 name={intl.formatMessage({id: 'Sidebar.delete-board', defaultMessage: 'Delete Board'})}
+                                                icon={<DeleteIcon/>}
                                                 onClick={async () => {
                                                     const nextBoardId = boards.length > 1 ? boards.find((o) => o.id !== board.id).id : undefined
                                                     mutator.deleteBlock(
@@ -168,27 +175,22 @@ class Sidebar extends React.Component<Props, State> {
 
                 <br/>
 
-                <div
-                    className='octo-button'
-                    onClick={() => {
-                        this.addBoardClicked()
-                    }}
-                >
+                <Button onClick={this.addBoardClicked}>
                     <FormattedMessage
                         id='Sidebar.add-board'
                         defaultMessage='+ Add Board'
                     />
-                </div>
+                </Button>
 
                 <div className='octo-spacer'/>
 
                 <MenuWrapper>
-                    <div className='octo-button'>
+                    <Button>
                         <FormattedMessage
                             id='Sidebar.settings'
                             defaultMessage='Settings'
                         />
-                    </div>
+                    </Button>
                     <Menu position='top'>
                         <Menu.Text
                             id='import'
diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss
index f98c3796a..017217e3f 100644
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@@ -2,6 +2,7 @@
     display: flex;
     align-items: center;
 	text-align: center;
+    justify-content: center;
 	border-radius: 5px;
 	padding: 0 5px;
 	min-width: 20px;
diff --git a/webapp/src/widgets/buttons/iconButton.scss b/webapp/src/widgets/buttons/iconButton.scss
index 1b4697a1b..08f44c569 100644
--- a/webapp/src/widgets/buttons/iconButton.scss
+++ b/webapp/src/widgets/buttons/iconButton.scss
@@ -1,10 +1,13 @@
 .IconButton {
     height: 24px;
     width: 24px;
-    padding: 0;
     background-color: rgba(var(--main-fg), 0.1);
+    padding: 0;
+    margin: 0;
     .Icon {
         height: 24px;
         width: 24px;
+        padding: 0;
+        margin: 0;
     }
 }