From b78cc3fa2ff40fc44cae29dda57adbd714e0f39c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Thu, 25 Jun 2020 15:34:35 +0200
Subject: [PATCH] Adjust button rounding (#3051)

* Adjust button rounding

* ReferendumInfo icon
---
 .../src/Overview/ReferendumVotes.tsx          | 11 +++++++---
 packages/page-storage/src/Query.tsx           |  6 ++++++
 packages/react-components/src/AddressInfo.tsx |  3 +--
 packages/react-components/src/Badge.tsx       |  2 +-
 .../react-components/src/Button/Button.tsx    | 21 +++++--------------
 .../react-components/src/DemocracyLocks.tsx   |  3 +--
 packages/react-components/src/Icon.tsx        |  5 ++++-
 packages/react-components/src/LabelHelp.tsx   |  3 +--
 .../react-components/src/StakingUnbonding.tsx |  3 +--
 .../react-components/src/styles/components.ts |  4 ----
 .../react-components/src/styles/semantic.ts   |  2 +-
 packages/react-hooks/src/useAccountInfo.ts    |  1 +
 packages/react-query/src/FormatBalance.tsx    |  9 ++++++++
 13 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
index 3669783150..ab8ff777eb 100644
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@@ -59,9 +59,8 @@ function ReferendumVotes ({ change, className = '', count, index, isWinning, tot
               <>
                 <Icon
                   className='double-icon'
-                  data-for={trigger}
-                  data-tip
-                  icon={isWinning ? 'arrow alternate circle down' : 'arrow alternate circle up'}
+                  icon={isWinning ? 'arrow-circle-down' : 'arrow-circle-up'}
+                  tooltip={trigger}
                 />
                 <FormatBalance value={change} />
                 <Tooltip
@@ -89,6 +88,12 @@ function ReferendumVotes ({ change, className = '', count, index, isWinning, tot
 }
 
 export default React.memo(styled(ReferendumVotes)`
+  .ui--Expander .ui--Expander-summary .double-icon {
+    margin-bottom: -0.125rem;
+    margin-right: 0.375rem;
+    margin-top: 0.125rem;
+  }
+
   .ui--Expander-summary {
     .ui--Icon+.ui--Icon {
       margin-left: -0.375rem;
diff --git a/packages/page-storage/src/Query.tsx b/packages/page-storage/src/Query.tsx
index 231434788a..0af09f4b43 100644
--- a/packages/page-storage/src/Query.tsx
+++ b/packages/page-storage/src/Query.tsx
@@ -248,4 +248,10 @@ export default React.memo(styled(Query)`
       text-overflow: ellipsis;
     }
   }
+
+  .storage--actionrow-buttons {
+    .container {
+      margin-top: -0.25rem; /* offset parent spacing for buttons */
+    }
+  }
 `);
diff --git a/packages/react-components/src/AddressInfo.tsx b/packages/react-components/src/AddressInfo.tsx
index b4b947c8d4..7bc63f258b 100644
--- a/packages/react-components/src/AddressInfo.tsx
+++ b/packages/react-components/src/AddressInfo.tsx
@@ -270,9 +270,8 @@ function renderBalances (props: Props, allAccounts: string[], t: <T = string> (k
             className='result'
             label={
               <Icon
-                data-for={`${address}-locks-trigger`}
-                data-tip
                 icon='info-circle'
+                tooltip={`${address}-locks-trigger`}
               />
             }
             value={isAllLocked ? 'all' : balancesAll.lockedBalance}
diff --git a/packages/react-components/src/Badge.tsx b/packages/react-components/src/Badge.tsx
index 1c67741d99..ca5b2fbd37 100644
--- a/packages/react-components/src/Badge.tsx
+++ b/packages/react-components/src/Badge.tsx
@@ -27,7 +27,7 @@ function Badge ({ className = '', color = 'normal', hover, info, isInline, isSma
     <div
       className={`ui--Badge ${isInline ? 'isInline' : ''} ${isTooltip ? 'isTooltip' : ''} ${isSmall ? 'isSmall' : ''} ${onClick ? 'isClickable' : ''} ${color}Color ${className}`}
       data-for={trigger}
-      data-tip={true}
+      data-tip={isTooltip && !!hover}
       data-tip-disable={!isTooltip}
       onClick={onClick}
     >
diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx
index 8e2a0689cb..80a3f02b38 100644
--- a/packages/react-components/src/Button/Button.tsx
+++ b/packages/react-components/src/Button/Button.tsx
@@ -4,25 +4,19 @@
 
 import { ButtonProps } from './types';
 
-import React, { useState } from 'react';
+import React from 'react';
 import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button';
 import styled from 'styled-components';
 
 import Icon from '../Icon';
-import Tooltip from '../Tooltip';
 
-let idCounter = 0;
-
-function Button ({ children, className = '', floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, tabIndex, tooltip }: ButtonProps): React.ReactElement<ButtonProps> {
-  const [triggerId] = useState(`button-${++idCounter}`);
+function Button ({ children, className = '', floated, icon, isAnimated, isBasic = false, isCircular = false, isDisabled = false, isFluid = false, isIcon, isLoading = false, isNegative = false, isPositive = false, isPrimary = false, label, labelPosition, onClick, onMouseEnter, onMouseLeave, size, tabIndex }: ButtonProps): React.ReactElement<ButtonProps> {
   const props = {
     animate: 'fade',
     animated: isAnimated,
     basic: isBasic,
-    circular: isCircular,
+    circular: true,
     className: `${className} ${isCircular ? 'isCircular' : ''} ${isIcon ? 'isIcon' : ''} ${(isCircular || isIcon || !(children || label)) ? 'icon' : ''}`,
-    'data-for': triggerId,
-    'data-tip': !!tooltip,
     disabled: isDisabled,
     floated,
     fluid: isFluid,
@@ -48,18 +42,13 @@ function Button ({ children, className = '', floated, icon, isAnimated, isBasic
         {label}
         {children}
       </SUIButton>
-      {tooltip && (
-        <Tooltip
-          place='top'
-          text={tooltip}
-          trigger={triggerId}
-        />
-      )}
     </>
   );
 }
 
 export default React.memo(styled(Button)`
+  border-radius: 10rem !important;
+
   &:not(.icon) {
     > .ui--Icon {
       margin-right: 0.25rem;
diff --git a/packages/react-components/src/DemocracyLocks.tsx b/packages/react-components/src/DemocracyLocks.tsx
index 011a73cdbd..3d9fb69905 100644
--- a/packages/react-components/src/DemocracyLocks.tsx
+++ b/packages/react-components/src/DemocracyLocks.tsx
@@ -40,9 +40,8 @@ function DemocracyLocks ({ className = '', value }: Props): React.ReactElement<P
   return (
     <div className={className}>
       <Icon
-        data-for={trigger}
-        data-tip
         icon='clock'
+        tooltip={trigger}
       />
       <FormatBalance value={max} />
       <Tooltip
diff --git a/packages/react-components/src/Icon.tsx b/packages/react-components/src/Icon.tsx
index 25e168664b..26e09caa7c 100644
--- a/packages/react-components/src/Icon.tsx
+++ b/packages/react-components/src/Icon.tsx
@@ -17,15 +17,18 @@ interface Props {
   onMouseOut?: () => void;
   onMouseOver?: () => void;
   size?: '1x' | '2x';
+  tooltip?: string;
 }
 
 // one-time init of FA libraries
 library.add(fas);
 
-function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, onMouseOut, onMouseOver, size = '1x' }: Props): React.ReactElement<Props> {
+function Icon ({ className = '', color = 'normal', icon, isSpinning, onClick, onMouseOut, onMouseOver, size = '1x', tooltip }: Props): React.ReactElement<Props> {
   return (
     <FontAwesomeIcon
       className={`ui--Icon ${color}Color ${onClick ? 'isClickable' : ''} ${className}`}
+      data-for={tooltip}
+      data-tip={!!tooltip}
       icon={icon}
       onClick={onClick}
       onMouseOut={onMouseOut}
diff --git a/packages/react-components/src/LabelHelp.tsx b/packages/react-components/src/LabelHelp.tsx
index cfad836446..2f1a26ca8b 100644
--- a/packages/react-components/src/LabelHelp.tsx
+++ b/packages/react-components/src/LabelHelp.tsx
@@ -25,11 +25,10 @@ function LabelHelp ({ className = '', help }: Props): React.ReactElement<Props>
   return (
     <div className={classes('ui--LabelHelp', className)}>
       <Icon
-        data-for={trigger}
-        data-tip
         icon='question-circle'
         onMouseOut={toggleTooltip}
         onMouseOver={toggleTooltip}
+        tooltip={trigger}
       />
       {isTooltipOpen && (
         <Tooltip
diff --git a/packages/react-components/src/StakingUnbonding.tsx b/packages/react-components/src/StakingUnbonding.tsx
index d0ca1d1af8..396df1b14e 100644
--- a/packages/react-components/src/StakingUnbonding.tsx
+++ b/packages/react-components/src/StakingUnbonding.tsx
@@ -49,9 +49,8 @@ function StakingUnbonding ({ className = '', value }: Props): React.ReactElement
   return (
     <div className={className}>
       <Icon
-        data-for={trigger}
-        data-tip
         icon='clock'
+        tooltip={trigger}
       />
       <FormatBalance value={total} />
       <Tooltip
diff --git a/packages/react-components/src/styles/components.ts b/packages/react-components/src/styles/components.ts
index fd0e138d33..e093ad5e1e 100644
--- a/packages/react-components/src/styles/components.ts
+++ b/packages/react-components/src/styles/components.ts
@@ -33,10 +33,6 @@ export default css`
     }
   }
 
-  .ui--Button-Group .button {
-    border-radius: .28571429rem !important;
-  }
-
   header .ui--Button-Group {
     text-align: center;
   }
diff --git a/packages/react-components/src/styles/semantic.ts b/packages/react-components/src/styles/semantic.ts
index 9cc7ea49ee..284c27a44e 100644
--- a/packages/react-components/src/styles/semantic.ts
+++ b/packages/react-components/src/styles/semantic.ts
@@ -168,7 +168,7 @@ export default css`
   }
 
   .ui.button+.ui.button {
-    margin-left: 0.5rem;
+    margin-left: 0.25rem;
   }
 
   /* modals aligned to top, not center */
diff --git a/packages/react-hooks/src/useAccountInfo.ts b/packages/react-hooks/src/useAccountInfo.ts
index 9971780b0e..7231528a59 100644
--- a/packages/react-hooks/src/useAccountInfo.ts
+++ b/packages/react-hooks/src/useAccountInfo.ts
@@ -111,6 +111,7 @@ export default function useAccountInfo (value: string | null, isContract = false
         isDevelopment: accountOrAddress?.meta.isTesting || false,
         isEditable: !!(!identity?.display && (isInContacts || accountOrAddress?.meta.isMultisig || (accountOrAddress && !(accountOrAddress.meta.isInjected || accountOrAddress.meta.isHardware)))) || false,
         isExternal: !!accountOrAddress?.meta.isExternal || false,
+        isHardware: !!accountOrAddress?.meta.isHardware || false,
         isInContacts,
         isMultisig: !!accountOrAddress?.meta.isMultisig || false,
         isOwned,
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index e5dc1fb2a2..492e2e6dc6 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -91,4 +91,13 @@ export default React.memo(styled(FormatBalance)`
       vertical-align: baseline;
     }
   }
+
+  .ui--Icon {
+    margin-top: 0.25rem;
+    margin-bottom: -0.25rem;
+  }
+
+  .ui--Icon+.ui--FormatBalance-value {
+    margin-left: 0.375rem;
+  }
 `);