Use ButtonCancel for all Cancel-only buttons

packages/app-accounts/src/modals/Backup.tsx

@@ -6,7 +6,7 @@ import { BareProps } from '@polkadot/react-components/types';
 
 import FileSaver from 'file-saver';
 import React, { useState, useMemo } from 'react';
-import { AddressRow, Button, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal, Password } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
@@ -16,12 +16,6 @@ interface Props extends BareProps {
   address: string;
 }
 
-interface ButtonsProps {
-  doBackup: () => void;
-  isPassValid: boolean;
-  onClose: () => void;
-}
-
 interface ContentProps {
   address: string;
   doBackup: () => void;
@@ -77,11 +71,18 @@ export default function ({ address, onClose }: Props): React.ReactElement<Props>
         password={password}
         onChangePass={_onChangePass}
       />
-      <Buttons
-        doBackup={_doBackup}
-        isPassValid={isPassValid}
-        onClose={onClose}
-      />
+      <Modal.Actions>
+        <Button.Group>
+          <ButtonCancel onClick={onClose} />
+          <Button.Or />
+          <Button
+            icon='download'
+            isDisabled={!isPassValid}
+            label={t('Download')}
+            onClick={_doBackup}
+          />
+        </Button.Group>
+      </Modal.Actions>
     </Modal>
   );
 }
@@ -113,27 +114,3 @@ function Content ({ address, doBackup, isPassTouched, isPassValid, onChangePass,
     </Modal.Content>
   );
 }
-
-function Buttons ({ doBackup, isPassValid, onClose }: ButtonsProps): React.ReactElement<ButtonsProps> {
-  const { t } = useTranslation();
-
-  return (
-    <Modal.Actions>
-      <Button.Group>
-        <Button
-          icon='cancel'
-          isNegative
-          label={t('Cancel')}
-          onClick={onClose}
-        />
-        <Button.Or />
-        <Button
-          icon='download'
-          isDisabled={!isPassValid}
-          label={t('Download')}
-          onClick={doBackup}
-        />
-      </Button.Group>
-    </Modal.Actions>
-  );
-}

packages/app-accounts/src/modals/ChangePass.tsx

@@ -5,7 +5,7 @@
 import { I18nProps } from '@polkadot/react-components/types';
 
 import React from 'react';
