Adjust button rounding (#3051)

* Adjust button rounding

* ReferendumInfo icon

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;

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 */
+    }
+  }
 `);

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}

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

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;

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

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}

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

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

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

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 */

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,

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;
+  }
 `);