diff --git a/packages/app-123code/src/AccountSelector.tsx b/packages/app-123code/src/AccountSelector.tsx index 88c8919a02..81ab06583d 100644 --- a/packages/app-123code/src/AccountSelector.tsx +++ b/packages/app-123code/src/AccountSelector.tsx @@ -8,6 +8,7 @@ import { Bubble, InputAddress } from '@polkadot/ui-app'; import { AccountIndex, Balance, Nonce } from '@polkadot/ui-reactive'; type Props = { + className?: string, onChange: (accountId?: string) => void }; @@ -15,22 +16,15 @@ type State = { accountId?: string }; -const Wrapper = styled.section` - align-items: flex-end; - - .summary { - text-align: center; - } -`; - -export default class AccountSelector extends React.PureComponent { +class AccountSelector extends React.PureComponent { state: State = {}; render () { + const { className } = this.props; const { accountId } = this.state; return ( - +
{ - +
); } @@ -60,3 +54,11 @@ export default class AccountSelector extends React.PureComponent { ); } } + +export default styled(AccountSelector)` + align-items: flex-end; + + .summary { + text-align: center; + } +`; diff --git a/packages/app-123code/src/Summary.tsx b/packages/app-123code/src/Summary.tsx index 2f56399fd7..bdb10625b0 100644 --- a/packages/app-123code/src/Summary.tsx +++ b/packages/app-123code/src/Summary.tsx @@ -11,22 +11,22 @@ type Props = BareProps & { children: React.ReactNode }; -const Wrapper = styled.div` - opacity: 0.5; - padding: 1rem 1.5rem; -`; - -export default class Summary extends React.PureComponent { +class Summary extends React.PureComponent { render () { const { children, className, style } = this.props; return ( - {children} - + ); } } + +export default styled(Summary)` + opacity: 0.5; + padding: 1rem 1.5rem; +`; diff --git a/packages/app-accounts/src/Vanity/Match.tsx b/packages/app-accounts/src/Vanity/Match.tsx index aa6b9f5160..20fcf8e64f 100644 --- a/packages/app-accounts/src/Vanity/Match.tsx +++ b/packages/app-accounts/src/Vanity/Match.tsx @@ -22,7 +22,69 @@ type State = { hexSeed: string }; -const Wrapper = styled.div` +class Match extends React.PureComponent { + state: State = {} as State; + + static getDerivedStateFromProps ({ seed }: Props): State { + return { + hexSeed: u8aToHex(seed) + }; + } + + render () { + const { address, className, count, offset } = this.props; + const { hexSeed } = this.state; + + return ( +
+
+ +
+
+ {address.slice(0, offset)}{address.slice(offset, count + offset)}{address.slice(count + offset)} +
+
+ {hexSeed} +
+
+
+
+
+
+ ); + } + + private onCreate = (): void => { + const { onCreateToggle } = this.props; + const { hexSeed } = this.state; + + onCreateToggle(hexSeed); + } + + private onRemove = (): void => { + const { address, onRemove } = this.props; + + onRemove(address); + } +} + +export default styled(Match as React.ComponentClass)` text-align: center; &:hover { @@ -62,65 +124,3 @@ const Wrapper = styled.div` padding: 0 1rem; } `; - -export default class Match extends React.PureComponent { - state: State = {} as State; - - static getDerivedStateFromProps ({ seed }: Props): State { - return { - hexSeed: u8aToHex(seed) - }; - } - - render () { - const { address, count, offset } = this.props; - const { hexSeed } = this.state; - - return ( - -
- -
-
- {address.slice(0, offset)}{address.slice(offset, count + offset)}{address.slice(count + offset)} -
-
- {hexSeed} -
-
-
-
-
- - ); - } - - private onCreate = (): void => { - const { onCreateToggle } = this.props; - const { hexSeed } = this.state; - - onCreateToggle(hexSeed); - } - - private onRemove = (): void => { - const { address, onRemove } = this.props; - - onRemove(address); - } -} diff --git a/packages/app-accounts/src/Vanity/index.tsx b/packages/app-accounts/src/Vanity/index.tsx index c47e7d6823..dd392371a0 100644 --- a/packages/app-accounts/src/Vanity/index.tsx +++ b/packages/app-accounts/src/Vanity/index.tsx @@ -41,18 +41,6 @@ const BOOL_OPTIONS = [ { text: 'Yes', value: true } ]; -const Wrapper = styled.div` - .vanity--App-matches { - padding: 1em 0; - } - - .vanity--App-stats { - padding: 1em 0 0 0; - opacity: 0.45; - text-align: center; - } -`; - class VanityApp extends TxComponent { results: Array = []; state: State = { @@ -76,11 +64,11 @@ class VanityApp extends TxComponent { } render () { - const { onStatusChange } = this.props; + const { className, onStatusChange } = this.props; const { createSeed, type } = this.state; return ( - +
{this.renderOptions()} {this.renderButtons()} {this.renderStats()} @@ -93,7 +81,7 @@ class VanityApp extends TxComponent { type={type} /> )} - +
); } @@ -316,4 +304,14 @@ class VanityApp extends TxComponent { } } -export default translate(VanityApp); +export default translate(styled(VanityApp)` + .vanity--App-matches { + padding: 1em 0; + } + + .vanity--App-stats { + padding: 1em 0 0 0; + opacity: 0.45; + text-align: center; + } +`); diff --git a/packages/app-council/src/index.tsx b/packages/app-council/src/index.tsx index 8e0f94cd8f..2202e4942d 100644 --- a/packages/app-council/src/index.tsx +++ b/packages/app-council/src/index.tsx @@ -27,6 +27,7 @@ class App extends React.PureComponent { this.state = { tabs: [ { + isRoot: true, name: 'overview', text: t('Council overview') } diff --git a/packages/app-dashboard/src/Entry.tsx b/packages/app-dashboard/src/Entry.tsx index f0c01044a9..2362897b9c 100644 --- a/packages/app-dashboard/src/Entry.tsx +++ b/packages/app-dashboard/src/Entry.tsx @@ -16,18 +16,12 @@ type Props = I18nProps & { route: Route }; -const Wrapper = styled.div` - .name { - margin-top: 0.75rem; - } -`; - class Entry extends React.PureComponent { render () { - const { route: { i18n, icon, name }, t } = this.props; + const { className, route: { i18n, icon, name }, t } = this.props; return ( - +
{ {t(`entry.${name}`, i18n)}
- + ); } } -export default translate(Entry); +export default translate(styled(Entry)` + .name { + margin-top: 0.75rem; + } +`); diff --git a/packages/app-dashboard/src/index.tsx b/packages/app-dashboard/src/index.tsx index 97df502010..2d4595adbe 100644 --- a/packages/app-dashboard/src/index.tsx +++ b/packages/app-dashboard/src/index.tsx @@ -12,27 +12,15 @@ import routing from '@polkadot/apps-routing'; import Entry from './Entry'; import Spacer from './Spacer'; -type Props = AppProps; +type Props = AppProps & { + className?: string; +}; + type State = { routes: Array }; -const Wrapper = styled.main` - .routes { - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - - > div { - flex: 1; - padding: 1.5rem; - text-align: center; - } - } -`; - -export default class App extends React.PureComponent { +class App extends React.PureComponent { // FIXME Atm we are not applying all the logic around should this be hidden or not, i.e. // is the api available, are there accounts, etc. (That logic should also be extracted so // it can be used in a proper way here) @@ -43,15 +31,16 @@ export default class App extends React.PureComponent { }; render () { + const { className } = this.props; const { routes } = this.state; return ( - +
{routes.map(this.renderEntry)} {routes.map(this.renderSpacer)}
- +
); } @@ -74,3 +63,18 @@ export default class App extends React.PureComponent { ); } } + +export default styled(App)` + .routes { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + + > div { + flex: 1; + padding: 1.5rem; + text-align: center; + } + } +`; diff --git a/packages/app-explorer/src/index.tsx b/packages/app-explorer/src/index.tsx index 0f56c29f62..ec956f258d 100644 --- a/packages/app-explorer/src/index.tsx +++ b/packages/app-explorer/src/index.tsx @@ -33,12 +33,6 @@ type State = { recentEvents: Array; }; -const Wrapper = styled.main` - .rx--updated { - background: transparent !important; - } -`; - class ExplorerApp extends React.Component { constructor (props: Props) { super(props); @@ -90,14 +84,14 @@ class ExplorerApp extends React.Component { } render () { - const { basePath } = this.props; + const { basePath, className } = this.props; const { items } = this.state; const hidden = uiSettings.uiMode === 'full' ? [] : ['node']; return ( - +
{ - +
); } @@ -125,7 +119,11 @@ class ExplorerApp extends React.Component { } export default withMulti( - ExplorerApp, + styled(ExplorerApp as React.ComponentClass)` + .rx--updated { + background: transparent !important; + } + `, translate, withCalls('query.system.events') ); diff --git a/packages/app-settings/src/Developer.tsx b/packages/app-settings/src/Developer.tsx index c79f71e09b..1c47e81572 100644 --- a/packages/app-settings/src/Developer.tsx +++ b/packages/app-settings/src/Developer.tsx @@ -26,13 +26,6 @@ type State = { typesPlaceholder?: string }; -const Wrapper = styled.div` - .editor { - height: 300px; - position: relative; - } -`; - class Developer extends React.PureComponent { private defaultCode: string = `{\n\n}`; @@ -54,12 +47,12 @@ class Developer extends React.PureComponent { } render () { - const { t } = this.props; + const { className, t } = this.props; const { code, isJsonValid, isTypesValid, types, typesPlaceholder } = this.state; const typesHasNoEntries = Object.keys(types).length === 0; return ( - +
{ label={t('Save')} /> - +
); } @@ -196,4 +189,9 @@ class Developer extends React.PureComponent { } } -export default translate(Developer); +export default translate(styled(Developer)` + .editor { + height: 300px; + position: relative; + } +`); diff --git a/packages/app-staking/src/Actions/Accounts.tsx b/packages/app-staking/src/Actions/Accounts.tsx index 66d226a0aa..c490e30099 100644 --- a/packages/app-staking/src/Actions/Accounts.tsx +++ b/packages/app-staking/src/Actions/Accounts.tsx @@ -23,24 +23,18 @@ type State = { isNewStakeOpen: boolean }; -const Wrapper = styled(CardGrid) ` -.ui--CardGrid-buttons { - text-align: right; -} -`; - class Accounts extends React.PureComponent { state: State = { isNewStakeOpen: false }; render () { - const { recentlyOffline, t } = this.props; + const { className, recentlyOffline, t } = this.props; const accounts = keyring.getAccounts(); const stashOptions = this.getStashOptions(); return ( - { onClick={this.toggleNewStake} /> } + className={className} > {this.renderNewStake()} {accounts.map(({ address }, index) => ( @@ -64,7 +59,7 @@ class Accounts extends React.PureComponent { stashOptions={stashOptions} /> ))} - + ); } @@ -97,4 +92,8 @@ class Accounts extends React.PureComponent { } } -export default translate(Accounts); +export default translate(styled(Accounts)` + .ui--CardGrid-buttons { + text-align: right; + } +`); diff --git a/packages/app-sudo/src/SetKey.tsx b/packages/app-sudo/src/SetKey.tsx index 00b4f035aa..e1c778a669 100644 --- a/packages/app-sudo/src/SetKey.tsx +++ b/packages/app-sudo/src/SetKey.tsx @@ -114,4 +114,5 @@ class SetKey extends React.PureComponent { ); } } + export default translate(SetKey); diff --git a/packages/app-toolbox/src/Rpc/Account.tsx b/packages/app-toolbox/src/Rpc/Account.tsx index 89d1d25dde..40d1063de5 100644 --- a/packages/app-toolbox/src/Rpc/Account.tsx +++ b/packages/app-toolbox/src/Rpc/Account.tsx @@ -23,11 +23,6 @@ type State = { accountId?: string | null }; -const Wrapper = styled.div` - box-sizing: border-box; - padding-left: 2em; -`; - class Account extends React.PureComponent { state: State; @@ -41,10 +36,10 @@ class Account extends React.PureComponent { } render () { - const { defaultValue, isError, t } = this.props; + const { className, defaultValue, isError, t } = this.props; return ( - +
{ />
{this.renderNonce()} - +
); } @@ -100,4 +95,7 @@ class Account extends React.PureComponent { } } -export default translate(Account); +export default translate(styled(Account)` + box-sizing: border-box; + padding-left: 2em; +`);