diff --git a/packages/apps-electron/src/index.tsx b/packages/apps-electron/src/index.tsx index 827a37f1cc..f11e11307a 100644 --- a/packages/apps-electron/src/index.tsx +++ b/packages/apps-electron/src/index.tsx @@ -15,7 +15,6 @@ import { ThemeProvider } from 'styled-components'; import settings from '@polkadot/ui-settings'; import Queue from '@polkadot/react-components/Status/Queue'; import { BlockAuthors, Events } from '@polkadot/react-query'; -import AccountSidebar from '@polkadot/app-accounts/Sidebar'; import { Api } from '@polkadot/react-api'; import Apps from '@polkadot/apps/Apps'; import { electronMainApi } from './api/global-exported-api'; @@ -41,11 +40,9 @@ ReactDOM.render( > - - - - - + + + diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx index c0d42fd562..eba7afdacb 100644 --- a/packages/apps/src/Apps.tsx +++ b/packages/apps/src/Apps.tsx @@ -7,6 +7,7 @@ import { BareProps as Props } from '@polkadot/react-components/types'; import React, { useCallback, useMemo, useState } from 'react'; import store from 'store'; import styled from 'styled-components'; +import AccountSidebar from '@polkadot/app-accounts/Sidebar'; import { getSystemChainColor } from '@polkadot/apps-config/ui'; import { defaultColor } from '@polkadot/apps-config/ui/general'; import GlobalStyle from '@polkadot/react-components/styles'; @@ -75,23 +76,25 @@ function Apps ({ className = '' }: Props): React.ReactElement { return ( <> -
-
- - - - - -
+
+ +
+ + + + + +
+
diff --git a/packages/apps/src/SideBar/index.tsx b/packages/apps/src/SideBar/index.tsx index 943fde6cc3..4ca479bcba 100644 --- a/packages/apps/src/SideBar/index.tsx +++ b/packages/apps/src/SideBar/index.tsx @@ -239,10 +239,9 @@ export default React.memo(styled(SideBar)` text-align: left; width: 100%; - .ui.circular.button { - background: white !important; - color: #3f3f3f !important; - box-shadow: 0 0 0 1px #eee inset !important; + .ui--Button { + background: white; + color: #3f3f3f; margin: 0; transition: transform 0.15s; } diff --git a/packages/apps/src/index.tsx b/packages/apps/src/index.tsx index e5f4881562..2a053c1557 100644 --- a/packages/apps/src/index.tsx +++ b/packages/apps/src/index.tsx @@ -12,7 +12,6 @@ import ReactDOM from 'react-dom'; import { HashRouter } from 'react-router-dom'; import store from 'store'; import { ThemeProvider } from 'styled-components'; -import AccountSidebar from '@polkadot/app-accounts/Sidebar'; import { Api } from '@polkadot/react-api'; import Queue from '@polkadot/react-components/Status/Queue'; import { BlockAuthors, Events } from '@polkadot/react-query'; @@ -42,11 +41,9 @@ ReactDOM.render( - - - - - + + + diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index 517ed129cb..276cc88356 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -115,13 +115,11 @@ function Sidebar ({ address, className = '', onClose, onUpdateName }: Props): Re /> {flags.isOwned && ( + /> )} {isTransferOpen && ( @@ -207,8 +194,6 @@ export default React.memo(styled(Sidebar)` position: absolute; right: 0.5rem; top: 0.5rem; - font-size: 1.2rem; - padding: 0.6rem !important; } .ui--AddressMenu-header { @@ -221,16 +206,8 @@ export default React.memo(styled(Sidebar)` margin: -1rem -1rem 1rem -1rem; padding: 1rem; - .ui.button { + .ui--Button { transition: 0.5s all; - - &.secondary { - background-color: #666; - } - } - - .ui.button+.ui.button { - margin-left: 0.5rem !important; } } diff --git a/packages/page-accounts/src/Vanity/Match.tsx b/packages/page-accounts/src/Vanity/Match.tsx index 8ca43d24f7..edc4892128 100644 --- a/packages/page-accounts/src/Vanity/Match.tsx +++ b/packages/page-accounts/src/Vanity/Match.tsx @@ -55,13 +55,11 @@ function Match ({ address, className = '', count, offset, onCreateToggle, onRemo icon='plus' isPrimary onClick={_onCreate} - size='tiny' />
- { - // FIXME: The event trigger on='hover' does not work together with the ui-app' - //
-
- {isSpreadable && ( -
+ )} +
); @@ -250,8 +248,6 @@ export default React.memo(styled(Query)` } .storage--actionrow-buttons { - .container { - margin-top: -0.25rem; /* offset parent spacing for buttons */ - } + margin-top: -0.25rem; /* offset parent spacing for buttons */ } `); diff --git a/packages/page-storage/src/index.tsx b/packages/page-storage/src/index.tsx index b631198be4..bc14afab07 100644 --- a/packages/page-storage/src/index.tsx +++ b/packages/page-storage/src/index.tsx @@ -42,7 +42,7 @@ export default React.memo(styled(StorageApp)` align-items: flex-start; display: flex; - .button { + .ui--Button { margin: 0.25rem; } @@ -64,6 +64,6 @@ export default React.memo(styled(StorageApp)` .storage--actionrow-buttons { flex: 0; - padding: 0.625rem 0.25rem; + padding: 0.5rem 0.25rem; } `); diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index eeb8533b20..504b467984 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -81,7 +81,7 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName? isSmall /> )} - {displayName} + {displayName}
); } @@ -112,7 +112,7 @@ function extractIdentity (address: string, identity: DeriveAccountRegistration): : identity.displayParent.replace(/[^\x20-\x7E]/g, '') ); const elem = createIdElem( - + {displayParent || displayName} {displayParent && {`/${displayName || ''}`}} , @@ -161,7 +161,7 @@ function AccountName ({ children, className = '', defaultName, label, noLookup, return (
{ const { children, className = '', extraInfo, withBalanceToggle, withHexSessionId } = props; return ( -
-
+
+
{renderBalances(props, allAccounts, t)} {withHexSessionId && withHexSessionId[0] && ( <> diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx index facd021862..68a00ab109 100644 --- a/packages/react-components/src/AddressSmall.tsx +++ b/packages/react-components/src/AddressSmall.tsx @@ -26,7 +26,7 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove
{info || (icon && )} diff --git a/packages/react-components/src/Button/Button.tsx b/packages/react-components/src/Button/Button.tsx index 80a3f02b38..fd75a07a98 100644 --- a/packages/react-components/src/Button/Button.tsx +++ b/packages/react-components/src/Button/Button.tsx @@ -4,68 +4,90 @@ import { ButtonProps } from './types'; -import React from 'react'; -import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button'; +import React, { useCallback } from 'react'; import styled from 'styled-components'; import Icon from '../Icon'; -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 { - const props = { - animate: 'fade', - animated: isAnimated, - basic: isBasic, - circular: true, - className: `${className} ${isCircular ? 'isCircular' : ''} ${isIcon ? 'isIcon' : ''} ${(isCircular || isIcon || !(children || label)) ? 'icon' : ''}`, - disabled: isDisabled, - floated, - fluid: isFluid, - labelPosition, - loading: isLoading, - negative: isNegative, - onClick, - onMouseEnter, - onMouseLeave, - positive: isPositive, - primary: isPrimary, - secondary: !isBasic && !(isPositive || isPrimary || isNegative), - size: size || (isCircular ? undefined : (isIcon ? 'tiny' : 'small')), - tabIndex - }; +function Button ({ children, className = '', icon, isBasic = false, isCircular = false, isDisabled = false, isFull = false, isIcon, isNegative = false, isPositive = false, isPrimary = false, label, onClick, onMouseEnter, onMouseLeave, tabIndex }: ButtonProps): React.ReactElement { + const _onClick = useCallback( + (): void => { + !isDisabled && onClick && onClick(); + }, + [isDisabled, onClick] + ); return ( - <> - - {icon && ( - <>{(isIcon || isCircular) ? '' : ' '} - )} - {label} - {children} - - + ); } export default React.memo(styled(Button)` - border-radius: 10rem !important; + border: none; + font-size: 0.92857142857rem; // 13/14px + text-align: center; + + &:not(:disabled) { + cursor: pointer; + } + + &:not(.hasLabel) { + padding: 0.75em; - &:not(.icon) { > .ui--Icon { - margin-right: 0.25rem; + height: 1rem; + width: 1rem; } } - &.icon > .ui--Icon { - width: 1rem; + &:not(.isCircular) { + border-radius: 0.25rem; + } + + &:disabled { + cursor: not-allowed; + opacity: 0.15; + } + + &:focus { + outline:0; + } + + &.hasLabel { + padding: 0.75em 1.5em; + + > .ui--Icon { + margin-right: 0.75rem; + } + } + + &.isBasic { + background: white !important; + box-shadow: 0 0 0 1px #ddd; + color: inherit !important; + } + + &.isCircular { + border-radius: 10rem; + } + + &.isFull { + display: block; + width: 100%; } &.isIcon { - background: white !important; - margin: 0 !important; - padding: 0 !important; - - .ui--Icon { - margin: 0 0 0 0.25rem !important; - } + background: transparent; } `); diff --git a/packages/react-components/src/Button/Content.tsx b/packages/react-components/src/Button/Content.tsx deleted file mode 100644 index c8dbdcccdc..0000000000 --- a/packages/react-components/src/Button/Content.tsx +++ /dev/null @@ -1,19 +0,0 @@ -// Copyright 2017-2020 @polkadot/react-components authors & contributors -// This software may be modified and distributed under the terms -// of the Apache-2.0 license. See the LICENSE file for details. - -import React from 'react'; -import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button'; - -import { ContentProps as Props } from './types'; - -export default function ButtonContent ({ children, hidden, visible }: Props): React.ReactElement { - return ( - - ); -} diff --git a/packages/react-components/src/Button/Group.tsx b/packages/react-components/src/Button/Group.tsx index 530ae9af63..e7f0fbc397 100644 --- a/packages/react-components/src/Button/Group.tsx +++ b/packages/react-components/src/Button/Group.tsx @@ -5,18 +5,12 @@ import { GroupProps } from './types'; import React from 'react'; -import SUIButton from 'semantic-ui-react/dist/commonjs/elements/Button/Button'; import styled from 'styled-components'; -function ButtonGroup ({ children, className = '', isBasic, isCentered }: GroupProps): React.ReactElement { +function ButtonGroup ({ children, className = '', isCentered }: GroupProps): React.ReactElement { return ( -
- - {children} - +
+ {children}
); } @@ -28,11 +22,7 @@ export default React.memo(styled(ButtonGroup)` margin-top: 0.75rem; } - > .ui.buttons { - vertical-align: middle; - } - - &.centered { + &.isCentered { margin-bottom: 0.5rem; text-align: center; } @@ -40,4 +30,18 @@ export default React.memo(styled(ButtonGroup)` &+.ui--Table { margin-top: 1.5rem; } + + .ui--Button { + margin-left: 1px !important; + + &:not(:first-of-type) { + border-bottom-left-radius: 0rem !important; + border-top-left-radius: 0rem !important; + } + + &:not(:last-of-type) { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; + } + } `); diff --git a/packages/react-components/src/Button/index.tsx b/packages/react-components/src/Button/index.tsx index f71288a691..2eac47cd0a 100644 --- a/packages/react-components/src/Button/index.tsx +++ b/packages/react-components/src/Button/index.tsx @@ -5,12 +5,10 @@ import { ButtonType } from './types'; import IButton from './Button'; -import Content from './Content'; import Group from './Group'; const Button = IButton as unknown as ButtonType; -Button.Content = Content; Button.Group = Group; export default Button; diff --git a/packages/react-components/src/Button/types.ts b/packages/react-components/src/Button/types.ts index 6dc0d57aea..d7100501eb 100644 --- a/packages/react-components/src/Button/types.ts +++ b/packages/react-components/src/Button/types.ts @@ -11,46 +11,32 @@ export type Button$Callback = () => void | Promise; export interface ButtonProps { children?: React.ReactNode; className?: string; - floated?: 'left' | 'right'; icon?: IconName; isAnimated?: SUIButtonProps['animated']; isBasic?: boolean; isCircular?: boolean; isDisabled?: boolean; - isFluid?: boolean; + isFull?: boolean; isIcon?: boolean; - isLoading?: boolean; isNegative?: boolean; isPositive?: boolean; isPrimary?: boolean; label?: React.ReactNode; - labelPosition?: 'left' | 'right'; onClick?: Button$Callback; onMouseEnter?: Button$Callback; onMouseLeave?: Button$Callback; - ref?: any; - size?: SUIButtonProps['size']; tabIndex?: number; tooltip?: React.ReactNode; } export type DividerProps = BareProps; -export interface ContentProps { - children?: React.ReactNode; - hidden?: boolean; - visible?: boolean; -} - export interface GroupProps { children?: React.ReactNode; className?: string; - isBasic?: boolean; isCentered?: boolean; } export type ButtonType = React.ComponentType & { - Content: React.ComponentType; Group: React.ComponentType; - Or: React.ComponentType; }; diff --git a/packages/react-components/src/Card.tsx b/packages/react-components/src/Card.tsx index eb0fd79541..b29102d562 100644 --- a/packages/react-components/src/Card.tsx +++ b/packages/react-components/src/Card.tsx @@ -15,7 +15,7 @@ interface Props { function Card ({ children, className = '', isError, isSuccess, withBottomMargin }: Props): React.ReactElement { return ( -
+
{children}
); diff --git a/packages/react-components/src/CopyButton.tsx b/packages/react-components/src/CopyButton.tsx index eef482cebb..1f2045c5cf 100644 --- a/packages/react-components/src/CopyButton.tsx +++ b/packages/react-components/src/CopyButton.tsx @@ -17,11 +17,10 @@ interface Props { className?: string; icon?: IconName; isAddress?: boolean; - size?: 'large' | 'small'; value: string; } -function CopyButton ({ children, className, icon = 'copy', isAddress = false, size = 'small', value }: Props): React.ReactElement { +function CopyButton ({ children, className, icon = 'copy', isAddress = false, value }: Props): React.ReactElement { const { t } = useTranslation(); const { queueAction } = useContext(StatusContext); @@ -50,7 +49,6 @@ function CopyButton ({ children, className, icon = 'copy', isAddress = false, si className='icon-button show-on-hover' icon={icon} isPrimary - size={size} />
diff --git a/packages/react-components/src/Dropdown.tsx b/packages/react-components/src/Dropdown.tsx index 2a450c6b89..f8e585a876 100644 --- a/packages/react-components/src/Dropdown.tsx +++ b/packages/react-components/src/Dropdown.tsx @@ -107,11 +107,7 @@ function BaseDropdown