-import { AddressRow, Button, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import keyring from '@polkadot/ui-keyring';
 
@@ -52,12 +52,7 @@ class ChangePass extends TxComponent<Props, State> {
     return (
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='sign-in'

packages/app-accounts/src/modals/Create.tsx

@@ -11,7 +11,7 @@ import FileSaver from 'file-saver';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { DEV_PHRASE } from '@polkadot/keyring/defaults';
-import { AddressRow, Button, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Dropdown, Input, InputAddress, Modal, Password } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import uiSettings from '@polkadot/ui-settings';
@@ -296,12 +296,7 @@ function Create ({ className, onClose, onStatusChange, seed: propsSeed, type: pr
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='plus'

packages/app-accounts/src/modals/CreateConfirmation.tsx

@@ -3,7 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import React from 'react';
-import { AddressRow, Button, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from '../translate';
 
@@ -32,12 +32,7 @@ export default function CreateConfirmation ({ address, name, onClose, onCommit }
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='plus'

packages/app-accounts/src/modals/Derive.tsx

@@ -7,7 +7,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { KeypairType } from '@polkadot/util-crypto/types';
 
 import React, { useContext, useEffect, useState } from 'react';
-import { AddressRow, Button, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal, Password, StatusContext } from '@polkadot/react-components';
 import { useDebounce } from '@polkadot/react-hooks';
 import keyring from '@polkadot/ui-keyring';
 import { keyExtractPath } from '@polkadot/util-crypto';
@@ -198,12 +198,7 @@ export default function Derive ({ className, from, onClose }: Props): React.Reac
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           {isLocked
             ? (

packages/app-accounts/src/modals/Identity.tsx

@@ -6,7 +6,7 @@ import { Registration } from '@polkadot/types/interfaces';
 
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Input, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { getAddressMeta } from '@polkadot/react-components/util';
 import { useApi, useCall } from '@polkadot/react-hooks';
 import { Data, Option } from '@polkadot/types';
@@ -210,12 +210,7 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={address}

packages/app-accounts/src/modals/Import.tsx

@@ -8,7 +8,7 @@ import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { ModalProps } from '../types';
 
 import React from 'react';
-import { AddressRow, Button, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, InputAddress, InputFile, Modal, Password, TxComponent } from '@polkadot/react-components';
 import { isHex, isObject, u8aToString } from '@polkadot/util';
 import keyring from '@polkadot/ui-keyring';
 
@@ -42,12 +42,7 @@ class Import extends TxComponent<Props, State> {
         {this.renderInput()}
         <Modal.Actions>
           <Button.Group>
-            <Button
-              icon='cancel'
-              isNegative
-              label={t('Cancel')}
-              onClick={onClose}
-            />
+            <ButtonCancel onClick={onClose} />
             <Button.Or />
             <Button
               icon='sync'

packages/app-accounts/src/modals/Transfer.tsx

@@ -7,7 +7,7 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import BN from 'bn.js';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
 // import Checks from '@polkadot/react-signer/Checks';
@@ -126,12 +126,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            label={t('Cancel')}
-            onClick={onClose}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <TxButton
             accountId={senderId}

packages/app-address-book/src/modals/Create.tsx

@@ -7,7 +7,7 @@ import { ModalProps as Props } from '../types';
 
 import React, { useState } from 'react';
 
-import { AddressRow, Button, Input, InputAddress, Modal } from '@polkadot/react-components';
+import { AddressRow, Button, ButtonCancel, Input, InputAddress, Modal } from '@polkadot/react-components';
 import keyring from '@polkadot/ui-keyring';
 
 import { useTranslation } from '../translate';
@@ -106,12 +106,7 @@ export default function Create ({ onClose, onStatusChange }: Props): React.React
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             icon='save'

packages/app-contracts/src/Contracts/Call.tsx

@@ -8,7 +8,7 @@ import { BareProps, StringOrNull } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
-import { Button, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, IconLink, InputAddress, InputBalance, InputNumber, Modal, Toggle, TxButton } from '@polkadot/react-components';
 import { PromiseContract as ApiContract } from '@polkadot/api-contract';
 import { useApi } from '@polkadot/react-hooks';
 import { createValue } from '@polkadot/react-params/values';
@@ -196,12 +196,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
           />
         )}
         <Button.Group>
-          <Button
-            icon='cancel'
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           {useRpc
             ? (

packages/app-contracts/src/Modal.tsx

@@ -7,7 +7,7 @@ import { I18nProps } from '@polkadot/react-components/types';
 import BN from 'bn.js';
 import React from 'react';
 import { Abi } from '@polkadot/api-contract';
-import { Button, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
+import { Button, ButtonCancel, Input, InputAddress, InputNumber, Modal, TxComponent } from '@polkadot/react-components';
 
 import ABI from './ABI';
 
@@ -158,16 +158,9 @@ class ContractModal<P extends ContractModalProps, S extends ContractModalState>
   }
 
   protected renderCancelButton (): React.ReactNode {
-    const { t } = this.props;
-
     return (
       <>
-        <Button
-          icon='cancel'
-          isNegative
-          onClick={this.onClose}
-          label={t('Cancel')}
-        />
+        <ButtonCancel onClick={this.onClose} />
         <Button.Or />
       </>
     );

packages/app-contracts/src/RemoveABI.tsx

@@ -5,7 +5,7 @@
 import { CodeStored } from '@polkadot/app-contracts/types';
 
 import React from 'react';
-import { Button, CodeRow, Modal } from '@polkadot/react-components';
+import { Button, ButtonCancel, CodeRow, Modal } from '@polkadot/react-components';
 
 import { useTranslation } from './translate';
 
@@ -40,12 +40,7 @@ export default function RemoveABI ({ code, onClose, onRemove }: Props): React.Re
       </Modal.Content>
       <Modal.Actions>
         <Button.Group>
-          <Button
-            isNegative
-            onClick={onClose}
-            label={t('Cancel')}
-            icon='cancel'
-          />
+          <ButtonCancel onClick={onClose} />
           <Button.Or />
           <Button
             isPrimary

packages/app-council/src/Motions/Slashing.tsx

@@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces';
 import { CallFunction } from '@polkadot/types/types';
 
 import React, { useEffect, useState } from 'react';
-import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useApi, useCall, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -116,12 +116,7 @@ export default function Slashing ({ className, isMember }: Props): React.ReactEl
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                isNegative
-                icon='cancel'
-                label={t('Cancel')}
-                onClick={toggleVisible}
-              />
+              <ButtonCancel onClick={toggleVisible} />
               <Button.Or />
               <TxButton
                 accountId={accountId}

packages/app-democracy/src/Overview/Seconding.tsx

@@ -6,7 +6,7 @@ import { AccountId } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React, { useState } from 'react';
-import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
+import { Button, ButtonCancel, InputAddress, Modal, TxButton } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
@@ -48,12 +48,7 @@ export default function Seconding ({ depositors, proposalId }: Props): React.Rea
           </Modal.Content>
           <Modal.Actions>
             <Button.Group>
-              <Button
-                isNegative
-                onClick={_toggleSeconding}
-                label={t('Cancel')}
-                icon='cancel'
-              />
+              <ButtonCancel onClick={_toggleSeconding} />
               <Button.Or />
               <TxButton
                 accountId={accountId}