neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust UI highlights based on chain/node color settings (#2384)

Browse Source 
* Adjust app hightlights

* Default fallback
This commit is contained in:
Jaco Greeff 2020-03-14 08:49:50 +01:00 committed by GitHub
parent 0e0f694899
commit 2209078f5c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
35 changed files with 97 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/apps-config/src/ui/general/index.ts
View File

@ -28,10 +28,10 @@ const chainColors: Record<string, any> = [
// overrides based on the actual software node type (all '-' converted to ' ')
const nodeColors: Record<string, any> = [
['centrifuge chain', nodeCentrifuge],
['edgeware node', nodeEdgeware],
['node template', emptyColor],
['parity polkadot', emptyColor],
['substrate node', emptyColor]
['edgeware node', nodeEdgeware]
// ['node template', emptyColor],
// ['parity polkadot', emptyColor],
// ['substrate node', emptyColor]
].reduce((colors, [node, color]): Record<string, any> => ({
...colors,
[node.toLowerCase().replace(/-/g, ' ')]: color

1
packages/apps/public/locales/zh/app-staking.json
View File

@ -12,6 +12,7 @@
"controller": "控制器",
"Stop Nominating": "停止提名",
"Stop Validating": "停止验证",
"Stop": "停止",
"Set Session Key": "设置会话key",
"Validate": "验证",
"Nominate": "提名",

6
packages/apps/src/Apps.tsx
View File

@ -7,7 +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 { defaultColor, chainColors, emptyColor, nodeColors } from '@polkadot/apps-config/ui/general';
import { defaultColor, chainColors, nodeColors } from '@polkadot/apps-config/ui/general';
import GlobalStyle from '@polkadot/react-components/styles';
import { useApi } from '@polkadot/react-hooks';
import Signer from '@polkadot/react-signer';
@ -41,8 +41,8 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
...store.get('sidebar', {}),
isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
});
const uiHighlight = useMemo((): string => {
return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)] || emptyColor;
const uiHighlight = useMemo((): string | undefined => {
return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
}, [systemChain, systemName]);
const { isCollapsed, isMenu, isMenuOpen } = sidebar;

1
packages/page-accounts/src/Account.tsx
View File

@ -335,7 +335,6 @@ function Account ({ address, className, filter, isFavorite, toggleFavorite }: Pr
<td className='number top'>
<Button
icon='paper plane'
isPrimary
label={t('send')}
onClick={toggleTransfer}
size='small'

4
packages/page-accounts/src/Overview.tsx
View File

@ -90,21 +90,18 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
<Button.Group>
<Button
icon='add'
isPrimary
label={t('Add account')}
onClick={toggleCreate}
/>
<Button.Or />
<Button
icon='sync'
isPrimary
label={t('Restore JSON')}
onClick={toggleImport}
/>
<Button.Or />
<Button
icon='qrcode'
isPrimary
label={t('Add via Qr')}
onClick={toggleQr}
/>
@ -113,7 +110,6 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
<Button.Or />
<Button
icon='question'
isPrimary
label={t('Query Ledger')}
onClick={queryLedger}
/>

1
packages/page-address-book/src/Address.tsx
View File

@ -248,7 +248,6 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
<td className='number top'>
<Button
icon='paper plane'
isPrimary
key='deposit'
label={t('deposit')}
onClick={_toggleTransfer}

1
packages/page-address-book/src/Overview.tsx
View File

@ -46,7 +46,6 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
<Button.Group>
<Button
icon='add'
isPrimary
label={t('Add contact')}
onClick={_toggleCreate}
/>

1
packages/page-contracts/src/Codes/index.tsx
View File

@ -40,7 +40,6 @@ class Codes extends React.PureComponent<Props, State> {
<Button.Group>
<Button
icon='upload'
isPrimary
label={t('Upload WASM')}
onClick={this.showUpload}
/>

2
packages/page-contracts/src/Contracts/index.tsx
View File

@ -79,7 +79,6 @@ export default function Contracts (props: Props): React.ReactElement<Props> {
<>
<Button
icon='cloud upload'
isPrimary
label={t('Deploy a code hash')}
onClick={showDeploy()}
/>
@ -88,7 +87,6 @@ export default function Contracts (props: Props): React.ReactElement<Props> {
)}
<Button
icon='add'
isPrimary
label={t('Add an existing contract')}
onClick={_toggleAdd}
/>

1
packages/page-council/src/Motions/Propose.tsx
View File

@ -74,7 +74,6 @@ class Propose extends TxModal<Props, State> {
return (
<Button
isDisabled={!isMember}
isPrimary
label={t('Propose motion')}
icon='add'
onClick={this.showModal}

1
packages/page-council/src/Motions/Slashing.tsx
View File

@ -66,7 +66,6 @@ export default function Slashing ({ className, isMember, members }: Props): Reac
<Button
icon='cancel'
isDisabled={!isMember || !members.length || !slashes.length}
isPrimary
label={t('Cancel slashes')}
onClick={toggleVisible}
/>

1
packages/page-council/src/Overview/SubmitCandidacy.tsx
View File

@ -39,7 +39,6 @@ class SubmitCandidacy extends TxModal<Props, State> {
return (
<Button
isPrimary
label={t('Submit candidacy')}
icon='add'
onClick={this.showModal}

1
packages/page-council/src/Overview/Vote.tsx
View File

@ -78,7 +78,6 @@ class Vote extends TxModal<Props, State> {
return (
<Button
isDisabled={available.length === 0}
isPrimary
label={this.props.t('Vote')}
icon='check'
onClick={this.showModal}

1
packages/page-democracy/src/Overview/PreImageButton.tsx
View File

@ -31,7 +31,6 @@ function PreImageButton ({ hash, isImminent, proposal, withoutOr }: Props): Reac
{!withoutOr && <Button.Or />}
<Button
icon='plus'
isPrimary
label={t('Preimage')}
onClick={togglePreimage}
/>

1
packages/page-democracy/src/Overview/Seconding.tsx
View File

@ -65,7 +65,6 @@ function Seconding ({ depositors, proposal, proposalId }: Props): React.ReactEle
</Modal>
)}
<Button
isPrimary
label={t('Second')}
icon='toggle off'
onClick={toggleSeconding}

1
packages/page-democracy/src/Overview/Voting.tsx
View File

@ -87,7 +87,6 @@ function Voting ({ proposal, referendumId }: Props): React.ReactElement<Props> |
)}
<Button
icon='check'
isPrimary
label={t('Vote')}
onClick={toggleVoting}
/>

2
packages/page-democracy/src/Overview/index.tsx
View File

@ -31,14 +31,12 @@ function Overview ({ className }: Props): React.ReactElement {
<Button.Group>
<Button
icon='add'
isPrimary
label={t('Submit preimage')}
onClick={togglePreimage}
/>
<Button.Or />
<Button
icon='add'
isPrimary
label={t('Submit proposal')}
onClick={togglePropose}
/>

2
packages/page-extrinsics/src/Selection.tsx
View File

@ -66,7 +66,7 @@ class Selection extends TxComponent<Props, State> {
accountId={accountId}
icon='sign-in'
isDisabled={!isValid}
isPrimary
isPrimary={false}
extrinsic={extrinsic}
label={t('Submit Transaction')}
/>

1
packages/page-generic-asset/src/Assets.tsx
View File

@ -32,7 +32,6 @@ function Assets ({ assets, t }: Props): React.ReactElement<Props> {
buttons={
<Button.Group>
<Button
isPrimary
label={t('Register Asset')}
icon='registered'
onClick={_toggleCreate}

1
packages/page-parachains/src/Overview/Register.tsx
View File

@ -79,7 +79,6 @@ export default function Register ({ nextFreeId = ONE_THOUSAND, sudoKey }: Props)
<>
<div className='ui--Row-buttons'>
<Button
isPrimary
label={t('Register a parachain')}
icon='add'
onClick={onOpen}

2
packages/page-settings/src/Developer.tsx
View File

@ -146,7 +146,6 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
</div>
<Button.Group>
<Button
isNegative
onClick={_clearTypes}
label={t('Reset')}
icon='sync'
@ -154,7 +153,6 @@ function Developer ({ className, onStatusChange }: Props): React.ReactElement<Pr
<Button.Or />
<Button
isDisabled={!isTypesValid || !isJsonValid}
isPrimary
onClick={_saveDeveloper}
label={t('Save')}
icon='save'

28
packages/page-settings/src/General.tsx
View File

@ -4,7 +4,7 @@
import { Option } from '@polkadot/apps-config/settings/types';
import React, { useEffect, useState, useMemo } from 'react';
import React, { useCallback, useEffect, useState, useMemo } from 'react';
import { availableLanguages, availableSs58 } from '@polkadot/apps-config/settings';
import { isLedgerCapable } from '@polkadot/react-api';
import { Button, ButtonCancel, Dropdown } from '@polkadot/react-components';
@ -52,14 +52,22 @@ export default function General ({ className, isModalContent, onClose }: Props):
);
}, [settings]);
const _handleChange = (key: keyof SettingsStruct) => <T extends string | number>(value: T): void => {
setSettings({ ...settings, [key]: value });
};
const _saveAndReload = (): void => saveAndReload(settings);
const _save = (): void => {
save(settings);
setChanged(null);
};
const _handleChange = useCallback(
(key: keyof SettingsStruct) => <T extends string | number>(value: T): void =>
setSettings((settings) => ({ ...settings, [key]: value })),
[]
);
const _saveAndReload = useCallback(
(): void => saveAndReload(settings),
[settings]
);
const _save = useCallback(
(): void => {
save(settings);
setChanged(null);
},
[settings]
);
const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
@ -125,7 +133,7 @@ export default function General ({ className, isModalContent, onClose }: Props):
)}
<Button
isDisabled={changed === null}
isPrimary
isPrimary={isModalContent}
onClick={
changed
? _saveAndReload

1
packages/page-society/src/Overview/DefenderVoting.tsx
View File

@ -57,7 +57,6 @@ export default function DefenderVoting ({ isMember, ownMembers }: Props): React.
<Button
icon='check'
isDisabled={!isMember}
isPrimary
label={t('Vote')}
onClick={toggleVisible}
/>

11
packages/page-staking/src/Actions/Account/index.tsx
View File

@ -332,12 +332,8 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
<TxButton
accountId={controllerId}
isDisabled={!isOwnController}
isNegative
label={
isStashNominating
? t('Stop Nominating')
: t('Stop Validating')
}
isPrimary={false}
label={t('Stop')}
icon='stop'
key='stop'
tx='staking.chill'
@ -349,7 +345,6 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
? (
<Button
isDisabled={!isOwnController}
isPrimary
key='set'
onClick={toggleSetSession}
label={t('Session Key')}
@ -359,7 +354,6 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
: (
<Button
isDisabled={!isOwnController}
isPrimary
key='validate'
onClick={toggleValidate}
label={t('Validate')}
@ -370,7 +364,6 @@ function Account ({ allStashes, className, isOwnStash, next, onUpdateType, rewar
<Button.Or key='nominate.or' />
<Button
isDisabled={!isOwnController}
isPrimary
key='nominate'
onClick={toggleNominate}
label={t('Nominate')}

1
packages/page-staking/src/Actions/index.tsx
View File

@ -68,7 +68,6 @@ function Actions ({ allRewards, allStashes, className, isVisible, next, stakingO
<div className={`${className} ${!isVisible && 'staking--hidden'}`}>
<Button.Group>
<Button
isPrimary
key='new-stake'
label={t('New stake')}
icon='add'

1
packages/page-storage/src/Selection/Modules.tsx
View File

@ -110,7 +110,6 @@ export default function Modules ({ onAdd }: Props): React.ReactElement<Props> {
<Button
icon='plus'
isDisabled={!isValid}
isPrimary
onClick={_onAdd}
/>
</div>

1
packages/page-tech-comm/src/Proposals/index.tsx
View File

@ -27,7 +27,6 @@ export default function Proposals ({ className, members, prime, proposals }: Pro
)}
<Button.Group>
<Button
isPrimary
label={t('Submit proposal')}
icon='add'
onClick={togglePropose}

1
packages/page-toolbox/src/Rpc/Selection.tsx
View File

@ -62,7 +62,6 @@ class Selection extends TxComponent<Props, State> {
<Button.Group>
<Button
isDisabled={!isValid}
isPrimary
onClick={this.onSubmit}
label={t('Submit RPC call')}
icon='sign-in'

2
packages/page-toolbox/src/Sign.tsx
View File

@ -162,7 +162,6 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
{t('You need to unlock this account to be able to sign data.')}<br/>
<Button.Group>
<Button
isPrimary
onClick={_toggleUnlock}
label={t('Unlock account')}
icon='unlock'
@ -196,7 +195,6 @@ function Sign ({ className }: Props): React.ReactElement<Props> {
<Button
icon='privacy'
isDisabled={!(isUsable && !isLocked)}
isPrimary
label={t('Sign message')}
onClick={_onSign}
/>

1
packages/page-treasury/src/Overview/Propose.tsx
View File

@ -68,7 +68,6 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
)}
<Button
icon='check'
isPrimary
label={t('Submit proposal')}
onClick={togglePropose}
/>

1
packages/react-components/src/Password.tsx
View File

@ -68,7 +68,6 @@ export default function Password ({ autoFocus, children, className, defaultValue
? 'hide'
: 'unhide'
}
isPrimary
onClick={_toggleVisible}
/>
{children}

4
packages/react-components/src/Spinner.tsx
View File

@ -19,8 +19,8 @@ function Spinner ({ className, variant = 'app' }: Props): React.ReactElement<Pro
return (
<div className={`${className} ui--Spinner ${variant}`}>
<div className='loader'>
<svg className="circular" viewBox="25 25 50 50">
<circle className="path" cx="50" cy="50" r="20" fill="none" strokeWidth={strokeWidth} strokeMiterlimit="10"/>
<svg className='circular ui--highlight--stroke' viewBox='25 25 50 50'>
<circle className='path' cx='50' cy='50' r='20' fill='none' strokeWidth={strokeWidth} strokeMiterlimit='10' />
</svg>
</div>
{variant === 'app' && (

50
packages/react-components/src/styles/index.ts
View File

@ -16,31 +16,67 @@ interface Props {
uiHighlight?: string;
}
const defaultHighlight = '#f19135'; // #999
export default createGlobalStyle<Props>`
.ui--highlight--all {
/* .theme--default .ui.blue.progress > .bar */
background: ${(props): string => (props.uiHighlight || '#999')} !important;
border-color: ${(props): string => (props.uiHighlight || '#999')} !important;
color: ${(props): string => (props.uiHighlight || '#999')} !important;
background: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui--highlight--bg {
background: ${(props): string => (props.uiHighlight || '#999')} !important;
background: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui--highlight--border {
/* .theme--default .ui.menu.tabular > .item.active */
border-color: ${(props): string => (props.uiHighlight || '#999')} !important;
border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui--highlight--color {
color: ${(props): string => (props.uiHighlight || '#999')} !important;
color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui--highlight--fill {
fill: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui--highlight--gradient {
background: ${(props): string => `linear-gradient(90deg, ${props.uiHighlight}, transparent)`};
}
.ui--highlight--stroke {
stroke: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.theme--default {
.ui.menu.tabular .item.active {
border-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui.blue.progress > .bar {
background-color: ${(props): string => (props.uiHighlight || defaultHighlight)} !important;
}
.ui.negative.button,
.ui.buttons .negative.button {
background: #666 !important;
}
.ui.primary.button,
.ui.buttons .primary.button {
background: ${(props): string => (props.uiHighlight || defaultHighlight)};
&.active,
&:active,
&:focus,
&:hover {
background-color: ${(props): string => (props.uiHighlight || defaultHighlight)};
}
}
}
#root {
color: #4e4e4e;
font-family: sans-serif;

48
packages/react-components/src/styles/theme.ts
View File

@ -11,19 +11,21 @@ const colorBtnDefault = '#666';
const colorBtnHighlight = '#f19135';
/* primary buttons, blue */
const colorBtnPrimary = '#2e86ab';
const colorBtnPrimary = colorBtnDefault; // '#2e86ab';
/* button text color */
const colorBtnText = '#f9f9f9';
const colorLink = '#2e86ab';
export default css`
.theme--default {
a {
color: ${colorBtnPrimary};
color: ${colorLink};
&:hover,
a:visited {
color: ${colorBtnPrimary};
color: ${colorLink};
}
}
@ -41,38 +43,38 @@ export default css`
}
&:hover {
opacity: 0.8;
filter: brightness(120%);
}
}
.ui.basic.negative.button {
box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
color: ${colorBtnHighlight} !important;
// box-shadow: 0 0 0 1px ${colorBtnHighlight} inset !important;
// color: ${colorBtnHighlight} !important;
}
.ui.negative.button,
.ui.buttons .negative.button {
background-color: ${colorBtnHighlight};
// background-color: ${colorBtnHighlight};
&.active,
&:active,
&:focus,
&:hover {
background-color: ${colorBtnHighlight};
}
// &.active,
// &:active,
// &:focus,
// &:hover {
// background-color: ${colorBtnHighlight};
// }
}
.ui.primary.button,
.ui.buttons .primary.button
/*, .ui.primary.buttons .button (for dropdowns) */ {
background-color: ${colorBtnPrimary};
// background-color: ${colorBtnPrimary};
&.active,
&:active,
&:focus,
&:hover {
background-color: ${colorBtnPrimary};
}
// &.active,
// &:active,
// &:focus,
// &:hover {
// background-color: ${colorBtnPrimary};
// }
}
.ui.blue.progress .bar {
@ -103,11 +105,5 @@ export default css`
.ui.toggle.checkbox input:checked~label:before {
background-color: ${colorBtnHighlight} !important;
}
.ui--Spinner {
.loader svg {
stroke: ${colorBtnPrimary};
}
}
}
`;

2
packages/react-hooks/src/useOwnEraRewards.ts
View File

@ -21,7 +21,7 @@ function useNextPayouts (onlyLatest?: boolean): [string, BN][] | undefined {
const { api, isApiReady } = useApi();
const stashIds = useOwnStashIds();
const allInfo = useCall<DerivedStakingQuery[]>(isApiReady && stashIds && api.derive.staking?.queryMulti, stashIds);
const indexes = useCall<DeriveSessionIndexes>(isApiReady && api.derive.session.indexes, []);
const indexes = useCall<DeriveSessionIndexes>(isApiReady && api.derive.session?.indexes, []);
const [nextPayouts, setNextPayouts] = useState<[string, BN][] | undefined>();
useEffect((): void => {