Adjust button sizes consistently (#2711)

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'
             />
           }
         >

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'
             />
           }
         >

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')}
         />
       </>

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>

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')}
             />
           )}

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

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>

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,