From 9355efbe29462aa4a7b36e985742d3704b7d989a Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Fri, 8 May 2020 22:13:42 +0200
Subject: [PATCH] Adjust button sizes consistently (#2711)

---
 packages/page-accounts/src/Accounts/Account.tsx    |  2 --
 packages/page-accounts/src/Contacts/Address.tsx    |  2 --
 packages/page-contracts/src/Codes/Code.tsx         |  2 --
 packages/page-contracts/src/Contracts/Contract.tsx |  2 --
 packages/page-generic-asset/src/AssetCard.tsx      |  1 -
 packages/react-components/src/Button/Button.tsx    |  2 +-
 packages/react-components/src/Button/Group.tsx     | 14 +++++++++-----
 packages/react-components/src/Table/Body.tsx       | 10 +++++++++-
 8 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/packages/page-accounts/src/Accounts/Account.tsx b/packages/page-accounts/src/Accounts/Account.tsx
index 94bc5e31ab..da72a67f2e 100644
--- a/packages/page-accounts/src/Accounts/Account.tsx
+++ b/packages/page-accounts/src/Accounts/Account.tsx
@@ -288,7 +288,6 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
           icon='paper plane'
           label={t('send')}
           onClick={toggleTransfer}
-          size='small'
           tooltip={t('Send funds from this account')}
         />
         <Popup
@@ -299,7 +298,6 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
             <Button
               icon='ellipsis vertical'
               onClick={toggleSettings}
-              size='small'
             />
           }
         >
diff --git a/packages/page-accounts/src/Contacts/Address.tsx b/packages/page-accounts/src/Contacts/Address.tsx
index 119d7275ad..926a9f8369 100644
--- a/packages/page-accounts/src/Contacts/Address.tsx
+++ b/packages/page-accounts/src/Contacts/Address.tsx
@@ -205,7 +205,6 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
           key='deposit'
           label={t('deposit')}
           onClick={_toggleTransfer}
-          size='small'
           tooltip={t('Send funds to this address')}
         />
         <Popup
@@ -216,7 +215,6 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
             <Button
               icon='ellipsis vertical'
               onClick={_toggleSettingPopup}
-              size='small'
             />
           }
         >
diff --git a/packages/page-contracts/src/Codes/Code.tsx b/packages/page-contracts/src/Codes/Code.tsx
index c5289cd2bf..17bfcc7410 100644
--- a/packages/page-contracts/src/Codes/Code.tsx
+++ b/packages/page-contracts/src/Codes/Code.tsx
@@ -90,7 +90,6 @@ class Code extends React.PureComponent<Props, State> {
           icon='trash'
           isNegative
           onClick={this.toggleForget}
-          size='small'
           tooltip={t('Forget this code hash')}
         />
         <Button
@@ -98,7 +97,6 @@ class Code extends React.PureComponent<Props, State> {
           isPrimary
           label={t('deploy')}
           onClick={showDeploy(codeHash)}
-          size='small'
           tooltip={t('Deploy this code hash as a smart contract')}
         />
       </>
diff --git a/packages/page-contracts/src/Contracts/Contract.tsx b/packages/page-contracts/src/Contracts/Contract.tsx
index 813e57448c..c7b4642364 100644
--- a/packages/page-contracts/src/Contracts/Contract.tsx
+++ b/packages/page-contracts/src/Contracts/Contract.tsx
@@ -79,7 +79,6 @@ function Contract (props: Props): React.ReactElement<Props> | null {
               icon='trash'
               isNegative
               onClick={_toggleForget}
-              size='small'
               tooltip={t('Forget this contract')}
             />
             <Button
@@ -87,7 +86,6 @@ function Contract (props: Props): React.ReactElement<Props> | null {
               isPrimary
               label={t('execute')}
               onClick={onCall()}
-              size='small'
               tooltip={t('Call a method on this contract')}
             />
           </div>
diff --git a/packages/page-generic-asset/src/AssetCard.tsx b/packages/page-generic-asset/src/AssetCard.tsx
index ceb590e979..3016869fdc 100644
--- a/packages/page-generic-asset/src/AssetCard.tsx
+++ b/packages/page-generic-asset/src/AssetCard.tsx
@@ -40,7 +40,6 @@ function AssetCard ({ assetId, className, name, onForget, onSaveName }: Props):
               isNegative
               key='forget'
               onClick={_onForget}
-              size='small'
               tooltip={t('Forget this asset')}
             />
           )}
diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx
index 5e13a62361..33e54ed3f2 100644
--- a/packages/react-components/src/Button/Button.tsx
+++ b/packages/react-components/src/Button/Button.tsx
@@ -36,7 +36,7 @@ function Button ({ children, className, floated, icon, isAnimated, isBasic = fal
     positive: isPositive,
     primary: isPrimary,
     secondary: !isBasic && !(isPositive || isPrimary || isNegative),
-    size: size || (isIcon ? 'tiny' : undefined),
+    size: size || (isIcon ? 'tiny' : undefined) || 'small',
     style,
     tabIndex
   };
diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx
index 7faf72a75b..ad7a3a2ef1 100644
--- a/packages/react-components/src/Button/Group.tsx
+++ b/packages/react-components/src/Button/Group.tsx
@@ -8,19 +8,23 @@ import React from 'react';
 import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import styled from 'styled-components';
 
-import { classes } from '../util';
 import Divider from './Divider';
 
-function ButtonGroup ({ children, className, isBasic = false, isCentered = false, style }: GroupProps): React.ReactElement<GroupProps> {
+const DIVIDER_STYLE = { padding: '0em' };
+
+function ButtonGroup ({ children, className, isBasic, isCentered, style }: GroupProps): React.ReactElement<GroupProps> {
   return (
     <div
-      className={classes('ui--Button-Group', isCentered ? 'centered' : '', className)}
+      className={`ui--Button-Group ${isCentered && 'centered'} ${className}`}
       style={style}
     >
-      <SUIButton.Group basic={isBasic}>
+      <SUIButton.Group
+        basic={isBasic}
+        size='small'
+      >
         {isBasic
           ? null
-          : <Divider style={{ padding: '0em' }} />
+          : <Divider style={DIVIDER_STYLE} />
         }
         {children}
       </SUIButton.Group>
diff --git a/packages/react-components/src/Table/Body.tsx b/packages/react-components/src/Table/Body.tsx
index a444c2a726..679d47e163 100644
--- a/packages/react-components/src/Table/Body.tsx
+++ b/packages/react-components/src/Table/Body.tsx
@@ -172,8 +172,16 @@ export default React.memo(styled(Body)`
 
     &:not(:hover) {
       .ui.button:not(.isIcon):not(.disabled) {
-        background: #eee !important;
         color: #555 !important;
+
+        &:not(.basic) {
+          background: #eee !important;
+        }
+
+        &.basic {
+          background: transparent !important;
+          box-shadow: none !important;
+        }
       }
 
       .ui.toggle.checkbox input:checked~.box:before,